fix: renaming folder in sidebar doesnt update Route (codesandbox#2956)

* fix: renaming route in sidebar

* fix: types

* Fix typings

* Add an ignore

Author: jyash97

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

@@ -7,6 +7,8 @@ import TrashIcon from 'react-icons/lib/md/delete';
 import { Mutation } from 'react-apollo';
 import { DropTarget, DragSource } from 'react-dnd';
 import track from '@codesandbox/common/lib/utils/analytics';
+import { withRouter } from 'react-router-dom';
+import { History } from 'history';
 import { client } from 'app/graphql/client';
 
 import { Animate as ReactShow } from 'react-show';
@@ -60,6 +62,8 @@ type Props = {
   isDragging?: boolean;
   connectDropTarget?: any;
   connectDragSource?: any;
+
+  history?: History;
 };
 
 type State = {
@@ -138,6 +142,7 @@ class FolderEntry extends React.Component<Props, State> {
       onSelect,
       currentPath,
       currentTeamId,
+      history,
     } = this.props;
 
     const children = getDirectChildren(path, folders);
@@ -283,6 +288,14 @@ class FolderEntry extends React.Component<Props, State> {
                             },
                             variables,
                           });
+                          const modifiedPath = path
+                            .split('/')
+                            .slice(0, -1)
+                            .join('/');
+
+                          history.replace(
+                            `${basePath}${modifiedPath}/${input.value}`
+                          );
                         },
                       });
 
@@ -392,8 +405,11 @@ const collectSource = (connect, monitor) => ({
   isDragging: monitor.isDragging(),
 });
 
-DropFolderEntry = DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
-  DragSource('FOLDER', entrySource, collectSource)(FolderEntry)
-) as any;
+DropFolderEntry = (withRouter(
+  // @ts-ignore Don't know how to mix dnd and react-router with right typings
+  DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
+    DragSource('FOLDER', entrySource, collectSource)(FolderEntry)
+  )
+) as unknown) as React.ComponentClass<Props, State>;
 
 export { DropFolderEntry };