From 6b4815532239c069d4d6bee9f0c45fbcd097608d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Tamargo?= Date: Mon, 15 Apr 2024 13:31:23 +0200 Subject: [PATCH] Convert /static/scripts/release templates to use Flow component syntax --- .../components/BatchCreateWorksDialog.js | 49 ++-- .../release/components/EditWorkDialog.js | 30 +-- .../components/MediumRelationshipEditor.js | 40 ++-- .../scripts/release/components/MediumTable.js | 37 ++-- .../release/components/MediumToolbox.js | 151 +++++++------ .../release/components/MediumTrackRow.js | 25 +-- .../RelationshipEditorBatchTools.js | 64 ++---- .../components/ReleaseRelationshipEditor.js | 137 +++++------- .../components/TrackRelationshipEditor.js | 209 ++++++++---------- .../release/components/TracklistAndCredits.js | 27 ++- .../release/components/WorkTypeSelect.js | 25 +-- root/static/scripts/release/types.js | 9 - 12 files changed, 342 insertions(+), 461 deletions(-) diff --git a/root/static/scripts/release/components/BatchCreateWorksDialog.js b/root/static/scripts/release/components/BatchCreateWorksDialog.js index dc5a3a83a97..aa68d0a88d5 100644 --- 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< /> ); -}); - -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); +} + +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 index 9d508a47d67..f69f8c60011 100644 --- 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< /> ); -}); +} + +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 index ba7c68231a1..d94a462efdc 100644 --- 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 | null, -}; - export type WritableReleasePathsT = Map>; const getColumnCount = () => 3; @@ -71,17 +59,17 @@ function handleLinkedEntitiesForMedium( } } -const MediumRelationshipEditor = (React.memo(({ - 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 | null, +) { const tableVars = usePagedMediumTable({ dispatch, getColumnCount, @@ -198,6 +186,10 @@ const MediumRelationshipEditor = (React.memo(({ ); -}): React$AbstractComponent); +} + +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 index d6241560183..33c813a9858 100644 --- 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 | null, -}; - -const MediumTable = (React.memo(({ - 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 | null, +) { const tableVars = usePagedMediumTable({ dispatch, getColumnCount: (showArtists) => 4 + (showArtists ? 1 : 0), @@ -146,6 +135,10 @@ const MediumTable = (React.memo(({ ); -}): React$AbstractComponent); +} + +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 index 40df89904dc..3e79911cb05 100644 --- 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, -}; +component _ToggleAllMediumsButtons( + dispatch: (LazyReleaseActionT) => void, + mediums: $ReadOnlyArray, +) { + return ( + <> + + {' | '} + + + ); +} -export const ToggleAllMediumsButtons = (React.memo< - ToggleAllMediumsButtonsPropsT, ->(({ - dispatch, - mediums, -}: ToggleAllMediumsButtonsPropsT): React$MixedElement => ( - <> - - {' | '} - - -)): React$AbstractComponent); +export const ToggleAllMediumsButtons: React$AbstractComponent< + React.PropsOf<_ToggleAllMediumsButtons> +> = React.memo(_ToggleAllMediumsButtons); -type MediumToolboxPropsT = { - +creditsMode: CreditsModeT, - +dispatch: (ActionT) => void, - +mediums: $ReadOnlyArray, -}; +component _MediumToolbox( + creditsMode: CreditsModeT, + dispatch: (ActionT) => void, + mediums: $ReadOnlyArray, +) { + return ( + + {mediums.length > 1 ? ( + <> + + {' | '} + + ) : null} + + + ); +} -const MediumToolbox = (React.memo(({ - creditsMode, - dispatch, - mediums, -}: MediumToolboxPropsT): React$Element<'span'> => ( - - {mediums.length > 1 ? ( - <> - - {' | '} - - ) : null} - - -)): React$AbstractComponent); +const MediumToolbox: React$AbstractComponent< + React.PropsOf<_MediumToolbox> +> = React.memo(_MediumToolbox); export default MediumToolbox; diff --git a/root/static/scripts/release/components/MediumTrackRow.js b/root/static/scripts/release/components/MediumTrackRow.js index 7207a6fe349..f47fd38b055 100644 --- a/root/static/scripts/release/components/MediumTrackRow.js +++ b/root/static/scripts/release/components/MediumTrackRow.js @@ -21,19 +21,12 @@ import formatTrackLength from '../../common/utility/formatTrackLength.js'; import type {CreditsModeT} from '../types.js'; -type PropsT = { - +creditsMode: CreditsModeT, - +index: number, - +showArtists?: boolean, - +track: TrackWithRecordingT, -}; - -const MediumTrackRow = (React.memo(({ - creditsMode, - index, - track, - showArtists = false, -}: PropsT) => { +component _MediumTrackRow( + creditsMode: CreditsModeT, + index: number, + showArtists: boolean = false, + track: TrackWithRecordingT, +) { const $c = React.useContext(SanitizedCatalystContext); const recordingAC = track.recording?.artistCredit; @@ -89,6 +82,10 @@ const MediumTrackRow = (React.memo(({ ); -}): React$AbstractComponent); +} + +const MediumTrackRow: React$AbstractComponent< + React.PropsOf<_MediumTrackRow> +> = React.memo(_MediumTrackRow); export default MediumTrackRow; diff --git a/root/static/scripts/release/components/RelationshipEditorBatchTools.js b/root/static/scripts/release/components/RelationshipEditorBatchTools.js index 2b93086ce64..f902a031101 100644 --- a/root/static/scripts/release/components/RelationshipEditorBatchTools.js +++ b/root/static/scripts/release/components/RelationshipEditorBatchTools.js @@ -24,37 +24,17 @@ import type { import {BatchCreateWorksButtonPopover} from './BatchCreateWorksDialog.js'; -type PropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +recordingSelectionCount: number, - +releaseHasUnloadedTracks: boolean, - +workSelectionCount: number, -}; - -type BatchAddRelationshipButtonPopoverPropsT = { - +batchSelectionCount: number, - +buttonClassName: string, - +buttonContent: string, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +entityPlaceholder: string, - +isOpen: boolean, - +popoverId: string, - +releaseHasUnloadedTracks: boolean, - +sourceType: RelatableEntityTypeT, -}; - -const BatchAddRelationshipButtonPopover = ({ - batchSelectionCount, - buttonClassName, - buttonContent, - dispatch, - entityPlaceholder, - isOpen, - popoverId, - releaseHasUnloadedTracks, - sourceType, -}: BatchAddRelationshipButtonPopoverPropsT) => { +component BatchAddRelationshipButtonPopover( + batchSelectionCount: number, + buttonClassName: string, + buttonContent: string, + dispatch: (ReleaseRelationshipEditorActionT) => void, + entityPlaceholder: string, + isOpen: boolean, + popoverId: string, + releaseHasUnloadedTracks: boolean, + sourceType: RelatableEntityTypeT, +) { const sourcePlaceholder = createRelatableEntityObject(sourceType, { name: entityPlaceholder, }); @@ -122,15 +102,15 @@ const BatchAddRelationshipButtonPopover = ({ } /> ); -}; +} -const RelationshipEditorBatchTools = (React.memo(({ - dialogLocation, - dispatch, - recordingSelectionCount, - releaseHasUnloadedTracks, - workSelectionCount, -}: PropsT): React$Element<'table'> => { +component _RelationshipEditorBatchTools( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + recordingSelectionCount: number, + releaseHasUnloadedTracks: boolean, + workSelectionCount: number, +) { return ( @@ -183,6 +163,10 @@ const RelationshipEditorBatchTools = (React.memo(({
); -}): React$AbstractComponent); +} + +const RelationshipEditorBatchTools: React$AbstractComponent< + React.PropsOf<_RelationshipEditorBatchTools> +> = React.memo(_RelationshipEditorBatchTools); export default RelationshipEditorBatchTools; diff --git a/root/static/scripts/release/components/ReleaseRelationshipEditor.js b/root/static/scripts/release/components/ReleaseRelationshipEditor.js index 8cc12018740..1563af5a73b 100644 --- a/root/static/scripts/release/components/ReleaseRelationshipEditor.js +++ b/root/static/scripts/release/components/ReleaseRelationshipEditor.js @@ -1414,23 +1414,14 @@ export const reducer: (( return newState; }); -type MediumRelationshipEditorsPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +expandedMediums: $ReadOnlyMap, - +loadedTracks: LoadedTracksMapT, - +mediums: MediumStateTreeT, - +release: ReleaseWithMediumsT, -}; - -const MediumRelationshipEditors = React.memo(({ - dialogLocation, - dispatch, - expandedMediums, - loadedTracks, - mediums, - release, -}: MediumRelationshipEditorsPropsT) => { +component _MediumRelationshipEditors( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + expandedMediums: $ReadOnlyMap, + loadedTracks: LoadedTracksMapT, + mediums: MediumStateTreeT, + release: ReleaseWithMediumsT, +) { const hasUnloadedTracksPerMedium = useUnloadedTracksMap(release.mediums, loadedTracks); const hasUnloadedTracks = @@ -1459,31 +1450,21 @@ const MediumRelationshipEditors = React.memo(({ ); } return mediumElements; -}); +} + +const MediumRelationshipEditors = React.memo(_MediumRelationshipEditors); -type TrackRelationshipsSectionPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +expandedMediums: $ReadOnlyMap, - +loadedTracks: LoadedTracksMapT, - +mediums: MediumStateTreeT, - +release: ReleaseWithMediumsT, - +releaseHasUnloadedTracks: boolean, - +selectedRecordings: tree.ImmutableTree | null, - +selectedWorks: tree.ImmutableTree | null, -}; - -const TrackRelationshipsSection = React.memo(({ - dialogLocation, - dispatch, - expandedMediums, - loadedTracks, - mediums, - release, - releaseHasUnloadedTracks, - selectedRecordings, - selectedWorks, -}: TrackRelationshipsSectionPropsT) => { +component _TrackRelationshipsSection( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + expandedMediums: $ReadOnlyMap, + loadedTracks: LoadedTracksMapT, + mediums: MediumStateTreeT, + release: ReleaseWithMediumsT, + releaseHasUnloadedTracks: boolean, + selectedRecordings: tree.ImmutableTree | null, + selectedWorks: tree.ImmutableTree | null, +) { const recordingCount = selectedRecordings ? selectedRecordings.size : 0; const workCount = selectedWorks ? selectedWorks.size : 0; @@ -1613,23 +1594,17 @@ const TrackRelationshipsSection = React.memo(({ )} ); -}); +} -type ReleaseRelationshipSectionPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +relationshipsBySource: RelationshipSourceGroupsT, - +release: ReleaseWithMediumsT, - +releaseHasUnloadedTracks: boolean, -}; - -const ReleaseRelationshipSection = React.memo(({ - dialogLocation, - dispatch, - relationshipsBySource, - release, - releaseHasUnloadedTracks, -}: ReleaseRelationshipSectionPropsT) => { +const TrackRelationshipsSection = React.memo(_TrackRelationshipsSection); + +component _ReleaseRelationshipSection( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + relationshipsBySource: RelationshipSourceGroupsT, + release: ReleaseWithMediumsT, + releaseHasUnloadedTracks: boolean, +) { if (dialogLocation != null) { invariant(dialogLocation.source.id === release.id); } @@ -1656,23 +1631,17 @@ const ReleaseRelationshipSection = React.memo(({ ); -}); +} -type ReleaseGroupRelationshipSectionPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +relationshipsBySource: RelationshipSourceGroupsT, - +releaseGroup: ReleaseGroupT, - +releaseHasUnloadedTracks: boolean, -}; - -const ReleaseGroupRelationshipSection = React.memo(({ - dialogLocation, - dispatch, - relationshipsBySource, - releaseGroup, - releaseHasUnloadedTracks, -}: ReleaseGroupRelationshipSectionPropsT) => { +const ReleaseRelationshipSection = React.memo(_ReleaseRelationshipSection); + +component _ReleaseGroupRelationshipSection( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + relationshipsBySource: RelationshipSourceGroupsT, + releaseGroup: ReleaseGroupT, + releaseHasUnloadedTracks: boolean, +) { if (dialogLocation != null) { invariant(dialogLocation.source.id === releaseGroup.id); } @@ -1699,10 +1668,12 @@ const ReleaseGroupRelationshipSection = React.memo(({ ); -}); +} -let ReleaseRelationshipEditor: React$AbstractComponent<{}, void> = ( -): React$MixedElement => { +const ReleaseGroupRelationshipSection = + React.memo(_ReleaseGroupRelationshipSection); + +component _ReleaseRelationshipEditor() { const [state, dispatch] = React.useReducer( reducer, null, @@ -1873,17 +1844,17 @@ let ReleaseRelationshipEditor: React$AbstractComponent<{}, void> = ( ); -}; +} -ReleaseRelationshipEditor = - withLoadedTypeInfoForRelationshipEditor<{}, void>( - ReleaseRelationshipEditor, +const NonHydratedReleaseRelationshipEditor: React$AbstractComponent<{}> = + withLoadedTypeInfoForRelationshipEditor<{}>( + _ReleaseRelationshipEditor, ['language', 'work_type'], ); -ReleaseRelationshipEditor = hydrate<{}>( +const ReleaseRelationshipEditor = (hydrate<{}>( 'div.release-relationship-editor', - ReleaseRelationshipEditor, -); + NonHydratedReleaseRelationshipEditor, +): React$AbstractComponent<{}, void>); export default ReleaseRelationshipEditor; diff --git a/root/static/scripts/release/components/TrackRelationshipEditor.js b/root/static/scripts/release/components/TrackRelationshipEditor.js index 4cffc3389d6..05f60985d41 100644 --- a/root/static/scripts/release/components/TrackRelationshipEditor.js +++ b/root/static/scripts/release/components/TrackRelationshipEditor.js @@ -43,15 +43,10 @@ import { import EditWorkDialog from './EditWorkDialog.js'; -type TrackLinkPropsT = { - +showArtists: boolean, - +track: TrackWithRecordingT, -}; - -const TrackLink = React.memo(({ - showArtists, - track, -}) => { +component _TrackLink( + showArtists: boolean, + track: TrackWithRecordingT, +) { let trackLink: Expand2ReactOutput; if (showArtists) { trackLink = ( @@ -82,38 +77,30 @@ const TrackLink = React.memo(({ {bracketedText(formatTrackLength(track.length))} ); -}); - -type WorkLinkPropsT = { - +work: WorkT, -}; - -const WorkLink = React.memo(({ - work, -}) => ( - -)); - -type RelatedWorkHeadingPropsT = { - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +isRemoved: boolean, - +isSelected: boolean, - +removeWorkButton: React$MixedElement, - +work: WorkT, -}; - -const RelatedWorkHeading = ({ - dispatch, - isRemoved, - isSelected, - removeWorkButton, - work, -}: RelatedWorkHeadingPropsT) => { +} + +const TrackLink = React.memo(_TrackLink); + +component _WorkLink(work: WorkT) { + return ( + + ); +} + +const WorkLink = React.memo(_WorkLink); + +component RelatedWorkHeading( + dispatch: (ReleaseRelationshipEditorActionT) => void, + isRemoved: boolean, + isSelected: boolean, + removeWorkButton: React$MixedElement, + work: WorkT, +) { const selectWork = React.useCallback(( event: SyntheticEvent, ) => { @@ -147,14 +134,14 @@ const RelatedWorkHeading = ({ {workLink} ); -}; - -const NewRelatedWorkHeading = ({ - dispatch, - isSelected, - removeWorkButton, - work, -}: RelatedWorkHeadingPropsT) => { +} + +component NewRelatedWorkHeading( + dispatch: (ReleaseRelationshipEditorActionT) => void, + isSelected: boolean, + removeWorkButton: React$MixedElement, + work: WorkT, +) { const selectWork = React.useCallback(( event: SyntheticEvent, ) => { @@ -208,29 +195,19 @@ const NewRelatedWorkHeading = ({ ); -}; - -type RelatedWorkRelationshipEditorPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +relatedWork: MediumWorkStateT, - +releaseHasUnloadedTracks: boolean, - +track: TrackWithRecordingT, -}; +} const filterRecordings = ( targetType: RelatableEntityTypeT, ) => targetType !== 'recording'; -const RelatedWorkRelationshipEditor = React.memo< - RelatedWorkRelationshipEditorPropsT, ->(({ - dialogLocation, - dispatch, - relatedWork, - releaseHasUnloadedTracks, - track, -}) => { +component _RelatedWorkRelationshipEditor( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + relatedWork: MediumWorkStateT, + releaseHasUnloadedTracks: boolean, + track: TrackWithRecordingT, +) { const work = relatedWork.work; const isNewWork = work._fromBatchCreateWorksDialog === true; const hasLoadedRelationships = work.relationships != null; @@ -313,18 +290,24 @@ const RelatedWorkRelationshipEditor = React.memo< relatedWork.targetTypeGroups, ]); - const RelatedWorkHeadingComponent = - isNewWork ? NewRelatedWorkHeading : RelatedWorkHeading; - return ( <> - + {isNewWork ? ( + + ) : ( + + )} ); -}); - -type RelatedWorksRelationshipEditorPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +recording: RecordingT, - +relatedWorks: MediumWorkStateTreeT | null, - +releaseHasUnloadedTracks: boolean, - +track: TrackWithRecordingT, -}; - -const RelatedWorksRelationshipEditor = React.memo< - RelatedWorksRelationshipEditorPropsT, ->(({ - dialogLocation, - dispatch, - recording, - relatedWorks, - releaseHasUnloadedTracks, - track, -}) => { +} + +const RelatedWorkRelationshipEditor = + React.memo(_RelatedWorkRelationshipEditor); + +component _RelatedWorksRelationshipEditor( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + recording: RecordingT, + relatedWorks: MediumWorkStateTreeT | null, + releaseHasUnloadedTracks: boolean, + track: TrackWithRecordingT, +) { const relatedWorkElements = []; for (const relatedWork of tree.iterate(relatedWorks)) { relatedWorkElements.push( @@ -436,25 +411,19 @@ const RelatedWorksRelationshipEditor = React.memo< {relatedWorkElements} ); -}); - -type TrackRelationshipEditorPropsT = { - +dialogLocation: RelationshipDialogLocationT | null, - +dispatch: (ReleaseRelationshipEditorActionT) => void, - +recordingState: MediumRecordingStateT, - +releaseHasUnloadedTracks: boolean, - +showArtists: boolean, - +track: TrackWithRecordingT, -}; - -const TrackRelationshipEditor = (React.memo(({ - dialogLocation, - dispatch, - recordingState, - releaseHasUnloadedTracks, - showArtists, - track, -}: TrackRelationshipEditorPropsT) => { +} + +const RelatedWorksRelationshipEditor = + React.memo(_RelatedWorksRelationshipEditor); + +component _TrackRelationshipEditor( + dialogLocation: RelationshipDialogLocationT | null, + dispatch: (ReleaseRelationshipEditorActionT) => void, + recordingState: MediumRecordingStateT, + releaseHasUnloadedTracks: boolean, + showArtists: boolean, + track: TrackWithRecordingT, +) { const selectRecording = React.useCallback(( event: SyntheticEvent, ) => { @@ -525,7 +494,11 @@ const TrackRelationshipEditor = (React.memo(({ /> ); -}): React$AbstractComponent); +} + +const TrackRelationshipEditor: React$AbstractComponent< + React.PropsOf<_TrackRelationshipEditor> +> = React.memo(_TrackRelationshipEditor); TrackRelationshipEditor.displayName = 'TrackRelationshipEditor'; diff --git a/root/static/scripts/release/components/TracklistAndCredits.js b/root/static/scripts/release/components/TracklistAndCredits.js index 96795d6f0f8..575cbf9f4c9 100644 --- a/root/static/scripts/release/components/TracklistAndCredits.js +++ b/root/static/scripts/release/components/TracklistAndCredits.js @@ -18,6 +18,7 @@ import StaticRelationshipsDisplay from '../../common/components/StaticRelationshipsDisplay.js'; import WarningIcon from '../../common/components/WarningIcon.js'; import {l} from '../../common/i18n.js'; +import type {LinkedEntitiesT} from '../../common/linkedEntities.mjs'; import { mergeLinkedEntities, } from '../../common/linkedEntities.mjs'; @@ -31,7 +32,6 @@ import type { LazyReleaseActionT, LazyReleaseStateT, LoadedTracksMapT, - PropsT, StateT, } from '../types.js'; @@ -244,13 +244,12 @@ export function useReleaseHasUnloadedTracks( }, [hasUnloadedTracksPerMedium]); } -const TracklistAndCredits = React.memo((props: PropsT) => { - const { - noScript, - release, - initialLinkedEntities, - } = props; - +component _TracklistAndCredits( + initialCreditsMode: CreditsModeT, + initialLinkedEntities: $ReadOnly>, + noScript: boolean, + release: ReleaseWithMediumsT, +) { const setLinkedEntitiesRef = React.useRef(false); if (!setLinkedEntitiesRef.current) { mergeLinkedEntities(initialLinkedEntities); @@ -259,7 +258,7 @@ const TracklistAndCredits = React.memo((props: PropsT) => { const [state, dispatch] = React.useReducer( reducer, - props.initialCreditsMode, + initialCreditsMode, createInitialState, ); @@ -409,9 +408,13 @@ const TracklistAndCredits = React.memo((props: PropsT) => { ) : null} ); -}); +} + +const TracklistAndCredits: React$AbstractComponent< + React.PropsOf<_TracklistAndCredits> +> = React.memo(_TracklistAndCredits); -export default (hydrate( +export default (hydrate>( 'div.tracklist-and-credits', TracklistAndCredits, -): React$AbstractComponent); +): React$AbstractComponent, void>); diff --git a/root/static/scripts/release/components/WorkTypeSelect.js b/root/static/scripts/release/components/WorkTypeSelect.js index e4778d0a26f..c55a9030be7 100644 --- a/root/static/scripts/release/components/WorkTypeSelect.js +++ b/root/static/scripts/release/components/WorkTypeSelect.js @@ -25,20 +25,11 @@ function workTypeValue(workType: number | null): string { return String(workType); } -type WorkTypeSelectPropsT = { - +dispatch: (WorkTypeSelectActionT) => void, - +initialFocusRef?: {-current: HTMLElement | null}, - +workType: number | null, -}; - -const WorkTypeSelect: React$AbstractComponent< - WorkTypeSelectPropsT, - mixed, -> = React.memo(({ - dispatch, - initialFocusRef, - workType, -}: WorkTypeSelectPropsT) => { +component _WorkTypeSelect( + dispatch: (WorkTypeSelectActionT) => void, + initialFocusRef?: {-current: HTMLElement | null}, + workType: number | null, +) { const workTypeOptions: OptionListT = React.useMemo(() => { const workTypes: $ReadOnlyArray = Object.values(linkedEntities.work_type); @@ -75,6 +66,10 @@ const WorkTypeSelect: React$AbstractComponent< ); -}); +} + +const WorkTypeSelect: React$AbstractComponent< + React.PropsOf<_WorkTypeSelect> +> = React.memo(_WorkTypeSelect); export default WorkTypeSelect; diff --git a/root/static/scripts/release/types.js b/root/static/scripts/release/types.js index 05173fa52a0..7a777963d74 100644 --- a/root/static/scripts/release/types.js +++ b/root/static/scripts/release/types.js @@ -7,8 +7,6 @@ * later version: http://www.gnu.org/licenses/gpl-2.0.txt */ -import type {LinkedEntitiesT} from '../common/linkedEntities.mjs'; - export type CreditsModeT = 'bottom' | 'inline'; export type LazyReleaseActionT = @@ -31,13 +29,6 @@ export type ActionT = | {+type: 'toggle-credits-mode'} | LazyReleaseActionT; -export type PropsT = { - +initialCreditsMode: CreditsModeT, - +initialLinkedEntities: $ReadOnly>, - +noScript: boolean, - +release: ReleaseWithMediumsT, -}; - export type LoadedTracksMapT = $ReadOnlyMap>;