From 869fb6dd844086d5e0e8d8c0b3839a770c5664ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 1 Feb 2020 17:35:00 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20MoveSandboxFolderModal?= =?UTF-8?q?=20to=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/app/src/app/overmind/actions.ts | 27 ++--- .../MoveSandboxFolderModal/DirectoryPicker.js | 46 -------- .../DirectoryPicker/TeamsPicker/elements.ts | 15 +++ .../DirectoryPicker/TeamsPicker/index.tsx | 41 +++++++ .../DirectoryPicker/elements.ts | 5 + .../DirectoryPicker/index.tsx | 32 ++++++ .../Modals/MoveSandboxFolderModal/elements.ts | 80 +++++++------- .../Modals/MoveSandboxFolderModal/index.tsx | 102 +++++++++--------- .../app/src/app/pages/common/Modals/index.tsx | 4 +- 9 files changed, 206 insertions(+), 146 deletions(-) delete mode 100644 packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js create mode 100644 packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts create mode 100644 packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx create mode 100644 packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts create mode 100644 packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts index ccde4076e8d..094526df2ec 100755 --- a/packages/app/src/app/overmind/actions.ts +++ b/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 }> = ( diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js deleted file mode 100644 index 6adcecd00e8..00000000000 --- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -import { Query } from 'react-apollo'; -import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem'; - -import { TEAMS_QUERY } from '../../../Dashboard/queries'; -import { TeamContainer, TeamName } from './elements'; - -export default ({ onSelect, currentPath, currentTeamId }) => ( -
- - - - {({ loading, data, error }) => { - if (loading) { - return null; - } - - if (error) { - return null; - } - - const { teams } = data.me; - - return teams.map(team => ( - - {team.name} - - - )); - }} - -
-); diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts new file mode 100644 index 00000000000..b61d2c814b1 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts @@ -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; +`; diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx new file mode 100644 index 00000000000..719ee0df0b1 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx @@ -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, + 'currentPath' | 'currentTeamId' | 'onSelect' +>; +export const TeamsPicker: FunctionComponent = ({ + currentPath, + currentTeamId, + onSelect, +}) => { + const { loading, error, data } = useQuery(TEAMS_QUERY); + + if (loading || error) { + return null; + } + + return ( + <> + {data.me.teams.map(({ id, name }) => ( + + {name} + + + + ))} + + ); +}; diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts new file mode 100644 index 00000000000..5fd5172342c --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + margin: 0 -1rem; +`; diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx new file mode 100644 index 00000000000..713af11c86e --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx @@ -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, + 'currentPath' | 'currentTeamId' | 'onSelect' +>; +export const DirectoryPicker: FunctionComponent = ({ + currentPath, + currentTeamId, + onSelect, +}) => ( + + + + + +); diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts index 0074229cbed..f1b270af2b1 100644 --- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts @@ -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; `; diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx index b3a6229cf3a..1aad8b24f77 100644 --- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx +++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx @@ -1,45 +1,51 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { useOvermind } from 'app/overmind'; -import { basename } from 'path'; import track from '@codesandbox/common/lib/utils/analytics'; -import { Button } from '@codesandbox/common/lib/components/Button'; -import ChevronRight from 'react-icons/lib/md/chevron-right'; +import { basename } from 'path'; +import React, { FunctionComponent, useEffect, useState } from 'react'; -import DirectoryPicker from './DirectoryPicker'; -import { Container } from '../elements'; +import { useOvermind } from 'app/overmind'; -import { Block, CancelButton } from './elements'; import { addSandboxesToFolder } from '../../../Dashboard/queries'; -const MoveSandboxFolderModal = () => { +import { DirectoryPicker } from './DirectoryPicker'; +import { + Block, + Button, + CancelButton, + ChevronRight, + Container, +} from './elements'; + +export const MoveSandboxFolderModal: FunctionComponent = () => { const { + actions: { modalClosed, refetchSandboxInfo }, state: { - editor: { currentSandbox: sandbox }, + editor: { + currentSandbox: { collection, id, team }, + }, }, - actions: { refetchSandboxInfo, modalClosed }, } = useOvermind(); - const { collection } = sandbox; - - const [loading, setLoading] = useState(false); const [error, setError] = useState(undefined); - const [teamId, setTeamId] = useState( - sandbox.team ? sandbox.team.id || undefined : undefined - ); - const [path, setPath] = useState(collection ? collection.path : '/'); - - const onSelect = useCallback(({ teamId: newTeamId, path: newPath }) => { - setTeamId(newTeamId); - setPath(newPath); - }, []); + const [loading, setLoading] = useState(false); + const [path, setPath] = useState(collection?.path || '/'); + const [teamId, setTeamId] = useState(team?.id); - const handleMove = useCallback(() => { + const handleMove = () => { setLoading(true); + setError(undefined); - }, []); + }; + const onSelect = ({ teamId: newTeamId, path: newPath }) => { + setTeamId(newTeamId); + + setPath(newPath); + }; useEffect(() => { - if (!loading) return; - addSandboxesToFolder([sandbox.id], path, teamId) + if (!loading) { + return; + } + + addSandboxesToFolder([id], path, teamId) .then(() => { refetchSandboxInfo(); @@ -48,45 +54,42 @@ const MoveSandboxFolderModal = () => { track('Move Sandbox From Editor'); }) - .catch(e => { - setError(e.message); + .catch(({ message }) => { + setError(message); + setLoading(false); }); - }, [loading, path, teamId, sandbox, refetchSandboxInfo, modalClosed]); + }, [id, loading, modalClosed, path, refetchSandboxInfo, teamId]); return (
Move to Folder - + + {error} - Cancel - - @@ -94,6 +97,3 @@ const MoveSandboxFolderModal = () => {
); }; - -// eslint-disable-next-line import/no-default-export -export default MoveSandboxFolderModal; diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx index 9cbbc7199fc..2d031426f62 100644 --- a/packages/app/src/app/pages/common/Modals/index.tsx +++ b/packages/app/src/app/pages/common/Modals/index.tsx @@ -36,7 +36,9 @@ import { SurveyModal } from './SurveyModal'; import UploadModal from './UploadModal'; const MoveSandboxFolderModal = Loadable(() => - import('./MoveSandboxFolderModal') + import('./MoveSandboxFolderModal').then(module => ({ + default: module.MoveSandboxFolderModal, + })) ); const modals = {