Change dashboard templates to be 1 item (codesandbox#3195)

* Put templates under 1 item

* Upgrade dependencies

* Fix weird apollo caching bug

* Fix type error

* Remove need for teamId in unmakeTemplates

* Fix cache update function

Author: CompuIves

packages/app/package.json

@@ -70,7 +70,7 @@
     ]
   },
   "dependencies": {
-    "@apollo/react-hooks": "^3.0.1",
+    "@apollo/react-hooks": "^3.1.3",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
     "@codesandbox/executors": "^0.1.0",
@@ -83,7 +83,7 @@
     "@types/rc-slider": "^8.6.5",
     "@vue/babel-preset-app": "^3.2.0",
     "airtable": "^0.5.8",
-    "apollo-boost": "^0.4.3",
+    "apollo-boost": "^0.4.4",
     "apollo-link-batch-http": "^1.2.12",
     "apollo-link-context": "^1.0.18",
     "axios": "^0.19.0",

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

@@ -85,13 +85,14 @@ export const LIST_PERSONAL_TEMPLATES = gql`
 `;
 
 export const LIST_OWNED_TEMPLATES = gql`
-  query ListTemplates($teamId: ID, $showAll: Boolean) {
+  query ListTemplates($showAll: Boolean) {
     me {
-      templates(teamId: $teamId, showAll: $showAll) {
+      templates(showAll: $showAll) {
         ...Template
       }
 
       teams {
+        id
         name
         templates {
           ...Template
@@ -138,7 +139,7 @@ export const UNMAKE_SANDBOXES_TEMPLATE_MUTATION = gql`
   }
 `;
 
-export function unmakeTemplates(selectedSandboxes: string[], teamId?: string) {
+export function unmakeTemplates(selectedSandboxes: string[]) {
   return client.mutate<
     UnmakeSandboxesTemplateMutation,
     UnmakeSandboxesTemplateMutationVariables
@@ -157,7 +158,6 @@ export function unmakeTemplates(selectedSandboxes: string[], teamId?: string) {
     update: cache => {
       try {
         const variables: ListTemplatesQueryVariables = {
-          teamId,
           showAll: false,
         };
 
@@ -173,6 +173,13 @@ export function unmakeTemplates(selectedSandboxes: string[], teamId?: string) {
           draft.me.templates = draft.me.templates.filter(
             x => selectedSandboxes.indexOf(x.sandbox.id) === -1
           );
+
+          draft.me.teams = draft.me.teams.map(t => ({
+            ...t,
+            templates: t.templates.filter(
+              x => selectedSandboxes.indexOf(x.sandbox.id) === -1
+            ),
+          }));
         });
 
         cache.writeQuery<ListTemplatesQuery, ListTemplatesQueryVariables>({

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

@@ -1,5 +1,5 @@
-# source: https://codesandbox.io/api/graphql
-# timestamp: Wed Dec 11 2019 16:37:29 GMT+0100 (Central European Standard Time)
+# source: https://codesandbox.stream/api/graphql
+# timestamp: Thu Dec 12 2019 17:24:06 GMT+0100 (Central European Standard Time)
 
 schema {
   query: RootQuery

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

@@ -388,7 +388,6 @@ export type ListPersonalTemplatesQuery = { __typename?: 'RootQueryType' } & {
 };
 
 export type ListTemplatesQueryVariables = {
-  teamId: Maybe<Scalars['ID']>;
   showAll: Maybe<Scalars['Boolean']>;
 };
 
@@ -401,7 +400,7 @@ export type ListTemplatesQuery = { __typename?: 'RootQueryType' } & {
       teams: Maybe<
         Array<
           Maybe<
-            { __typename?: 'Team' } & Pick<Team, 'name'> & {
+            { __typename?: 'Team' } & Pick<Team, 'id' | 'name'> & {
                 templates: Maybe<
                   Array<Maybe<{ __typename?: 'Template' } & TemplateFragment>>
                 >;

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

@@ -3,7 +3,7 @@ import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 
 import { RecentSandboxes } from './routes/RecentSandboxes';
 import PathedSandboxes from './routes/PathedSandboxes';
-import { Templates, FollowedTemplates } from './routes/Templates';
+import { Templates } from './routes/Templates';
 import DeletedSandboxes from './routes/DeletedSandboxes';
 import SearchSandboxes from './routes/SearchSandboxes';
 import CreateTeam from './routes/CreateTeam';
@@ -14,7 +14,6 @@ const Content = () => (
     <Route path="/dashboard/recent" component={RecentSandboxes} />
     <Route path="/dashboard/trash" component={DeletedSandboxes} />
     <Route path="/dashboard/templates" exact component={Templates} />
-    <Route path="/dashboard/templates/followed" component={FollowedTemplates} />
     <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
     <Route path="/dashboard/search" component={SearchSandboxes} />
     <Route path="/dashboard/teams/new" component={CreateTeam} />
@@ -28,10 +27,6 @@ const Content = () => (
       component={Templates}
       exact
     />
-    <Route
-      path="/dashboard/teams/:teamId/templates/followed"
-      component={FollowedTemplates}
-    />
     <Redirect to="/dashboard/recent" />
   </Switch>
 );

…/Templates/FollowedTemplates/elements.ts …emplates/BookmarkedTemplates/elements.tspackages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/elements.ts renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/elements.ts packages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/elements.ts renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/elements.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { sortBy } from 'lodash-es';
 import { useQuery, useMutation, useApolloClient } from '@apollo/react-hooks';
 import { DelayedAnimation } from 'app/components/DelayedAnimation';
@@ -18,15 +18,14 @@ import {
 import { useOvermind } from 'app/overmind';
 import { ButtonContainer } from './elements';
 
-import { Container, Grid, EmptyTitle } from '../elements';
+import { Grid, EmptyTitle } from '../elements';
 import { Navigation } from '../Navigation';
 import { UNBOOKMARK_TEMPLATE_FROM_DASHBOARD } from './mutations';
 
-export const FollowedTemplates = props => {
-  const { teamId } = props.match.params;
-  const [sortedTemplates, setSortedTemplates] = useState<
-    ListPersonalBookmarkedTemplatesQuery['me']['bookmarkedTemplates']
-  >();
+type BookmarkedTemplatesProps = { teamId?: string };
+
+export const BookmarkedTemplates = (props: BookmarkedTemplatesProps) => {
+  const { teamId } = props;
 
   const { actions } = useOvermind();
 
@@ -60,15 +59,17 @@ export const FollowedTemplates = props => {
     } Bookmarked Templates - CodeSandbox`;
   }, [teamId]);
 
-  useEffect(() => {
+  const sortedTemplates = React.useMemo(() => {
     if (data && data.me) {
       if (teamId) {
         const team = data.me.teams.find(t => t.id === teamId);
-        setSortedTemplates(team.bookmarkedTemplates);
-      } else {
-        setSortedTemplates(data.me.bookmarkedTemplates);
+        return team.bookmarkedTemplates;
       }
+
+      return data.me.bookmarkedTemplates;
     }
+
+    return undefined;
   }, [teamId, data]);
 
   if (error) {
@@ -87,7 +88,7 @@ export const FollowedTemplates = props => {
           color: 'rgba(255, 255, 255, 0.5)',
         }}
       >
-        Fetching Sandboxes...
+        Fetching Templates...
       </DelayedAnimation>
     );
   }
@@ -96,7 +97,7 @@ export const FollowedTemplates = props => {
   );
 
   return (
-    <Container>
+    <>
       <Navigation bookmarked teamId={teamId} number={orderedTemplates.length} />
       {!orderedTemplates.length && (
         <div>
@@ -157,6 +158,6 @@ export const FollowedTemplates = props => {
           </ContextMenu>
         ))}
       </Grid>
-    </Container>
+    </>
   );
 };

…es/Templates/FollowedTemplates/index.tsx …/Templates/BookmarkedTemplates/index.tsxpackages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/index.tsx renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/index.tsx packages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/index.tsx renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, NavigationLink, Number } from './elements';
+import { Container, NavigationTitle, Number } from './elements';
 
 interface INavigationProps {
   teamId?: string;
@@ -14,27 +14,15 @@ export const Navigation = ({
 }: INavigationProps) => (
   <Container>
     {bookmarked ? (
-      <NavigationLink
-        to={
-          teamId
-            ? `/dashboard/teams/${teamId}/templates/bookmarked`
-            : `/dashboard/templates/bookmarked`
-        }
-      >
-        {teamId ? 'Team Bookmarked Templates' : 'Bookmarked Templates'}
-      </NavigationLink>
+      <NavigationTitle>
+        {teamId ? 'Bookmarked Templates' : 'Bookmarked Templates'}
+      </NavigationTitle>
     ) : (
-      <NavigationLink
-        to={
-          teamId
-            ? `/dashboard/teams/${teamId}/templates`
-            : `/dashboard/templates`
-        }
-      >
+      <NavigationTitle>
         {teamId ? 'Team Templates' : 'My Templates'}
-      </NavigationLink>
+      </NavigationTitle>
     )}
 
-    {number == null && <Number>{number}</Number>}
+    {number != null && <Number>{number}</Number>}
   </Container>
 );

…Templates/FollowedTemplates/mutations.ts …mplates/BookmarkedTemplates/mutations.tspackages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/mutations.ts renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/mutations.ts packages/app/src/app/pages/Dashboard/Content/routes/Templates/FollowedTemplates/mutations.ts renamed to packages/app/src/app/pages/Dashboard/Content/routes/Templates/BookmarkedTemplates/mutations.ts

@@ -1,20 +1,22 @@
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
   position: relative;
   display: flex;
   align-items: center;
 `;
 
-export const NavigationLink = styled(Link)`
+export const NavigationTitle = styled.h2`
+  display: inline-flex;
   margin-right: 0.5rem;
-  color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   transition: 0.3s ease color;
   font-size: 1.25rem;
   margin-left: 0;
   color: white;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 400;
 
   &:last-child {
     margin-right: 0;