Refactor|Overmind: Refactor MoveSandboxFolderModal to use overmind (codesandbox#2751)

Author: MihirGH

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useOvermind } from 'app/overmind';
 import { basename } from 'path';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { Button } from '@codesandbox/common/lib/components/Button';
@@ -11,99 +11,88 @@ import { Container } from '../elements';
 import { Block, CancelButton } from './elements';
 import { addSandboxesToFolder } from '../../../Dashboard/queries';
 
-class MoveSandboxFolderModal extends React.Component {
-  state = {
-    loading: false,
-    error: undefined,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const sandbox = props.store.editor.currentSandbox;
-    const { collection } = sandbox;
-
-    this.state = {
-      teamId: sandbox.team ? sandbox.team.id || undefined : undefined,
-      path: collection ? collection.path : '/',
-    };
-  }
-
-  onSelect = ({ teamId, path }) => {
-    this.setState({ teamId, path });
-  };
-
-  handleMove = () => {
-    this.setState({ loading: true, error: undefined }, () => {
-      addSandboxesToFolder(
-        [this.props.store.editor.currentSandbox.id],
-        this.state.path,
-        this.state.teamId
-      )
-        .then(() => {
-          this.props.signals.refetchSandboxInfo();
-
-          this.setState({ loading: false });
-          this.props.signals.modalClosed();
-
-          track('Move Sandbox From Editor');
-        })
-        .catch(e => {
-          this.setState({ error: e.message, loading: false });
-        });
-    });
-  };
-
-  render() {
-    const { path, teamId } = this.state;
-    const { signals } = this.props;
-
-    return (
-      <div>
-        <Block>Move to Folder</Block>
-        <Container css={{ maxHeight: 400, overflow: 'auto' }}>
-          <DirectoryPicker
-            onSelect={this.onSelect}
-            currentTeamId={teamId}
-            currentPath={path}
-          />
-        </Container>
-
-        {this.state.error}
-
-        <Block right>
-          <CancelButton
-            onClick={() => {
-              signals.modalClosed();
-            }}
-          >
-            Cancel
-          </CancelButton>
-
-          <Button
-            onClick={this.handleMove}
-            css={{ display: 'inline-flex', alignItems: 'center' }}
-            small
-            disabled={this.state.loading}
-          >
-            {this.state.loading ? (
-              'Moving Sandbox...'
-            ) : (
-              <>
-                Move to{' '}
-                {path !== '/'
-                  ? basename(path)
-                  : `${teamId ? 'Our' : 'My'} Sandboxes`}
-                <ChevronRight
-                  css={{ marginRight: '-.25rem', marginLeft: '.25rem' }}
-                />
-              </>
-            )}
-          </Button>
-        </Block>
-      </div>
-    );
-  }
-}
-
-export default inject('store', 'signals')(observer(MoveSandboxFolderModal));
+const MoveSandboxFolderModal = () => {
+  const {
+    state: {
+      editor: { currentSandbox: sandbox },
+    },
+    actions: { refetchSandboxInfo, modalClosed },
+  } = useOvermind();
+  const { collection } = sandbox;
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(undefined);
+  const [teamId, setTeamId] = useState(
+    sandbox.team ? sandbox.team.id || undefined : undefined
+  );
+  const [path, setPath] = useState(collection ? collection.path : '/');
+
+  const onSelect = useCallback(({ teamId: newTeamId, path: newPath }) => {
+    setTeamId(newTeamId);
+    setPath(newPath);
+  }, []);
+
+  const handleMove = useCallback(() => {
+    setLoading(true);
+    setError(undefined);
+  }, []);
+
+  useEffect(() => {
+    if (!loading) return;
+    addSandboxesToFolder([sandbox.id], path, teamId)
+      .then(() => {
+        refetchSandboxInfo();
+
+        setLoading(false);
+        modalClosed();
+
+        track('Move Sandbox From Editor');
+      })
+      .catch(e => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, [loading, path, teamId, sandbox, refetchSandboxInfo, modalClosed]);
+
+  return (
+    <div>
+      <Block>Move to Folder</Block>
+      <Container css={{ maxHeight: 400, overflow: 'auto' }}>
+        <DirectoryPicker
+          onSelect={onSelect}
+          currentTeamId={teamId}
+          currentPath={path}
+        />
+      </Container>
+
+      {error}
+
+      <Block right>
+        <CancelButton onClick={modalClosed}>Cancel</CancelButton>
+
+        <Button
+          onClick={handleMove}
+          css={{ display: 'inline-flex', alignItems: 'center' }}
+          small
+          disabled={loading}
+        >
+          {loading ? (
+            'Moving Sandbox...'
+          ) : (
+            <>
+              Move to{' '}
+              {path !== '/'
+                ? basename(path)
+                : `${teamId ? 'Our' : 'My'} Sandboxes`}
+              <ChevronRight
+                css={{ marginRight: '-.25rem', marginLeft: '.25rem' }}
+              />
+            </>
+          )}
+        </Button>
+      </Block>
+    </div>
+  );
+};
+
+export default MoveSandboxFolderModal;