From f07c91ec9c1aafee72351d326b0fc832d8975477 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 14 Nov 2019 23:35:21 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=94=A8=20Switch=20StorageManagementMo?= =?UTF-8?q?dal=20to=20use=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/overmind/namespaces/files/actions.ts | 22 +-- .../AddFileToSandboxButton/elements.js | 26 ---- .../AddFileToSandboxButton/index.js | 18 --- .../DeleteFileButton/elements.js | 26 ---- .../DeleteFileButton/index.js | 12 -- .../FilesList/AddFileToSandboxButton.tsx | 31 ++++ .../FilesList/Button/elements.ts | 20 +++ .../FilesList/Button/index.tsx | 21 +++ .../FilesList/DeleteFileButton.tsx | 24 +++ .../FilesList/elements.js | 78 ---------- .../FilesList/elements.ts | 90 +++++++++++ .../StorageManagementModal/FilesList/index.js | 142 ------------------ .../FilesList/index.tsx | 137 +++++++++++++++++ .../Modals/StorageManagementModal/elements.ts | 26 ++-- .../Modals/StorageManagementModal/index.tsx | 37 ++--- 15 files changed, 358 insertions(+), 352 deletions(-) delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/elements.ts create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.ts delete mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js create mode 100644 packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx diff --git a/packages/app/src/app/overmind/namespaces/files/actions.ts b/packages/app/src/app/overmind/namespaces/files/actions.ts index 5ce46105b96..e4f2d7316ce 100755 --- a/packages/app/src/app/overmind/namespaces/files/actions.ts +++ b/packages/app/src/app/overmind/namespaces/files/actions.ts @@ -4,13 +4,14 @@ import { getModulesAndDirectoriesInDirectory, } from '@codesandbox/common/lib/sandbox/modules'; import getDefinition from '@codesandbox/common/lib/templates'; -import { Directory, Module } from '@codesandbox/common/lib/types'; +import { Directory, Module, UploadFile } from '@codesandbox/common/lib/types'; import { getTextOperation } from '@codesandbox/common/lib/utils/diff'; +import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize'; +import { INormalizedModules } from 'codesandbox-import-util-types'; + import { AsyncAction } from 'app/overmind'; import { withOwnedSandbox } from 'app/overmind/factories'; import { createOptimisticModule } from 'app/overmind/utils/common'; -import { INormalizedModules } from 'codesandbox-import-util-types'; -import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize'; import { resolveDirectoryWrapped, @@ -417,10 +418,10 @@ export const gotUploadedFiles: AsyncAction = async ( } }; -export const addedFileToSandbox: AsyncAction<{ - url: string; - name: string; -}> = withOwnedSandbox( +export const addedFileToSandbox: AsyncAction> = withOwnedSandbox( async ({ actions, effects, state }, { name, url }) => { if (!state.editor.currentSandbox) { return; @@ -439,9 +440,10 @@ export const addedFileToSandbox: AsyncAction<{ 'write_code' ); -export const deletedUploadedFile: AsyncAction<{ - id: string; -}> = async ({ state, actions, effects }, { id }) => { +export const deletedUploadedFile: AsyncAction = async ( + { actions, effects, state }, + id +) => { if (!state.uploadedFiles) { return; } diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js deleted file mode 100644 index 6d1600bb57c..00000000000 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import AddIcon from 'react-icons/lib/md/add'; -import Tooltip from '@codesandbox/common/lib/components/Tooltip'; - -export const AddFileToSandboxButton = styled(props => ( - - - -))` - font-size: 1.2em; - background-color: inherit; - border: none; - padding: 5px 6px 9px 6px; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - &:hover { - color: rgba(255, 255, 255, 1); - } - &[disabled] { - opacity: 0.5; - cursor: default; - } -`; diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js deleted file mode 100644 index 05035497dcd..00000000000 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { AddFileToSandboxButton } from './elements'; - -export default class AddFileToSandboxButtonContainer extends React.PureComponent { - addFileToSandbox = () => { - const { onAddFileToSandbox, url, name } = this.props; - onAddFileToSandbox({ url, name }); - }; - - render() { - return ( - - ); - } -} diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js deleted file mode 100644 index bb59cf2a036..00000000000 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import DeleteIcon from 'react-icons/lib/md/delete'; -import Tooltip from '@codesandbox/common/lib/components/Tooltip'; - -export const DeleteFileButton = styled(props => ( - - - -))` - font-size: 1.2em; - background-color: inherit; - border: none; - padding: 5px 6px 9px 6px; - color: rgba(255, 255, 255, 0.5); - cursor: pointer; - &:hover { - color: rgba(255, 255, 255, 1); - } - &[disabled] { - opacity: 0.5; - cursor: default; - } -`; diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js deleted file mode 100644 index 93a76398f22..00000000000 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { DeleteFileButton } from './elements'; - -export default class DeleteFileButtonContainer extends React.PureComponent { - deleteFile = () => { - this.props.onDelete({ id: this.props.id }); - }; - - render() { - return ; - } -} diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx new file mode 100644 index 00000000000..9aa56532fac --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx @@ -0,0 +1,31 @@ +import { UploadFile } from '@codesandbox/common/lib/types'; +import React, { FunctionComponent } from 'react'; +import AddIcon from 'react-icons/lib/md/add'; + +import { useOvermind } from 'app/overmind'; + +import { Button } from './Button'; + +type Props = Pick; +export const AddFileToSandboxButton: FunctionComponent = ({ + name, + url, +}) => { + const { + actions: { + files: { addedFileToSandbox }, + }, + state: { + editor: { currentSandbox }, + }, + } = useOvermind(); + + return ( + + +); diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx new file mode 100644 index 00000000000..cfc0d2da378 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/DeleteFileButton.tsx @@ -0,0 +1,24 @@ +import { UploadFile } from '@codesandbox/common/lib/types'; +import React, { FunctionComponent } from 'react'; +import DeleteIcon from 'react-icons/lib/md/delete'; + +import { useOvermind } from 'app/overmind'; + +import { Button } from './Button'; + +type Props = Pick; +export const DeleteFileButton: FunctionComponent = ({ id }) => { + const { + actions: { + files: { deletedUploadedFile }, + }, + } = useOvermind(); + + return ( + - - - - - - - File - Size - - - - - - - {sortBy(files, 'name').map((f, i) => ( - - - - - - - - - - - - ))} - -
- this.toggleCheckbox(e, f.id)} - selected={this.state[f.id]} - /> - - - {f.name} - - {filesize(f.objectSize)}
- - ); - } -} - -export default FilesList; diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx new file mode 100644 index 00000000000..a0107da9057 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx @@ -0,0 +1,137 @@ +import { Button } from '@codesandbox/common/lib/components/Button'; +import filesize from 'filesize'; +import { sortBy } from 'lodash-es'; +import React, { FunctionComponent, useState } from 'react'; + +import { useOvermind } from 'app/overmind'; + +import { AddFileToSandboxButton } from './AddFileToSandboxButton'; +import { DeleteFileButton } from './DeleteFileButton'; +import { + Body, + Buttons, + CheckBox, + Container, + FileRow, + HeaderTitle, + StatBody, + Table, +} from './elements'; + +export const FilesList: FunctionComponent = () => { + const { + actions: { + files: { deletedUploadedFile, addedFileToSandbox }, + }, + state: { + editor: { currentSandbox }, + uploadedFiles, + }, + } = useOvermind(); + const [selectedItems, setSelectedItems] = useState([]); + + const getSelection = () => + uploadedFiles.filter(({ id }) => selectedItems.includes(id)); + const toggleCheckbox = (id: string) => + setSelectedItems(items => + items.includes(id) ? items.filter(item => item !== id) : items.concat(id) + ); + + return ( + + + + + + + + + + + + + File + + Size + + + + + + + + + + + {sortBy(uploadedFiles, 'name').map( + ({ id, name, objectSize, url }, index) => ( + + + + + + + + + + + + + + + + ) + )} + +
+ toggleCheckbox(id)} + selected={selectedItems.includes(id)} + /> + + + {name} + + {filesize(objectSize)}
+ + ); +}; diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts b/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts index a7b4a6faf25..827a41b714d 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/elements.ts @@ -1,9 +1,11 @@ -import styled, { keyframes } from 'styled-components'; +import styled, { css, keyframes } from 'styled-components'; export const Container = styled.div` - background-color: ${props => props.theme.background}; - width: 100%; - padding-bottom: 2rem; + ${({ theme }) => css` + background-color: ${theme.background}; + width: 100%; + padding-bottom: 2rem; + `}; `; export const JustifiedArea = styled.div` @@ -16,7 +18,6 @@ export const Title = styled.h2` font-weight: 500; padding: 2rem; color: rgba(255, 255, 255, 0.9); - margin-top: 0 !important; font-size: 1.125rem; margin: 0; text-transform: uppercase; @@ -27,7 +28,6 @@ export const SubTitle = styled.p` font-weight: 700; font-size: 0.875rem; padding: 2rem; - margin-top: 0 !important; margin: 0; line-height: 1.4; `; @@ -41,12 +41,13 @@ export const Description = styled.div` `; export const SubDescription = styled.div` - margin: 0; - padding-left: 2rem; - font-weight: 500; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; - font-size: 1rem; + ${({ theme }) => css` + margin: 0; + padding-left: 2rem; + font-weight: 500; + color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; + font-size: 1rem; + `}; `; export const Rule = styled.hr` @@ -62,6 +63,7 @@ const loadingAnimation = keyframes` 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx index baaad54a51d..b7750230c03 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx @@ -5,29 +5,20 @@ import { useOvermind } from 'app/overmind'; import { Container, - Title, - JustifiedArea, - SubTitle, Description, - SubDescription, - Rule, + JustifiedArea, LoadingAnimationContainer, + Rule, + SubDescription, + SubTitle, + Title, } from './elements'; -import FilesList from './FilesList'; +import { FilesList } from './FilesList'; export const StorageManagementModal: FunctionComponent = () => { const { - state: { - editor: { currentSandbox }, - usedStorage, - maxStorage, - uploadedFiles, - }, - actions: { - files: { deletedUploadedFile, addedFileToSandbox }, - }, + state: { maxStorage, uploadedFiles, usedStorage }, } = useOvermind(); - const isLoading = uploadedFiles === null; const isEmpty = !isLoading && uploadedFiles.length === 0; @@ -37,9 +28,7 @@ export const StorageManagementModal: FunctionComponent = () => { Storage Management - Used {filesize(usedStorage)} - {' / '} - Total {filesize(maxStorage)} + {`Used ${filesize(usedStorage)} / Total ${filesize(maxStorage)}`} @@ -49,15 +38,7 @@ export const StorageManagementModal: FunctionComponent = () => { - {!isEmpty && !isLoading && ( - files.map(id => deletedUploadedFile({ id }))} - addFilesToSandbox={files => files.map(addedFileToSandbox)} - addFileToSandbox={currentSandbox ? addedFileToSandbox : undefined} - /> - )} + {!isEmpty && !isLoading && } {isEmpty && You have no uploaded files.} From 31cb827afa0dbfa956f2df06fc2658b6326714eb Mon Sep 17 00:00:00 2001 From: Sara Date: Thu, 13 Feb 2020 15:56:54 +0100 Subject: [PATCH 2/4] fix buttons --- .../FilesList/Button/index.tsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx index c484b545a67..bb9cfb8a86a 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/Button/index.tsx @@ -1,7 +1,23 @@ import React, { ComponentType, FunctionComponent, HTMLAttributes } from 'react'; - +import styled from 'styled-components'; import { Tooltip } from './elements'; +const ButtonComponent = styled.button` + font-size: 1.2em; + background-color: inherit; + border: none; + padding: 5px 6px 9px 6px; + color: rgba(255, 255, 255, 0.5); + cursor: pointer; + &:hover { + color: rgba(255, 255, 255, 1); + } + &[disabled] { + opacity: 0.5; + cursor: default; + } +`; + type Props = { disabled?: boolean; Icon: ComponentType; @@ -14,8 +30,8 @@ export const Button: FunctionComponent = ({ tooltip, }) => ( - + ); From a543adf0a38fec2b966b65964d4bfa5fc2787d8b Mon Sep 17 00:00:00 2001 From: Sara Date: Thu, 13 Feb 2020 16:02:57 +0100 Subject: [PATCH 3/4] only show delete in sandbox --- .../common/Modals/StorageManagementModal/FilesList/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx index a0107da9057..990acaf70d7 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.tsx @@ -116,7 +116,9 @@ export const FilesList: FunctionComponent = () => { cursor: pointer; `} > - + {currentSandbox && ( + + )} Date: Thu, 13 Feb 2020 16:21:24 +0100 Subject: [PATCH 4/4] Cleanup --- .../FilesList/AddFileToSandboxButton.tsx | 4 ++++ .../FilesList/Button/elements.ts | 18 ++++++++++++++++ .../FilesList/Button/index.tsx | 21 ++----------------- .../FilesList/index.tsx | 4 +--- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx index 9aa56532fac..38737dfbd19 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/AddFileToSandboxButton.tsx @@ -20,6 +20,10 @@ export const AddFileToSandboxButton: FunctionComponent = ({ }, } = useOvermind(); + if (!currentSandbox) { + return null; + } + return (