[WIP] Fix Multiselect flow issues and convert to component syntax

metabrainz · May 17, 2024 · c91c5d4 · c91c5d4
1 parent 8d66563
commit c91c5d4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 58 deletions.
diff --git a/root/static/scripts/edit/components/Multiselect.js b/root/static/scripts/edit/components/Multiselect.js
@@ -42,22 +42,22 @@ export type MultiselectValueStateT<V> = {
   ...
 };
 
-export type MultiselectValuePropsT<
+export type MultiselectStateT<
   V: AutocompleteEntityItemT,
   VS: MultiselectValueStateT<V>,
 > = {
-  +buildExtraChildren?: ($Exact<VS>) => React$Node,
-  +dispatch: (MultiselectActionT<V>) => void,
-  +state: $Exact<VS>,
+  +max: number | null,
+  +values: $ReadOnlyArray<$Exact<VS>>,
+  ...
 };
 
-export type MultiselectStateT<
+export type MultiselectValuePropsT<
   V: AutocompleteEntityItemT,
   VS: MultiselectValueStateT<V>,
 > = {
-  +max: number | null,
-  +values: $ReadOnlyArray<$Exact<VS>>,
-  ...
+  +buildExtraChildren?: ($Exact<VS>) => React$Node,
+  +dispatch: (MultiselectActionT<V>) => void,
+  +state: $Exact<VS>,
 };
 
 export type MultiselectPropsT<
@@ -67,6 +67,7 @@ export type MultiselectPropsT<
 > = {
   +addLabel: string,
   +buildExtraValueChildren?: ($Exact<VS>) => React$Node,
+  +buildValues: ($Exact<S>, ($Exact<VS>) => React$Node) => React$Node,
   +dispatch: (MultiselectActionT<V>) => void,
   +state: $Exact<S>,
 };
@@ -156,22 +157,10 @@ export function runReducer<
   }
 }
 
-type MultiselectValueComponentT = React$AbstractComponent<
-  MultiselectValuePropsT<
-    AutocompleteEntityItemT,
-    MultiselectValueStateT<AutocompleteEntityItemT>,
-  >,
-  mixed,
->;
-
-export const MultiselectValue: MultiselectValueComponentT = React.memo(<
+component _MultiselectValue<
   V: AutocompleteEntityItemT,
   VS: MultiselectValueStateT<V>,
->({
-  buildExtraChildren,
-  dispatch,
-  state,
-}: MultiselectValuePropsT<V, VS>): React$MixedElement => {
+>(...{buildExtraChildren, dispatch, state}: MultiselectValuePropsT<V, VS>) {
   const autocompleteDispatch = React.useCallback(
     (action: AutocompleteActionT<V>) => {
       dispatch({
@@ -212,18 +201,43 @@ export const MultiselectValue: MultiselectValueComponentT = React.memo(<
       />
     </div>
   );
-});
+}
 
-const Multiselect = (React.memo(<
-  V: AutocompleteEntityItemT,
-  VS: MultiselectValueStateT<V>,
-  S: MultiselectStateT<V, VS>,
->({
+const MultiselectValue: React$AbstractComponent<
+  MultiselectValuePropsT<V, VS>
+> = React.memo(_MultiselectValue);
+
+export function buildValues<V, VS>(
+  ...props: MultiselectValuePropsT<V, VS>
+): React.MixedElement {
+  return (
+    <>
+      {props.state.values.map(valueAttribute => (
+        <MultiselectValue
+          buildExtraChildren={props.buildExtraChildren}
+          dispatch={props.dispatch}
+          key={valueAttribute.key}
+          state={valueAttribute}
+        />
+      ))}
+    </>
+  );
+}
+
+component _Multiselect(...{
   addLabel,
+  buildValues,
   buildExtraValueChildren,
   dispatch,
   state,
-}: MultiselectPropsT<V, VS, S>): React$MixedElement => {
+}: MultiselectPropsT<
+    AutocompleteEntityItemT,
+    MultiselectValueStateT<AutocompleteEntityItemT>,
+    MultiselectStateT<
+      AutocompleteEntityItemT,
+      MultiselectValueStateT<AutocompleteEntityItemT>,
+    >
+>) {
   const handleAdd = React.useCallback(() => {
     dispatch({type: 'add-value'});
   }, [dispatch]);
@@ -232,26 +246,9 @@ const Multiselect = (React.memo(<
     return accum + (valueAttribute.removed ? 0 : 1);
   }, 0);
 
-  // XXX: https://github.com/facebook/flow/issues/7672
-  const GenericMultiselectValue = (
-    // $FlowIgnore[incompatible-cast]
-    MultiselectValue:
-      React$AbstractComponent<
-        MultiselectValuePropsT<V, VS>,
-        mixed,
-      >
-  );
-
   return (
     <>
-      {state.values.map(valueAttribute => (
-        <GenericMultiselectValue
-          buildExtraChildren={buildExtraValueChildren}
-          dispatch={dispatch}
-          key={valueAttribute.key}
-          state={valueAttribute}
-        />
-      ))}
+      {buildValues(state, buildExtraValueChildren)}
       {(state.max == null || state.max < rowCount) ? (
         <button
           className="add-item with-label"
@@ -263,16 +260,9 @@ const Multiselect = (React.memo(<
       ) : null}
     </>
   );
-}): React$AbstractComponent<
-  MultiselectPropsT<
-    AutocompleteEntityItemT,
-    MultiselectValueStateT<AutocompleteEntityItemT>,
-    MultiselectStateT<
-      AutocompleteEntityItemT,
-      MultiselectValueStateT<AutocompleteEntityItemT>,
-    >,
-  >,
-  mixed,
->);
+}
+
+const Multiselect: React$AbstractComponent<React.PropsOf<_Multiselect>> =
+  React.memo(_Multiselect);
 
 export default Multiselect;
diff --git a/root/static/scripts/relationship-editor/components/DialogAttribute/MultiselectAttribute.js b/root/static/scripts/relationship-editor/components/DialogAttribute/MultiselectAttribute.js
@@ -24,6 +24,8 @@ import localizeLinkAttributeTypeName
 import {uniqueId} from '../../../common/utility/numbers.js';
 import Multiselect, {
   type MultiselectPropsT,
+  type MultiselectValuePropsT,
+  buildValues as buildMultiselectValues,
   runReducer as runMultiselectReducer,
   updateValue as updateMultiselectValue,
 } from '../../../edit/components/Multiselect.js';
@@ -186,6 +188,11 @@ component MultiselectAttributeComponent(
     dispatch(state.key, action);
   }, [dispatch, state.key]);
 
+  const buildValues: MultiselectValuePropsT<
+    LinkAttrTypeT,
+    DialogMultiselectAttributeValueStateT,
+  > = buildMultiselectValues;
+
   const buildExtraValueChildren = React.useCallback((
     valueState: DialogMultiselectAttributeValueStateT,
   ) => {
@@ -237,6 +244,7 @@ component MultiselectAttributeComponent(
     <LinkAttrTypeMultiselect
       addLabel={addLabel}
       buildExtraValueChildren={buildExtraValueChildren}
+      buildValues={buildValues}
       dispatch={multiselectDispatch}
       state={state}
     />

diff --git a/root/static/scripts/release/components/WorkLanguageMultiselect.js b/root/static/scripts/release/components/WorkLanguageMultiselect.js
@@ -25,6 +25,8 @@ import {uniqueId} from '../../common/utility/numbers.js';
 import Multiselect, {
   type MultiselectActionT,
   type MultiselectPropsT,
+  type MultiselectValuePropsT,
+  buildValues as buildMultiselectValues,
   runReducer as runMultiselectReducer,
 } from '../../edit/components/Multiselect.js';
 import type {
@@ -115,6 +117,11 @@ type WorkLanguageMultiselectPropsT = {
   +state: MultiselectLanguageStateT,
 };
 
+const buildValues: MultiselectValuePropsT<
+  LanguageT,
+  MultiselectLanguageValueStateT,
+> = buildMultiselectValues;
+
 // XXX: https://github.com/facebook/flow/issues/7672
 const LanguageMultiselect = (
   // $FlowIgnore
@@ -145,6 +152,7 @@ const WorkLanguageMultiselect: React$AbstractComponent<
     <td className="lyrics-languages">
       <LanguageMultiselect
         addLabel={l('Add lyrics language')}
+        buildValues={buildValues}
         dispatch={dispatch}
         state={state}
       />