js: Update prettier, eslint, prettier-eslint, and prettier-eslint-cli

Following the eagerly awaited resolution of
  prettier/prettier-eslint-cli#304
.

And adjust our ESLint config so that we can do this with no new
ESLint errors or suppressions. After this, we'll un-ignore the rules
under "New rules we want", one by one, which will mean fixing the
code that doesn't yet follow each rule.

Greg says, about the formatting changes:
  zulip#5393 (review)

> The formatting changes from the Prettier upgrade look fine. Some
> code gets nicer (like `foo.bar().baz()` going on one line), some
> gets less nice (like a lot of stuff getting an extra level of
> indentation). I'm not sure I like it better on net; but Prettier
> is designed as a take-it-or-leave-it package, and I don't have a
> better alternative nor want to be stuck on an old version. So
> 🤷

The added @babel/* deps are to satisfy peer-dependency requirements.

The resolutions line gets us
  prettier/prettier-eslint#749
and can be removed when prettier-eslint-cli bumps its
prettier-eslint version.

.eslintrc.yaml

@@ -205,6 +205,15 @@ rules:
     - error
     - AssignmentExpression: {array: false, object: false}
 
+  # new Promise(r => setTimeout(r, 1000));
+  # Certain other things could be nice to catch, but see
+  #   https://github.com/zulip/zulip-mobile/pull/5393#discussion_r883237343
+  no-promise-executor-return: off
+
+  # More noisy than helpful; see
+  #   https://github.com/zulip/zulip-mobile/pull/5393#discussion_r883233303
+  class-methods-use-this: off
+
   # Likely-wrong code
   no-unused-vars: [warn, {vars: local, args: none}]
   # no-param-reassign seems well-intentioned... but fires on common uses
@@ -285,9 +294,10 @@ rules:
   react/prop-types: off  # We handle this better with types.
   react/require-default-props: off  # We handle this better with types.
 
-  # These two could be good to fix.
+  # These could be good to fix.
   react/prefer-stateless-function: off
   react/sort-comp: off
+  react/no-unstable-nested-components: off
 
 
   #
@@ -334,6 +344,18 @@ rules:
   flowtype/use-flow-type: warn
   flowtype/valid-syntax: warn
 
+  #
+  # ================================================================
+  # New rules we want, but that require code changes to enable
+  #
+
+  default-param-last: off
+  react/function-component-definition: off
+  react/jsx-no-useless-fragment: off
+  react/no-arrow-function-lifecycle: off
+  import/no-import-module-exports: off
+  prefer-regex-literals: off
+  react/no-unused-class-component-methods: off
 
 overrides:
 
@@ -343,6 +365,7 @@ overrides:
   - files: ['**/__tests__/**', 'jest/jestSetup.js']
     rules:
       no-restricted-imports: off
+      no-import-assign: off # Jest mocking
 
   #
   # ================================================================

package.json

@@ -81,6 +81,8 @@
     "@babel/core": "^7.12.9",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-proposal-numeric-separator": "^7.14.5",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.11.0",
     "@babel/runtime": "^7.12.5",
     "@octokit/core": "^3.4.0",
@@ -89,16 +91,16 @@
     "@vusion/webfonts-generator": "^0.8.0",
     "core-js": "^3.1.4",
     "deep-freeze": "^0.0.1",
-    "eslint": "^7.28.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint": "^8.15.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "flow-bin": "^0.158.0",
     "flow-coverage-report": "^0.8.0",
     "flow-typed": "^3.3.1",
@@ -111,9 +113,9 @@
     "jest-extended": "^0.11.5",
     "jetifier": "^2.0.0",
     "metro-react-native-babel-preset": "^0.66.2",
-    "prettier": "^1.18.2",
-    "prettier-eslint": "^12.0.0",
-    "prettier-eslint-cli": "^5.0.0",
+    "prettier": "^2.6.2",
+    "prettier-eslint": "^15.0.0",
+    "prettier-eslint-cli": "^6.0.1",
     "react-native-cli": "^2.0.1",
     "react-test-renderer": "17.0.2",
     "redux-mock-store": "^1.5.1",
@@ -124,6 +126,7 @@
   },
   "resolutions": {
     "jest-expo/react-test-renderer": "17.0.2",
+    "prettier-eslint-cli/prettier-eslint": "^15.0.0",
     "react-native/use-subscription": ">=1.0.0 <1.6.0",
     "sqlite3/**/node-gyp": "^8"
   }

src/__tests__/lib/exampleData.js

@@ -142,19 +142,18 @@ const makeAvatarUrl = (tag: string) =>
   // here with a full-blown URL object in the first place to prevent that.
   new UploadedAvatarURL(new URL(`https://zulip.example.org/yo/avatar-${tag}.png`));
 
-const randUserId: () => UserId = (mk => () => makeUserId(mk()))(
-  makeUniqueRandInt('user IDs', 10000),
-);
+const randUserId: () => UserId = (
+  mk => () =>
+    makeUserId(mk())
+)(makeUniqueRandInt('user IDs', 10000));
 const userOrBotProperties = (args: UserOrBotPropertiesArgs) => {
   const user_id = args.user_id != null ? makeUserId(args.user_id) : randUserId();
   const randName = randString();
   return deepFreeze({
     avatar_url: args.avatar_url ?? makeAvatarUrl(user_id.toString()),
     avatar_version: 0,
 
-    date_joined: `2014-04-${randInt(30)
-      .toString()
-      .padStart(2, '0')}`,
+    date_joined: `2014-04-${randInt(30).toString().padStart(2, '0')}`,
 
     email: args.email ?? `${randName}@example.org`,
     full_name: args.full_name ?? `${randName} User`,

src/account/accountActions.js

@@ -24,10 +24,12 @@ const accountSwitchPlain = (index: number): AllAccountsAction => ({
   index,
 });
 
-export const accountSwitch = (index: number): GlobalThunkAction<void> => (dispatch, getState) => {
-  NavigationService.dispatch(resetToMainTabs());
-  dispatch(accountSwitchPlain(index));
-};
+export const accountSwitch =
+  (index: number): GlobalThunkAction<void> =>
+  (dispatch, getState) => {
+    NavigationService.dispatch(resetToMainTabs());
+    dispatch(accountSwitchPlain(index));
+  };
 
 export const removeAccount = (index: number): AllAccountsAction => ({
   type: ACCOUNT_REMOVE,
@@ -41,13 +43,12 @@ const loginSuccessPlain = (realm: URL, email: string, apiKey: string): AllAccoun
   apiKey,
 });
 
-export const loginSuccess = (realm: URL, email: string, apiKey: string): ThunkAction<void> => (
-  dispatch,
-  getState,
-) => {
-  NavigationService.dispatch(resetToMainTabs());
-  dispatch(loginSuccessPlain(realm, email, apiKey));
-};
+export const loginSuccess =
+  (realm: URL, email: string, apiKey: string): ThunkAction<void> =>
+  (dispatch, getState) => {
+    NavigationService.dispatch(resetToMainTabs());
+    dispatch(loginSuccessPlain(realm, email, apiKey));
+  };
 
 const logoutPlain = (): AllAccountsAction => ({
   type: LOGOUT,

src/account/accountsSelectors.js

@@ -25,10 +25,10 @@ export type AccountStatus = {| ...Identity, isLoggedIn: boolean |};
  * This should be used in preference to `getAccounts` where we don't
  * actually need the API keys, but just need to know whether we have them.
  */
-export const getAccountStatuses: GlobalSelector<
-  $ReadOnlyArray<AccountStatus>,
-> = createSelector(getAccounts, accounts =>
-  accounts.map(({ realm, email, apiKey }) => ({ realm, email, isLoggedIn: apiKey !== '' })),
+export const getAccountStatuses: GlobalSelector<$ReadOnlyArray<AccountStatus>> = createSelector(
+  getAccounts,
+  accounts =>
+    accounts.map(({ realm, email, apiKey }) => ({ realm, email, isLoggedIn: apiKey !== '' })),
 );
 
 /** The list of known accounts, reduced to `Identity`. */

src/api/permissionsTypes.js

@@ -73,6 +73,5 @@ typesEquivalent<CreateWebPublicStreamPolicyT, $Values<typeof CreateWebPublicStre
  *
  * See CreateWebPublicStreamPolicy for an enum to refer to these by meaningful names.
  */
-export const CreateWebPublicStreamPolicyValues: $ReadOnlyArray<CreateWebPublicStreamPolicyT> = objectValues(
-  CreateWebPublicStreamPolicy,
-);
+export const CreateWebPublicStreamPolicyValues: $ReadOnlyArray<CreateWebPublicStreamPolicyT> =
+  objectValues(CreateWebPublicStreamPolicy);

src/autocomplete/StreamAutocomplete.js

@@ -18,9 +18,10 @@ export default function StreamAutocomplete(props: Props): Node {
   const { filter, onAutocomplete } = props;
   const subscriptions = useSelector(getSubscriptions);
 
-  const handleStreamItemAutocomplete = useCallback(stream => onAutocomplete(`**${stream.name}**`), [
-    onAutocomplete,
-  ]);
+  const handleStreamItemAutocomplete = useCallback(
+    stream => onAutocomplete(`**${stream.name}**`),
+    [onAutocomplete],
+  );
 
   const isPrefixMatch = x => x.name.toLowerCase().startsWith(filter.toLowerCase());
 

src/chat/__tests__/flagsReducer-test.js

@@ -61,7 +61,7 @@ describe('flagsReducer', () => {
     const action = deepFreeze({
       type: MESSAGE_FETCH_COMPLETE,
       // prettier-ignore
-      messages: [{ id: 1, flags: ['read'] }, { id: 2, flags: [] }]
+      messages: [{ id: 1, flags: ['read'] }, { id: 2, flags: [] }],
     });
 
     const expectedState = {

src/common/Icons.js

@@ -54,13 +54,15 @@ export const Icon: ComponentType<IconProps<IconNames>> = fixIconType<IconNames>(
 /** A (type for a) component-type like `Icon` but with `name` already specified. */
 export type SpecificIconType = ComponentType<$Diff<IconProps<empty>, {| name: mixed |}>>;
 
-const makeIcon = <Glyphs: string>(
-  iconSet: ComponentType<IconPropsBusted<Glyphs>>,
-  name: Glyphs,
-): SpecificIconType => props => {
-  const FixedIcon = fixIconType<Glyphs>(iconSet);
-  return <FixedIcon name={name} {...props} />;
-};
+const makeIcon =
+  <Glyphs: string>(
+    iconSet: ComponentType<IconPropsBusted<Glyphs>>,
+    name: Glyphs,
+  ): SpecificIconType =>
+  props => {
+    const FixedIcon = fixIconType<Glyphs>(iconSet);
+    return <FixedIcon name={name} {...props} />;
+  };
 
 export const IconInbox: SpecificIconType = makeIcon(Feather, 'inbox');
 export const IconMention: SpecificIconType = makeIcon(Feather, 'at-sign');

src/common/ServerCompatBanner.js

@@ -68,13 +68,11 @@ export default function ServerCompatBanner(props: Props): Node {
     visible = true;
     text = isAdmin
       ? {
-          text:
-            '{realm} is running Zulip Server {serverVersion}, which is unsupported. Please upgrade your server as soon as possible.',
+          text: '{realm} is running Zulip Server {serverVersion}, which is unsupported. Please upgrade your server as soon as possible.',
           values: { realm: realm.toString(), serverVersion: zulipVersion.raw() },
         }
       : {
-          text:
-            '{realm} is running Zulip Server {serverVersion}, which is unsupported. Please contact your administrator about upgrading.',
+          text: '{realm} is running Zulip Server {serverVersion}, which is unsupported. Please contact your administrator about upgrading.',
           values: { realm: realm.toString(), serverVersion: zulipVersion.raw() },
         };
   }

src/common/ServerPushSetupBanner.js

@@ -56,8 +56,7 @@ export default function PushNotifsSetupBanner(props: Props): Node {
     visible = true;
     text = isAdmin
       ? {
-          text:
-            'The Zulip server at {realm} is not set up to deliver push notifications. Please contact your administrator.',
+          text: 'The Zulip server at {realm} is not set up to deliver push notifications. Please contact your administrator.',
           values: { realm: realm.toString() },
         }
       : {

src/common/ZulipStatusBar.js

@@ -55,10 +55,7 @@ export default function ZulipStatusBar(props: Props): Node {
         animated
         showHideTransition="slide"
         hidden={hidden && Platform.OS !== 'android'}
-        backgroundColor={Color(statusBarColor)
-          .darken(0.1)
-          .hsl()
-          .string()}
+        backgroundColor={Color(statusBarColor).darken(0.1).hsl().string()}
         barStyle={getStatusBarStyle(statusBarColor)}
       />
     )

src/common/ZulipSwitch.js

@@ -27,9 +27,7 @@ export default function ZulipSwitch(props: Props): Node {
       value={value}
       trackColor={{
         false: 'hsl(0, 0%, 86%)',
-        true: Color(BRAND_COLOR)
-          .fade(0.3)
-          .toString(),
+        true: Color(BRAND_COLOR).fade(0.3).toString(),
       }}
       thumbColor={
         /* eslint-disable operator-linebreak */

src/compose/MentionWarnings.js

@@ -168,8 +168,7 @@ function MentionWarningsInner(props: Props, ref): Node {
   return mentionWarnings;
 }
 
-const MentionWarnings: AbstractComponent<Props, ImperativeHandle> = forwardRef(
-  MentionWarningsInner,
-);
+const MentionWarnings: AbstractComponent<Props, ImperativeHandle> =
+  forwardRef(MentionWarningsInner);
 
 export default MentionWarnings;