🔨 Switch Keywords to use useOvermind (codesandbox#2567)

* 🔨 Switch Keywords to use useOvermind

* Extract tagsChanged into an action

Author: MichaelDeBoey

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

@@ -30,8 +30,8 @@ export const cliMounted: AsyncAction = withLoadApp(
 export const notificationAdded: Action<{
   title: string;
   notificationType: NotificationType;
-  timeAlive: number;
-}> = ({ effects }, { title, notificationType, timeAlive }) => {
+  timeAlive?: number;
+}> = ({ effects }, { title, notificationType, timeAlive = 1 }) => {
   effects.notificationToast.add({
     message: title,
     status: convertTypeToStatus(notificationType),

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

@@ -11,9 +11,7 @@ export const valueChanged: Action<{
   state.workspace.project[field] = value;
 };
 
-export const tagChanged: Action<{
-  tagName: string;
-}> = ({ state }, { tagName }) => {
+export const tagChanged: Action<string> = ({ state }, tagName) => {
   state.workspace.tags.tagName = tagName;
 };
 
@@ -35,36 +33,54 @@ export const tagAdded: AsyncAction = withOwnedSandbox(
   }
 );
 
-export const tagRemoved: AsyncAction<{
-  tag: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { tag }) => {
-  const sandbox = state.editor.currentSandbox;
-  const tagIndex = sandbox.tags.indexOf(tag);
+export const tagRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ state, effects, actions }, tag) => {
+    const sandbox = state.editor.currentSandbox;
+    const tagIndex = sandbox.tags.indexOf(tag);
 
-  sandbox.tags.splice(tagIndex, 1);
+    sandbox.tags.splice(tagIndex, 1);
 
-  try {
-    sandbox.tags = await effects.api.deleteTag(sandbox.id, tag);
+    try {
+      sandbox.tags = await effects.api.deleteTag(sandbox.id, tag);
 
-    // Create a "joint action" on this
-    const { parsed } = state.editor.parsedConfigurations.package;
+      // Create a "joint action" on this
+      const { parsed } = state.editor.parsedConfigurations.package;
 
-    parsed.keywords = sandbox.tags;
-    parsed.name = slugify(sandbox.title || sandbox.id);
-    parsed.description = sandbox.description;
+      parsed.keywords = sandbox.tags;
+      parsed.name = slugify(sandbox.title || sandbox.id);
+      parsed.description = sandbox.description;
 
-    const code = JSON.stringify(parsed, null, 2);
-    const moduleShortid = state.editor.currentPackageJSON.shortid;
+      const code = JSON.stringify(parsed, null, 2);
+      const moduleShortid = state.editor.currentPackageJSON.shortid;
 
-    await actions.editor.internal.saveCode({
-      code,
-      moduleShortid,
-      cbID: null,
-    });
-  } catch (error) {
-    sandbox.tags.splice(tagIndex, 0, tag);
+      await actions.editor.internal.saveCode({
+        code,
+        moduleShortid,
+        cbID: null,
+      });
+    } catch (error) {
+      sandbox.tags.splice(tagIndex, 0, tag);
+    }
   }
-});
+);
+
+export const tagsChanged: AsyncAction<{
+  newTags: string[];
+  removedTags: string[];
+}> = async ({ actions, effects, state }, { newTags, removedTags }) => {
+  const { tags } = state.editor.currentSandbox;
+  if (tags.length > 5) {
+    return effects.notificationToast.error('You can have a maximum of 5 tags');
+  }
+
+  const tagWasRemoved =
+    newTags.length < tags.length && removedTags.length === 1;
+  if (tagWasRemoved) {
+    return removedTags.forEach(actions.workspace.tagRemoved);
+  }
+
+  return actions.workspace.tagAdded();
+};
 
 export const sandboxInfoUpdated: AsyncAction = withOwnedSandbox(
   async ({ state, effects, actions }) => {

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

@@ -1,77 +1,56 @@
-import React from 'react';
-import { inject, hooksObserver, clone } from 'app/componentConnectors';
+import React, { FunctionComponent } from 'react';
 import Tags from '@codesandbox/common/lib/components/Tags';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
+
+import { clone } from 'app/componentConnectors';
 import { EditableTags } from 'app/components/EditableTags';
+import { useOvermind } from 'app/overmind';
+
 import { Item } from './elements';
 
-interface IKeywordsProps {
+type Props = {
   editable?: boolean;
-  store: any;
-  signals: any;
-}
-
-export const Keywords = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      editable,
-      store: {
-        editor: {
-          currentSandbox: { template, tags },
-        },
-        workspace: {
-          tags: { tagName },
-        },
+};
+export const Keywords: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { tagChanged, tagsChanged },
+    },
+    state: {
+      editor: {
+        currentSandbox: { template, tags },
       },
-      signals: {
-        notificationAdded,
-        workspace: { tagAdded, tagChanged, tagRemoved },
+      workspace: {
+        tags: { tagName },
       },
-    }: IKeywordsProps) => {
-      const changeTags = (newTags: string[], removedTags: string[]) => {
-        if (tags.length > 5) {
-          notificationAdded('You can have a maximum of 5 tags', 'error');
-          return;
-        }
-
-        const tagWasRemoved =
-          newTags.length < tags.length && removedTags.length === 1;
+    },
+  } = useOvermind();
 
-        if (tagWasRemoved) {
-          removedTags.forEach(tag => {
-            tagRemoved({ tag });
-          });
-        } else {
-          tagAdded();
-        }
-      };
+  if (tags.length === 0 && !editable) {
+    return null;
+  }
 
-      if (tags.length === 0 && !editable) {
-        return null;
-      }
+  const changeTags = (newTags: string[], removedTags: string[]) =>
+    tagsChanged({ newTags, removedTags });
 
-      return (
-        <Item>
-          {editable ? (
-            <EditableTags
-              template={getTemplateDefinition(template)}
-              value={clone(tags)}
-              onChange={changeTags}
-              onChangeInput={(value: string) => {
-                tagChanged({ tagName: value });
-              }}
-              maxTags={5}
-              inputValue={tagName}
-              renderInput={({ addTag, ...props }: any) =>
-                tags.length !== 5 ? <input type="text" {...props} /> : null
-              }
-              onlyUnique
-            />
-          ) : (
-            <Tags style={{ fontSize: 13 }} tags={tags} />
-          )}
-        </Item>
-      );
-    }
-  )
-);
+  return (
+    <Item>
+      {editable ? (
+        <EditableTags
+          inputValue={tagName}
+          maxTags={5}
+          onChange={changeTags}
+          onChangeInput={tagChanged}
+          onlyUnique
+          renderInput={({ addTag, ...props }: any) =>
+            tags.length !== 5 ? <input type="text" {...props} /> : null
+          }
+          template={getTemplateDefinition(template)}
+          value={clone(tags)}
+        />
+      ) : (
+        <Tags style={{ fontSize: 13 }} tags={tags} />
+      )}
+    </Item>
+  );
+};