refactor DirectoryEntry (codesandbox#3199)

Author: SaraVieira

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

@@ -36,11 +36,10 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
   renameValidator,
 }) => {
   const {
-    state: {
-      editor: { currentSandbox, mainModule, currentModuleShortid },
-    },
+    state: { isLoggedIn, editor: editorState },
     actions: { files, editor },
   } = useOvermind();
+  const { currentSandbox, mainModule, currentModuleShortid } = editorState;
 
   const {
     id: sandboxId,
@@ -65,6 +64,7 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
             siblings={[...directories, ...modules]}
             depth={depth + 1}
             signals={{ files, editor }}
+            store={{ editor: editorState, isLoggedIn }}
             id={dir.id}
             shortid={dir.shortid}
             title={dir.title}

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

@@ -1,4 +1,3 @@
-import { inject, observer } from 'app/componentConnectors';
 import { reaction } from 'mobx';
 import React from 'react';
 import { DropTarget } from 'react-dnd';
@@ -400,13 +399,8 @@ function collectTarget(connectMonitor, monitor) {
   };
 }
 
-export default inject(
-  'signals',
-  'store'
-)(
-  DropTarget(
-    ['ENTRY', NativeTypes.FILE],
-    entryTarget,
-    collectTarget
-  )(observer(DirectoryEntry))
-);
+export default DropTarget(
+  ['ENTRY', NativeTypes.FILE],
+  entryTarget,
+  collectTarget
+)(DirectoryEntry);

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

@@ -11,15 +11,12 @@ interface IFilesProps {
 
 export const Files: React.FC<IFilesProps> = ({ setEditActions }) => {
   const {
-    state: {
-      editor: { currentSandbox: sandbox },
-      isLoggedIn,
-    },
-    actions: {
-      editor: { createZipClicked },
-    },
+    state: { editor: editorState, isLoggedIn },
+    actions: { editor, files },
   } = useOvermind();
 
+  const { currentSandbox: sandbox } = editorState;
+
   const _getModulePath = moduleId => {
     try {
       return getModulePath(sandbox.modules, sandbox.directories, moduleId);
@@ -33,6 +30,8 @@ export const Files: React.FC<IFilesProps> = ({ setEditActions }) => {
       root
       getModulePath={_getModulePath}
       title={sandbox.title || 'Project'}
+      signals={{ files, editor }}
+      store={{ editor: editorState, isLoggedIn }}
       initializeProperties={({
         onCreateModuleClick,
         onCreateDirectoryClick,
@@ -46,7 +45,7 @@ export const Files: React.FC<IFilesProps> = ({ setEditActions }) => {
               forceShow={window.__isTouch}
               onCreateFile={onCreateModuleClick}
               onCreateDirectory={onCreateDirectoryClick}
-              onDownload={createZipClicked}
+              onDownload={editor.createZipClicked}
               onUploadFile={
                 isLoggedIn && sandbox.privacy === 0
                   ? onUploadFileClick