new pages (codesandbox#3946)

* new pages

* Update packages/app/src/app/pages/NewDashboard/utils/get-child-collections.js

Co-Authored-By: Michaël De Boey <[email protected]>

Co-authored-by: Michaël De Boey <[email protected]>

Author: SaraVieira

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

@@ -0,0 +1,34 @@
+// import React from 'react';
+// import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
+
+// import { RecentSandboxes } from './routes/RecentSandboxes';
+// import PathedSandboxes from './routes/PathedSandboxes';
+// import { Templates } from './routes/Templates';
+// import DeletedSandboxes from './routes/DeletedSandboxes';
+// import SearchSandboxes from './routes/SearchSandboxes';
+// import CreateTeam from './routes/CreateTeam';
+// import TeamView from './routes/TeamView';
+
+// const Content = () => (
+//   <Switch>
+//     <Route path="/dashboard/recent" component={RecentSandboxes} />
+//     <Route path="/dashboard/trash" component={DeletedSandboxes} />
+//     <Route path="/dashboard/templates" exact component={Templates} />
+//     <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
+//     <Route path="/dashboard/search" component={SearchSandboxes} />
+//     <Route path="/dashboard/teams/new" component={CreateTeam} />
+//     <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
+//     <Route
+//       path="/dashboard/teams/:teamId/sandboxes/:path*"
+//       component={PathedSandboxes}
+//     />
+//     <Route
+//       path="/dashboard/teams/:teamId/templates"
+//       component={Templates}
+//       exact
+//     />
+//     <Redirect to="/dashboard/recent" />
+//   </Switch>
+// );
+
+// export default withRouter(Content);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Element } from '@codesandbox/components';
+
+export const Sidebar = () => <Element>I AM A SIDEBAR</Element>;

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

@@ -0,0 +1,57 @@
+import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { useEffect, FunctionComponent } from 'react';
+import { Redirect } from 'react-router-dom';
+import { createGlobalStyle } from 'styled-components';
+import { client } from 'app/graphql/client';
+import { useOvermind } from 'app/overmind';
+import codesandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
+import { Element, ThemeProvider, Stack } from '@codesandbox/components';
+import { Sidebar } from './Sidebar';
+
+type Theme = {
+  colors: any;
+  name: string;
+};
+
+const GlobalStyle = createGlobalStyle`
+  html body {
+    font-family: 'Inter', sans-serif;
+    background: ${({ theme }: { theme: Theme }) =>
+      theme.colors.sideBar.background} !important;
+    color: ${({ theme }: { theme: Theme }) => theme.colors.sideBar.foreground};
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+`;
+
+export const Dashboard: FunctionComponent = () => {
+  const {
+    actions: {
+      dashboard: { dashboardMounted },
+    },
+    state: { hasLogIn },
+  } = useOvermind();
+
+  useEffect(() => {
+    dashboardMounted();
+
+    // Reset store so new visits get fresh data
+    return () => client.resetStore();
+  }, [dashboardMounted]);
+
+  if (!hasLogIn) {
+    return <Redirect to={signInPageUrl()} />;
+  }
+
+  return (
+    <ThemeProvider theme={codesandboxBlack}>
+      <GlobalStyle />
+      <Stack gap={6} style={{ minHeight: '100vh' }}>
+        <Sidebar />
+        <Element>I AM THE CONTENT</Element>
+      </Stack>
+    </ThemeProvider>
+  );
+};