refactor: RecentSandboxes to use Typescript

Author: yevhenorlov

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,

…/Content/routes/RecentSandboxes/index.js …Content/routes/RecentSandboxes/index.tsxpackages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js renamed to packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.tsx packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js renamed to packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { useQuery } from '@apollo/react-hooks';
 
 import { useOvermind } from 'app/overmind';
@@ -16,6 +16,11 @@ export const RecentSandboxes = () => {
       orderDirection: state.dashboard.orderBy.order.toUpperCase(),
     },
   });
+
+  if (error) {
+    return <div>Error!</div>;
+  }
+
   const sandboxes = loading ? [] : (data && data.me && data.me.sandboxes) || [];
 
   let mostUsedTemplate = null;
@@ -28,13 +33,11 @@ export const RecentSandboxes = () => {
   // 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>
-      {error && <div>Error!</div>}
       <Sandboxes
         isLoading={loading}
         Header="Recent Sandboxes"