Merge branch 'refactor/editor-files' of https://github.com/ivandevp/codesandbox-client into ivandevp-refactor/editor-files

Author: SaraVieira

.all-contributorsrc

@@ -1395,6 +1395,15 @@
         "code"
       ]
     },
+    {
+    "login": "ivandevp",
+      "name": "Ivan Medina",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/9284690?v=4",
+      "profile": "https://twitter.com/ivandevp",
+            "contributions": [
+        "code"
+      ]
+      },
     {
       "login": "Gobinath-Manokaran",
       "name": "Gobinath-Manokaran",

README.md

@@ -232,6 +232,8 @@ Thanks goes to these wonderful people
   </tr>
   <tr>
     <td align="center"><a href="http://hetpatel33.github.io"><img src="https://avatars0.githubusercontent.com/u/13877514?v=4" width="100px;" alt="Het Patel"/><br /><sub><b>Het Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=hetpatel33" title="Code">💻</a></td>
+    <td align="center"><a href="https://twitter.com/ivandevp"><img src="https://avatars3.githubusercontent.com/u/9284690?v=4" width="100px;" alt="Ivan Medina"/><br /><sub><b>Ivan Medina</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=ivandevp" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/milap1296"><img src="https://avatars2.githubusercontent.com/u/19545730?v=4" width="100px;" alt="milap1296"/><br /><sub><b>milap1296</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=milap1296" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Gobinath-Manokaran"><img src="https://avatars2.githubusercontent.com/u/6711914?v=4" width="100px;" alt="Gobinath-Manokaran"/><br /><sub><b>Gobinath-Manokaran</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=Gobinath-Manokaran" title="Code">💻</a></td>
     <td align="center"><a href="https://armujahid.me"><img src="https://avatars1.githubusercontent.com/u/3725386?v=4" width="100px;" alt="Abdul Rauf"/><br /><sub><b>Abdul Rauf</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Code">💻</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/milap1296"><img src="https://avatars2.githubusercontent.com/u/19545730?v=4" width="100px;" alt="milap1296"/><br /><sub><b>milap1296</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=milap1296" title="Code">💻</a></td>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.js

@@ -0,0 +1,64 @@
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import { useOvermind } from 'app/overmind';
+import React from 'react';
+
+import EditIcons from './DirectoryEntry/Entry/EditIcons';
+import DirectoryEntry from './DirectoryEntry/index';
+
+interface IFilesProps {
+  setEditActions: React.Dispatch<any>;
+}
+
+export const Files: React.FC<IFilesProps> = ({ setEditActions }) => {
+  const {
+    state: {
+      editor: { currentSandbox: sandbox },
+      isLoggedIn,
+    },
+    actions: {
+      editor: { createZipClicked },
+    },
+  } = useOvermind();
+
+  const _getModulePath = moduleId => {
+    try {
+      return getModulePath(sandbox.modules, sandbox.directories, moduleId);
+    } catch (e) {
+      return '';
+    }
+  };
+
+  return (
+    <DirectoryEntry
+      root
+      getModulePath={_getModulePath}
+      title={sandbox.title || 'Project'}
+      initializeProperties={({
+        onCreateModuleClick,
+        onCreateDirectoryClick,
+        onUploadFileClick,
+      }) => {
+        if (setEditActions) {
+          setEditActions(
+            // @ts-ignore
+            <EditIcons
+              hovering
+              forceShow={window.__isTouch}
+              onCreateFile={onCreateModuleClick}
+              onCreateDirectory={onCreateDirectoryClick}
+              onDownload={createZipClicked}
+              onUploadFile={
+                isLoggedIn && sandbox.privacy === 0
+                  ? onUploadFileClick
+                  : undefined
+              }
+            />
+          );
+        }
+      }}
+      depth={-1}
+      id={null}
+      shortid={null}
+    />
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { useOvermind } from 'app/overmind';
-import Files from '../../Files';
+import { Files } from '../../Files';
 import { Dependencies } from '../../Dependencies';
 import { WorkspaceItem } from '../../WorkspaceItem';
 import { ItemTitle } from '../../elements';

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { useOvermind } from 'app/overmind';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { Dependencies } from '../../Dependencies';
-import Files from '../../Files';
 import { SandboxInfo } from './SandboxInfo';
 import { BookmarkTemplateButton } from '../../Project/BookmarkTemplateButton';
+import { Files } from '../../Files';
 import { WorkspaceItem } from '../../WorkspaceItem';
 
 export const NotOwnedSandboxInfo = () => {