merge

Author: christianalfoni

.circleci/config.yml

@@ -25,12 +25,12 @@ aliases:
 
   - &restore_deps_cache
     keys:
-      - v28-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v28-dependency-cache-{{ .Branch }}
-      - v28-dependency-cache
+      - v29-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v29-dependency-cache-{{ .Branch }}
+      - v29-dependency-cache
 
   - &save_deps_cache
-    key: v28-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v29-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -49,51 +49,51 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v28-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      - v29-standalone-dependency-cache-{{ .Branch }}-{{ checksum
         "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v28-standalone-dependency-cache-{{ .Branch }}
-      - v28-standalone-dependency-cache
+      - v29-standalone-dependency-cache-{{ .Branch }}
+      - v29-standalone-dependency-cache
 
   - &save_standalone_deps_cache
     key:
-      v28-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      v29-standalone-dependency-cache-{{ .Branch }}-{{ checksum
       "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_homepage_cache
-    key: v28-prod-homepage-build-cache-master
+    key: v29-prod-homepage-build-cache-master
 
   - &restore_prod_result
     key:
-      v28-prod-build-result-{{ .Environment.CIRCLE_BRANCH
+      v29-prod-build-result-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
 
   - &save_prod_build_cache
     key:
-      v28-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
     paths:
       - packages/app/node_modules/.cache
 
   - &restore_prod_build_cache
     keys:
-      - v28-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      - v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
         }}-{{.Environment.CIRCLE_SHA1 }}
-      - v28-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
-      - v28-prod-build-cache-master-
+      - v29-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
+      - v29-prod-build-cache-master-
 
   # To persist the images built by sharp
   - &save_prod_homepage_cache
     key:
-      v28-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v29-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/homepage/public
 
   - &save_prod_result
     key:
-      v28-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v29-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
@@ -134,14 +134,14 @@ commands:
     steps:
       - restore_cache:
           keys:
-            - v28-source-cache-{{ .Branch }}-{{ .Revision }}
-            - v28-source-cache-{{ .Branch }}-
-            - v28-source-cache-
+            - v29-source-cache-{{ .Branch }}-{{ .Revision }}
+            - v29-source-cache-{{ .Branch }}-
+            - v29-source-cache-
 
       - checkout
 
       - save_cache:
-          key: v28-source-cache-{{ .Branch }}-{{ .Revision }}
+          key: v29-source-cache-{{ .Branch }}-{{ .Revision }}
           paths:
             - '.git'
   build_deps:

packages/app/package.json

@@ -71,7 +71,6 @@
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
-    "@samuelmeuli/font-manager": "^1.2.0",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
     "@svgr/core": "^2.4.1",

packages/app/src/app/components/Overlay/Overlay.tsx

@@ -13,11 +13,12 @@ interface IOverlayProps {
   noHeightAnimation?: boolean;
 }
 
+const noop = () => undefined;
 export const Overlay: React.FC<IOverlayProps> = ({
   event,
   isOpen,
-  onOpen = () => {},
-  onClose = () => {},
+  onOpen = noop,
+  onClose = noop,
   children,
   content: Content,
   noHeightAnimation = true,

packages/app/src/app/overmind/actions.ts

@@ -74,6 +74,7 @@ type ModalName =
   | 'searchDependencies'
   | 'signInForTemplates'
   | 'userSurvey';
+
 export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
   { state, effects },
   { modal, message }

packages/app/src/app/overmind/namespaces/userNotifications/actions.ts

@@ -5,10 +5,11 @@ import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
-export const notificationsOpened: AsyncAction = async ({ state, effects }) => {
+export const notificationsOpened: AsyncAction = async ({ state }) => {
   state.userNotifications.notificationsOpened = true;
   state.userNotifications.unreadCount = 0;
-  client.mutate({
+
+  await client.mutate({
     mutation: gql`
       mutation ClearNotificationCount {
         clearNotificationCount {

packages/app/src/app/overmind/utils/pushToAirtable.ts

@@ -1,4 +1,11 @@
-export default async ({ feedback, emoji, sandboxId, username, email }) => {
+export default async ({
+  feedback,
+  emoji,
+  sandboxId,
+  username,
+  email,
+  version,
+}) => {
   const Airtable = await import(
     /* webpackChunkName: 'airtable' */ './setAirtable'
   );
@@ -13,6 +20,7 @@ export default async ({ feedback, emoji, sandboxId, username, email }) => {
         username,
         email,
         url: window.location.pathname,
+        version,
       },
       err => {
         if (err) {

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"
+      />
+    </>
+  );
+};