add deleted skeleton (#3957)

Author: SaraVieira

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

@@ -11,12 +11,14 @@ import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 import { Element } from '@codesandbox/components';
 import { StartSandboxes } from './routes/StartSandboxes';
 import { Templates } from './routes/Templates';
+import { Deleted } from './routes/Deleted';
 
 const ContentComponent = () => (
   <Element style={{ width: 960, margin: '40px auto' }}>
     <Switch>
       <Route path="/new-dashboard/start" component={StartSandboxes} />
       <Route path="/new-dashboard/templates" component={Templates} />
+      <Route path="/new-dashboard/deleted" component={Deleted} />
       {/* <Route path="/dashboard/trash" component={DeletedSandboxes} />
     <Route path="/dashboard/templates" exact component={Templates} />
     <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Element, Text } from '@codesandbox/components';
+import { useQuery } from '@apollo/react-hooks';
+
+import isSameWeek from 'date-fns/isSameWeek';
+import {
+  DeletedSandboxesQueryVariables,
+  DeletedSandboxesQuery,
+} from 'app/graphql/types';
+import { SandboxCard } from '../../../Components/SandboxCard';
+import { DELETED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
+
+export const Deleted = () => {
+  const { data, error, loading } = useQuery<
+    DeletedSandboxesQuery,
+    DeletedSandboxesQueryVariables
+  >(DELETED_SANDBOXES_CONTENT_QUERY, {
+    fetchPolicy: 'cache-and-network',
+  });
+
+  if (error) {
+    return <Text>Error</Text>;
+  }
+
+  if (loading) {
+    return <Text>loading</Text>;
+  }
+
+  const sandboxes = data && data.me && data.me.sandboxes;
+  const orderedSandboxes = sandboxes.reduce(
+    (accumulator, currentValue) => {
+      if (isSameWeek(new Date(currentValue.removedAt), new Date())) {
+        accumulator.week.push(currentValue);
+
+        return accumulator;
+      }
+
+      accumulator.older.push(currentValue);
+
+      return accumulator;
+    },
+    {
+      week: [],
+      older: [],
+    }
+  );
+
+  return (
+    <Element>
+      <Text marginBottom={2} block>
+        Recently Deleted
+      </Text>
+      <Text variant="muted" block marginBottom={11}>
+        Sandboxes, Templates and Folders are permanently deleted after 30 days{' '}
+      </Text>
+      {orderedSandboxes.week.length && (
+        <Element marginBottom={14}>
+          <Text marginBottom={6} block>
+            Archived this week
+          </Text>
+          {orderedSandboxes.week.map(sandbox => (
+            <SandboxCard sandbox={sandbox} key={sandbox.id} />
+          ))}
+        </Element>
+      )}
+      {orderedSandboxes.older.length && (
+        <>
+          <Text marginBottom={6} block>
+            Archived Earlier
+          </Text>
+          {orderedSandboxes.older.map(sandbox => (
+            <SandboxCard sandbox={sandbox} key={sandbox.id} />
+          ))}
+        </>
+      )}
+    </Element>
+  );
+};

packages/components/src/design-language/theme.ts

@@ -19,8 +19,8 @@ const theme = {
   // 9 - 36
   // 10 - 40
   // 11 - 44
-  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48],
-  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48],
+  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60],
+  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60],
 
   // transition speeds in ms
   speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],