Convert /components templates to use Flow component syntax

metabrainz · Apr 16, 2024 · 76eee9d · 76eee9d
1 parent aac4258
commit 76eee9d
Show file tree

Hide file tree

Showing 30 changed files with 373 additions and 524 deletions.
diff --git a/root/components/Artwork.js b/root/components/Artwork.js
@@ -24,61 +24,53 @@ function artworkHover(artwork: ArtworkT) {
   return result;
 }
 
-type Props = {
-  +artwork: ArtworkT,
-  +hover?: string,
-  +message?: string,
-};
+export component ArtworkImage(
+  artwork: ArtworkT,
+  hover?: string,
+  message?: string,
+) {
+  return (
+    <>
+      <noscript>
+        <img src={artwork.small_ia_thumbnail} />
+      </noscript>
+      <span
+        className="cover-art-image"
+        data-huge-thumbnail={artwork.huge_ia_thumbnail}
+        data-large-thumbnail={artwork.large_ia_thumbnail}
+        data-message={nonEmpty(message)
+          ? message
+          : l('Image not available, please try again later.')}
+        data-small-thumbnail={artwork.small_ia_thumbnail}
+        data-title={nonEmpty(hover) ? hover : artworkHover(artwork)}
+      />
+    </>
+  );
+}
 
-export const ArtworkImage = ({
-  artwork,
-  hover,
-  message,
-}: Props): React.MixedElement => (
-  <>
-    <noscript>
-      <img src={artwork.small_ia_thumbnail} />
-    </noscript>
-    <span
-      className="cover-art-image"
-      data-huge-thumbnail={artwork.huge_ia_thumbnail}
-      data-large-thumbnail={artwork.large_ia_thumbnail}
-      data-message={nonEmpty(message)
-        ? message
-        : l('Image not available, please try again later.')}
-      data-small-thumbnail={artwork.small_ia_thumbnail}
-      data-title={nonEmpty(hover) ? hover : artworkHover(artwork)}
-    />
-  </>
-);
+export component Artwork(...props: React.PropsOf<ArtworkImage>) {
+  const artwork = props.artwork;
 
-export const Artwork = ({
-  artwork,
-  hover,
-  message,
-}: Props): React$Element<'a'> => (
-  <a
-    className={artwork.mime_type === 'application/pdf'
-      ? 'artwork-pdf'
-      : 'artwork-image'}
-    href={artwork.image}
-    title={nonEmpty(hover) ? hover : artworkHover(artwork)}
-  >
-    {artwork.mime_type === 'application/pdf' ? (
-      <div
-        className="file-format-tag"
-        title={l(
-          `This is a PDF file, the thumbnail may not show
-           the entire contents of the file.`,
-        )}
-      >
-        {l('PDF file')}
-      </div>
-    ) : null}
-    <ArtworkImage
-      artwork={artwork}
-      hover={hover}
-      message={message}
-    />
-  </a>
-);
+  return (
+    <a
+      className={artwork.mime_type === 'application/pdf'
+        ? 'artwork-pdf'
+        : 'artwork-image'}
+      href={artwork.image}
+      title={nonEmpty(props.hover) ? props.hover : artworkHover(artwork)}
+    >
+      {artwork.mime_type === 'application/pdf' ? (
+        <div
+          className="file-format-tag"
+          title={l(
+            `This is a PDF file, the thumbnail may not show
+            the entire contents of the file.`,
+          )}
+        >
+          {l('PDF file')}
+        </div>
+      ) : null}
+      <ArtworkImage {...props} />
+    </a>
+  );
+}
diff --git a/root/components/CleanupBanner.js b/root/components/CleanupBanner.js
@@ -46,14 +46,12 @@ const cleanupBannerStrings = {
   ),
 };
 
-type Props = {
-  +entityType: string,
-};
-
-const CleanupBanner = ({entityType}: Props): React$Element<'p'> => (
-  <p className="cleanup">
-    {cleanupBannerStrings[entityType]()}
-  </p>
-);
+component CleanupBanner(entityType: string) {
+  return (
+    <p className="cleanup">
+      {cleanupBannerStrings[entityType]()}
+    </p>
+  );
+}
 
 export default CleanupBanner;
diff --git a/root/components/ConfirmLayout.js b/root/components/ConfirmLayout.js
@@ -11,43 +11,38 @@ import Layout from '../layout/index.js';
 import FormCsrfToken
   from '../static/scripts/edit/components/FormCsrfToken.js';
 
-type Props = {
-  +action?: string,
-  +form: ConfirmFormT | SecureConfirmFormT,
-  +question: Expand2ReactOutput,
-  +title: string,
-};
-
-const ConfirmLayout = ({
-  action,
-  form,
-  question,
-  title,
-}: Props): React$Element<typeof Layout> => (
-  <Layout fullWidth title={title}>
-    <h1>{title}</h1>
-    <p>{question}</p>
-    <form action={action} method="post">
-      <FormCsrfToken form={form} />
-      <span className="buttons">
-        <button
-          name="confirm.submit"
-          type="submit"
-          value="1"
-        >
-          {l('Yes, I am sure')}
-        </button>
-        <button
-          className="negative"
-          name="confirm.cancel"
-          type="submit"
-          value="1"
-        >
-          {l('Cancel')}
-        </button>
-      </span>
-    </form>
-  </Layout>
-);
+component ConfirmLayout(
+  action?: string,
+  form: ConfirmFormT | SecureConfirmFormT,
+  question: Expand2ReactOutput,
+  title: string,
+) {
+  return (
+    <Layout fullWidth title={title}>
+      <h1>{title}</h1>
+      <p>{question}</p>
+      <form action={action} method="post">
+        <FormCsrfToken form={form} />
+        <span className="buttons">
+          <button
+            name="confirm.submit"
+            type="submit"
+            value="1"
+          >
+            {l('Yes, I am sure')}
+          </button>
+          <button
+            className="negative"
+            name="confirm.cancel"
+            type="submit"
+            value="1"
+          >
+            {l('Cancel')}
+          </button>
+        </span>
+      </form>
+    </Layout>
+  );
+}
 
 export default ConfirmLayout;
diff --git a/root/components/CritiqueBrainzLinks.js b/root/components/CritiqueBrainzLinks.js
@@ -27,15 +27,10 @@ const writeReviewLink = (entity: ReviewableT) => (
   entity.gid
 );
 
-type Props = {
-  +entity: ReviewableT,
-  +isSidebar?: boolean,
-};
-
-const CritiqueBrainzLinks = ({
-  entity,
-  isSidebar = false,
-}: Props): null | Expand2ReactOutput => {
+component CritiqueBrainzLinks(
+  entity: ReviewableT,
+  isSidebar: boolean = false,
+) {
   const reviewCount = entity.review_count;
   const linkClassName = isSidebar ? 'wrap-anywhere' : '';
 
@@ -64,6 +59,6 @@ const CritiqueBrainzLinks = ({
       write_link: writeReviewLink(entity),
     },
   );
-};
+}
 
 export default CritiqueBrainzLinks;
diff --git a/root/components/EntityDeletionHelp.js b/root/components/EntityDeletionHelp.js
@@ -9,33 +9,30 @@
 
 import EntityLink from '../static/scripts/common/components/EntityLink.js';
 
-type Props = {
-  +children?: React$Node,
-  +entity: ManuallyRemovableEntityT,
-};
-
-const EntityDeletionHelp = ({
-  children,
-  entity,
-}: Props): React$Element<'div'> => (
-  <div id="removal-help">
-    <p>
-      {exp.l(
-        'Are you sure you wish to remove {entity} from MusicBrainz?',
-        {entity: <EntityLink entity={entity} />},
-      )}
-    </p>
-    <p>
-      {exp.l(
-        `If it’s a duplicate,
-        {doc_merge|you should probably merge it instead}.
-        If it just has some small errors, it’s usually better
-        to just fix those.`,
-        {doc_merge: '/doc/Merge_Rather_Than_Delete'},
-      )}
-    </p>
-    {children}
-  </div>
-);
+component EntityDeletionHelp(
+  children?: React$Node,
+  entity: ManuallyRemovableEntityT,
+) {
+  return (
+    <div id="removal-help">
+      <p>
+        {exp.l(
+          'Are you sure you wish to remove {entity} from MusicBrainz?',
+          {entity: <EntityLink entity={entity} />},
+        )}
+      </p>
+      <p>
+        {exp.l(
+          `If it’s a duplicate,
+           {doc_merge|you should probably merge it instead}.
+           If it just has some small errors, it’s usually better
+           to just fix those.`,
+          {doc_merge: '/doc/Merge_Rather_Than_Delete'},
+        )}
+      </p>
+      {children}
+    </div>
+  );
+}
 
 export default EntityDeletionHelp;
diff --git a/root/components/EntityHeader.js b/root/components/EntityHeader.js
@@ -13,39 +13,31 @@ import typeof EntityTabLink from './EntityTabLink.js';
 import EntityTabs from './EntityTabs.js';
 import SubHeader from './SubHeader.js';
 
-type Props = {
-  +editTab?: React$Element<EntityTabLink>,
-  +entity: RelatableEntityT,
-  +headerClass: string,
-  +heading?: Expand2ReactOutput,
-  +page?: string,
-  +preHeader?: Expand2ReactOutput,
-  +subHeading: Expand2ReactOutput,
-};
-
-const EntityHeader = ({
-  editTab,
-  entity,
-  headerClass,
-  heading,
-  page,
-  preHeader,
-  subHeading,
-}: Props): React.MixedElement => (
-  <>
-    <div className={'wrap-anywhere ' + headerClass}>
-      {nonEmpty(preHeader) ? preHeader : null}
-      <h1>
-        {nonEmpty(heading) ? heading : <EntityLink entity={entity} />}
-      </h1>
-      <SubHeader subHeading={subHeading} />
-    </div>
-    <EntityTabs
-      editTab={editTab}
-      entity={entity}
-      page={page}
-    />
-  </>
-);
+component EntityHeader(
+  editTab?: React$Element<EntityTabLink>,
+  entity: RelatableEntityT,
+  headerClass: string,
+  heading?: Expand2ReactOutput,
+  page?: string,
+  preHeader?: Expand2ReactOutput,
+  subHeading: Expand2ReactOutput,
+) {
+  return (
+    <>
+      <div className={'wrap-anywhere ' + headerClass}>
+        {nonEmpty(preHeader) ? preHeader : null}
+        <h1>
+          {nonEmpty(heading) ? heading : <EntityLink entity={entity} />}
+        </h1>
+        <SubHeader subHeading={subHeading} />
+      </div>
+      <EntityTabs
+        editTab={editTab}
+        entity={entity}
+        page={page}
+      />
+    </>
+  );
+}
 
 export default EntityHeader;