Convert /work templates to use Flow component syntax

metabrainz · Apr 4, 2024 · d91215b · d91215b
1 parent 34b9a23
commit d91215b
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 124 deletions.
diff --git a/root/work/WorkHeader.js b/root/work/WorkHeader.js
@@ -11,21 +11,15 @@ import EntityHeader from '../components/EntityHeader.js';
 import localizeTypeNameForEntity
   from '../static/scripts/common/i18n/localizeTypeNameForEntity.js';
 
-type Props = {
-  page: string,
-  work: WorkT,
-};
-
-const WorkHeader = ({
-  work,
-  page,
-}: Props): React$Element<typeof EntityHeader> => (
-  <EntityHeader
-    entity={work}
-    headerClass="workheader"
-    page={page}
-    subHeading={localizeTypeNameForEntity(work)}
-  />
-);
+component WorkHeader(page: string, work: WorkT) {
+  return (
+    <EntityHeader
+      entity={work}
+      headerClass="workheader"
+      page={page}
+      subHeading={localizeTypeNameForEntity(work)}
+    />
+  );
+}
 
 export default WorkHeader;
diff --git a/root/work/WorkIndex.js b/root/work/WorkIndex.js
@@ -18,46 +18,39 @@ import WikipediaExtract
 
 import WorkLayout from './WorkLayout.js';
 
-type Props = {
-  +eligibleForCleanup: boolean,
-  +numberOfRevisions: number,
-  +pagedLinkTypeGroup: ?PagedLinkTypeGroupT,
-  +pager: ?PagerT,
-  +wikipediaExtract: WikipediaExtractT | null,
-  +work: WorkT,
-};
-
-const WorkIndex = ({
-  eligibleForCleanup,
-  numberOfRevisions,
-  pagedLinkTypeGroup,
-  pager,
-  wikipediaExtract,
-  work,
-}: Props): React$Element<typeof WorkLayout> => (
-  <WorkLayout entity={work} page="index">
-    {eligibleForCleanup ? (
-      <CleanupBanner entityType="work" />
-    ) : null}
-    <Annotation
-      annotation={work.latest_annotation}
-      collapse
-      entity={work}
-      numberOfRevisions={numberOfRevisions}
-    />
-    <WikipediaExtract
-      cachedWikipediaExtract={wikipediaExtract}
-      entity={work}
-    />
-    <Relationships source={work} />
-    <RelationshipsTable
-      entity={work}
-      heading={l('Recordings')}
-      pagedLinkTypeGroup={pagedLinkTypeGroup}
-      pager={pager}
-    />
-    {manifest.js('work/index', {async: 'async'})}
-  </WorkLayout>
-);
+component WorkIndex(
+  eligibleForCleanup: boolean,
+  numberOfRevisions: number,
+  pagedLinkTypeGroup: ?PagedLinkTypeGroupT,
+  pager: ?PagerT,
+  wikipediaExtract: WikipediaExtractT | null,
+  work: WorkT,
+) {
+  return (
+    <WorkLayout entity={work} page="index">
+      {eligibleForCleanup ? (
+        <CleanupBanner entityType="work" />
+      ) : null}
+      <Annotation
+        annotation={work.latest_annotation}
+        collapse
+        entity={work}
+        numberOfRevisions={numberOfRevisions}
+      />
+      <WikipediaExtract
+        cachedWikipediaExtract={wikipediaExtract}
+        entity={work}
+      />
+      <Relationships source={work} />
+      <RelationshipsTable
+        entity={work}
+        heading={l('Recordings')}
+        pagedLinkTypeGroup={pagedLinkTypeGroup}
+        pager={pager}
+      />
+      {manifest.js('work/index', {async: 'async'})}
+    </WorkLayout>
+  );
+}
 
 export default WorkIndex;
diff --git a/root/work/WorkLayout.js b/root/work/WorkLayout.js
@@ -12,21 +12,13 @@ import Layout from '../layout/index.js';
 
 import WorkHeader from './WorkHeader.js';
 
-type Props = {
-  +children: React$Node,
-  +entity: WorkT,
-  +fullWidth?: boolean,
-  +page: string,
-  +title?: string,
-};
-
-const WorkLayout = ({
-  children,
-  entity: work,
-  fullWidth = false,
-  page,
-  title,
-}: Props): React$Element<typeof Layout> => {
+component WorkLayout(
+  children: React$Node,
+  entity as work: WorkT,
+  fullWidth: boolean = false,
+  page: string,
+  title?: string,
+) {
   const mainTitle = texp.l('{type} “{work}”', {
     type: nonEmpty(work.typeName)
       ? lp_attributes(work.typeName, 'work_type')
@@ -44,6 +36,6 @@ const WorkLayout = ({
       {fullWidth ? null : <WorkSidebar work={work} />}
     </Layout>
   );
-};
+}
 
 export default WorkLayout;
diff --git a/root/work/WorkMerge.js b/root/work/WorkMerge.js
@@ -16,58 +16,54 @@ import EnterEditNote
   from '../static/scripts/edit/components/EnterEditNote.js';
 import FieldErrors from '../static/scripts/edit/components/FieldErrors.js';
 
-type Props = {
-  +form: MergeFormT,
-  +iswcsDiffer?: boolean,
-  +toMerge: $ReadOnlyArray<WorkT>,
-};
+component WorkMerge(
+  form: MergeFormT,
+  iswcsDiffer?: boolean = false,
+  toMerge: $ReadOnlyArray<WorkT>,
+) {
+  return (
+    <Layout fullWidth title={l('Merge works')}>
+      <div id="content">
+        <h1>{l('Merge works')}</h1>
+        <p>
+          {l(`You are about to merge all these works into a single one.
+              Please select the work all others should be merged into:`)}
+        </p>
+        {iswcsDiffer ? (
+          <div className="warning warning-iswcs-differ">
+            <p>
+              {exp.l(
+                `<strong>Warning:</strong> Some of the works you’re
+                 merging have different ISWCs. Please make sure they are
+                 indeed the same works and you wish to continue with
+                 the merge.`,
+              )}
+            </p>
+          </div>
+        ) : null}
+        <form method="post">
+          <WorkList
+            mergeForm={form}
+            works={sortByEntityName(toMerge)}
+          />
+          <FieldErrors field={form.field.target} />
 
-const WorkMerge = ({
-  form,
-  iswcsDiffer = false,
-  toMerge,
-}: Props): React$Element<typeof Layout> => (
-  <Layout fullWidth title={l('Merge works')}>
-    <div id="content">
-      <h1>{l('Merge works')}</h1>
-      <p>
-        {l(`You are about to merge all these works into a single one.
-            Please select the work all others should be merged into:`)}
-      </p>
-      {iswcsDiffer ? (
-        <div className="warning warning-iswcs-differ">
-          <p>
-            {exp.l(
-              `<strong>Warning:</strong> Some of the works you’re
-               merging have different ISWCs. Please make sure they are
-               indeed the same works and you wish to continue with
-               the merge.`,
-            )}
-          </p>
-        </div>
-      ) : null}
-      <form method="post">
-        <WorkList
-          mergeForm={form}
-          works={sortByEntityName(toMerge)}
-        />
-        <FieldErrors field={form.field.target} />
+          <EnterEditNote field={form.field.edit_note} />
 
-        <EnterEditNote field={form.field.edit_note} />
-
-        <EnterEdit form={form}>
-          <button
-            className="negative"
-            name="submit"
-            type="submit"
-            value="cancel"
-          >
-            {l('Cancel')}
-          </button>
-        </EnterEdit>
-      </form>
-    </div>
-  </Layout>
-);
+          <EnterEdit form={form}>
+            <button
+              className="negative"
+              name="submit"
+              type="submit"
+              value="cancel"
+            >
+              {l('Cancel')}
+            </button>
+          </EnterEdit>
+        </form>
+      </div>
+    </Layout>
+  );
+}
 
 export default WorkMerge;