🔨 Switch StorageManagementModal to use useOvermind

Author: MichaelDeBoey

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 { INormalizedModules } from 'codesandbox-import-util-types';
+import denormalize from 'codesandbox-import-utils/lib/utils/files/denormalize';
+
 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,
@@ -405,10 +406,10 @@ export const gotUploadedFiles: AsyncAction<string> = async (
   }
 };
 
-export const addedFileToSandbox: AsyncAction<{
-  url: string;
-  name: string;
-}> = withOwnedSandbox(async ({ actions, effects, state }, { name, url }) => {
+export const addedFileToSandbox: AsyncAction<Pick<
+  UploadFile,
+  'name' | 'url'
+>> = withOwnedSandbox(async ({ actions, effects, state }, { name, url }) => {
   if (!state.editor.currentSandbox) {
     return;
   }
@@ -423,25 +424,26 @@ export const addedFileToSandbox: AsyncAction<{
   effects.executor.updateFiles(state.editor.currentSandbox);
 });
 
-export const deletedUploadedFile: AsyncAction<{
-  id: string;
-}> = withOwnedSandbox(async ({ state, actions, effects }, { id }) => {
-  if (!state.uploadedFiles) {
-    return;
-  }
-  const index = state.uploadedFiles.findIndex(file => file.id === id);
-  const removedFiles = state.uploadedFiles.splice(index, 1);
+export const deletedUploadedFile: AsyncAction<string> = withOwnedSandbox(
+  async ({ actions, effects, state }, id) => {
+    if (!state.uploadedFiles) {
+      return;
+    }
 
-  try {
-    await effects.api.deleteUploadedFile(id);
-  } catch (error) {
-    state.uploadedFiles.splice(index, 0, ...removedFiles);
-    actions.internal.handleError({
-      message: 'Unable to delete uploaded file',
-      error,
-    });
+    const index = state.uploadedFiles.findIndex(file => file.id === id);
+    const removedFiles = state.uploadedFiles.splice(index, 1);
+
+    try {
+      await effects.api.deleteUploadedFile(id);
+    } catch (error) {
+      state.uploadedFiles.splice(index, 0, ...removedFiles);
+      actions.internal.handleError({
+        message: 'Unable to delete uploaded file',
+        error,
+      });
+    }
   }
-});
+);
 
 export const filesUploaded: AsyncAction<{
   files: { [k: string]: { dataURI: string; type: string } };

packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js

@@ -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<UploadFile, 'name' | 'url'>;
+export const AddFileToSandboxButton: FunctionComponent<Props> = ({
+  name,
+  url,
+}) => {
+  const {
+    actions: {
+      files: { addedFileToSandbox },
+    },
+    state: {
+      editor: { currentSandbox },
+    },
+  } = useOvermind();
+
+  return (
+    <Button
+      disabled={!currentSandbox}
+      Icon={AddIcon}
+      onClick={() => addedFileToSandbox({ name, url })}
+      tooltip="Add file to sandbox"
+    />
+  );
+};

packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js

@@ -0,0 +1,20 @@
+import TooltipBase from '@codesandbox/common/lib/components/Tooltip';
+import styled from 'styled-components';
+
+export const Tooltip = styled(TooltipBase)`
+  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;
+  }
+`;

packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js

@@ -0,0 +1,21 @@
+import React, { ComponentType, FunctionComponent, HTMLAttributes } from 'react';
+
+import { Tooltip } from './elements';
+
+type Props = {
+  disabled?: boolean;
+  Icon: ComponentType;
+  tooltip: string;
+} & Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export const Button: FunctionComponent<Props> = ({
+  disabled = false,
+  Icon,
+  onClick,
+  tooltip,
+}) => (
+  <Tooltip content={tooltip} isEnabled={!disabled}>
+    <button type="button" onClick={onClick}>
+      <Icon />
+    </button>
+  </Tooltip>
+);

packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js

@@ -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<UploadFile, 'id'>;
+export const DeleteFileButton: FunctionComponent<Props> = ({ id }) => {
+  const {
+    actions: {
+      files: { deletedUploadedFile },
+    },
+  } = useOvermind();
+
+  return (
+    <Button
+      Icon={DeleteIcon}
+      onClick={() => deletedUploadedFile(id)}
+      tooltip="Delete File"
+    />
+  );
+};