🔨 Switch Icon to use useOvermind (codesandbox#2564)

Author: MichaelDeBoey

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

@@ -1,9 +1,10 @@
-import { inject, hooksObserver } from 'app/componentConnectors';
-import React, { useState } from 'react';
-import { usePopoverState } from 'reakit/Popover';
 import * as templates from '@codesandbox/common/lib/templates';
-import * as Icons from '@codesandbox/template-icons';
 import getIcon from '@codesandbox/common/lib/templates/icons';
+import * as Icons from '@codesandbox/template-icons';
+import React, { FunctionComponent, useState } from 'react';
+import { usePopoverState } from 'reakit/Popover';
+
+import { useOvermind } from 'app/overmind';
 
 import { Item, PropertyName } from '../../elements';
 import {
@@ -15,74 +16,75 @@ import {
   Arrow,
 } from './elements';
 
-export const Icon = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      signals: {
-        workspace: { editTemplate },
+export const Icon: FunctionComponent = () => {
+  const {
+    actions: {
+      workspace: { editTemplate },
+    },
+    state: {
+      editor: {
+        currentSandbox: { customTemplate, template },
       },
-      store: {
-        editor: {
-          currentSandbox: { template, customTemplate },
-        },
+    },
+  } = useOvermind();
+  const popover = usePopoverState();
+
+  const [selectedIcon, setSelectedIcon] = useState(customTemplate.iconUrl);
+
+  const DefaultIcon = getIcon(template);
+  const defaultColor =
+    (customTemplate && customTemplate.color) ||
+    templates.default(template).color();
+
+  const setIcon = (key: string) => {
+    setSelectedIcon(key);
+    popover.hide();
+    editTemplate({
+      template: {
+        ...customTemplate,
+        iconUrl: key,
       },
-    }) => {
-      const popover = usePopoverState();
+    });
+  };
+  const TemplateIcon = Icons[selectedIcon];
+
+  return (
+    <Item>
+      <PropertyName>Icon </PropertyName>
 
-      const [selectedIcon, setSelectedIcon] = useState(customTemplate.iconUrl);
+      <Value>
+        <Button {...popover} color={defaultColor}>
+          {selectedIcon && TemplateIcon ? (
+            <TemplateIcon width={24} />
+          ) : (
+            <DefaultIcon width={24} />
+          )}
+        </Button>
 
-      const DefaultIcon = getIcon(template);
-      const defaultColor =
-        (customTemplate && customTemplate.color) ||
-        templates.default(template).color();
+        <IconWrapper
+          hideOnEsc
+          hideOnClickOutside
+          {...popover}
+          aria-label="Choose an Icon"
+        >
+          <Arrow {...popover} />
 
-      const setIcon = (key: string) => {
-        setSelectedIcon(key);
-        popover.hide();
-        editTemplate({
-          template: {
-            ...customTemplate,
-            iconUrl: key,
-          },
-        });
-      };
-      const TemplateIcon = Icons[selectedIcon];
+          <List>
+            {Object.keys(Icons).map((i: string) => {
+              const TemplateIconMap = Icons[i];
 
-      return (
-        <Item>
-          <PropertyName>Icon </PropertyName>
-          <Value>
-            <Button {...popover} color={defaultColor}>
-              {selectedIcon && TemplateIcon ? (
-                <TemplateIcon width={24} />
-              ) : (
-                <DefaultIcon width={24} />
-              )}
-            </Button>
-            <IconWrapper
-              hideOnEsc
-              hideOnClickOutside
-              {...popover}
-              aria-label="Choose an Icon"
-            >
-              <Arrow {...popover} />
-              <List>
-                {Object.keys(Icons).map((i: string) => {
-                  const TemplateIconMap = Icons[i];
-                  return (
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-                    <li role="button" tabIndex={0} onClick={() => setIcon(i)}>
-                      <IconButton>
-                        <TemplateIconMap width={24} />
-                      </IconButton>
-                    </li>
-                  );
-                })}
-              </List>
-            </IconWrapper>
-          </Value>
-        </Item>
-      );
-    }
-  )
-);
+              return (
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+                <li role="button" tabIndex={0} onClick={() => setIcon(i)}>
+                  <IconButton>
+                    <TemplateIconMap width={24} />
+                  </IconButton>
+                </li>
+              );
+            })}
+          </List>
+        </IconWrapper>
+      </Value>
+    </Item>
+  );
+};