Convert /static/scripts/release templates to use Flow component syntax

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

Hide file tree

Showing 12 changed files with 342 additions and 461 deletions.
diff --git a/root/static/scripts/release/components/BatchCreateWorksDialog.js b/root/static/scripts/release/components/BatchCreateWorksDialog.js
@@ -137,19 +137,11 @@ export function reducer(
   return newState;
 }
 
-type BatchCreateWorksDialogContentPropsT = {
-  +closeDialog: () => void,
-  +initialFocusRef: {-current: HTMLElement | null},
-  +sourceDispatch: (AcceptBatchCreateWorksDialogActionT) => void,
-};
-
-const BatchCreateWorksDialogContent = React.memo<
-  BatchCreateWorksDialogContentPropsT,
->(({
-  closeDialog,
-  initialFocusRef,
-  sourceDispatch,
-}: BatchCreateWorksDialogContentPropsT): React$Element<'div'> => {
+component _BatchCreateWorksDialogContent(
+  closeDialog: () => void,
+  initialFocusRef: {-current: HTMLElement | null},
+  sourceDispatch: (AcceptBatchCreateWorksDialogActionT) => void,
+) {
   const [state, dispatch] = React.useReducer(
     reducer,
     null,
@@ -282,21 +274,16 @@ const BatchCreateWorksDialogContent = React.memo<
       />
     </div>
   );
-});
-
-type BatchCreateWorksButtonPopoverPropsT = {
-  +dispatch: (ReleaseRelationshipEditorActionT) => void,
-  +isDisabled: boolean,
-  +isOpen: boolean,
-};
-
-export const BatchCreateWorksButtonPopover = (React.memo<
-  BatchCreateWorksButtonPopoverPropsT,
->(({
-  dispatch,
-  isDisabled,
-  isOpen,
-}: BatchCreateWorksButtonPopoverPropsT): React$MixedElement => {
+}
+
+const BatchCreateWorksDialogContent =
+  React.memo(_BatchCreateWorksDialogContent);
+
+component _BatchCreateWorksButtonPopover(
+  dispatch: (ReleaseRelationshipEditorActionT) => void,
+  isDisabled: boolean,
+  isOpen: boolean,
+) {
   const setOpen = React.useCallback((open: boolean) => {
     dispatch({
       location: open ? {
@@ -347,4 +334,8 @@ export const BatchCreateWorksButtonPopover = (React.memo<
       }
     />
   );
-}): React$AbstractComponent<BatchCreateWorksButtonPopoverPropsT, mixed>);
+}
+
+export const BatchCreateWorksButtonPopover: React$AbstractComponent<
+  React.PropsOf<_BatchCreateWorksButtonPopover>
+> = React.memo(_BatchCreateWorksButtonPopover);
diff --git a/root/static/scripts/release/components/EditWorkDialog.js b/root/static/scripts/release/components/EditWorkDialog.js
@@ -89,24 +89,12 @@ function reducer(
   return newState;
 }
 
-type EditWorkDialogPropsT = {
-  +closeDialog: () => void,
-  +initialFocusRef?: {-current: HTMLElement | null},
-  +rootDispatch: (ReleaseRelationshipEditorActionT) => void,
-  +work: WorkT,
-};
-
-const EditWorkDialog: React$AbstractComponent<
-  EditWorkDialogPropsT,
-  mixed,
-> = React.memo<
-  EditWorkDialogPropsT,
->(({
-  closeDialog,
-  initialFocusRef,
-  rootDispatch,
-  work,
-}: EditWorkDialogPropsT): React$MixedElement => {
+component _EditWorkDialog(
+  closeDialog: () => void,
+  initialFocusRef?: {-current: HTMLElement | null},
+  rootDispatch: (ReleaseRelationshipEditorActionT) => void,
+  work: WorkT,
+) {
   const [state, dispatch] = React.useReducer(
     reducer,
     work,
@@ -197,6 +185,10 @@ const EditWorkDialog: React$AbstractComponent<
       />
     </div>
   );
-});
+}
+
+const EditWorkDialog: React$AbstractComponent<
+  React.PropsOf<_EditWorkDialog>
+> = React.memo(_EditWorkDialog);
 
 export default EditWorkDialog;
diff --git a/root/static/scripts/release/components/MediumRelationshipEditor.js b/root/static/scripts/release/components/MediumRelationshipEditor.js
@@ -27,18 +27,6 @@ import type {
 
 import TrackRelationshipEditor from './TrackRelationshipEditor.js';
 
-type PropsT = {
-  +dialogLocation: RelationshipDialogLocationT | null,
-  +dispatch: (ReleaseRelationshipEditorActionT) => void,
-  +hasUnloadedTracks: boolean,
-  +isExpanded: boolean,
-  +medium: MediumWithRecordingsT,
-  +recordingStates: MediumRecordingStateTreeT | null,
-  +release: ReleaseWithMediumsT,
-  +releaseHasUnloadedTracks: boolean,
-  +tracks: $ReadOnlyArray<TrackWithRecordingT> | null,
-};
-
 export type WritableReleasePathsT = Map<number, Set<number>>;
 
 const getColumnCount = () => 3;
@@ -71,17 +59,17 @@ function handleLinkedEntitiesForMedium(
   }
 }
 
-const MediumRelationshipEditor = (React.memo<PropsT>(({
-  dialogLocation,
-  dispatch,
-  hasUnloadedTracks,
-  isExpanded,
-  medium,
-  recordingStates,
-  release,
-  releaseHasUnloadedTracks,
-  tracks,
-}: PropsT) => {
+component _MediumRelationshipEditor(
+  dialogLocation: RelationshipDialogLocationT | null,
+  dispatch: (ReleaseRelationshipEditorActionT) => void,
+  hasUnloadedTracks: boolean,
+  isExpanded: boolean,
+  medium: MediumWithRecordingsT,
+  recordingStates: MediumRecordingStateTreeT | null,
+  release: ReleaseWithMediumsT,
+  releaseHasUnloadedTracks: boolean,
+  tracks: $ReadOnlyArray<TrackWithRecordingT> | null,
+) {
   const tableVars = usePagedMediumTable({
     dispatch,
     getColumnCount,
@@ -198,6 +186,10 @@ const MediumRelationshipEditor = (React.memo<PropsT>(({
       </tbody>
     </>
   );
-}): React$AbstractComponent<PropsT, mixed>);
+}
+
+const MediumRelationshipEditor: React$AbstractComponent<
+  React.PropsOf<_MediumRelationshipEditor>
+> = React.memo(_MediumRelationshipEditor);
 
 export default MediumRelationshipEditor;
diff --git a/root/static/scripts/release/components/MediumTable.js b/root/static/scripts/release/components/MediumTable.js
@@ -17,27 +17,16 @@ import type {ActionT, CreditsModeT} from '../types.js';
 
 import MediumTrackRow from './MediumTrackRow.js';
 
-type PropsT = {
-  +creditsMode: CreditsModeT,
-  +dispatch: (ActionT) => void,
-  +hasUnloadedTracks: boolean,
-  +isExpanded: boolean,
-  +medium: MediumWithRecordingsT,
-  +noScript: boolean,
-  +release: ReleaseWithMediumsT,
-  +tracks: $ReadOnlyArray<TrackWithRecordingT> | null,
-};
-
-const MediumTable = (React.memo<PropsT>(({
-  creditsMode,
-  dispatch,
-  hasUnloadedTracks,
-  isExpanded,
-  medium,
-  noScript,
-  release,
-  tracks,
-}: PropsT) => {
+component _MediumTable(
+  creditsMode: CreditsModeT,
+  dispatch: (ActionT) => void,
+  hasUnloadedTracks: boolean,
+  isExpanded: boolean,
+  medium: MediumWithRecordingsT,
+  noScript: boolean,
+  release: ReleaseWithMediumsT,
+  tracks: $ReadOnlyArray<TrackWithRecordingT> | null,
+) {
   const tableVars = usePagedMediumTable({
     dispatch,
     getColumnCount: (showArtists) => 4 + (showArtists ? 1 : 0),
@@ -146,6 +135,10 @@ const MediumTable = (React.memo<PropsT>(({
       </tbody>
     </table>
   );
-}): React$AbstractComponent<PropsT, mixed>);
+}
+
+const MediumTable: React$AbstractComponent<
+  React.PropsOf<_MediumTable>
+> = React.memo(_MediumTable);
 
 export default MediumTable;
diff --git a/root/static/scripts/release/components/MediumToolbox.js b/root/static/scripts/release/components/MediumToolbox.js
@@ -15,84 +15,83 @@ import type {
   LazyReleaseActionT,
 } from '../types.js';
 
-type ToggleAllMediumsButtonsPropsT = {
-  +dispatch: (LazyReleaseActionT) => void,
-  +mediums: $ReadOnlyArray<MediumWithRecordingsT>,
-};
+component _ToggleAllMediumsButtons(
+  dispatch: (LazyReleaseActionT) => void,
+  mediums: $ReadOnlyArray<MediumWithRecordingsT>,
+) {
+  return (
+    <>
+      <button
+        className="btn-link"
+        id="expand-all-mediums"
+        onClick={() => {
+          dispatch({
+            expanded: true,
+            mediums,
+            type: 'toggle-all-mediums',
+          });
+        }}
+        type="button"
+      >
+        {l('Expand all mediums')}
+      </button>
+      {' | '}
+      <button
+        className="btn-link"
+        id="collapse-all-mediums"
+        onClick={() => {
+          dispatch({
+            expanded: false,
+            mediums,
+            type: 'toggle-all-mediums',
+          });
+        }}
+        type="button"
+      >
+        {l('Collapse all mediums')}
+      </button>
+    </>
+  );
+}
 
-export const ToggleAllMediumsButtons = (React.memo<
-  ToggleAllMediumsButtonsPropsT,
->(({
-  dispatch,
-  mediums,
-}: ToggleAllMediumsButtonsPropsT): React$MixedElement => (
-  <>
-    <button
-      className="btn-link"
-      id="expand-all-mediums"
-      onClick={() => {
-        dispatch({
-          expanded: true,
-          mediums,
-          type: 'toggle-all-mediums',
-        });
-      }}
-      type="button"
-    >
-      {l('Expand all mediums')}
-    </button>
-    {' | '}
-    <button
-      className="btn-link"
-      id="collapse-all-mediums"
-      onClick={() => {
-        dispatch({
-          expanded: false,
-          mediums,
-          type: 'toggle-all-mediums',
-        });
-      }}
-      type="button"
-    >
-      {l('Collapse all mediums')}
-    </button>
-  </>
-)): React$AbstractComponent<ToggleAllMediumsButtonsPropsT, mixed>);
+export const ToggleAllMediumsButtons: React$AbstractComponent<
+  React.PropsOf<_ToggleAllMediumsButtons>
+> = React.memo(_ToggleAllMediumsButtons);
 
-type MediumToolboxPropsT = {
-  +creditsMode: CreditsModeT,
-  +dispatch: (ActionT) => void,
-  +mediums: $ReadOnlyArray<MediumWithRecordingsT>,
-};
+component _MediumToolbox(
+  creditsMode: CreditsModeT,
+  dispatch: (ActionT) => void,
+  mediums: $ReadOnlyArray<MediumWithRecordingsT>,
+) {
+  return (
+    <span id="medium-toolbox">
+      {mediums.length > 1 ? (
+        <>
+          <ToggleAllMediumsButtons
+            dispatch={dispatch}
+            mediums={mediums}
+          />
+          {' | '}
+        </>
+      ) : null}
+      <button
+        className="btn-link"
+        id="toggle-credits"
+        onClick={() => {
+          dispatch({type: 'toggle-credits-mode'});
+        }}
+        type="button"
+      >
+        {creditsMode === 'bottom'
+          ? l('Display credits inline')
+          : l('Display credits at bottom')}
+      </button>
+    </span>
+  );
+}
 
-const MediumToolbox = (React.memo<MediumToolboxPropsT>(({
-  creditsMode,
-  dispatch,
-  mediums,
-}: MediumToolboxPropsT): React$Element<'span'> => (
-  <span id="medium-toolbox">
-    {mediums.length > 1 ? (
-      <>
-        <ToggleAllMediumsButtons
-          dispatch={dispatch}
-          mediums={mediums}
-        />
-        {' | '}
-      </>
-    ) : null}
-    <button
-      className="btn-link"
-      id="toggle-credits"
-      onClick={() => {
-        dispatch({type: 'toggle-credits-mode'});
-      }}
-      type="button"
-    >
-      {creditsMode === 'bottom'
-        ? l('Display credits inline')
-        : l('Display credits at bottom')}
-    </button>
-  </span>
-)): React$AbstractComponent<MediumToolboxPropsT, mixed>);
+const MediumToolbox: React$AbstractComponent<
+  React.PropsOf<_MediumToolbox>
+> = React.memo(_MediumToolbox);
 
 export default MediumToolbox;