diff --git a/packages/app/src/app/pages/NewDashboard/Content/index.tsx b/packages/app/src/app/pages/NewDashboard/Content/index.tsx index 2407ad8fe24..7a609684b0f 100644 --- a/packages/app/src/app/pages/NewDashboard/Content/index.tsx +++ b/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 = () => ( + {/* diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/Deleted/index.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/Deleted/index.tsx new file mode 100644 index 00000000000..aa864dd986b --- /dev/null +++ b/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 Error; + } + + if (loading) { + return loading; + } + + 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 ( + + + Recently Deleted + + + Sandboxes, Templates and Folders are permanently deleted after 30 days{' '} + + {orderedSandboxes.week.length && ( + + + Archived this week + + {orderedSandboxes.week.map(sandbox => ( + + ))} + + )} + {orderedSandboxes.older.length && ( + <> + + Archived Earlier + + {orderedSandboxes.older.map(sandbox => ( + + ))} + + )} + + ); +}; diff --git a/packages/components/src/design-language/theme.ts b/packages/components/src/design-language/theme.ts index 1b8850fdd21..7c334f0c618 100644 --- a/packages/components/src/design-language/theme.ts +++ b/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'],