🔨 Switch Dependencies to use useOvermind

Author: MichaelDeBoey

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

@@ -74,11 +74,10 @@ type ModalName =
   | 'netlifyLogs'
   | 'newSandbox'
   | 'preferences'
-  | 'share'
   | 'searchDependencies'
+  | 'share'
   | 'signInForTemplates'
   | 'userSurvey';
-
 export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
   { state, effects },
   { modal, message }

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

@@ -28,7 +28,7 @@ export const addNpmDependency: AsyncAction<{
   version?: string;
   isDev?: boolean;
 }> = withOwnedSandbox(
-  async ({ effects, actions, state }, { name, version, isDev }) => {
+  async ({ actions, effects, state }, { name, version, isDev }) => {
     effects.analytics.track('Add NPM Dependency');
     state.currentModal = null;
     let newVersion = version;
@@ -46,22 +46,22 @@ export const addNpmDependency: AsyncAction<{
   }
 );
 
-export const npmDependencyRemoved: AsyncAction<{
-  name: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { name }) => {
-  effects.analytics.track('Remove NPM Dependency');
+export const npmDependencyRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ actions, effects, state }, name) => {
+    effects.analytics.track('Remove NPM Dependency');
 
-  const { parsed } = state.editor.parsedConfigurations.package;
+    const { parsed } = state.editor.parsedConfigurations.package;
 
-  delete parsed.dependencies[name];
-  parsed.dependencies = sortObjectByKeys(parsed.dependencies);
+    delete parsed.dependencies[name];
+    parsed.dependencies = sortObjectByKeys(parsed.dependencies);
 
-  await actions.editor.internal.saveCode({
-    code: JSON.stringify(parsed, null, 2),
-    moduleShortid: state.editor.currentPackageJSON.shortid,
-    cbID: null,
-  });
-});
+    await actions.editor.internal.saveCode({
+      code: JSON.stringify(parsed, null, 2),
+      moduleShortid: state.editor.currentPackageJSON.shortid,
+      cbID: null,
+    });
+  }
+);
 
 export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   id: string;
@@ -471,9 +471,10 @@ export const fetchEnvironmentVariables: AsyncAction = async ({
   );
 };
 
-export const updateEnvironmentVariables: AsyncAction<
-  EnvironmentVariable
-> = async ({ state, effects }, environmentVariable) => {
+export const updateEnvironmentVariables: AsyncAction<EnvironmentVariable> = async (
+  { state, effects },
+  environmentVariable
+) => {
   state.editor.currentSandbox.environmentVariables = await effects.api.saveEnvironmentVariable(
     state.editor.currentId,
     environmentVariable

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

@@ -122,38 +122,38 @@ export const sandboxInfoUpdated: AsyncAction = withOwnedSandbox(
   }
 );
 
-export const externalResourceAdded: AsyncAction<{
-  resource: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { resource }) => {
-  const { externalResources } = state.editor.currentSandbox;
+export const externalResourceAdded: AsyncAction<string> = withOwnedSandbox(
+  async ({ effects, state }, resource) => {
+    const { externalResources } = state.editor.currentSandbox;
 
-  externalResources.push(resource);
+    externalResources.push(resource);
 
-  try {
-    await effects.api.createResource(state.editor.currentId, resource);
-  } catch (error) {
-    externalResources.splice(externalResources.indexOf(resource), 1);
-    effects.notificationToast.error('Could not save external resource');
+    try {
+      await effects.api.createResource(state.editor.currentId, resource);
+    } catch (error) {
+      externalResources.splice(externalResources.indexOf(resource), 1);
+      effects.notificationToast.error('Could not save external resource');
+    }
   }
-});
+);
 
-export const externalResourceRemoved: AsyncAction<{
-  resource: string;
-}> = withOwnedSandbox(async ({ state, effects, actions }, { resource }) => {
-  const { externalResources } = state.editor.currentSandbox;
-  const resourceIndex = externalResources.indexOf(resource);
+export const externalResourceRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ effects, state }, resource) => {
+    const { externalResources } = state.editor.currentSandbox;
+    const resourceIndex = externalResources.indexOf(resource);
 
-  externalResources.splice(resourceIndex, 1);
+    externalResources.splice(resourceIndex, 1);
 
-  try {
-    await effects.api.deleteResource(state.editor.currentId, resource);
-  } catch (error) {
-    externalResources.splice(resourceIndex, 0, resource);
-    effects.notificationToast.error(
-      'Could not save removal of external resource'
-    );
+    try {
+      await effects.api.deleteResource(state.editor.currentId, resource);
+    } catch (error) {
+      externalResources.splice(resourceIndex, 0, resource);
+      effects.notificationToast.error(
+        'Could not save removal of external resource'
+      );
+    }
   }
-});
+);
 
 export const integrationsOpened: Action = ({ state }) => {
   state.preferences.itemId = 'integrations';

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx

@@ -1,45 +1,55 @@
-import React, { FunctionComponent, useState, useMemo } from 'react';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useMemo,
+  useState,
+} from 'react';
+
 import { List, SearchFonts, FontLI, FontFamily, Arrow } from './elements';
 import { fonts } from './fonts';
 
 type Props = {
-  onSelection: (e: any) => void;
   activeFontFamily: string;
+  onSelection: (font: string) => void;
 };
-
 export const FontList: FunctionComponent<Props> = ({
-  onSelection,
   activeFontFamily,
+  onSelection,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
-  const usedFonts = fonts.slice(0, 200);
-
-  const updateSearch = (e: any) => setSearchTerm(e.target.value);
 
-  const getFonts: string[] = useMemo(
+  const getFonts = useMemo(
     () =>
-      usedFonts.filter(f =>
-        f.toLowerCase().includes(searchTerm.trim().toLowerCase())
-      ),
-    [searchTerm, usedFonts]
+      fonts
+        .slice(0, 200)
+        .filter(font =>
+          font.toLowerCase().includes(searchTerm.trim().toLowerCase())
+        ),
+    [searchTerm]
   );
+
+  const updateSearch = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    setSearchTerm(value);
+
   return (
     <>
       <Arrow />
+
       <List>
         <SearchFonts
           type="text"
           value={searchTerm}
           onChange={updateSearch}
           placeholder="Search Typefaces"
         />
-        {getFonts.map((font: string) => (
+
+        {getFonts.map(font => (
           <FontLI
             key={font}
             onClick={() => onSelection(font)}
             onKeyPress={() => onSelection(font)}
           >
-            <FontFamily type="button" active={font === activeFontFamily}>
+            <FontFamily active={font === activeFontFamily} type="button">
               {font}
             </FontFamily>
           </FontLI>