Fix nested dashboard and wrong usage of mobx (codesandbox#2491)

Author: christianalfoni

packages/app/src/app/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

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

@@ -43,6 +43,7 @@ type Props = {
   url: string;
   folders: { path: string }[];
   foldersByPath: { [path: string]: string };
+  selectedSandboxes: string[];
   depth: number;
   toToggle?: boolean;
   allowCreate?: boolean;
@@ -122,6 +123,7 @@ class FolderEntry extends React.Component<Props, State> {
       path,
       url,
       folders,
+      selectedSandboxes,
       foldersByPath,
       depth,
       isOver,
@@ -343,6 +345,7 @@ class FolderEntry extends React.Component<Props, State> {
                 return (
                   <DropFolderEntry
                     path={childPath}
+                    selectedSandboxes={selectedSandboxes}
                     url={childUrl}
                     basePath={basePath}
                     teamId={teamId}

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

@@ -1,10 +1,11 @@
+import { basename, join } from 'path';
+
 import { client } from 'app/graphql/client';
-import { join, basename } from 'path';
 
 import {
   ADD_SANDBOXES_TO_FOLDER_MUTATION,
-  RENAME_FOLDER_MUTATION,
   PATHED_SANDBOXES_CONTENT_QUERY,
+  RENAME_FOLDER_MUTATION,
 } from '../../queries';
 
 function addSandboxesToCollection(props, item) {
@@ -15,9 +16,7 @@ function addSandboxesToCollection(props, item) {
     variables: {
       collectionPath: path || '/',
       teamId,
-      sandboxIds: selectedSandboxes.toJS
-        ? selectedSandboxes.toJS()
-        : selectedSandboxes,
+      sandboxIds: selectedSandboxes,
     },
     optimisticResponse: {
       __typename: 'Mutation',

packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx

@@ -1,25 +1,24 @@
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved,import/no-webpack-loader-syntax
 import { Button } from '@codesandbox/common/lib/components/Button';
 import ProgressButton from '@codesandbox/common/lib/components/ProgressButton';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import {
   dashboardUrl,
   patronUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { toJS } from 'mobx';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import { hooksObserver, inject } from 'app/componentConnectors';
+import { LikeHeart } from 'app/pages/common/LikeHeart';
+import { SignInButton } from 'app/pages/common/SignInButton';
+import { UserMenu } from 'app/pages/common/UserMenu';
+import { saveAllModules } from 'app/store/modules/editor/utils';
+import { json } from 'overmind';
 import * as React from 'react';
 import PlusIcon from 'react-icons/lib/go/plus';
 import Fork from 'react-icons/lib/go/repo-forked';
 import SaveIcon from 'react-icons/lib/md/save';
 import SettingsIcon from 'react-icons/lib/md/settings';
 import ShareIcon from 'react-icons/lib/md/share';
-
-import { LikeHeart } from 'app/pages/common/LikeHeart';
-import { SignInButton } from 'app/pages/common/SignInButton';
-import { UserMenu } from 'app/pages/common/UserMenu';
-import { saveAllModules } from 'app/store/modules/editor/utils';
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved,import/no-webpack-loader-syntax
 import PatronBadge from '-!svg-react-loader!@codesandbox/common/lib/utils/badges/svg/patron-4.svg';
 
 import { Action } from './Buttons/Action';
@@ -193,7 +192,7 @@ const HeaderComponent = ({ zenMode, store, signals }: Props) => {
           <CollectionInfo
             isLoggedIn={store.isLoggedIn}
             // Passing a clone of observable requires it to be called in render of observer
-            sandbox={toJS(sandbox)}
+            sandbox={json(sandbox)}
           />
         </Centered>
       )}