Fix drag and drop in dashboard (codesandbox#2433)

* Fix drag and drop in dashboard

* Actually fix drag

Author: christianalfoni

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx

@@ -6,7 +6,6 @@ import RenameIcon from 'react-icons/lib/md/mode-edit';
 import TrashIcon from 'react-icons/lib/md/delete';
 import { Mutation } from 'react-apollo';
 import { DropTarget, DragSource } from 'react-dnd';
-import { inject, observer } from 'app/componentConnectors';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { client } from 'app/graphql/client';
 
@@ -390,10 +389,8 @@ const collectSource = (connect, monitor) => ({
   isDragging: monitor.isDragging(),
 });
 
-DropFolderEntry = inject('store', 'signals')(
-  DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
-    DragSource('FOLDER', entrySource, collectSource)(observer(FolderEntry))
-  )
+DropFolderEntry = DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
+  DragSource('FOLDER', entrySource, collectSource)(FolderEntry)
 ) as any;
 
 export { DropFolderEntry };

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/folder-drop-target.js

@@ -8,9 +8,7 @@ import {
 } from '../../queries';
 
 function addSandboxesToCollection(props, item) {
-  const { path, teamId, store } = props;
-
-  const selectedSandboxes = store.dashboard.selectedSandboxes;
+  const { path, teamId, selectedSandboxes } = props;
 
   client.mutate({
     mutation: ADD_SANDBOXES_TO_FOLDER_MUTATION,

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { DropTarget } from 'react-dnd';
 import AddFolderIcon from 'react-icons/lib/md/create-new-folder';
-import { inject, observer } from 'app/componentConnectors';
 import { Query } from 'react-apollo';
 import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
 import { DelayedAnimation } from 'app/components/DelayedAnimation';
@@ -40,6 +39,7 @@ class SandboxesItemComponent extends React.Component {
       onSelect,
       currentPath,
       currentTeamId,
+      selectedSandboxes,
     } = this.props;
 
     const basePath = teamId
@@ -104,6 +104,7 @@ class SandboxesItemComponent extends React.Component {
                       return (
                         <DropFolderEntry
                           key={path}
+                          selectedSandboxes={selectedSandboxes}
                           basePath={basePath}
                           teamId={teamId}
                           path={path}
@@ -141,8 +142,8 @@ class SandboxesItemComponent extends React.Component {
   }
 }
 
-export const SandboxesItem = inject('store', 'signals')(
-  DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
-    withRouter(observer(SandboxesItemComponent))
-  )
-);
+export const SandboxesItem = DropTarget(
+  ['SANDBOX', 'FOLDER'],
+  entryTarget,
+  collectTarget
+)(withRouter(SandboxesItemComponent));

packages/app/src/app/pages/Dashboard/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import history from 'app/utils/history';
-import { inject, observer } from 'app/componentConnectors';
+import { inject, observer, Observer } from 'app/componentConnectors';
 import { Route, withRouter } from 'react-router-dom';
 import { Query } from 'react-apollo';
 import Input from '@codesandbox/common/lib/components/Input';
@@ -59,60 +59,74 @@ class Sidebar extends React.Component {
               : undefined;
 
             return (
-              <React.Fragment>
-                <Items style={{ marginBottom: '1rem' }}>
-                  <Item
-                    Icon={DashboardIcon}
-                    path="/dashboard/recent"
-                    name="Overview"
-                  />
-
-                  <SandboxesItem
-                    currentPath={path}
-                    currentTeamId={currentTeamId}
-                    openByDefault
-                  />
-
-                  <TemplateItem currentPath={path} />
-
-                  <TrashItem currentPath={path} />
-                </Items>
-
-                <Query query={TEAMS_QUERY}>
-                  {({ loading, data, error }) => {
-                    if (loading) {
-                      return null;
-                    }
-
-                    if (error) {
-                      return null;
-                    }
-
-                    const teams = data.me.teams;
-
-                    return teams.map(team => (
-                      <div key={team.id}>
-                        <Items>
-                          <CategoryHeader>{team.name}</CategoryHeader>
-                          <Item
-                            Icon={PeopleIcon}
-                            path={teamOverviewUrl(team.id)}
-                            name="Team Overview"
-                          />
-
-                          <SandboxesItem
-                            currentPath={path}
-                            currentTeamId={currentTeamId}
-                            teamId={team.id}
-                          />
-
-                          <TemplateItem currentPath={path} teamId={team.id} />
-                        </Items>
-                      </div>
-                    ));
-                  }}
-                </Query>
-              </React.Fragment>
+              <Observer>
+                {({ store: innerStore }) => (
+                  <React.Fragment>
+                    <Items style={{ marginBottom: '1rem' }}>
+                      <Item
+                        Icon={DashboardIcon}
+                        path="/dashboard/recent"
+                        name="Overview"
+                      />
+
+                      <SandboxesItem
+                        selectedSandboxes={
+                          innerStore.dashboard.selectedSandboxes
+                        }
+                        currentPath={path}
+                        currentTeamId={currentTeamId}
+                        openByDefault
+                      />
+
+                      <TemplateItem currentPath={path} />
+
+                      <TrashItem currentPath={path} />
+                    </Items>
+
+                    <Query query={TEAMS_QUERY}>
+                      {({ loading, data, error }) => {
+                        if (loading) {
+                          return null;
+                        }
+
+                        if (error) {
+                          return null;
+                        }
+
+                        const teams = data.me.teams;
+
+                        return teams.map(team => (
+                          <div key={team.id}>
+                            <Items>
+                              <CategoryHeader>{team.name}</CategoryHeader>
+                              <Item
+                                Icon={PeopleIcon}
+                                path={teamOverviewUrl(team.id)}
+                                name="Team Overview"
+                              />
+
+                              <SandboxesItem
+                                whatTheFuck
+                                selectedSandboxes={
+                                  store.dashboard.selectedSandboxes
+                                }
+                                currentPath={path}
+                                currentTeamId={currentTeamId}
+                                teamId={team.id}
+                              />
+
+                              <TemplateItem
+                                currentPath={path}
+                                teamId={team.id}
+                              />
+                            </Items>
+                          </div>
+                        ));
+                      }}
+                    </Query>
+                  </React.Fragment>
+                )}
+              </Observer>
             );
           }}
         </Route>