Linting

components/home/GroupBox/GroupBox.tsx

@@ -1,14 +1,14 @@
-import {FC, memo, useCallback, useMemo, useState} from "react";
-import {FactorySelect} from "../FactorySelect/FactorySelect";
-import {useFactories} from "../../../src/hooks/useFactories";
-import {EnrichedEntity, Group} from "../../../src/types";
-import styles from "./GroupBox.module.css"
-import {EntitySpan} from "../EntitySpan/EntitySpan";
-import {useGroups} from "../../contexts/GroupProvider";
-import {calculateInputs} from "../../../src/calculateInputs";
-import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
-import Link from "next/link";
-import {useRouter} from "next/router";
+import { FC, memo, useCallback, useMemo, useState } from 'react'
+import { FactorySelect } from '../FactorySelect/FactorySelect'
+import { useFactories } from '../../../src/hooks/useFactories'
+import { EnrichedEntity, Group } from '../../../src/types'
+import styles from './GroupBox.module.css'
+import { EntitySpan } from '../EntitySpan/EntitySpan'
+import { useGroups } from '../../contexts/GroupProvider'
+import { calculateInputs } from '../../../src/calculateInputs'
+import { fixedEncodeURIComponent, uniquify } from '../../../src/utils'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 interface Props {
   group: Group
@@ -16,7 +16,7 @@ interface Props {
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
   const router = useRouter()
-  const {factories, findFactory} = useFactories()
+  const { factories, findFactory } = useFactories()
   const {
     doNotSuggest,
     setFactories,
@@ -28,24 +28,14 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     removeGroup,
     getInputType
   } = useGroups()
-  const {
-    name,
-    exports,
-    malls
-  } = group
+  const { name, exports, malls } = group
 
   const [isDeleteConfirm, setDeleteConfirm] = useState(false)
 
   const [inputs, intermediates] = useMemo(() => {
     const allProducingFactories = [...exports, ...malls]
-    return calculateInputs(
-      allProducingFactories,
-      ignoredFactories,
-      baseFactories,
-      exportedFactories,
-      findFactory
-    )
-  }, [exports, malls, ignoredFactories, baseFactories, findFactory, exportedFactories])
+    return calculateInputs(allProducingFactories, baseFactories, exportedFactories, findFactory)
+  }, [exports, malls, baseFactories, findFactory, exportedFactories])
 
   const [suggestionsExport, suggestionMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
     const selectedValues = uniquify([...exports, ...malls])
@@ -58,110 +48,142 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
         const prerequisites = Object.keys(factory.recipe.prerequisites ?? {})
         return prerequisites.every(pre => availableIngredients.includes(pre))
       })
-      .reduce((acc, factory) =>
-        (factory.usedBy?.length ?? 0) >= 3
-          ? [[...acc[0], factory], acc[1]]
-          : [acc[0], [...acc[1], factory]],
+      .reduce(
+        (acc, factory) =>
+          (factory.usedBy?.length ?? 0) >= 3
+            ? [[...acc[0], factory], acc[1]]
+            : [acc[0], [...acc[1], factory]],
         [[], []] as [EnrichedEntity[], EnrichedEntity[]]
       )
   }, [exports, malls, intermediates, inputs, factories, doNotSuggest])
 
-  const addFactory = useCallback((uid: string, type: Parameters<typeof setFactories>[2]) => {
-    setFactories(name, [...group[type], uid], type)
-  }, [group, name, setFactories])
+  const addFactory = useCallback(
+    (uid: string, type: Parameters<typeof setFactories>[2]) => {
+      setFactories(name, [...group[type], uid], type)
+    },
+    [group, name, setFactories]
+  )
 
-  const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
-  const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
+  const setExportFactories = useCallback(
+    (exportFactories: string[]) => setFactories(name, exportFactories, 'exports'),
+    [setFactories, name]
+  )
+  const setMallFactories = useCallback(
+    (mallFactories: string[]) => setFactories(name, mallFactories, 'malls'),
+    [setFactories, name]
+  )
 
-  return <div className={styles.root}>
-    <h3
-      contentEditable={true}
-      suppressContentEditableWarning={true}
-      onBlur={event => {
-        event.currentTarget.innerText = event.currentTarget.innerText.trim()
-        renameGroup(name, event.currentTarget.innerText);
-      }}
-    >
-      {name}
-    </h3>
-    <Link href={{pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`, query: router.query}}>👁</Link>
-    <button
-      className={styles.quit}
-      onBlur={() => setDeleteConfirm(false)}
-      onClick={() => !isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name)} style={{display: 'block'}}
-    >
-      {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
-    </button>
-    <h4>Exported Factories</h4>
-    <FactorySelect
-      id={name+"-exports"}
-      factories={exports}
-      onSetFactories={setExportFactories}
-    />
-    <h4>Mall Factories</h4>
-    <FactorySelect
-      id={name+"-malls"}
-      factories={malls}
-      onSetFactories={setMallFactories}
-    />
-    { inputs.length ? <>
-      <h4>Input Factories ({inputs.length})</h4>
-      <div className={styles.flex}>
-        { inputs.map(input => <EntitySpan
-          key={input}
-          value={input}
-          state={getInputType(input)}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, input])
-          }}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-    { intermediates.length ? <>
-      <h4>Intermediate Factories ({intermediates.length})</h4>
-      <div className={styles.flex}>
-        { intermediates.map(intermediate => <EntitySpan
-          key={intermediate}
-          value={intermediate}
-          state={getInputType(intermediate)}
-        />) }
-      </div>
-    </> : null }
-    { suggestionsExport.length ? <>
-      <h4>Suggestions (Export)</h4>
-      <div className={styles.flex}>
-        { suggestionsExport.map(suggestion => <EntitySpan
-          key={suggestion.href}
-          value={suggestion}
-          onClick={() => addFactory(suggestion.href, 'exports')}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, suggestion.href])
-          }}
-          leftClickText={"Add to exported factories"}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-    { suggestionMall.length ? <>
-      <h4>Suggestions (Mall)</h4>
-      <div className={styles.flex}>
-        { suggestionMall.map(suggestion => <EntitySpan
-          key={suggestion.href}
-          value={suggestion}
-          onClick={() => addFactory(suggestion.href, 'malls')}
-          onContextMenu={event => {
-            event.preventDefault()
-            setIgnoredFactories([...ignoredFactories, suggestion.href])
-          }}
-          leftClickText={"Add to mall factories"}
-          rightClickText={"Exclude this recipe from suggestions"}
-        />) }
-      </div>
-    </> : null }
-  </div>
+  return (
+    <div className={styles.root}>
+      <h3
+        contentEditable={true}
+        suppressContentEditableWarning={true}
+        onBlur={event => {
+          event.currentTarget.innerText = event.currentTarget.innerText.trim()
+          renameGroup(name, event.currentTarget.innerText)
+        }}
+      >
+        {name}
+      </h3>
+      <Link
+        href={{
+          pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
+          query: router.query
+        }}
+      >
+        👁
+      </Link>
+      <button
+        className={styles.quit}
+        onBlur={() => setDeleteConfirm(false)}
+        onClick={() => (!isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name))}
+        style={{ display: 'block' }}
+      >
+        {isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
+      </button>
+      <h4>Exported Factories</h4>
+      <FactorySelect
+        id={name + '-exports'}
+        factories={exports}
+        onSetFactories={setExportFactories}
+      />
+      <h4>Mall Factories</h4>
+      <FactorySelect id={name + '-malls'} factories={malls} onSetFactories={setMallFactories} />
+      {inputs.length ? (
+        <>
+          <h4>Input Factories ({inputs.length})</h4>
+          <div className={styles.flex}>
+            {inputs.map(input => (
+              <EntitySpan
+                key={input}
+                value={input}
+                state={getInputType(input)}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, input])
+                }}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {intermediates.length ? (
+        <>
+          <h4>Intermediate Factories ({intermediates.length})</h4>
+          <div className={styles.flex}>
+            {intermediates.map(intermediate => (
+              <EntitySpan
+                key={intermediate}
+                value={intermediate}
+                state={getInputType(intermediate)}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {suggestionsExport.length ? (
+        <>
+          <h4>Suggestions (Export)</h4>
+          <div className={styles.flex}>
+            {suggestionsExport.map(suggestion => (
+              <EntitySpan
+                key={suggestion.href}
+                value={suggestion}
+                onClick={() => addFactory(suggestion.href, 'exports')}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, suggestion.href])
+                }}
+                leftClickText={'Add to exported factories'}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+      {suggestionMall.length ? (
+        <>
+          <h4>Suggestions (Mall)</h4>
+          <div className={styles.flex}>
+            {suggestionMall.map(suggestion => (
+              <EntitySpan
+                key={suggestion.href}
+                value={suggestion}
+                onClick={() => addFactory(suggestion.href, 'malls')}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  setIgnoredFactories([...ignoredFactories, suggestion.href])
+                }}
+                leftClickText={'Add to mall factories'}
+                rightClickText={'Exclude this recipe from suggestions'}
+              />
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
 }
 
 export const GroupBox = memo(GroupBoxBase)