🔨 Switch Alias to use useOvermind (codesandbox#2558)

Author: MichaelDeBoey

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

@@ -1,74 +1,69 @@
-import { inject, hooksObserver } from 'app/componentConnectors';
-import React, { useState } from 'react';
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import React, { FunctionComponent, useState } from 'react';
+
+import { useOvermind } from 'app/overmind';
 
 import { WorkspaceInputContainer } from '../../elements';
 
 import { EditPen } from '../elements';
 
 import { SandboxAlias } from './elements';
 
-type IAliasProps = {
+type Props = {
   editable: boolean;
-  store: any;
-  signals: any;
 };
+export const Alias: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxInfoUpdated, valueChanged },
+    },
+    state: {
+      isPatron,
+      editor: { currentSandbox },
+      workspace: { project },
+    },
+  } = useOvermind();
+  const [editing, setEditing] = useState(false);
 
-export const Alias = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      editable,
-      signals: {
-        workspace: { sandboxInfoUpdated, valueChanged },
-      },
-      store: {
-        isPatron,
-        editor: { currentSandbox },
-        workspace: { project },
-      },
-    }: IAliasProps) => {
-      const [editing, setEditing] = useState(false);
-
-      const alias = project.alias || currentSandbox.alias;
+  const alias = project.alias || currentSandbox.alias;
 
-      return isPatron ? (
-        <>
-          {editing ? (
-            <WorkspaceInputContainer>
-              <input
-                value={alias}
-                onChange={event => {
-                  valueChanged({
-                    field: 'alias',
-                    value: event.target.value,
-                  });
-                }}
-                type="text"
-                onBlur={() => {
-                  sandboxInfoUpdated();
-                  setEditing(false);
-                }}
-                onKeyUp={event => {
-                  if (event.keyCode === 13) {
-                    sandboxInfoUpdated();
-                    setEditing(false);
-                  }
-                }}
-                ref={el => {
-                  if (el) {
-                    el.focus();
-                  }
-                }}
-                placeholder="Alias"
-              />
-            </WorkspaceInputContainer>
-          ) : (
-            <SandboxAlias>
-              {alias}
-              {editable && <EditPen onClick={() => setEditing(true)} />}
-            </SandboxAlias>
-          )}
-        </>
-      ) : null;
-    }
-  )
-);
+  return isPatron ? (
+    <>
+      {editing ? (
+        <WorkspaceInputContainer>
+          <input
+            value={alias}
+            onChange={event => {
+              valueChanged({
+                field: 'alias',
+                value: event.target.value,
+              });
+            }}
+            type="text"
+            onBlur={() => {
+              sandboxInfoUpdated();
+              setEditing(false);
+            }}
+            onKeyUp={event => {
+              if (event.keyCode === ESC) {
+                sandboxInfoUpdated();
+                setEditing(false);
+              }
+            }}
+            ref={el => {
+              if (el) {
+                el.focus();
+              }
+            }}
+            placeholder="Alias"
+          />
+        </WorkspaceInputContainer>
+      ) : (
+        <SandboxAlias>
+          {alias}
+          {editable && <EditPen onClick={() => setEditing(true)} />}
+        </SandboxAlias>
+      )}
+    </>
+  ) : null;
+};