🔨 Switch SandboxConfig to use useOvermind (#2562)

* 🔨 Switch SandboxConfig to use useOvermind

* Fix types

Author: MichaelDeBoey

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

@@ -64,6 +64,7 @@ export const connectionChanged: Action<boolean> = ({ state }, connected) => {
 
 type ModalName =
   | 'deleteDeployment'
+  | 'deleteSandbox'
   | 'feedback'
   | 'forkServerModal'
   | 'liveSessionEnded'

packages/app/src/app/overmind/effects/api/index.ts

@@ -451,7 +451,7 @@ export default {
   },
   createTemplate(
     sandboxId: string,
-    template: CustomTemplate
+    template: { color: string; description: string; title: string }
   ): Promise<CustomTemplate> {
     return api
       .post<{ template: CustomTemplate }>(`/sandboxes/${sandboxId}/templates`, {

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

@@ -257,8 +257,10 @@ export const editTemplate: AsyncAction<CustomTemplate> = async (
 };
 
 export const addedTemplate: AsyncAction<{
-  template: CustomTemplate;
-}> = async ({ state, actions, effects }, { template }) => {
+  color: string;
+  description: string;
+  title: string;
+}> = async ({ state, actions, effects }, template) => {
   effects.analytics.track('Template - Created', { source: 'editor' });
 
   const sandboxId = state.editor.currentId;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/SandboxConfig.tsx

@@ -1,79 +1,82 @@
-import React from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent, MouseEvent } from 'react';
 import TrashIcon from 'react-icons/lib/fa/trash';
-import * as templates from '@codesandbox/common/lib/templates';
-import { TemplateConfig } from './TemplateConfig';
+
+import { useOvermind } from 'app/overmind';
+
 import { Group } from '../elements';
+
 import { Container, CenteredText, Action } from './elements';
+import { TemplateConfig } from './TemplateConfig';
 
-export const SandboxConfig = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      store: {
-        user,
-        editor: {
-          currentSandbox: { template, customTemplate },
-        },
-        workspace: {
-          project: { title, description },
-        },
+export const SandboxConfig: FunctionComponent = () => {
+  const {
+    actions: {
+      modalOpened,
+      workspace: { addedTemplate, deleteTemplate },
+    },
+    state: {
+      user,
+      editor: {
+        currentSandbox: { customTemplate, template },
       },
-      signals: {
-        modalOpened,
-        workspace: { addedTemplate, deleteTemplate },
+      workspace: {
+        project: { description, title },
       },
-    }) => {
-      const onCreateTemplate = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
+    },
+  } = useOvermind();
 
-        if (!user) {
-          modalOpened({ modal: 'signInForTemplates' });
-        }
+  const onCreateTemplate = ({
+    preventDefault,
+  }: MouseEvent<HTMLButtonElement>) => {
+    preventDefault();
 
-        addedTemplate({
-          template: {
-            color:
-              (customTemplate && customTemplate.color) ||
-              templates.default(template).color(),
-            title,
-            description,
-          },
-        });
-      };
+    if (!user) {
+      modalOpened({ modal: 'signInForTemplates' });
+    }
 
-      const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        if (customTemplate) {
-          deleteTemplate();
-        } else {
-          modalOpened({ modal: 'deleteSandbox' });
-        }
-      };
+    addedTemplate({
+      color:
+        (customTemplate && customTemplate.color) ||
+        getTemplateDefinition(template).color(),
+      description,
+      title,
+    });
+  };
 
-      return (
-        <>
-          {customTemplate && <TemplateConfig />}
-          <Group>
-            <Container>
-              {!customTemplate && (
-                <Action onClick={onCreateTemplate}>
-                  <CenteredText>
-                    <span>Create Template</span>
-                  </CenteredText>
-                </Action>
-              )}
-              <Action danger onClick={onDelete}>
-                <CenteredText>
-                  <TrashIcon />
-                  <span>{`Delete ${
-                    customTemplate ? `Template` : `Sandbox`
-                  }`}</span>
-                </CenteredText>
-              </Action>
-            </Container>
-          </Group>
-        </>
-      );
+  const onDelete = ({ preventDefault }: MouseEvent<HTMLButtonElement>) => {
+    preventDefault();
+
+    if (customTemplate) {
+      deleteTemplate();
+    } else {
+      modalOpened({ modal: 'deleteSandbox' });
     }
-  )
-);
+  };
+
+  return (
+    <>
+      {customTemplate && <TemplateConfig />}
+
+      <Group>
+        <Container>
+          {!customTemplate && (
+            <Action onClick={onCreateTemplate}>
+              <CenteredText>
+                <span>Create Template</span>
+              </CenteredText>
+            </Action>
+          )}
+
+          <Action danger onClick={onDelete}>
+            <CenteredText>
+              <TrashIcon />
+
+              <span>{`Delete ${customTemplate ? `Template` : `Sandbox`}`}</span>
+            </CenteredText>
+          </Action>
+        </Container>
+      </Group>
+    </>
+  );
+};