🔨 Switch MoveSandboxFolderModal to use useOvermind (codesandbox#3446)

Author: MichaelDeBoey

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

@@ -225,23 +225,26 @@ export const track: Action<{ name: string; data: any }> = (
 };
 
 export const refetchSandboxInfo: AsyncAction = async ({
-  state,
-  effects,
   actions,
+  effects,
+  state,
 }) => {
   const sandbox = state.editor.currentSandbox;
-  if (sandbox && sandbox.id) {
-    const updatedSandbox = await effects.api.getSandbox(sandbox.id);
 
-    sandbox.collection = updatedSandbox.collection;
-    sandbox.owned = updatedSandbox.owned;
-    sandbox.userLiked = updatedSandbox.userLiked;
-    sandbox.title = updatedSandbox.title;
-    sandbox.team = updatedSandbox.team;
-    sandbox.roomId = updatedSandbox.roomId;
-
-    await actions.editor.internal.initializeLiveSandbox(sandbox);
+  if (!sandbox?.id) {
+    return;
   }
+
+  const updatedSandbox = await effects.api.getSandbox(sandbox.id);
+
+  sandbox.collection = updatedSandbox.collection;
+  sandbox.owned = updatedSandbox.owned;
+  sandbox.userLiked = updatedSandbox.userLiked;
+  sandbox.title = updatedSandbox.title;
+  sandbox.team = updatedSandbox.team;
+  sandbox.roomId = updatedSandbox.roomId;
+
+  await actions.editor.internal.initializeLiveSandbox(sandbox);
 };
 
 export const acceptTeamInvitation: Action<{ teamName: string }> = (

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const TeamContainer = styled.div`
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+  padding-top: 0;
+  margin-top: 1rem;
+`;
+
+export const TeamName = styled.div`
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  margin: 1rem 1rem;
+`;

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@apollo/react-hooks';
+import React, { ComponentProps, FunctionComponent } from 'react';
+
+import { TEAMS_QUERY } from 'app/pages/Dashboard/queries';
+import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
+
+import { TeamContainer, TeamName } from './elements';
+
+type Props = Pick<
+  ComponentProps<typeof SandboxesItem>,
+  'currentPath' | 'currentTeamId' | 'onSelect'
+>;
+export const TeamsPicker: FunctionComponent<Props> = ({
+  currentPath,
+  currentTeamId,
+  onSelect,
+}) => {
+  const { loading, error, data } = useQuery(TEAMS_QUERY);
+
+  if (loading || error) {
+    return null;
+  }
+
+  return (
+    <>
+      {data.me.teams.map(({ id, name }) => (
+        <TeamContainer key={id}>
+          <TeamName>{name}</TeamName>
+
+          <SandboxesItem
+            currentPath={currentPath}
+            currentTeamId={currentTeamId}
+            openByDefault
+            teamId={id}
+            onSelect={onSelect}
+          />
+        </TeamContainer>
+      ))}
+    </>
+  );
+};

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin: 0 -1rem;
+`;

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts

@@ -0,0 +1,32 @@
+import React, { ComponentProps, FunctionComponent } from 'react';
+
+import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
+
+import { Container } from './elements';
+import { TeamsPicker } from './TeamsPicker';
+
+type Props = Pick<
+  ComponentProps<typeof TeamsPicker>,
+  'currentPath' | 'currentTeamId' | 'onSelect'
+>;
+export const DirectoryPicker: FunctionComponent<Props> = ({
+  currentPath,
+  currentTeamId,
+  onSelect,
+}) => (
+  <Container>
+    <SandboxesItem
+      currentPath={currentPath}
+      currentTeamId={currentTeamId}
+      onSelect={onSelect}
+      openByDefault
+      teamId={undefined}
+    />
+
+    <TeamsPicker
+      currentPath={currentPath}
+      currentTeamId={currentTeamId}
+      onSelect={onSelect}
+    />
+  </Container>
+);

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx

@@ -1,46 +1,54 @@
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
+import ChevronRightBase from 'react-icons/lib/md/chevron-right';
 import styled, { css } from 'styled-components';
 
+import { Container as ContainerBase } from '../elements';
+
 export const Block = styled.div<{ right?: boolean }>`
-  background-color: ${props => props.theme.background2};
-  color: rgba(255, 255, 255, 0.9);
-  padding: 1rem 1.5rem;
-
-  font-size: 0.875rem;
-  font-weight: 600;
-
-  ${props =>
-    props.right &&
-    css`
-      text-align: right;
-    `};
-`;
+  ${({ right, theme }) => css`
+    background-color: ${theme.background2};
+    color: rgba(255, 255, 255, 0.9);
+    padding: 1rem 1.5rem;
 
-export const TeamContainer = styled.div`
-  border-top: 2px solid rgba(0, 0, 0, 0.1);
-  padding-top: 0;
-  margin-top: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+
+    ${right &&
+      css`
+        text-align: right;
+      `};
+  `};
 `;
 
-export const TeamName = styled.div`
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  margin: 1rem 1rem;
+export const Button = styled(ButtonBase)`
+  display: inline-flex;
+  align-items: center;
 `;
 
 export const CancelButton = styled.button`
-  transition: 0.3s ease color;
-  font-size: 0.875rem;
-  margin-right: 1.5rem;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.8);
-  outline: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.theme.secondary};
-  }
+  ${({ theme }) => css`
+    transition: 0.3s ease color;
+    font-size: 0.875rem;
+    margin-right: 1.5rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    outline: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover {
+      color: ${theme.secondary};
+    }
+  `};
+`;
+
+export const ChevronRight = styled(ChevronRightBase)`
+  margin-right: -0.25rem;
+  margin-left: 0.25rem;
+`;
+
+export const Container = styled(ContainerBase)`
+  max-height: 400px;
+  overflow: auto;
 `;