fix issues with storage management and Entry bug (codesandbox#2828)

Author: christianalfoni

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

@@ -242,60 +242,64 @@ export const gotUploadedFiles: AsyncAction<string> = 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,
     directoryShortid: null,
     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;

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<IEntryProps> = ({
   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) {

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`

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 (
       <div css={{ margin: '0 2rem' }}>
-        {someSelected(this.state) ? (
-          <Buttons>
-            <Button small onClick={() => deleteFiles(Object.keys(this.state))}>
-              Delete all selected
-            </Button>
-            <Button
-              small
-              onClick={() => addFilesToSandbox(this.getSelection())}
-            >
-              Add all selected to project
-            </Button>
-          </Buttons>
-        ) : null}
+        <Buttons>
+          <Button
+            disabled={!someSelected(this.state)}
+            small
+            onClick={() => addFilesToSandbox(this.getSelection())}
+          >
+            Add all selected to project
+          </Button>
+          <Button
+            disabled={!someSelected(this.state)}
+            small
+            onClick={() => deleteFiles(Object.keys(this.state))}
+          >
+            Delete all selected
+          </Button>
+        </Buttons>
         <Table>
           <thead>
             <tr