Skip to content

Commit f27c926

Browse files
SaraVieiraSaraVieira
authored
add skeleton to templates and start (#3952)
1 parent ac5b1e4 commit f27c926

File tree

9 files changed

+240
-52
lines changed

9 files changed

+240
-52
lines changed

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import { Element, Link } from '@codesandbox/components';
4+
5+
export const SandboxCard = ({ sandbox }) => (
6+
<Element>
7+
<Link href={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}>
8+
{sandbox.title || sandbox.alias || sandbox.id}
9+
</Link>
10+
</Element>
11+
);

‎packages/app/src/app/pages/NewDashboard/Content/index.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// import React from 'react';
2-
// import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
1+
import React from 'react';
2+
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
33

44
// import { RecentSandboxes } from './routes/RecentSandboxes';
55
// import PathedSandboxes from './routes/PathedSandboxes';
@@ -8,27 +8,33 @@
88
// import SearchSandboxes from './routes/SearchSandboxes';
99
// import CreateTeam from './routes/CreateTeam';
1010
// import TeamView from './routes/TeamView';
11+
import { Element } from '@codesandbox/components';
12+
import { StartSandboxes } from './routes/StartSandboxes';
13+
import { Templates } from './routes/Templates';
1114

12-
// const Content = () => (
13-
// <Switch>
14-
// <Route path="/dashboard/recent" component={RecentSandboxes} />
15-
// <Route path="/dashboard/trash" component={DeletedSandboxes} />
16-
// <Route path="/dashboard/templates" exact component={Templates} />
17-
// <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
18-
// <Route path="/dashboard/search" component={SearchSandboxes} />
19-
// <Route path="/dashboard/teams/new" component={CreateTeam} />
20-
// <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
21-
// <Route
22-
// path="/dashboard/teams/:teamId/sandboxes/:path*"
23-
// component={PathedSandboxes}
24-
// />
25-
// <Route
26-
// path="/dashboard/teams/:teamId/templates"
27-
// component={Templates}
28-
// exact
29-
// />
30-
// <Redirect to="/dashboard/recent" />
31-
// </Switch>
32-
// );
15+
const ContentComponent = () => (
16+
<Element style={{ width: 960, margin: '40px auto' }}>
17+
<Switch>
18+
<Route path="/new-dashboard/start" component={StartSandboxes} />
19+
<Route path="/new-dashboard/templates" component={Templates} />
20+
{/* <Route path="/dashboard/trash" component={DeletedSandboxes} />
21+
<Route path="/dashboard/templates" exact component={Templates} />
22+
<Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
23+
<Route path="/dashboard/search" component={SearchSandboxes} />
24+
<Route path="/dashboard/teams/new" component={CreateTeam} />
25+
<Route exact path="/dashboard/teams/:teamId" component={TeamView} />
26+
<Route
27+
path="/dashboard/teams/:teamId/sandboxes/:path*"
28+
component={PathedSandboxes}
29+
/>
30+
<Route
31+
path="/dashboard/teams/:teamId/templates"
32+
component={Templates}
33+
exact
34+
/> */}
35+
<Redirect to="/new-dashboard/start" />
36+
</Switch>
37+
</Element>
38+
);
3339

34-
// export default withRouter(Content);
40+
export const Content = withRouter(ContentComponent);

‎packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
import { Element, Text, Button } from '@codesandbox/components';
4+
import { useQuery } from '@apollo/react-hooks';
5+
import { useOvermind } from 'app/overmind';
6+
import {
7+
RecentSandboxesQuery,
8+
RecentSandboxesQueryVariables,
9+
ListPersonalTemplatesQuery,
10+
ListPersonalTemplatesQueryVariables,
11+
} from 'app/graphql/types';
12+
import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
13+
import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
14+
import { SandboxCard } from '../../../Components/SandboxCard';
15+
16+
export const StartSandboxes = () => {
17+
const {
18+
state,
19+
actions: { modalOpened },
20+
} = useOvermind();
21+
const { loading, error, data } = useQuery<
22+
RecentSandboxesQuery,
23+
RecentSandboxesQueryVariables
24+
>(RECENT_SANDBOXES_CONTENT_QUERY, {
25+
variables: {
26+
orderField: state.dashboard.orderBy.field,
27+
// @ts-ignore
28+
orderDirection: state.dashboard.orderBy.order.toUpperCase(),
29+
},
30+
});
31+
32+
const {
33+
data: templatesData,
34+
error: templatesError,
35+
loading: templatesLoading,
36+
} = useQuery<ListPersonalTemplatesQuery, ListPersonalTemplatesQueryVariables>(
37+
LIST_PERSONAL_TEMPLATES,
38+
{
39+
variables: {},
40+
fetchPolicy: 'cache-and-network',
41+
}
42+
);
43+
44+
if (error || templatesError) {
45+
return <Text>Error</Text>;
46+
}
47+
48+
if (loading || templatesLoading) {
49+
return <Text>loading</Text>;
50+
}
51+
52+
const sandboxes = data && data.me && data.me.sandboxes;
53+
const templates =
54+
templatesData &&
55+
templatesData.me &&
56+
templatesData.me.recentlyUsedTemplates.slice(0, 4);
57+
58+
return (
59+
<Element>
60+
<Text marginBottom={4} block>
61+
Recently used Templates
62+
</Text>
63+
<Element
64+
css={css({
65+
display: 'grid',
66+
gridTemplateColumns: 'repeat(4,1fr)',
67+
gridGap: 6,
68+
})}
69+
marginBottom={8}
70+
>
71+
{templates.map(({ sandbox }) => (
72+
<SandboxCard sandbox={sandbox} key={sandbox.id} />
73+
))}
74+
</Element>
75+
76+
<Text marginBottom={4} block>
77+
Your Recent Sandboxes
78+
</Text>
79+
<Element
80+
css={css({
81+
display: 'grid',
82+
gridTemplateColumns: 'repeat(4,1fr)',
83+
gridGap: 6,
84+
})}
85+
>
86+
<Button onClick={() => modalOpened({ modal: 'newSandbox' })}>
87+
New Sandbox
88+
</Button>
89+
{sandboxes.map(sandbox => (
90+
<SandboxCard sandbox={sandbox} key={sandbox.id} />
91+
))}
92+
</Element>
93+
</Element>
94+
);
95+
};

‎packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
import { Element, Text } from '@codesandbox/components';
4+
import { useQuery } from '@apollo/react-hooks';
5+
import {
6+
ListTemplatesQuery,
7+
ListTemplatesQueryVariables,
8+
} from 'app/graphql/types';
9+
import { LIST_OWNED_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
10+
import { SandboxCard } from '../../../Components/SandboxCard';
11+
12+
export const Templates = () => {
13+
const { loading, error, data } = useQuery<
14+
ListTemplatesQuery,
15+
ListTemplatesQueryVariables
16+
>(LIST_OWNED_TEMPLATES, {
17+
variables: { showAll: false },
18+
});
19+
20+
if (error) {
21+
return <Text>Error</Text>;
22+
}
23+
24+
if (loading) {
25+
return <Text>loading</Text>;
26+
}
27+
28+
const templates = data && data.me && data.me.templates;
29+
30+
return (
31+
<Element>
32+
<Text marginBottom={4} block>
33+
Templates
34+
</Text>
35+
<Element
36+
css={css({
37+
display: 'grid',
38+
gridTemplateColumns: 'repeat(4,1fr)',
39+
gridGap: 6,
40+
})}
41+
>
42+
{templates.map(({ sandbox }) => (
43+
<SandboxCard sandbox={sandbox} key={sandbox.id} />
44+
))}
45+
</Element>
46+
</Element>
47+
);
48+
};

‎packages/app/src/app/pages/NewDashboard/Sidebar/index.tsx‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,38 @@
11
import React from 'react';
2-
import { Element } from '@codesandbox/components';
2+
import { List, Link, ListAction } from '@codesandbox/components';
3+
import { Link as BaseLink } from 'react-router-dom';
34

4-
export const Sidebar = () => <Element>I AM A SIDEBAR</Element>;
5+
export const Sidebar = () => (
6+
<List>
7+
<ListAction>
8+
<Link to="start" as={BaseLink}>
9+
Start
10+
</Link>
11+
</ListAction>
12+
<ListAction>
13+
<Link to="drafts" as={BaseLink}>
14+
Drafts
15+
</Link>
16+
</ListAction>
17+
<ListAction>
18+
<Link to="recent" as={BaseLink}>
19+
Recent
20+
</Link>
21+
</ListAction>
22+
<ListAction>
23+
<Link to="all" as={BaseLink}>
24+
All Sandboxes
25+
</Link>
26+
</ListAction>
27+
<ListAction>
28+
<Link to="templates" as={BaseLink}>
29+
Templates
30+
</Link>
31+
</ListAction>
32+
<ListAction>
33+
<Link to="deleted" as={BaseLink}>
34+
Recently Deleted
35+
</Link>
36+
</ListAction>
37+
</List>
38+
);

‎packages/app/src/app/pages/NewDashboard/index.tsx‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,13 @@
11
import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
2+
import css from '@styled-system/css';
23
import React, { useEffect, FunctionComponent } from 'react';
34
import { Redirect } from 'react-router-dom';
4-
import { createGlobalStyle } from 'styled-components';
55
import { client } from 'app/graphql/client';
66
import { useOvermind } from 'app/overmind';
77
import codesandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
8-
import { Element, ThemeProvider, Stack } from '@codesandbox/components';
8+
import { ThemeProvider, Stack } from '@codesandbox/components';
99
import { Sidebar } from './Sidebar';
10-
11-
type Theme = {
12-
colors: any;
13-
name: string;
14-
};
15-
16-
const GlobalStyle = createGlobalStyle`
17-
html body {
18-
font-family: 'Inter', sans-serif;
19-
background: ${({ theme }: { theme: Theme }) =>
20-
theme.colors.sideBar.background} !important;
21-
color: ${({ theme }: { theme: Theme }) => theme.colors.sideBar.foreground};
22-
23-
* {
24-
box-sizing: border-box;
25-
}
26-
}
27-
`;
10+
import { Content } from './Content';
2811

2912
export const Dashboard: FunctionComponent = () => {
3013
const {
@@ -47,10 +30,18 @@ export const Dashboard: FunctionComponent = () => {
4730

4831
return (
4932
<ThemeProvider theme={codesandboxBlack}>
50-
<GlobalStyle />
51-
<Stack gap={6} style={{ minHeight: '100vh' }}>
33+
<Stack
34+
gap={6}
35+
css={css({
36+
backgroundColor: 'sideBar.background',
37+
fontFamily: "'Inter', sans-serif",
38+
color: 'sideBar.foreground',
39+
minHeight: '100vh',
40+
width: '100vw',
41+
})}
42+
>
5243
<Sidebar />
53-
<Element>I AM THE CONTENT</Element>
44+
<Content />
5445
</Stack>
5546
</ThemeProvider>
5647
);

‎packages/app/src/app/pages/NewDashboard/queries.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export const RECENT_SANDBOXES_CONTENT_QUERY = gql`
222222
query RecentSandboxes($orderField: String!, $orderDirection: Direction!) {
223223
me {
224224
sandboxes(
225-
limit: 20
225+
limit: 7
226226
orderBy: { field: $orderField, direction: $orderDirection }
227227
) {
228228
...Sandbox

‎packages/app/src/app/pages/NewSandbox/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { useOvermind } from 'app/overmind';
1111
import { Navigation } from 'app/pages/common/Navigation';
1212

13-
import {MaxWidth} from './elements'
13+
import { MaxWidth } from './elements';
1414

1515
export const NewSandbox: FunctionComponent = () => {
1616
const {

‎packages/components/src/components/Link/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import { Text, ITextProps } from '../Text';
55

66
type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
77
React.AnchorHTMLAttributes<HTMLSpanElement> &
8-
ITextProps;
8+
ITextProps & {
9+
as?: any;
10+
to?: string;
11+
};
912

1013
const LinkElement = styled(Text).attrs({ as: 'a' })<LinkProps>(
1114
css({

0 commit comments

Comments
 (0)