SandboxGrid: refactor away observer for sandbox grid (#3185)

* refactor away observer for sandbox grid

* Performance improvements

* Convert to TS

Author: christianalfoni

.graphqlconfig.yml

@@ -3,6 +3,6 @@ projects:
     schemaPath: packages/app/src/app/graphql/schema.graphql
     extensions:
       endpoints:
-        default: 'https://codesandbox.io/api/graphql'
+        prod: 'https://codesandbox.io/api/graphql'
         staging: 'https://codesandbox.stream/api/graphql'
         dev: 'http://localhost:4000/api/graphql'

packages/app/package.json

@@ -12,8 +12,8 @@
     "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   node scripts/build.js",
     "build:stats": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   webpack --env production --config config/webpack.prod.js --json --profile --progress > stats.json && node scripts/stats",
     "build:clean": "rimraf www",
-    "graphql:replace-schema": "sed -i'' 's/RootQueryType/RootQuery/g' ./src/app/graphql/schema.graphql && sed -i'' 's/RootMutationType/RootMutation/g' ./src/app/graphql/schema.graphql",
-    "generate:graphql": "graphql get-schema --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js",
+    "graphql:replace-schema": "sed -i '' 's/RootQueryType/RootQuery/g' ./src/app/graphql/schema.graphql && sed -i '' 's/RootMutationType/RootMutation/g' ./src/app/graphql/schema.graphql",
+    "generate:graphql": "graphql get-schema -e prod --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js",
     "generate:graphql:staging": "graphql get-schema -e staging --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js --staging",
     "build:embed": "cross-env NODE_ENV=production webpack --config config/webpack.embed.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js && yarn copy-assets",

packages/app/src/app/components/CreateNewSandbox/queries.ts

@@ -13,7 +13,6 @@ import {
   UnmakeSandboxesTemplateMutationVariables,
   ListTemplatesQueryVariables,
   ListTemplatesQuery,
-  Collection,
   PathedSandboxesQuery,
   PathedSandboxesFoldersQueryVariables,
 } from 'app/graphql/types';
@@ -191,7 +190,7 @@ export function unmakeTemplates(selectedSandboxes: string[], teamId?: string) {
 export function makeTemplates(
   selectedSandboxes: string[],
   teamId?: string,
-  collections?: Collection[]
+  collections?: { teamId: string | null }[]
 ) {
   const unpackedSelectedSandboxes: string[] =
     // @ts-ignore

packages/app/src/app/graphql/schema.graphql

@@ -1,5 +1,5 @@
-# source: https://codesandbox.stream/api/graphql
-# timestamp: Tue Dec 03 2019 21:41:27 GMT+0100 (Central European Standard Time)
+# source: https://codesandbox.io/api/graphql
+# timestamp: Wed Dec 11 2019 16:37:29 GMT+0100 (Central European Standard Time)
 
 schema {
   query: RootQuery

packages/app/src/app/graphql/types.ts

@@ -506,6 +506,7 @@ export type SandboxFragment = { __typename?: 'Sandbox' } & Pick<
   | 'description'
   | 'insertedAt'
   | 'updatedAt'
+  | 'removedAt'
   | 'privacy'
   | 'screenshotUrl'
   | 'screenshotOutdated'
@@ -730,12 +731,7 @@ export type DeletedSandboxesQuery = { __typename?: 'RootQueryType' } & {
   me: Maybe<
     { __typename?: 'CurrentUser' } & {
       sandboxes: Maybe<
-        Array<
-          Maybe<
-            { __typename?: 'Sandbox' } & Pick<Sandbox, 'removedAt'> &
-              SandboxFragment
-          >
-        >
+        Array<Maybe<{ __typename?: 'Sandbox' } & SandboxFragment>>
       >;
     }
   >;

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

@@ -17,7 +17,7 @@ import theme from '@codesandbox/common/lib/theme';
 import track from '@codesandbox/common/lib/utils/analytics';
 
 import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import { Sandbox } from '@codesandbox/common/lib/types';
+import { SandboxFragment } from 'app/graphql/types';
 import { RENAME_SANDBOX_MUTATION } from '../../queries';
 
 import {
@@ -50,12 +50,12 @@ type Props = {
   selectedCount: number;
   collectionPath: string; // eslint-disable-line react/no-unused-prop-types
   collectionTeamId: string | undefined;
-  sandbox: Sandbox;
+  sandbox: SandboxFragment;
   page: string | undefined;
   privacy: number;
   isPatron: boolean;
   isScrolling: () => boolean;
-  removedAt?: number;
+  removedAt?: string;
   style?: React.CSSProperties;
   alias: string | undefined;
 
@@ -293,7 +293,7 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
         {
           title: 'Fork Sandbox',
           action: () => {
-            this.props.forkSandbox(this.props.sandbox.id);
+            this.props.forkSandbox(this.props.id);
             return true;
           },
         },