Dashboard Improvements (#4446)

Co-authored-by: Sara Vieira <hey@iamsaravieira.com>
codesandbox · Jun 23, 2020 · 015cbaa · 015cbaa
1 parent 33bf486
commit 015cbaa
Show file tree

Hide file tree

Showing 27 changed files with 474 additions and 251 deletions.
diff --git a/...pages/NewDashboard/Sidebar/TeamAvatar.tsx → .../app/components/TeamAvatar/TeamAvatar.tsx b/...pages/NewDashboard/Sidebar/TeamAvatar.tsx → .../app/components/TeamAvatar/TeamAvatar.tsx
@@ -13,7 +13,17 @@ export const backgrounds = [
   'blues.700',
 ];
 
-export const TeamAvatar = ({ name, size = 'big', ...props }) => {
+interface TeamAvatarProps {
+  name: string;
+  size?: 'small' | 'big';
+  className?: string;
+}
+
+export const TeamAvatar = ({
+  name,
+  size = 'big',
+  className,
+}: TeamAvatarProps) => {
   if (!name) return null;
 
   // consistent color
@@ -30,8 +40,10 @@ export const TeamAvatar = ({ name, size = 'big', ...props }) => {
         textTransform: 'uppercase',
         backgroundColor,
         color: 'white',
+        fontWeight: 600,
+        fontFamily: 'Inter',
       })}
-      {...props}
+      className={className}
     >
       <Text size={size === 'small' ? 2 : 3}>{name[0]}</Text>
     </Stack>

diff --git a/packages/app/src/app/components/TeamAvatar/index.ts b/packages/app/src/app/components/TeamAvatar/index.ts
@@ -0,0 +1 @@
+export { TeamAvatar } from './TeamAvatar';
diff --git a/packages/app/src/app/graphql/introspection-result.ts b/packages/app/src/app/graphql/introspection-result.ts
@@ -9,7 +9,6 @@ export interface IntrospectionResultData {
     }[];
   };
 }
-
 const result: IntrospectionResultData = {
   __schema: {
     types: [
@@ -37,5 +36,4 @@ const result: IntrospectionResultData = {
     ],
   },
 };
-
 export default result;
diff --git a/packages/app/src/app/graphql/types.ts b/packages/app/src/app/graphql/types.ts
@@ -1168,6 +1168,18 @@ export type TeamFragmentDashboardFragment = { __typename?: 'Team' } & Pick<
     >;
   };
 
+export type CurrentTeamInfoFragmentFragment = { __typename?: 'Team' } & Pick<
+  Team,
+  'id' | 'creatorId' | 'description' | 'inviteToken' | 'name'
+> & {
+    users: Array<
+      { __typename?: 'User' } & Pick<
+        User,
+        'avatarUrl' | 'name' | 'lastName' | 'username' | 'id'
+      >
+    >;
+  };
+
 export type _CreateTeamMutationVariables = Exact<{
   name: Scalars['String'];
 }>;
@@ -1531,19 +1543,7 @@ export type GetTeamQueryVariables = Exact<{
 export type GetTeamQuery = { __typename?: 'RootQueryType' } & {
   me: Maybe<
     { __typename?: 'CurrentUser' } & {
-      team: Maybe<
-        { __typename?: 'Team' } & Pick<
-          Team,
-          'id' | 'creatorId' | 'description' | 'inviteToken' | 'name'
-        > & {
-            users: Array<
-              { __typename?: 'User' } & Pick<
-                User,
-                'avatarUrl' | 'name' | 'lastName' | 'username' | 'id'
-              >
-            >;
-          }
-      >;
+      team: Maybe<{ __typename?: 'Team' } & CurrentTeamInfoFragmentFragment>;
     }
   >;
 };

diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts
@@ -290,3 +290,17 @@ export const rejectTeamInvitation: Action<{ teamName: string }> = (
 
   effects.notificationToast.success(`Rejected invitation to ${teamName}`);
 };
+
+export const getActiveTeam: AsyncAction = async ({ state, effects }) => {
+  if (!state.activeTeam) return;
+
+  const team = await effects.gql.queries.getTeam({
+    teamId: state.activeTeam,
+  });
+
+  if (!team || !team.me) {
+    return;
+  }
+
+  state.activeTeamInfo = team.me.team;
+};
diff --git a/packages/app/src/app/overmind/effects/gql/dashboard/fragments.ts b/packages/app/src/app/overmind/effects/gql/dashboard/fragments.ts
@@ -113,3 +113,20 @@ export const teamFragmentDashboard = gql`
     }
   }
 `;
+
+export const currentTeamInfoFragment = gql`
+  fragment currentTeamInfoFragment on Team {
+    id
+    creatorId
+    description
+    inviteToken
+    name
+    users {
+      avatarUrl
+      name
+      lastName
+      username
+      id
+    }
+  }
+`;
diff --git a/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts b/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts
@@ -26,6 +26,7 @@ import {
   sandboxFragmentDashboard,
   sidebarCollectionDashboard,
   templateFragmentDashboard,
+  currentTeamInfoFragment,
 } from './fragments';
 
 export const deletedSandboxes: Query<
@@ -202,19 +203,9 @@ export const getTeam: Query<GetTeamQuery, GetTeamQueryVariables> = gql`
   query getTeam($teamId: ID!) {
     me {
       team(id: $teamId) {
-        id
-        creatorId
-        description
-        inviteToken
-        name
-        users {
-          avatarUrl
-          name
-          lastName
-          username
-          id
-        }
+        ...currentTeamInfoFragment
       }
     }
   }
+  ${currentTeamInfoFragment}
 `;
diff --git a/packages/app/src/app/overmind/factories.ts b/packages/app/src/app/overmind/factories.ts
@@ -66,16 +66,21 @@ export const withLoadApp = <T>(
 
   if (state.hasLogIn) {
     try {
-      state.user = await effects.api.getCurrentUser();
-      actions.internal.setPatronPrice();
-      effects.analytics.identify('signed_in', true);
-      effects.analytics.setUserId(state.user.id, state.user.email);
       const localStorageTeam = effects.browser.storage.get(
         TEAM_ID_LOCAL_STORAGE
       );
       if (localStorageTeam) {
-        state.dashboard.activeTeam = localStorageTeam;
+        state.activeTeam = localStorageTeam;
       }
+      const [user] = await Promise.all([
+        effects.api.getCurrentUser(),
+        actions.getActiveTeam(),
+      ]);
+      state.user = user;
+      actions.internal.setPatronPrice();
+      effects.analytics.identify('signed_in', true);
+      effects.analytics.setUserId(state.user.id, state.user.email);
+
       try {
         actions.internal.trackCurrentTeams().catch(e => {});
         actions.internal.identifyCurrentUser().catch(e => {});

diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -27,9 +27,9 @@ export const setActiveTeam: Action<{
   id: string | null;
 }> = ({ state, effects }, { id }) => {
   // ignore if its already selected
-  if (id === state.dashboard.activeTeam) return;
+  if (id === state.activeTeam) return;
 
-  state.dashboard.activeTeam = id;
+  state.activeTeam = id;
   effects.browser.storage.set(TEAM_ID_LOCAL_STORAGE, id);
   state.dashboard.sandboxes = {
     ...state.dashboard.sandboxes,
@@ -139,35 +139,20 @@ export const getTeams: AsyncAction = async ({ state, effects }) => {
   state.dashboard.teams = teams.me.teams;
 };
 
-export const getTeam: AsyncAction = async ({ state, effects }) => {
-  if (!state.dashboard.activeTeam) return;
-  const team = await effects.gql.queries.getTeam({
-    teamId: state.dashboard.activeTeam,
-  });
-
-  if (!team || !team.me) {
-    return;
-  }
-
-  state.dashboard.activeTeamInfo = team.me.team;
-};
-
 export const removeFromTeam: AsyncAction<string> = async (
   { state, effects },
   id
 ) => {
-  if (!state.dashboard.activeTeam || !state.dashboard.activeTeamInfo) return;
+  if (!state.activeTeam || !state.activeTeamInfo) return;
   try {
     await effects.gql.mutations.removeFromTeam({
-      teamId: state.dashboard.activeTeam,
+      teamId: state.activeTeam,
       userId: id,
     });
 
-    state.dashboard.activeTeamInfo = {
-      ...state.dashboard.activeTeamInfo,
-      users: (state.dashboard.activeTeamInfo.users || []).filter(
-        user => user.id !== id
-      ),
+    state.activeTeamInfo = {
+      ...state.activeTeamInfo,
+      users: (state.activeTeamInfo.users || []).filter(user => user.id !== id),
     };
   } catch {
     effects.notificationToast.error(
@@ -177,17 +162,17 @@ export const removeFromTeam: AsyncAction<string> = async (
 };
 
 export const leaveTeam: AsyncAction = async ({ state, effects, actions }) => {
-  if (!state.dashboard.activeTeam || !state.dashboard.activeTeamInfo) return;
+  if (!state.activeTeam || !state.activeTeamInfo) return;
   try {
     await effects.gql.mutations.leaveTeam({
-      teamId: state.dashboard.activeTeam,
+      teamId: state.activeTeam,
     });
 
     actions.dashboard.setActiveTeam({ id: null });
     actions.dashboard.getTeams();
 
     effects.notificationToast.success(
-      `You successfully left the ${state.dashboard.activeTeamInfo.name} team`
+      `You successfully left the ${state.activeTeamInfo.name} team`
     );
   } catch (e) {
     effects.notificationToast.error(
@@ -200,20 +185,20 @@ export const inviteToTeam: AsyncAction<string> = async (
   { state, effects },
   value
 ) => {
-  if (!state.dashboard.activeTeam) return;
+  if (!state.activeTeam) return;
   const isEmail = value.includes('@');
   try {
     let data: any = null;
     if (isEmail) {
       const emailInvited = await effects.gql.mutations.inviteToTeamVieEmail({
-        teamId: state.dashboard.activeTeam,
+        teamId: state.activeTeam,
         email: value,
       });
 
       data = emailInvited.inviteToTeamViaEmail;
     } else {
       const usernameInvited = await effects.gql.mutations.inviteToTeam({
-        teamId: state.dashboard.activeTeam,
+        teamId: state.activeTeam,
         username: value,
       });
 
@@ -253,8 +238,7 @@ export const getRecentSandboxes: AsyncAction = async ({ state, effects }) => {
     dashboard.sandboxes[sandboxesTypes.RECENT] = data.me.sandboxes
       .filter(
         sandbox =>
-          (sandbox.collection || { collection: {} }).teamId ===
-          state.dashboard.activeTeam
+          (sandbox.collection || { collection: {} }).teamId === state.activeTeam
       )
       .slice(0, 50);
   } catch (error) {
@@ -267,7 +251,7 @@ export const getRecentSandboxes: AsyncAction = async ({ state, effects }) => {
 export const getAllFolders: AsyncAction = async ({ state, effects }) => {
   try {
     const data = await effects.gql.queries.getCollections({
-      teamId: state.dashboard.activeTeam,
+      teamId: state.activeTeam,
     });
     if (!data || !data.me || !data.me.collections) {
       return;
@@ -358,7 +342,7 @@ export const getDrafts: AsyncAction = async ({ state, effects }) => {
   try {
     const data = await effects.gql.queries.sandboxesByPath({
       path: '/',
-      teamId: state.dashboard.activeTeam,
+      teamId: state.activeTeam,
     });
     if (!data || !data.me || !data.me.collection) {
       return;
@@ -383,7 +367,7 @@ export const getSandboxesByPath: AsyncAction<string> = async (
   try {
     const data = await effects.gql.queries.sandboxesByPath({
       path: '/' + path,
-      teamId: state.dashboard.activeTeam,
+      teamId: state.activeTeam,
     });
     if (!data || !data.me || !data.me.collection) {
       return;
@@ -421,10 +405,10 @@ export const getDeletedSandboxes: AsyncAction = async ({ state, effects }) => {
 export const getTemplateSandboxes: AsyncAction = async ({ state, effects }) => {
   const { dashboard } = state;
   try {
-    if (dashboard.activeTeam) {
+    if (state.activeTeam) {
       dashboard.sandboxes[sandboxesTypes.TEMPLATES] = null;
       const data = await effects.gql.queries.teamTemplates({
-        id: dashboard.activeTeam,
+        id: state.activeTeam,
       });
 
       if (!data || !data.me || !data.me.team) {
@@ -866,8 +850,7 @@ export const getSearchSandboxes: AsyncAction<string | null> = async (
       .filter(x => !x.customTemplate)
       .filter(
         sandbox =>
-          (sandbox.collection || { collection: {} }).teamId ===
-          state.dashboard.activeTeam
+          (sandbox.collection || { collection: {} }).teamId === state.activeTeam
       );
 
     dashboard.sandboxes[sandboxesTypes.SEARCH] = sandboxesToShow;
@@ -955,7 +938,7 @@ export const setTeamInfo: AsyncAction<{
   description: string | null;
 }> = async ({ effects, state }, { name, description }) => {
   const oldTeamInfo = state.dashboard.teams.find(team => team.name === name);
-  const oldActiveTeamInfo = state.dashboard.activeTeamInfo;
+  const oldActiveTeamInfo = state.activeTeamInfo;
   try {
     await effects.gql.mutations.setTeamName({
       name,
@@ -984,13 +967,17 @@ export const setTeamInfo: AsyncAction<{
       return team;
     });
 
-    state.dashboard.activeTeamInfo = {
-      ...oldActiveTeamInfo,
-      name,
-      description,
-    };
+    if (oldActiveTeamInfo) {
+      state.activeTeamInfo = {
+        ...oldActiveTeamInfo,
+        name,
+        description,
+      };
+    }
   } catch (e) {
-    state.dashboard.activeTeamInfo = { ...oldActiveTeamInfo };
+    if (oldActiveTeamInfo) {
+      state.activeTeamInfo = { ...oldActiveTeamInfo };
+    }
     if (state.dashboard.teams && oldTeamInfo) {
       state.dashboard.teams = [...state.dashboard.teams, oldTeamInfo];
     }

diff --git a/packages/app/src/app/overmind/namespaces/dashboard/state.ts b/packages/app/src/app/overmind/namespaces/dashboard/state.ts
@@ -49,8 +49,6 @@ type State = {
   };
   teams: Array<{ __typename?: 'Team' } & Pick<Team, 'id' | 'name'>>;
   allCollections: DELETE_ME_COLLECTION[] | null;
-  activeTeam: string | null;
-  activeTeamInfo: any | null;
   selectedSandboxes: string[];
   trashSandboxIds: string[];
   isDragging: boolean;
@@ -89,8 +87,6 @@ export const state: State = {
   },
   viewMode: 'grid',
   allCollections: null,
-  activeTeam: null,
-  activeTeamInfo: null,
   teams: [],
   recentSandboxesByTime: derived(({ sandboxes }: State) => {
     const recentSandboxes = sandboxes.RECENT;