🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/Das… (codesandbox#2893)

🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/Dashboard/Content/routes/RecentSandboxes/index.js to use Overmind, Typescript, and Apollo hooks

Author: christianalfoni

packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.tsx

@@ -6,22 +6,26 @@ import { Filters } from './Filters';
 import { DashboardActions } from './Actions';
 import { ITemplate } from './types';
 
-interface Props {
+interface IContentProps {
   sandboxes: any[];
-  Header: React.ComponentType;
-  SubHeader: React.ComponentType;
-  ExtraElement: React.ComponentType;
+  Header: React.ComponentType | string;
+  SubHeader?: React.ComponentType;
+  ExtraElement: React.ComponentType<IExtraElementProps>;
 
-  possibleTemplates: ITemplate[];
+  possibleTemplates?: ITemplate[];
   isLoading?: boolean;
   hideOrder?: boolean;
   hideFilters?: boolean;
-  page?: number;
+  page?: number | string;
   actions?: any[];
 }
 
+interface IExtraElementProps {
+  style: React.CSSProperties;
+}
+
 // eslint-disable-next-line react/prefer-stateless-function
-export class Content extends React.Component<Props> {
+export class Content extends React.Component<IContentProps> {
   render() {
     const {
       sandboxes,
@@ -40,7 +44,7 @@ export class Content extends React.Component<Props> {
       <Container>
         <HeaderContainer>
           <HeaderTitle>
-            {Header}{' '}
+            {Header}
             {sandboxes && !isLoading && (
               <span
                 style={{

packages/app/src/app/pages/Dashboard/Content/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 
-import RecentSandboxes from './routes/RecentSandboxes';
+import { RecentSandboxes } from './routes/RecentSandboxes';
 import PathedSandboxes from './routes/PathedSandboxes';
 import { Templates } from './routes/Templates';
 import DeletedSandboxes from './routes/DeletedSandboxes';

packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useQuery } from '@apollo/react-hooks';
+
+import { useOvermind } from 'app/overmind';
+import getMostUsedTemplate from '../../../utils/get-most-used-template';
+import { Content as Sandboxes } from '../../Sandboxes';
+import CreateNewSandbox from '../../CreateNewSandbox';
+import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
+
+export const RecentSandboxes = () => {
+  const { state } = useOvermind();
+  const { loading, error, data } = useQuery(RECENT_SANDBOXES_CONTENT_QUERY, {
+    variables: {
+      orderField: state.dashboard.orderBy.field,
+      orderDirection: state.dashboard.orderBy.order.toUpperCase(),
+    },
+  });
+
+  if (error) {
+    return <div>Error!</div>;
+  }
+
+  const sandboxes = loading ? [] : (data && data.me && data.me.sandboxes) || [];
+
+  let mostUsedTemplate = null;
+  try {
+    mostUsedTemplate = getMostUsedTemplate(sandboxes);
+  } catch (e) {
+    // Not critical
+  }
+
+  // We want to hide all templates
+  // TODO: make this a query variable for graphql and move the logic to the server
+  const noTemplateSandboxes = sandboxes.filter(s => !s.customTemplate);
+  return (
+    <>
+      <Helmet>
+        <title>Recent Sandboxes - CodeSandbox</title>
+      </Helmet>
+      <Sandboxes
+        isLoading={loading}
+        Header="Recent Sandboxes"
+        ExtraElement={({ style }) => (
+          <CreateNewSandbox
+            mostUsedSandboxTemplate={mostUsedTemplate}
+            style={style}
+          />
+        )}
+        hideFilters
+        sandboxes={noTemplateSandboxes}
+        page="recent"
+      />
+    </>
+  );
+};