Skip to content

Commit aefd73b

Browse files
MichaelDeBoeyMichaelDeBoey
authored
🔨 Switch MoveSandboxFolderModal to use useOvermind (codesandbox#3446)
1 parent 749da42 commit aefd73b

File tree

9 files changed

+206
-146
lines changed

9 files changed

+206
-146
lines changed

‎packages/app/src/app/overmind/actions.ts

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -225,23 +225,26 @@ export const track: Action<{ name: string; data: any }> = (
225225
};
226226

227227
export const refetchSandboxInfo: AsyncAction = async ({
228-
state,
229-
effects,
230228
actions,
229+
effects,
230+
state,
231231
}) => {
232232
const sandbox = state.editor.currentSandbox;
233-
if (sandbox && sandbox.id) {
234-
const updatedSandbox = await effects.api.getSandbox(sandbox.id);
235233

236-
sandbox.collection = updatedSandbox.collection;
237-
sandbox.owned = updatedSandbox.owned;
238-
sandbox.userLiked = updatedSandbox.userLiked;
239-
sandbox.title = updatedSandbox.title;
240-
sandbox.team = updatedSandbox.team;
241-
sandbox.roomId = updatedSandbox.roomId;
242-
243-
await actions.editor.internal.initializeLiveSandbox(sandbox);
234+
if (!sandbox?.id) {
235+
return;
244236
}
237+
238+
const updatedSandbox = await effects.api.getSandbox(sandbox.id);
239+
240+
sandbox.collection = updatedSandbox.collection;
241+
sandbox.owned = updatedSandbox.owned;
242+
sandbox.userLiked = updatedSandbox.userLiked;
243+
sandbox.title = updatedSandbox.title;
244+
sandbox.team = updatedSandbox.team;
245+
sandbox.roomId = updatedSandbox.roomId;
246+
247+
await actions.editor.internal.initializeLiveSandbox(sandbox);
245248
};
246249

247250
export const acceptTeamInvitation: Action<{ teamName: string }> = (

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
3+
export const TeamContainer = styled.div`
4+
border-top: 2px solid rgba(0, 0, 0, 0.1);
5+
padding-top: 0;
6+
margin-top: 1rem;
7+
`;
8+
9+
export const TeamName = styled.div`
10+
font-weight: 600;
11+
color: rgba(255, 255, 255, 0.5);
12+
text-transform: uppercase;
13+
font-size: 0.875rem;
14+
margin: 1rem 1rem;
15+
`;

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useQuery } from '@apollo/react-hooks';
2+
import React, { ComponentProps, FunctionComponent } from 'react';
3+
4+
import { TEAMS_QUERY } from 'app/pages/Dashboard/queries';
5+
import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
6+
7+
import { TeamContainer, TeamName } from './elements';
8+
9+
type Props = Pick<
10+
ComponentProps<typeof SandboxesItem>,
11+
'currentPath' | 'currentTeamId' | 'onSelect'
12+
>;
13+
export const TeamsPicker: FunctionComponent<Props> = ({
14+
currentPath,
15+
currentTeamId,
16+
onSelect,
17+
}) => {
18+
const { loading, error, data } = useQuery(TEAMS_QUERY);
19+
20+
if (loading || error) {
21+
return null;
22+
}
23+
24+
return (
25+
<>
26+
{data.me.teams.map(({ id, name }) => (
27+
<TeamContainer key={id}>
28+
<TeamName>{name}</TeamName>
29+
30+
<SandboxesItem
31+
currentPath={currentPath}
32+
currentTeamId={currentTeamId}
33+
openByDefault
34+
teamId={id}
35+
onSelect={onSelect}
36+
/>
37+
</TeamContainer>
38+
))}
39+
</>
40+
);
41+
};

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
margin: 0 -1rem;
5+
`;

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { ComponentProps, FunctionComponent } from 'react';
2+
3+
import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
4+
5+
import { Container } from './elements';
6+
import { TeamsPicker } from './TeamsPicker';
7+
8+
type Props = Pick<
9+
ComponentProps<typeof TeamsPicker>,
10+
'currentPath' | 'currentTeamId' | 'onSelect'
11+
>;
12+
export const DirectoryPicker: FunctionComponent<Props> = ({
13+
currentPath,
14+
currentTeamId,
15+
onSelect,
16+
}) => (
17+
<Container>
18+
<SandboxesItem
19+
currentPath={currentPath}
20+
currentTeamId={currentTeamId}
21+
onSelect={onSelect}
22+
openByDefault
23+
teamId={undefined}
24+
/>
25+
26+
<TeamsPicker
27+
currentPath={currentPath}
28+
currentTeamId={currentTeamId}
29+
onSelect={onSelect}
30+
/>
31+
</Container>
32+
);

‎packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,54 @@
1+
import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
2+
import ChevronRightBase from 'react-icons/lib/md/chevron-right';
13
import styled, { css } from 'styled-components';
24

5+
import { Container as ContainerBase } from '../elements';
6+
37
export const Block = styled.div<{ right?: boolean }>`
4-
background-color: ${props => props.theme.background2};
5-
color: rgba(255, 255, 255, 0.9);
6-
padding: 1rem 1.5rem;
7-
8-
font-size: 0.875rem;
9-
font-weight: 600;
10-
11-
${props =>
12-
props.right &&
13-
css`
14-
text-align: right;
15-
`};
16-
`;
8+
${({ right, theme }) => css`
9+
background-color: ${theme.background2};
10+
color: rgba(255, 255, 255, 0.9);
11+
padding: 1rem 1.5rem;
1712
18-
export const TeamContainer = styled.div`
19-
border-top: 2px solid rgba(0, 0, 0, 0.1);
20-
padding-top: 0;
21-
margin-top: 1rem;
13+
font-size: 0.875rem;
14+
font-weight: 600;
15+
16+
${right &&
17+
css`
18+
text-align: right;
19+
`};
20+
`};
2221
`;
2322

24-
export const TeamName = styled.div`
25-
font-weight: 600;
26-
color: rgba(255, 255, 255, 0.5);
27-
text-transform: uppercase;
28-
font-size: 0.875rem;
29-
margin: 1rem 1rem;
23+
export const Button = styled(ButtonBase)`
24+
display: inline-flex;
25+
align-items: center;
3026
`;
3127

3228
export const CancelButton = styled.button`
33-
transition: 0.3s ease color;
34-
font-size: 0.875rem;
35-
margin-right: 1.5rem;
36-
font-weight: 600;
37-
color: rgba(255, 255, 255, 0.8);
38-
outline: 0;
39-
border: 0;
40-
background-color: transparent;
41-
cursor: pointer;
42-
43-
&:hover {
44-
color: ${props => props.theme.secondary};
45-
}
29+
${({ theme }) => css`
30+
transition: 0.3s ease color;
31+
font-size: 0.875rem;
32+
margin-right: 1.5rem;
33+
font-weight: 600;
34+
color: rgba(255, 255, 255, 0.8);
35+
outline: 0;
36+
border: 0;
37+
background-color: transparent;
38+
cursor: pointer;
39+
40+
&:hover {
41+
color: ${theme.secondary};
42+
}
43+
`};
44+
`;
45+
46+
export const ChevronRight = styled(ChevronRightBase)`
47+
margin-right: -0.25rem;
48+
margin-left: 0.25rem;
49+
`;
50+
51+
export const Container = styled(ContainerBase)`
52+
max-height: 400px;
53+
overflow: auto;
4654
`;

0 commit comments

Comments
 (0)