Convert /taglookup templates to use Flow component syntax

Flow wasn't happy with us passing variables we don't use as part of props. I made some changes on how we do typing here that actually allowed me to drop the separate types file entirely.
metabrainz · Apr 4, 2024 · ccd32fb · ccd32fb
1 parent 5c369c6
commit ccd32fb
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 184 deletions.
diff --git a/root/taglookup/ArtistResults.js b/root/taglookup/ArtistResults.js
@@ -10,18 +10,20 @@
 import {ArtistResultsInline} from '../search/components/ArtistResults.js';
 
 import TagLookupResults from './Results.js';
-import type {TagLookupResultsPropsT} from './types.js';
 
-const TagLookupArtistResults = (
-  props: TagLookupResultsPropsT<ArtistT>,
-): React$MixedElement => (
-  <TagLookupResults {...props}>
-    <ArtistResultsInline
-      pager={props.pager}
-      query={props.query}
-      results={props.results}
-    />
-  </TagLookupResults>
-);
+component TagLookupArtistResults(...props: {
+  ...React.PropsOf<ArtistResultsInline>,
+  ...React.PropsOf<TagLookupResults>,
+}) {
+  return (
+    <TagLookupResults form={props.form} nag={props.nag}>
+      <ArtistResultsInline
+        pager={props.pager}
+        query={props.query}
+        results={props.results}
+      />
+    </TagLookupResults>
+  );
+}
 
 export default TagLookupArtistResults;
diff --git a/root/taglookup/Form.js b/root/taglookup/Form.js
@@ -13,48 +13,46 @@ import FormRowTextLong
   from '../static/scripts/edit/components/FormRowTextLong.js';
 import FormSubmit from '../static/scripts/edit/components/FormSubmit.js';
 
-type Props = {
-  +form: TagLookupFormT,
-};
-
-const TagLookupForm = ({form}: Props): React$Element<'div'> => (
-  <div className="searchform">
-    <form action="/taglookup/index" method="get">
-      <FormRowTextLong
-        field={form.field.artist}
-        label={addColonText(l('Artist'))}
-        uncontrolled
-      />
-      <FormRowTextLong
-        field={form.field.release}
-        label={addColonText(l('Release'))}
-        uncontrolled
-      />
-      <FormRowText
-        field={form.field.tracknum}
-        label={addColonText(l('Track number'))}
-        uncontrolled
-      />
-      <FormRowTextLong
-        field={form.field.track}
-        label={addColonText(l('Track'))}
-        uncontrolled
-      />
-      <FormRowText
-        field={form.field.duration}
-        label={addColonText(l('Duration'))}
-        uncontrolled
-      />
-      <FormRowTextLong
-        field={form.field.filename}
-        label={addColonText(l('Filename'))}
-        uncontrolled
-      />
-      <FormRow hasNoLabel>
-        <FormSubmit label={l('Search')} />
-      </FormRow>
-    </form>
-  </div>
-);
+component TagLookupForm(form: TagLookupFormT) {
+  return (
+    <div className="searchform">
+      <form action="/taglookup/index" method="get">
+        <FormRowTextLong
+          field={form.field.artist}
+          label={addColonText(l('Artist'))}
+          uncontrolled
+        />
+        <FormRowTextLong
+          field={form.field.release}
+          label={addColonText(l('Release'))}
+          uncontrolled
+        />
+        <FormRowText
+          field={form.field.tracknum}
+          label={addColonText(l('Track number'))}
+          uncontrolled
+        />
+        <FormRowTextLong
+          field={form.field.track}
+          label={addColonText(l('Track'))}
+          uncontrolled
+        />
+        <FormRowText
+          field={form.field.duration}
+          label={addColonText(l('Duration'))}
+          uncontrolled
+        />
+        <FormRowTextLong
+          field={form.field.filename}
+          label={addColonText(l('Filename'))}
+          uncontrolled
+        />
+        <FormRow hasNoLabel>
+          <FormSubmit label={l('Search')} />
+        </FormRow>
+      </form>
+    </div>
+  );
+}
 
 export default TagLookupForm;
diff --git a/root/taglookup/Index.js b/root/taglookup/Index.js
@@ -11,16 +11,20 @@ import Layout from '../layout/index.js';
 
 import TagLookupForm from './Form.js';
 import TagLookupNagSection from './Nag.js';
-import type {TagLookupPropsT} from './types.js';
 
-const TagLookup = (props: TagLookupPropsT): React$Element<typeof Layout> => (
-  <Layout fullWidth title={lp('Tag lookup', 'audio file metadata')}>
-    <div className="content">
-      <h1>{lp('Tag lookup', 'audio file metadata')}</h1>
-      {props.nag ? <TagLookupNagSection /> : null}
-      <TagLookupForm form={props.form} />
-    </div>
-  </Layout>
-);
+component TagLookup(
+  form: TagLookupFormT,
+  nag: boolean,
+) {
+  return (
+    <Layout fullWidth title={lp('Tag lookup', 'audio file metadata')}>
+      <div className="content">
+        <h1>{lp('Tag lookup', 'audio file metadata')}</h1>
+        {nag ? <TagLookupNagSection /> : null}
+        <TagLookupForm form={form} />
+      </div>
+    </Layout>
+  );
+}
 
 export default TagLookup;
diff --git a/root/taglookup/Nag.js b/root/taglookup/Nag.js
@@ -7,46 +7,48 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
-const TagLookupNagSection = (): React$Element<'div'> => (
-  <div className="nagpanel">
-    <p>
-      {l('The users make MusicBrainz happen and we appreciate your help!')}
-    </p>
-    <p>
-      {exp.l(
-        `However, we still have to pay the bills and hosting this site costs
-         {finances|more than $1000 per month}. We need our users to help us
-         make ends meet and hopefully have money left over to sponsor more
-         development. The {metabrainz_foundation|MetaBrainz Foundation}, a
-         California based 501(c)3 tax-exempt non-profit, operates the
-         MusicBrainz project which makes all donations
-         <strong>tax deductible</strong> for US taxpayers.
-         And it's simply good karma everywhere else!`,
-        {
-          finances: 'https://metabrainz.org/finances',
-          metabrainz_foundation: 'https://metabrainz.org',
-        },
-      )}
-    </p>
-    <p>
-      {exp.l(
-        `If you donate <strong>$4</strong> you will not get this nag text for 
-         a <strong>month</strong>. We encourage people to donate $12 to make
-         the nag screen disappear for 3 months. Or even better, sign up for a
-         recurring donation every three months to not have to think about or
-         see this nag again.`,
-      )}
-    </p>
-    <p className="naglinkpanel">
-      <a className="naglink" href="https://metabrainz.org/donate">
-        {l('Make a donation now!')}
-      </a>
-      <br />
-      <a href="/account/donation">
-        {l('I just donated! Why am I seeing this?')}
-      </a>
-    </p>
-  </div>
-);
+component TagLookupNagSection() {
+  return (
+    <div className="nagpanel">
+      <p>
+        {l('The users make MusicBrainz happen and we appreciate your help!')}
+      </p>
+      <p>
+        {exp.l(
+          `However, we still have to pay the bills and hosting this site costs
+           {finances|more than $1000 per month}. We need our users to help us
+           make ends meet and hopefully have money left over to sponsor more
+           development. The {metabrainz_foundation|MetaBrainz Foundation}, a
+           California based 501(c)3 tax-exempt non-profit, operates the
+           MusicBrainz project which makes all donations
+           <strong>tax deductible</strong> for US taxpayers.
+           And it's simply good karma everywhere else!`,
+          {
+            finances: 'https://metabrainz.org/finances',
+            metabrainz_foundation: 'https://metabrainz.org',
+          },
+        )}
+      </p>
+      <p>
+        {exp.l(
+          `If you donate <strong>$4</strong> you will not get this nag text 
+           for a <strong>month</strong>. We encourage people to donate $12
+           to make the nag screen disappear for 3 months. Or even better,
+           sign up for a recurring donation every three months
+           to not have to think about or see this nag again.`,
+        )}
+      </p>
+      <p className="naglinkpanel">
+        <a className="naglink" href="https://metabrainz.org/donate">
+          {l('Make a donation now!')}
+        </a>
+        <br />
+        <a href="/account/donation">
+          {l('I just donated! Why am I seeing this?')}
+        </a>
+      </p>
+    </div>
+  );
+}
 
 export default TagLookupNagSection;
diff --git a/root/taglookup/NotFound.js b/root/taglookup/NotFound.js
@@ -9,22 +9,25 @@
 
 import NotFound from '../components/NotFound.js';
 
-const TagLookupNotFound = (): React$Element<typeof NotFound> => (
-  <NotFound title={lp('Tag lookup error', 'audio file metadata')}>
-    <p>
-      {l(
-        `That search can't be performed, because you must provide at least one
-         of 'recording', 'track number', 'duration', 'release', or 'artist'.`,
-      )}
-    </p>
-    <p>
-      {exp.l(
-        `Please {search|try again}, providing at least 
-         one of these parameters`,
-        {search: '/taglookup'},
-      )}
-    </p>
-  </NotFound>
-);
+component TagLookupNotFound() {
+  return (
+    <NotFound title={lp('Tag lookup error', 'audio file metadata')}>
+      <p>
+        {l(
+          `That search can't be performed, because you must provide at least
+           one of 'recording', 'track number', 'duration', 'release',
+           or 'artist'.`,
+        )}
+      </p>
+      <p>
+        {exp.l(
+          `Please {search|try again}, providing at least 
+           one of these parameters`,
+          {search: '/taglookup'},
+        )}
+      </p>
+    </NotFound>
+  );
+}
 
 export default TagLookupNotFound;
diff --git a/root/taglookup/RecordingResults.js b/root/taglookup/RecordingResults.js
@@ -11,18 +11,20 @@ import {RecordingResultsInline}
   from '../search/components/RecordingResults.js';
 
 import TagLookupResults from './Results.js';
-import type {TagLookupResultsPropsT} from './types.js';
 
-const TagLookupRecordingResults = (
-  props: TagLookupResultsPropsT<RecordingWithArtistCreditT>,
-): React$MixedElement => (
-  <TagLookupResults {...props}>
-    <RecordingResultsInline
-      pager={props.pager}
-      query={props.query}
-      results={props.results}
-    />
-  </TagLookupResults>
-);
+component TagLookupRecordingResults(...props: {
+  ...React.PropsOf<RecordingResultsInline>,
+  ...React.PropsOf<TagLookupResults>,
+}) {
+  return (
+    <TagLookupResults form={props.form} nag={props.nag}>
+      <RecordingResultsInline
+        pager={props.pager}
+        query={props.query}
+        results={props.results}
+      />
+    </TagLookupResults>
+  );
+}
 
 export default TagLookupRecordingResults;
diff --git a/root/taglookup/ReleaseResults.js b/root/taglookup/ReleaseResults.js
@@ -10,18 +10,20 @@
 import {ReleaseResultsInline} from '../search/components/ReleaseResults.js';
 
 import TagLookupResults from './Results.js';
-import type {TagLookupResultsPropsT} from './types.js';
 
-const TagLookupReleaseResults = (
-  props: TagLookupResultsPropsT<ReleaseT>,
-): React$MixedElement => (
-  <TagLookupResults {...props}>
-    <ReleaseResultsInline
-      pager={props.pager}
-      query={props.query}
-      results={props.results}
-    />
-  </TagLookupResults>
-);
+component TagLookupReleaseResults(...props: {
+  ...React.PropsOf<ReleaseResultsInline>,
+  ...React.PropsOf<TagLookupResults>,
+}) {
+  return (
+    <TagLookupResults form={props.form} nag={props.nag}>
+      <ReleaseResultsInline
+        pager={props.pager}
+        query={props.query}
+        results={props.results}
+      />
+    </TagLookupResults>
+  );
+}
 
 export default TagLookupReleaseResults;
diff --git a/root/taglookup/Results.js b/root/taglookup/Results.js
@@ -11,19 +11,22 @@ import Layout from '../layout/index.js';
 
 import TagLookupForm from './Form.js';
 import TagLookupNagSection from './Nag.js';
-import type {TagLookupResultsPropsT} from './types.js';
 
-const TagLookupResults = <T>(
-  props: TagLookupResultsPropsT<T>,
-): React$Element<typeof Layout> => (
-  <Layout fullWidth title={lp('Tag lookup results', 'audio file metadata')}>
-    <div className="content">
-      <h1>{lp('Tag lookup results', 'audio file metadata')}</h1>
-      {props.nag ? <TagLookupNagSection /> : null}
-      {props.children}
-      <TagLookupForm form={props.form} />
-    </div>
-  </Layout>
-);
+component TagLookupResults(
+  children: React$Node,
+  form: TagLookupFormT,
+  nag: boolean,
+) {
+  return (
+    <Layout fullWidth title={lp('Tag lookup results', 'audio file metadata')}>
+      <div className="content">
+        <h1>{lp('Tag lookup results', 'audio file metadata')}</h1>
+        {nag ? <TagLookupNagSection /> : null}
+        {children}
+        <TagLookupForm form={form} />
+      </div>
+    </Layout>
+  );
+}
 
 export default TagLookupResults;