Merge pull request #3225 from reosarevok/flow-component-syntax

MBS-13558 (I): Migrate React components to Flow component syntax
metabrainz · Apr 26, 2024 · 9601c46 · 9601c46
2 parents 060a066 + 7830caf
commit 9601c46
Show file tree

Hide file tree

Showing 309 changed files with 6,257 additions and 7,838 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -100,7 +100,7 @@ rules:
   no-shadow-restricted-names: error
   no-sparse-arrays: error
   no-unexpected-multiline: error
-  no-unreachable: error
+  no-unreachable: off #Flow takes care of this
   no-unsafe-finally: error
   no-unsafe-negation: error
   no-unused-vars: [error, {argsIgnorePattern: "^this$"}]
@@ -366,7 +366,7 @@ rules:
   #############################
 
   react-hooks/exhaustive-deps: error
-  react-hooks/rules-of-hooks: error
+  react-hooks/rules-of-hooks: off #Flow takes care of this
 
   ####################################
   # eslint-plugin-simple-import-sort #

diff --git a/.flowconfig b/.flowconfig
@@ -26,6 +26,7 @@ format.bracket_spacing=false
 format.single_quotes=true
 module.name_mapper.extension='less' -> '<PROJECT_ROOT>/root/flowstub.js.flow'
 react.runtime=automatic
+component_syntax=true
 
 [strict]
 nonstrict-import

diff --git a/root/account/ChangePassword.js b/root/account/ChangePassword.js
@@ -27,85 +27,82 @@ type ChangePasswordFormT = FormT<{
   +username: FieldT<string>,
 }>;
 
-type Props = {
-  +form: ChangePasswordFormT,
-  +isMandatory?: boolean,
-  +userExists?: boolean,
-};
+component ChangePasswordPageContent(
+  form: ChangePasswordFormT,
+  isMandatory: boolean = false,
+  userExists: boolean = false,
+) {
+  return (
+    <>
+      {isMandatory ? (
+        <p>
+          {exp.l(
+            `Please change your password. Unfortunately we\'ve discovered that
+             secure hashes user\'s passwords were temporarily available for
+             download on our FTP site. While it is extremely unlikely that
+             anyone will be able to derive the original passwords from this
+             mishap, we are requiring all of our users to change their
+             passwords. Sorry for the inconvenience. For more information see
+             {blog|the recent blog post}.`,
+            {blog: 'http://blog.metabrainz.org/?p=1844'},
+          )}
+        </p>
+      ) : null}
 
-const ChangePasswordPageContent = ({
-  form,
-  isMandatory = false,
-  userExists = false,
-}: Props): React.MixedElement => (
-  <>
-    {isMandatory ? (
       <p>
-        {exp.l(
-          `Please change your password. Unfortunately we\'ve discovered that
-           secure hashes user\'s passwords were temporarily available for
-           download on our FTP site. While it is extremely unlikely that
-           anyone will be able to derive the original passwords from this
-           mishap, we are requiring all of our users to change their
-           passwords. Sorry for the inconvenience. For more information see
-           {blog|the recent blog post}.`,
-          {blog: 'http://blog.metabrainz.org/?p=1844'},
-        )}
+        {l(`Please enter your old password below,
+            and then your new password.`)}
       </p>
-    ) : null}
 
-    <p>
-      {l('Please enter your old password below, and then your new password.')}
-    </p>
-
-    <form method="post">
-      <FormCsrfToken form={form} />
-      {userExists ? (
-        <HiddenField field={form.field.username} />
-      ) : (
+      <form method="post">
+        <FormCsrfToken form={form} />
+        {userExists ? (
+          <HiddenField field={form.field.username} />
+        ) : (
+          <FormRowText
+            autoComplete="username"
+            field={form.field.username}
+            label={addColonText(l('Username'))}
+            required
+            uncontrolled
+          />
+        )}
         <FormRowText
-          autoComplete="username"
-          field={form.field.username}
-          label={addColonText(l('Username'))}
+          autoComplete="current-password"
+          field={form.field.old_password}
+          label={l('Old password:')}
           required
+          type="password"
           uncontrolled
         />
-      )}
-      <FormRowText
-        autoComplete="current-password"
-        field={form.field.old_password}
-        label={l('Old password:')}
-        required
-        type="password"
-        uncontrolled
-      />
-      <FormRowText
-        autoComplete="new-password"
-        field={form.field.password}
-        label={l('New password:')}
-        required
-        type="password"
-        uncontrolled
-      />
-      <FormRowText
-        autoComplete="new-password"
-        field={form.field.confirm_password}
-        label={l('Confirm password:')}
-        required
-        type="password"
-        uncontrolled
-      />
-      <FormRow hasNoLabel>
-        <FormSubmit label={lp('Change password', 'interactive')} />
-      </FormRow>
-    </form>
-  </>
-);
+        <FormRowText
+          autoComplete="new-password"
+          field={form.field.password}
+          label={l('New password:')}
+          required
+          type="password"
+          uncontrolled
+        />
+        <FormRowText
+          autoComplete="new-password"
+          field={form.field.confirm_password}
+          label={l('Confirm password:')}
+          required
+          type="password"
+          uncontrolled
+        />
+        <FormRow hasNoLabel>
+          <FormSubmit label={lp('Change password', 'interactive')} />
+        </FormRow>
+      </form>
+    </>
+  );
+}
 
-const ChangePassword = ({
-  form,
-  isMandatory,
-}: Props): React$Element<typeof Layout | typeof UserAccountLayout> => {
+component ChangePassword(
+  form: ChangePasswordFormT,
+  isMandatory?: boolean,
+) {
   const $c = React.useContext(CatalystContext);
   const user = $c.user;
 
@@ -132,6 +129,6 @@ const ChangePassword = ({
       <ChangePasswordPageContent form={form} isMandatory={isMandatory} />
     </Layout>
   );
-};
+}
 
 export default ChangePassword;
diff --git a/root/account/DeleteOwnAccount.js b/root/account/DeleteOwnAccount.js
@@ -22,13 +22,7 @@ type DeleteOwnAccountFormT = FormT<{
   ...SecureConfirmFormT,
 }>;
 
-type Props = {
-  +form: DeleteOwnAccountFormT,
-};
-
-const DeleteOwnAccount = ({
-  form,
-}: Props): React$Element<typeof UserAccountLayout> => {
+component DeleteOwnAccount(form: DeleteOwnAccountFormT) {
   const $c = React.useContext(CatalystContext);
   const user = $c.user;
 
@@ -85,6 +79,6 @@ const DeleteOwnAccount = ({
       </form>
     </UserAccountLayout>
   );
-};
+}
 
 export default DeleteOwnAccount;
diff --git a/root/account/Donation.js b/root/account/Donation.js
@@ -13,70 +13,65 @@ import UserAccountLayout, {
 import {CONTACT_URL, DONATE_URL} from '../constants.js';
 import Warning from '../static/scripts/common/components/Warning.js';
 
-type Props = {
-  +checkFailed: boolean,
-  +days: number,
-  +nag: boolean,
-  +user: UnsanitizedEditorT,
-};
-
-const Donation = ({
-  checkFailed,
-  days,
-  nag,
-  user,
-}: Props): React$Element<typeof UserAccountLayout> => (
-  <UserAccountLayout
-    entity={sanitizedAccountLayoutUser(user)}
-    page="donation"
-    title={l('Donation check')}
-  >
-    <h2>{l('Donation check')}</h2>
-    {checkFailed ? (
-      <Warning
-        message={
-          l(`We were not able to check your donation status right now.
-             Please try again later.`)
-        }
-      />
-    ) : nag ? (
-      <>
-        <p>
-          {l(`We have not received a donation from you recently. If you have
-              just made a PayPal donation, then we have not received a
-              notification from PayPal yet. Please wait a few minutes and
-              reload this page to check again.`)}
-        </p>
-        <p>
-          {exp.l(
-            `If you would like to make a donation,
-             {donate|you can do that here}. If you have donated, but
-             you are still being nagged, please {contact|contact us}.`,
-            {contact: CONTACT_URL, donate: DONATE_URL},
-          )}
-        </p>
-      </>
-    ) : (
-      <>
-        <p>
-          {l('Thank you for contributing to MusicBrainz.')}
-        </p>
-        {days > 0
-          ? (
-            <p>
-              {texp.l(
-                'You will not be nagged for another {days} days.',
-                {days: days},
-              )}
-            </p>
-          ) : (
-            <p>
-              {l('You will never be nagged again!')}
-            </p>
-          )}
-      </>
-    )}
-  </UserAccountLayout>
-);
+component Donation(
+  checkFailed: boolean,
+  days: number,
+  nag: boolean,
+  user: UnsanitizedEditorT,
+) {
+  return (
+    <UserAccountLayout
+      entity={sanitizedAccountLayoutUser(user)}
+      page="donation"
+      title={l('Donation check')}
+    >
+      <h2>{l('Donation check')}</h2>
+      {checkFailed ? (
+        <Warning
+          message={
+            l(`We were not able to check your donation status right now.
+               Please try again later.`)
+          }
+        />
+      ) : nag ? (
+        <>
+          <p>
+            {l(`We have not received a donation from you recently. If you have
+                just made a PayPal donation, then we have not received a
+                notification from PayPal yet. Please wait a few minutes and
+                reload this page to check again.`)}
+          </p>
+          <p>
+            {exp.l(
+              `If you would like to make a donation,
+               {donate|you can do that here}. If you have donated, but
+               you are still being nagged, please {contact|contact us}.`,
+              {contact: CONTACT_URL, donate: DONATE_URL},
+            )}
+          </p>
+        </>
+      ) : (
+        <>
+          <p>
+            {l('Thank you for contributing to MusicBrainz.')}
+          </p>
+          {days > 0
+            ? (
+              <p>
+                {texp.l(
+                  'You will not be nagged for another {days} days.',
+                  {days: days},
+                )}
+              </p>
+            ) : (
+              <p>
+                {l('You will never be nagged again!')}
+              </p>
+            )}
+        </>
+      )}
+    </UserAccountLayout>
+  );
+}
 
 export default Donation;
diff --git a/root/account/EditProfile.js b/root/account/EditProfile.js
@@ -19,9 +19,7 @@ import type {EditProfileFormPropsT}
 import EditProfileForm
   from '../static/scripts/account/components/EditProfileForm.js';
 
-const EditProfile = (
-  props: EditProfileFormPropsT,
-): React$Element<typeof UserAccountLayout> | null => {
+component EditProfile(...props: EditProfileFormPropsT) {
   const $c = React.useContext(CatalystContext);
   const user = $c.user;
   if (!user) {
@@ -45,6 +43,6 @@ const EditProfile = (
       {manifest.js('account/edit')}
     </UserAccountLayout>
   );
-};
+}
 
 export default EditProfile;
diff --git a/root/account/EmailVerificationStatus.js b/root/account/EmailVerificationStatus.js
@@ -9,22 +9,18 @@
 
 import StatusPage from '../components/StatusPage.js';
 
-type Props = {
-  +message?: string,
-};
-
-const EmailVerificationStatus = ({
-  message,
-}: Props): React$Element<typeof StatusPage> => (
-  <StatusPage title={lp('Email verification', 'header')}>
-    <p>
-      {nonEmpty(message)
-        ? message
-        : l(`Thank you, your email address has now been verified! If you still
-             can't edit, please try to log out and log in again.`)
-      }
-    </p>
-  </StatusPage>
-);
+component EmailVerificationStatus(message?: string) {
+  return (
+    <StatusPage title={lp('Email verification', 'header')}>
+      <p>
+        {nonEmpty(message)
+          ? message
+          : l(`Thank you, your email address has now been verified! If you
+               still can't edit, please try to log out and log in again.`)
+        }
+      </p>
+    </StatusPage>
+  );
+}
 
 export default EmailVerificationStatus;