From 18cc7a2f8349ef8776070c3ec04f803c0da09652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 21 Apr 2020 10:58:32 +0200
Subject: [PATCH] Cleanup dashboard skeleton

---
 .../NewDashboard/Components/SandboxCard/index.tsx    |  5 +++--
 .../app/src/app/pages/NewDashboard/Content/index.tsx |  8 +++-----
 .../Content/routes/StartSandboxes/index.tsx          | 12 +++++-------
 .../NewDashboard/Content/routes/Templates/index.tsx  |  6 +++---
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx b/packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx
index 641ed8444dd..d1d38acc7a6 100644
--- a/packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx
+++ b/packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { Element, Link } from '@codesandbox/components';
+import React from 'react';
 
 export const SandboxCard = ({ sandbox }) => (
   <Element>
     <Link href={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}>
-      {sandbox.title || sandbox.alias || sandbox.id}
+      {getSandboxName(sandbox)}
     </Link>
   </Element>
 );
diff --git a/packages/app/src/app/pages/NewDashboard/Content/index.tsx b/packages/app/src/app/pages/NewDashboard/Content/index.tsx
index 2407ad8fe24..b1937c4f2d5 100644
--- a/packages/app/src/app/pages/NewDashboard/Content/index.tsx
+++ b/packages/app/src/app/pages/NewDashboard/Content/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
+import React, { FunctionComponent } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
 
 // import { RecentSandboxes } from './routes/RecentSandboxes';
 // import PathedSandboxes from './routes/PathedSandboxes';
@@ -12,7 +12,7 @@ import { Element } from '@codesandbox/components';
 import { StartSandboxes } from './routes/StartSandboxes';
 import { Templates } from './routes/Templates';
 
-const ContentComponent = () => (
+export const Content: FunctionComponent = () => (
   <Element style={{ width: 960, margin: '40px auto' }}>
     <Switch>
       <Route path="/new-dashboard/start" component={StartSandboxes} />
@@ -36,5 +36,3 @@ const ContentComponent = () => (
     </Switch>
   </Element>
 );
-
-export const Content = withRouter(ContentComponent);
diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx
index 6120bff1838..2dd4ad71e91 100644
--- a/packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx
+++ b/packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import css from '@styled-system/css';
 import { Element, Text, Button } from '@codesandbox/components';
 import { useQuery } from '@apollo/react-hooks';
+
 import { useOvermind } from 'app/overmind';
 import {
   RecentSandboxesQuery,
@@ -13,7 +14,7 @@ import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries
 import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 import { SandboxCard } from '../../../Components/SandboxCard';
 
-export const StartSandboxes = () => {
+export const StartSandboxes: FunctionComponent = () => {
   const {
     state,
     actions: { modalOpened },
@@ -49,11 +50,8 @@ export const StartSandboxes = () => {
     return <Text>loading</Text>;
   }
 
-  const sandboxes = data && data.me && data.me.sandboxes;
-  const templates =
-    templatesData &&
-    templatesData.me &&
-    templatesData.me.recentlyUsedTemplates.slice(0, 4);
+  const sandboxes = data.me.sandboxes;
+  const templates = templatesData.me.recentlyUsedTemplates.slice(0, 4);
 
   return (
     <Element>
diff --git a/packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx b/packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx
index 6e03073a6cc..327174ba21c 100644
--- a/packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx
+++ b/packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import css from '@styled-system/css';
 import { Element, Text } from '@codesandbox/components';
 import { useQuery } from '@apollo/react-hooks';
@@ -9,7 +9,7 @@ import {
 import { LIST_OWNED_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
 import { SandboxCard } from '../../../Components/SandboxCard';
 
-export const Templates = () => {
+export const Templates: FunctionComponent = () => {
   const { loading, error, data } = useQuery<
     ListTemplatesQuery,
     ListTemplatesQueryVariables
@@ -25,7 +25,7 @@ export const Templates = () => {
     return <Text>loading</Text>;
   }
 
-  const templates = data && data.me && data.me.templates;
+  const templates = data.me.templates;
 
   return (
     <Element>