From a165e937210bdc805662060894e7f9d5de981b4e Mon Sep 17 00:00:00 2001 From: Christian Alfoni Date: Thu, 17 Oct 2019 15:04:50 +0200 Subject: [PATCH] fix issues with storage management and Entry bug --- .../app/overmind/namespaces/files/actions.ts | 66 ++++++++++--------- .../Files/DirectoryEntry/Entry/index.tsx | 22 +++---- .../FilesList/elements.js | 7 +- .../StorageManagementModal/FilesList/index.js | 51 +++++++------- .../{elements.js => elements.ts} | 0 5 files changed, 74 insertions(+), 72 deletions(-) rename packages/app/src/app/pages/common/Modals/StorageManagementModal/{elements.js => elements.ts} (100%) diff --git a/packages/app/src/app/overmind/namespaces/files/actions.ts b/packages/app/src/app/overmind/namespaces/files/actions.ts index cb02a03b66a..d2f811a96dc 100755 --- a/packages/app/src/app/overmind/namespaces/files/actions.ts +++ b/packages/app/src/app/overmind/namespaces/files/actions.ts @@ -242,7 +242,7 @@ export const gotUploadedFiles: AsyncAction = async ( export const addedFileToSandbox: AsyncAction<{ url: string; name: string; -}> = async ({ actions }, { name, url }) => { +}> = withOwnedSandbox(async ({ actions }, { name, url }) => { actions.internal.closeModals(false); await actions.files.moduleCreated({ title: name, @@ -250,52 +250,56 @@ export const addedFileToSandbox: AsyncAction<{ code: url, isBinary: true, }); -}; +}); export const deletedUploadedFile: AsyncAction<{ id: string; -}> = async ({ state, effects }, { id }) => { +}> = withOwnedSandbox(async ({ state, effects }, { id }) => { + const index = state.uploadedFiles.findIndex(file => file.id === id); + const removedFiles = state.uploadedFiles.splice(index, 1); + try { await effects.api.deleteUploadedFile(id); - state.uploadedFiles = null; - // Why are we opening it again? And what is the message? - // actions.files.gotUploadedFiles() } catch (error) { + state.uploadedFiles.splice(index, 0, ...removedFiles); effects.notificationToast.error('Unable to delete uploaded file'); } -}; +}); export const filesUploaded: AsyncAction<{ files: any[]; directoryShortid: string; -}> = async ({ state, effects, actions }, { files, directoryShortid }) => { - const modal = 'uploading'; - effects.analytics.track('Open Modal', { modal }); - // What message? - // state.currentModalMessage = message; - state.currentModal = modal; +}> = withOwnedSandbox( + async ({ state, effects, actions }, { files, directoryShortid }) => { + const modal = 'uploading'; + effects.analytics.track('Open Modal', { modal }); + // What message? + // state.currentModalMessage = message; + state.currentModal = modal; - try { - const { modules, directories } = await actions.files.internal.uploadFiles({ - files, - directoryShortid, - }); - state.uploadedFiles = null; + try { + const { modules, directories } = await actions.files.internal.uploadFiles( + { + files, + directoryShortid, + } + ); - actions.files.massCreateModules({ - modules, - directories, - directoryShortid, - }); - } catch (error) { - if (error.message.indexOf('413') !== -1) { - return; + actions.files.massCreateModules({ + modules, + directories, + directoryShortid, + }); + } catch (error) { + if (error.message.indexOf('413') !== -1) { + return; + } + effects.notificationToast.error(error.message); } - effects.notificationToast.error(error.message); - } - actions.internal.closeModals(false); -}; + actions.internal.closeModals(false); + } +); export const massCreateModules: AsyncAction<{ modules: any; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx index e8bc5c0d874..a92fa02955f 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx @@ -1,22 +1,19 @@ +import theme from '@codesandbox/common/lib/theme'; +import { ContextMenu, Item } from 'app/components/ContextMenu'; import React, { useState } from 'react'; import { DragSource } from 'react-dnd'; -import { ContextMenu, Item } from 'app/components/ContextMenu'; - -import AddFileIcon from 'react-icons/lib/md/insert-drive-file'; -import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder'; import EditIcon from 'react-icons/lib/go/pencil'; import DeleteIcon from 'react-icons/lib/go/trashcan'; +import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder'; import UploadFileIcon from 'react-icons/lib/md/file-upload'; - -import theme from '@codesandbox/common/lib/theme'; +import AddFileIcon from 'react-icons/lib/md/insert-drive-file'; import { EntryContainer } from '../../../elements'; +import EditIcons from './EditIcons'; +import { NotSyncedIconWithMargin, Right } from './elements'; +import EntryIcons from './EntryIcons'; import EntryTitle from './EntryTitle'; import EntryTitleInput from './EntryTitleInput'; -import EntryIcons from './EntryIcons'; -import EditIcons from './EditIcons'; - -import { Right, NotSyncedIconWithMargin } from './elements'; interface IEntryProps { renameValidator: (id: string, title: string) => boolean; @@ -97,9 +94,8 @@ const Entry: React.FC = ({ const deleteAction = () => deleteEntry ? deleteEntry(shortid, title) : false; - const discardModuleChangesAction = discardModuleChanges - ? discardModuleChanges(shortid) - : false; + const discardModuleChangesAction = () => + discardModuleChanges ? discardModuleChanges(shortid) : false; const handleRename = (newTitle: string, force: boolean) => { if (newTitle === title) { diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js index 628c93098b4..ad2a98f05a8 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/elements.js @@ -1,5 +1,5 @@ -import styled, { css } from 'styled-components'; import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect'; +import styled, { css } from 'styled-components'; export const HeaderTitle = styled.th` font-weight: 400; @@ -11,10 +11,7 @@ export const HeaderTitle = styled.th` export const Buttons = styled.div` margin: 0.5rem 0; display: flex; - - > *:not(:last-child) { - margin-right: 0.5rem; - } + justify-content: space-between; `; export const Table = styled.table` diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js index e142affb65d..4416c2f01bb 100644 --- a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js +++ b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js @@ -1,27 +1,29 @@ -import React, { Component } from 'react'; -import { sortBy, isEmpty } from 'lodash-es'; -import filesize from 'filesize'; import { Button } from '@codesandbox/common/lib/components/Button'; -import DeleteFileButton from '../DeleteFileButton'; +import filesize from 'filesize'; +import { sortBy } from 'lodash-es'; +import React, { Component } from 'react'; + import AddFileToSandboxButton from '../AddFileToSandboxButton'; +import DeleteFileButton from '../DeleteFileButton'; import { - HeaderTitle, - Table, - StatBody, Body, - FileRow, - CheckBox, Buttons, + CheckBox, + FileRow, + HeaderTitle, + StatBody, + Table, } from './elements'; const someSelected = obj => - Object.keys(obj).filter(key => obj[key] === true) && !isEmpty(obj); + Object.keys(obj).filter(key => obj[key] === true).length; class FilesList extends Component { state = {}; toggleCheckbox = (e, id) => { this.setState(state => ({ + ...state, [id]: !state[id], })); }; @@ -44,19 +46,22 @@ class FilesList extends Component { } = this.props; return (
- {someSelected(this.state) ? ( - - - - - ) : null} + + + +