🔨 Switch StorageManagementModal to use useOvermind (#3438)

* 🔨 Switch StorageManagementModal to use useOvermind

* fix buttons

* only show delete in sandbox

* Cleanup

Co-authored-by: Sara Vieira <[email protected]>

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 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<string> = async (
   }
 };
 
-export const addedFileToSandbox: AsyncAction<{
-  url: string;
-  name: string;
-}> = withOwnedSandbox(
+export const addedFileToSandbox: AsyncAction<Pick<
+  UploadFile,
+  'name' | 'url'
+>> = 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<string> = async (
+  { actions, effects, state },
+  id
+) => {
   if (!state.uploadedFiles) {
     return;
   }

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

@@ -0,0 +1,35 @@
+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();
+
+  if (!currentSandbox) {
+    return null;
+  }
+
+  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,38 @@
+import TooltipBase from '@codesandbox/common/lib/components/Tooltip';
+import styled from 'styled-components';
+
+export 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;
+  }
+`;
+
+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,20 @@
+import React, { ComponentType, FunctionComponent, HTMLAttributes } from 'react';
+import { ButtonComponent, 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}>
+    <ButtonComponent onClick={onClick} type="button">
+      <Icon />
+    </ButtonComponent>
+  </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"
+    />
+  );
+};