🔨 Switch Description to use useOvermind (#2565)

Author: MichaelDeBoey

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

@@ -1,70 +1,68 @@
-import React, { useState } from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
+import { ENTER } 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 { SandboxDescription } from './elements';
 
-interface IDescriptionProps {
+type Props = {
   editable: boolean;
-  store: any;
-  signals: any;
-}
-
-export const Description = inject('store', 'signals')(
-  hooksObserver(
-    ({
-      editable,
-      signals: {
-        workspace: { sandboxInfoUpdated, valueChanged },
+};
+export const Description: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxInfoUpdated, valueChanged },
+    },
+    state: {
+      workspace: {
+        project: { description },
       },
-      store: {
-        workspace: {
-          project: { description },
-        },
-      },
-    }: IDescriptionProps) => {
-      const [editing, setEditing] = useState(false);
+    },
+  } = useOvermind();
+  const [editing, setEditing] = useState(false);
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.keyCode === ENTER && !event.shiftKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      sandboxInfoUpdated();
+      setEditing(false);
+    }
+  };
 
-      const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (event.keyCode === 13 && !event.shiftKey) {
-          event.preventDefault();
-          event.stopPropagation();
+  return editing ? (
+    <WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
+      <textarea
+        rows={2}
+        placeholder="Description"
+        value={description}
+        ref={el => {
+          if (el) {
+            el.focus();
+          }
+        }}
+        onKeyDown={onKeyDown}
+        onChange={event => {
+          valueChanged({
+            field: 'description',
+            value: event.target.value,
+          });
+        }}
+        onBlur={() => {
           sandboxInfoUpdated();
           setEditing(false);
-        }
-      };
+        }}
+      />
+    </WorkspaceInputContainer>
+  ) : (
+    <SandboxDescription empty={Boolean(description)}>
+      {description || (editable ? 'No description, create one!' : '')}
 
-      return editing ? (
-        <WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
-          <textarea
-            rows={2}
-            placeholder="Description"
-            value={description}
-            ref={el => {
-              if (el) {
-                el.focus();
-              }
-            }}
-            onKeyDown={onKeyDown}
-            onChange={event => {
-              valueChanged({
-                field: 'description',
-                value: event.target.value,
-              });
-            }}
-            onBlur={() => {
-              sandboxInfoUpdated();
-              setEditing(false);
-            }}
-          />
-        </WorkspaceInputContainer>
-      ) : (
-        <SandboxDescription empty={description}>
-          {description || (editable ? 'No description, create one!' : '')}
-          {editable && <EditPen onClick={() => setEditing(true)} />}
-        </SandboxDescription>
-      );
-    }
-  )
-);
+      {editable && <EditPen onClick={() => setEditing(true)} />}
+    </SandboxDescription>
+  );
+};