🔨 Switch CollectionInfo to use useOvermind

packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.js → packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/elements.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import AutosizeInput from 'react-input-autosize';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
@@ -11,20 +11,22 @@ export const Container = styled.div`
 `;
 
 export const SandboxName = styled.span`
-  color: ${props => (props.theme.light ? 'black' : 'white')};
-  margin-left: 0.25rem;
+  ${({ theme }) => css`
+    color: ${theme.light ? 'black' : 'white'};
+    margin-left: 0.25rem;
 
-  cursor: pointer;
-  text-overflow: ellipsis;
+    cursor: pointer;
+    text-overflow: ellipsis;
+  `};
 `;
 
 export const SandboxForm = styled.form`
-  position: 'absolute';
+  position: absolute;
   left: 0;
   right: 0;
-  display: 'flex';
-  align-items: 'center';
-  justify-content: 'center';
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const SandboxInput = styled(AutosizeInput)`
@@ -45,13 +47,12 @@ export const FolderName = styled.button`
   cursor: pointer;
   transition: 0.3s ease color;
   padding: 0;
-  margin: 0;
+  margin: 0 0.25rem 0 0;
   outline: 0;
   border: 0;
   background-color: transparent;
   color: inherit;
 
-  margin-right: 0.25rem;
   &:hover {
     color: white;
   }

packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.tsx

@@ -1,91 +1,77 @@
-import React, { useCallback, useState } from 'react';
+import { Sandbox } from '@codesandbox/common/lib/types';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { getSandboxName as getSandboxNameBase } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
 import { basename } from 'path';
-import { useOvermind } from 'app/overmind';
+import React, {
+  ChangeEvent,
+  FormEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 import Media from 'react-media';
-
 import { Spring } from 'react-spring/renderprops';
 
-import track from '@codesandbox/common/lib/utils/analytics';
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import { Sandbox } from '@codesandbox/common/lib/types';
+import { useOvermind } from 'app/overmind';
+
 import {
   Container,
-  SandboxName,
+  FolderName,
   SandboxForm,
   SandboxInput,
-  FolderName,
+  SandboxName,
 } from './elements';
 
-interface ICollectionInfoProps {
+type Props = {
   sandbox: Sandbox;
-  isLoggedIn: boolean;
-}
-
-const CollectionInfo: React.FC<ICollectionInfoProps> = ({
-  sandbox,
-  isLoggedIn,
-}) => {
-  const [updatingName, setUpdatingName] = useState(false);
-  const [nameValue, setNameValue] = useState('');
+};
+export const CollectionInfo: FunctionComponent<Props> = ({ sandbox }) => {
   const {
     actions: {
-      workspace: { sandboxInfoUpdated, valueChanged },
       modalOpened,
+      workspace: { sandboxInfoUpdated, valueChanged },
     },
+    state: { isLoggedIn },
   } = useOvermind();
+  const [nameValue, setNameValue] = useState('');
+  const [updatingName, setUpdatingName] = useState(false);
 
-  const sandboxName = useCallback(() => getSandboxName(sandbox) || 'Untitled', [
-    sandbox,
-  ]);
-
-  const updateSandboxInfo = useCallback(() => {
+  const getSandboxName = () => getSandboxNameBase(sandbox) || 'Untitled';
+  const updateSandboxInfo = () => {
     sandboxInfoUpdated();
-    setUpdatingName(false);
-  }, [sandboxInfoUpdated]);
-
-  const submitNameChange = useCallback(
-    e => {
-      e.preventDefault();
-      updateSandboxInfo();
 
-      track('Change Sandbox Name From Header');
-    },
-    [updateSandboxInfo]
-  );
-
-  const handleNameClick = useCallback(() => {
-    setUpdatingName(true);
-    setNameValue(sandboxName());
-  }, [sandboxName]);
+    setUpdatingName(false);
+  };
 
-  const handleKeyUp = useCallback(
-    e => {
-      if (e.keyCode === ESC) {
-        updateSandboxInfo();
-      }
-    },
-    [updateSandboxInfo]
-  );
+  const submitNameChange = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
 
-  const handleBlur = useCallback(() => {
     updateSandboxInfo();
-  }, [updateSandboxInfo]);
-
-  const handleInputUpdate = useCallback(
-    e => {
-      valueChanged({
-        field: 'title',
-        value: e.target.value,
-      });
 
-      setNameValue(e.target.value);
-    },
-    [valueChanged]
-  );
+    track('Change Sandbox Name From Header');
+  };
+  const handleKeyUp = ({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+    if (keyCode === ESC) {
+      updateSandboxInfo();
+    }
+  };
+  const handleBlur = () => {
+    updateSandboxInfo();
+  };
+  const handleInputUpdate = ({
+    target: { value },
+  }: ChangeEvent<HTMLInputElement>) => {
+    valueChanged({ field: 'title', value });
+
+    setNameValue(value);
+  };
+  const handleNameClick = () => {
+    setNameValue(getSandboxName());
+    setUpdatingName(true);
+  };
 
   const value = nameValue !== 'Untitled' && updatingName ? nameValue : '';
-
   const folderName = sandbox.collection
     ? basename(sandbox.collection.path) ||
       (sandbox.team ? sandbox.team.name : 'My Sandboxes')
@@ -116,19 +102,10 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
               <Media
                 query="(min-width: 950px)"
                 render={() => (
-                  <div
-                    style={{
-                      ...style,
-                      overflow: 'hidden',
-                    }}
-                  >
+                  <div style={{ ...style, overflow: 'hidden' }}>
                     {isLoggedIn ? (
                       <FolderName
-                        onClick={() => {
-                          modalOpened({
-                            modal: 'moveSandbox',
-                          });
-                        }}
+                        onClick={() => modalOpened({ modal: 'moveSandbox' })}
                       >
                         {folderName}
                       </FolderName>
@@ -139,6 +116,7 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
                   </div>
                 )}
               />
+
               {updatingName ? (
                 <SandboxForm onSubmit={submitNameChange}>
                   <SandboxInput
@@ -157,7 +135,7 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
                 </SandboxForm>
               ) : (
                 <SandboxName onClick={handleNameClick}>
-                  {sandboxName()}
+                  {getSandboxName()}
                 </SandboxName>
               )}
             </Container>
@@ -167,5 +145,3 @@ const CollectionInfo: React.FC<ICollectionInfoProps> = ({
     </Spring>
   );
 };
-
-export { CollectionInfo };