🔨 Switch Dependencies to use useOvermind

Author: MichaelDeBoey

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

@@ -50,15 +50,15 @@ export const addNpmDependency: AsyncAction<{
   }
 );
 
-export const npmDependencyRemoved: AsyncAction<{
-  name: string;
-}> = withOwnedSandbox(async ({ effects, actions }, { name }) => {
-  effects.analytics.track('Remove NPM Dependency');
+export const npmDependencyRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ actions, effects }, name) => {
+    effects.analytics.track('Remove NPM Dependency');
 
-  await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
+    await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
 
-  effects.preview.executeCodeImmediately();
-});
+    effects.preview.executeCodeImmediately();
+  }
+);
 
 export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   id: string;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.ts

@@ -3,3 +3,7 @@ import styled from 'styled-components';
 export const ButtonContainer = styled.div`
   margin: 0.5rem 1rem;
 `;
+
+export const Container = styled.div`
+  position: relative;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.js

@@ -0,0 +1,57 @@
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceInputContainer } from '../../elements';
+
+import { ButtonContainer, Container } from './elements';
+
+export const AddResource: FunctionComponent = () => {
+  const {
+    actions: {
+      workspace: { externalResourceAdded },
+    },
+  } = useOvermind();
+  const [name, setName] = useState('');
+
+  const addResource = async () => {
+    if (name) {
+      await externalResourceAdded(name.trim());
+
+      setName('');
+    }
+  };
+  const changeName = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    setName(value);
+  const handleKeyUp = ({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+    if (keyCode === ENTER) {
+      addResource();
+    }
+  };
+
+  return (
+    <Container>
+      <WorkspaceInputContainer>
+        <input
+          onChange={changeName}
+          onKeyUp={handleKeyUp}
+          placeholder="https://cdn.com/bootstrap.css"
+          value={name}
+        />
+      </WorkspaceInputContainer>
+
+      <ButtonContainer>
+        <Button block disabled={name === ''} onClick={addResource} small>
+          Add Resource
+        </Button>
+      </ButtonContainer>
+    </Container>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.tsx

@@ -3,3 +3,7 @@ import styled from 'styled-components';
 export const ButtonContainer = styled.div`
   margin: 0.5rem 1rem;
 `;
+
+export const Container = styled.div`
+  position: relative;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/elements.ts

@@ -3,15 +3,15 @@ import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { ButtonContainer } from './elements';
+import { ButtonContainer, Container } from './elements';
 
 export const AddVersion: FunctionComponent = ({ children }) => {
   const {
     actions: { modalOpened },
   } = useOvermind();
 
   return (
-    <div style={{ position: 'relative' }}>
+    <Container>
       <ButtonContainer>
         <Button
           block
@@ -21,6 +21,6 @@ export const AddVersion: FunctionComponent = ({ children }) => {
           {children}
         </Button>
       </ButtonContainer>
-    </div>
+    </Container>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx

@@ -15,7 +15,6 @@ import { VersionEntry } from './VersionEntry';
 export const Dependencies: FunctionComponent = () => {
   const {
     actions: {
-      workspace: { externalResourceAdded },
       editor: { addNpmDependency, npmDependencyRemoved },
     },
     state: {
@@ -56,7 +55,7 @@ export const Dependencies: FunctionComponent = () => {
               dependency={dependency}
               key={dependency}
               onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={name => npmDependencyRemoved({ name })}
+              onRemove={name => npmDependencyRemoved(name)}
             />
           ))}
 
@@ -72,7 +71,7 @@ export const Dependencies: FunctionComponent = () => {
               dependency={dependency}
               key={dependency}
               onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={npmDependencyRemoved}
+              onRemove={name => npmDependencyRemoved(name)}
             />
           ))} */}
 
@@ -83,9 +82,7 @@ export const Dependencies: FunctionComponent = () => {
         <div>
           <WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
 
-          <AddResource
-            addResource={resource => externalResourceAdded(resource)}
-          />
+          <AddResource />
 
           {otherResources.map(resource => (
             <ExternalResource key={resource} resource={resource} />

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx

@@ -435,18 +435,10 @@ export type PackageJSON = {
   keywords?: string[];
   main?: string;
   module?: string;
-  scripts?: {
-    [command: string]: string;
-  };
-  dependencies?: {
-    [dep: string]: string;
-  };
-  devDependencies?: {
-    [dep: string]: string;
-  };
-  jest?: {
-    setupFilesAfterEnv?: string[];
-  };
+  scripts?: { [command: string]: string; };
+  dependencies?: { [dependency: string]: string; };
+  devDependencies?: { [dependency: string]: string; };
+  jest?: { setupFilesAfterEnv?: string[]; };
   resolutions?: { [dependency: string]: string };
 };