🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/common/Modals/index.js

packages/app/src/app/overmind/actions.ts

@@ -78,6 +78,7 @@ type ModalName =
   | 'searchDependencies'
   | 'signInForTemplates'
   | 'userSurvey';
+
 export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
   { state, effects },
   { modal, message }

packages/app/src/app/pages/common/Modals/index.js → packages/app/src/app/pages/common/Modals/index.tsx

@@ -1,11 +1,11 @@
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
-import { inject, observer } from 'app/componentConnectors';
 import Modal from 'app/components/Modal';
 import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
 import Loadable from 'app/utils/Loadable';
 import { templateColor } from 'app/utils/template-color';
-import React, { Component } from 'react';
+import React, { useReducer, useEffect, useCallback } from 'react';
+import { useOvermind } from 'app/overmind';
 import { ThemeProvider } from 'styled-components';
 
 import CommitModal from './CommitModal';
@@ -135,68 +135,70 @@ const modals = {
   },
 };
 
-class Modals extends Component {
-  state = {
+const Modals: React.FC = () => {
+  const {
+    actions,
+    state: {
+      editor: { currentSandbox },
+      preferences: {
+        settings: { customVSCodeTheme },
+      },
+      currentModal,
+    },
+  } = useOvermind();
+
+  const [state, setState] = useReducer((s, a) => ({ ...s, ...a }), {
     theme: {
       colors: {},
       vscodeTheme: codesandbox,
     },
-    customVSCodeTheme: this.props.store.preferences.settings.customVSCodeTheme,
-  };
-
-  componentDidMount() {
-    this.loadTheme();
-  }
-
-  componentDidUpdate() {
-    if (
-      this.props.store.preferences.settings.customVSCodeTheme !==
-      this.state.customVSCodeTheme
-    ) {
-      this.loadTheme();
-    }
-  }
-
-  loadTheme = async () => {
-    const { customVSCodeTheme } = this.props.store.preferences.settings;
+    customVSCodeTheme,
+  });
 
+  const loadTheme = useCallback(async () => {
     try {
       const theme = await getVSCodeTheme('', customVSCodeTheme);
-      this.setState({ theme, customVSCodeTheme });
+      setState({ theme, customVSCodeTheme });
     } catch (e) {
       console.error(e);
     }
-  };
+  }, [customVSCodeTheme]);
 
-  render() {
-    const { signals, store } = this.props;
-    const sandbox = store.editor.currentSandbox;
-    const templateDef = sandbox && getTemplateDefinition(sandbox.template);
+  useEffect(() => {
+    loadTheme();
+  }, [loadTheme]);
 
-    const modal = store.currentModal && modals[store.currentModal];
+  useEffect(() => {
+    if (customVSCodeTheme !== state.customVSCodeTheme) {
+      loadTheme();
+    }
+  });
 
-    return (
-      <ThemeProvider
-        theme={{
-          templateColor: templateColor(sandbox, templateDef),
-          templateBackgroundColor: templateDef && templateDef.backgroundColor,
-          ...this.state.theme,
-        }}
-      >
-        <Modal
-          isOpen={Boolean(modal)}
-          width={modal && modal.width}
-          onClose={isKeyDown => signals.modalClosed({ isKeyDown })}
-        >
-          {modal
-            ? React.createElement(modal.Component, {
-                closeModal: () => signals.modalClosed({ isKeyDown: false }),
-              })
-            : null}
-        </Modal>
-      </ThemeProvider>
-    );
-  }
-}
+  const sandbox = currentSandbox;
+  const templateDef = sandbox && getTemplateDefinition(sandbox.template);
+
+  const modal = currentModal && modals[currentModal];
 
-export default inject('store', 'signals')(observer(Modals));
+  return (
+    <ThemeProvider
+      theme={{
+        templateColor: templateColor(sandbox, templateDef),
+        templateBackgroundColor: templateDef && templateDef.backgroundColor,
+        ...state.theme,
+      }}
+    >
+      <Modal
+        isOpen={Boolean(modal)}
+        width={modal && modal.width}
+        onClose={isKeyDown => actions.modalClosed()}
+      >
+        {modal
+          ? React.createElement(modal.Component, {
+              closeModal: () => actions.modalClosed(),
+            })
+          : null}
+      </Modal>
+    </ThemeProvider>
+  );
+};
+export { Modals };

packages/app/src/app/pages/index.tsx

@@ -11,7 +11,7 @@ import Loadable from 'app/utils/Loadable';
 import { useOvermind } from 'app/overmind';
 import { ErrorBoundary } from './common/ErrorBoundary';
 import HTML5Backend from './common/HTML5BackendWithFolderSupport';
-import Modals from './common/Modals';
+import { Modals } from './common/Modals';
 import Sandbox from './Sandbox';
 import { NewSandbox } from './NewSandbox';
 import Dashboard from './Dashboard';

packages/app/src/app/utils/template-color.ts

@@ -1,7 +1,11 @@
 import { decorateSelector } from '@codesandbox/common/lib/utils/decorate-selector';
 import { Sandbox, Template } from '@codesandbox/common/lib/types';
+import TEMPLATE from '@codesandbox/common/lib/templates/template';
 
-export const templateColor = (sandbox: Sandbox, templateDef: Template) => {
+export const templateColor = (
+  sandbox: Sandbox,
+  templateDef: Template | TEMPLATE
+) => {
   if (sandbox && sandbox.customTemplate) {
     return decorateSelector(() => sandbox.customTemplate.color);
   }