Re-enable eslint rules, reformat files with prettier.

.eslintrc.js

@@ -20,16 +20,7 @@ module.exports = {
   plugins: ["prettier", "react", "react-hooks", "@calm/react-intl"],
   // https://eslint.org/docs/rules/
   rules: {
-    "no-prototype-builtins": "off",
-
-    // TODO these are new as of our Webpack 5 upgrade, making them warnings till we get a handle on them or decide we don't want them
-    "react/prop-types": "warn",
-    "react/display-name": "warn",
-    "no-redeclare": "warn",
-    "no-async-promise-executor": "warn",
-
-    // TODO temporarily disable migrating to prettier 2.0 until we reformat everything in  its own PR
-    "prettier/prettier": "off",
+    "prettier/prettier": "error",
 
     // https://github.com/prettier/eslint-plugin-prettier
     "prefer-const": "error",
@@ -46,7 +37,7 @@ module.exports = {
     "no-console": "off",
     // https://www.npmjs.com/package/eslint-plugin-react-hooks
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": "error",
     // https://github.com/calm/eslint-plugin-react-intl
     "@calm/react-intl/missing-formatted-message": [
       "error",

README.md

@@ -69,6 +69,7 @@ Contributors are expected to abide by the project's [Code of Conduct](./CODE_OF_
 
 Mozilla and Hubs believe that privacy is fundamental to a healthy internet. Read our [privacy policy](https://www.mozilla.org/en-US/privacy/hubs/) for more info.
 
+
 ## License
 
 Hubs is licensed with the [Mozilla Public License 2.0](./LICENSE)

admin/.eslintrc.js

@@ -7,8 +7,8 @@ module.exports = {
   },
   rules: {
     // TODO these are new as of our Webpack 5 upgrade, making them warnings till we get a handle on them or decide we don't want them
-    "react/prop-types": "warn",
-    "@calm/react-intl/missing-formatted-message": "warn",
-    "@calm/react-intl/missing-attribute": "warn"
+    "react/prop-types": "error",
+    "@calm/react-intl/missing-formatted-message": "error",
+    "@calm/react-intl/missing-attribute": "error"
   }
 };

admin/src/admin.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import "./webxr-bypass-hacks";
 import configs from "./utils/configs";
 import ReactDOM from "react-dom";

admin/src/react-components/account-edit-toolbar.js

@@ -1,3 +1,5 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
+
 import React, { useState } from "react";
 import { Toolbar, SaveButton } from "react-admin";
 import { withStyles } from "@material-ui/core/styles";
@@ -53,23 +55,23 @@ export const AccountEditToolbar = withStyles(accountEditToolbarStyles)(props =>
       <Dialog open={openConfirmationDialog}>
         <DialogContent>
           <DialogContentText>
-            {(() => { 
+            {(() => {
               switch (deleteState) {
                 case Confirming:
                   return (
                     <>
                       Are you sure you want to delete account {props.id}?<br />
                       <br />
-                      <b>WARNING!</b> This account will be permanently deleted, including all its scenes, assets, avatars,
-                      rooms and files. <b>This cannot be undone.</b>
+                      <b>WARNING!</b> This account will be permanently deleted, including all its scenes, assets,
+                      avatars, rooms and files. <b>This cannot be undone.</b>
                     </>
-                  )
+                  );
                 case Deleting:
-                  return <>Deleting account {props.id}...</>
+                  return <>Deleting account {props.id}...</>;
                 case Succeeded:
-                  return <>Successfully deleted account {props.id}.</>
+                  return <>Successfully deleted account {props.id}.</>;
                 case Failed:
-                  return <>Failed to delete account {props.id}.</>
+                  return <>Failed to delete account {props.id}.</>;
               }
             })()}
           </DialogContentText>

admin/src/react-components/accounts.js

@@ -1,3 +1,6 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
+
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { IdentityEditLink, IdentityCreateLink } from "./fields";
@@ -42,10 +45,7 @@ const AccountFilter = props => (
 );
 
 export const AccountList = withStyles(styles)(
-  connect(
-    undefined,
-    { refreshView }
-  )(
+  connect(undefined, { refreshView })(
     class AccountList extends Component {
       state = {
         emailSearch: "",
@@ -269,7 +269,10 @@ export const AccountEdit = withStyles(styles)(props => {
         <BooleanInput source="is_admin" />
         <SelectInput
           source="state"
-          choices={[{ id: "enabled", name: "enabled" }, { id: "disabled", name: "disabled" }]}
+          choices={[
+            { id: "enabled", name: "enabled" },
+            { id: "disabled", name: "disabled" }
+          ]}
         />
 
         <ReferenceManyField label="Identity" target="_account_id" reference="identities">

admin/src/react-components/admin-menu.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import classNames from "classnames";
 import inflection from "inflection";
@@ -120,7 +121,7 @@ class Menu extends Component {
   }
 
   render() {
-    if (configs.ITA_SERVER == "turkey"){
+    if (configs.ITA_SERVER == "turkey") {
       return (
         <List className={this.props.classes.root}>
           <ListItem className={this.props.classes.logo}>
@@ -183,8 +184,7 @@ class Menu extends Component {
           </Collapse>
         </List>
       );
-    }
-    else{
+    } else {
       return (
         <List className={this.props.classes.root}>
           <ListItem className={this.props.classes.logo}>
@@ -279,7 +279,7 @@ class Menu extends Component {
             </List>
           </Collapse>
         </List>
-      );      
+      );
     }
   }
 }

admin/src/react-components/approve-buttons.js

@@ -23,6 +23,7 @@ class ApproveButton extends Component {
     if (!(record.allow_promotion || record._allow_promotion)) return false;
 
     return (
+      /* eslint-disable-next-line @calm/react-intl/missing-formatted-message*/
       <Button label="Approve" onClick={this.handleClick}>
         {record[`${resource}_listing_id`] ? "Update" : "Approve"}
       </Button>

admin/src/react-components/auto-end-session-dialog.js

@@ -1,3 +1,5 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
+/* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
 import withCommonStyles from "../utils/with-common-styles";

admin/src/react-components/avatar-listings.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import { AvatarLink, OwnedFileImage, ConditionalReferenceField } from "./fields";
 import { FeatureAvatarListingButton } from "./feature-listing-buttons";
@@ -39,7 +40,13 @@ export const AvatarListingEdit = props => (
         </SimpleFormIterator>
       </ArrayInput>
       <NumberInput source="order" />
-      <SelectInput source="state" choices={[{ id: "active", name: "active" }, { id: "delisted", name: "delisted" }]} />
+      <SelectInput
+        source="state"
+        choices={[
+          { id: "active", name: "active" },
+          { id: "delisted", name: "delisted" }
+        ]}
+      />
     </SimpleForm>
   </Edit>
 );

admin/src/react-components/avatar-preview.js

@@ -305,7 +305,7 @@ class AvatarPreview extends Component {
         {this.props.avatarGltfUrl && this.state.error && !this.state.loading && (
           <div className="error">
             <img src={warningIconUrl} srcSet={`${warningIcon2xUrl} 2x`} className="error-icon" />
-            <FormattedMessage id="avatar-preview.loading-failed" />
+            <FormattedMessage id="avatar-preview.loading-failed" defaultMessage="Loading failed." />
           </div>
         )}
         <canvas ref={c => (this.canvas = c)} />

admin/src/react-components/avatars.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import { AvatarLink, OwnedFileImage, ConditionalReferenceField } from "./fields";
 import { ApproveAvatarButton } from "./approve-buttons";
@@ -39,7 +40,13 @@ export const AvatarEdit = props => (
       <TextInput source="name" />
       <TextInput source="description" />
       <TextInput source="attributions" />
-      <SelectInput source="state" choices={[{ id: "active", name: "active" }, { id: "removed", name: "removed" }]} />
+      <SelectInput
+        source="state"
+        choices={[
+          { id: "active", name: "active" },
+          { id: "removed", name: "removed" }
+        ]}
+      />
       <BooleanInput source="allow_remixing" />
       <BooleanInput source="allow_promotion" />
     </SimpleForm>

admin/src/react-components/content-cdn.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
@@ -158,9 +160,7 @@ class ContentCDNComponent extends Component {
       try {
         // Need to CORS-proxy the CORS-proxy because CSP will block us otherwise!
         const res = await fetch(
-          `https://${configs.CORS_PROXY_SERVER}/https://${this.state.workerInstanceName}-proxy.${
-            this.state.workerDomain
-          }/hubs/pages/latest/whats-new.html`
+          `https://${configs.CORS_PROXY_SERVER}/https://${this.state.workerInstanceName}-proxy.${this.state.workerDomain}/hubs/pages/latest/whats-new.html`
         );
 
         if (!res.ok) {
@@ -265,15 +265,14 @@ class ContentCDNComponent extends Component {
                 Once enabled, Cloudflare will cache content, reduce latency, and reduce bandwidth used by your server.
               </Typography>
             )}
-            {this.state.provider &&
-              this.state.provider !== "arbortect" && (
-                <Typography variant="body2" gutterBottom>
-                  Hubs Cloud uses bandwidth from your cloud provider to deliver content.
-                  <br />
-                  You can reduce your data transfer costs by switching your CDN to Cloudflare, which does not charge for
-                  data transfer costs to your users.
-                </Typography>
-              )}
+            {this.state.provider && this.state.provider !== "arbortect" && (
+              <Typography variant="body2" gutterBottom>
+                Hubs Cloud uses bandwidth from your cloud provider to deliver content.
+                <br />
+                You can reduce your data transfer costs by switching your CDN to Cloudflare, which does not charge for
+                data transfer costs to your users.
+              </Typography>
+            )}
             <Typography variant="subheading" gutterBottom className={this.props.classes.section}>
               Worker Setup
             </Typography>
@@ -284,18 +283,16 @@ class ContentCDNComponent extends Component {
               </a>
               . As such, you will be using data transfer to send all 3rd party content to your users.
             </Typography>
-            {this.state.provider &&
-              this.state.provider !== "arbortect" && (
-                <Typography variant="body1" gutterBottom>
-                  Additionally, you will incur data transfer costs for serving avatars, scenes, and other assets.
-                </Typography>
-              )}
-            {this.state.provider &&
-              this.state.provider !== "arbortect" && (
-                <Typography variant="body1" gutterBottom>
-                  You can minimize this data transfer cost by using a Cloudflare Worker to serve this content:
-                </Typography>
-              )}
+            {this.state.provider && this.state.provider !== "arbortect" && (
+              <Typography variant="body1" gutterBottom>
+                Additionally, you will incur data transfer costs for serving avatars, scenes, and other assets.
+              </Typography>
+            )}
+            {this.state.provider && this.state.provider !== "arbortect" && (
+              <Typography variant="body1" gutterBottom>
+                You can minimize this data transfer cost by using a Cloudflare Worker to serve this content:
+              </Typography>
+            )}
             <Typography variant="body1" component="div" gutterBottom>
               <ol className={this.props.classes.steps}>
                 <li>
@@ -358,19 +355,15 @@ class ContentCDNComponent extends Component {
                     <li>
                       Verify your workers are working.{" "}
                       <a
-                        href={`https://${this.state.workerInstanceName}-cors-proxy.${
-                          this.state.workerDomain
-                        }/https://www.mozilla.org`}
+                        href={`https://${this.state.workerInstanceName}-cors-proxy.${this.state.workerDomain}/https://www.mozilla.org`}
                         rel="noopener noreferrer"
                         target="_blank"
                       >
                         This link
                       </a>{" "}
                       should show the Mozilla homepage, and&nbsp;
                       <a
-                        href={`https://${this.state.workerInstanceName}-proxy.${
-                          this.state.workerDomain
-                        }/hubs/pages/latest/whats-new.html`}
+                        href={`https://${this.state.workerInstanceName}-proxy.${this.state.workerDomain}/hubs/pages/latest/whats-new.html`}
                         rel="noopener noreferrer"
                         target="_blank"
                       >

admin/src/react-components/deny-buttons.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -28,12 +29,6 @@ DenyButton.propTypes = {
   record: PropTypes.object
 };
 
-export const DenySceneButton = connect(
-  null,
-  { reviewed: sceneReviewed }
-)(DenyButton);
+export const DenySceneButton = connect(null, { reviewed: sceneReviewed })(DenyButton);
 
-export const DenyAvatarButton = connect(
-  null,
-  { reviewed: avatarReviewed }
-)(DenyButton);
+export const DenyAvatarButton = connect(null, { reviewed: avatarReviewed })(DenyButton);

admin/src/react-components/featured-scene-listings.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import { SceneLink, OwnedFileImage, OwnedFileSizeField } from "./fields";
 import { FeatureSceneListingButton } from "./feature-listing-buttons";

admin/src/react-components/fields.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
@@ -122,6 +123,11 @@ function formatFileSize(bytes) {
 function OwnedFileSizeFieldInternal({ record }) {
   return <span>{formatFileSize(record.content_length)}</span>;
 }
+OwnedFileSizeFieldInternal.propTypes = {
+  record: {
+    content_length: PropTypes.number
+  }
+};
 
 export const OwnedFileSizeField = withStyles(styles)(({ label, basePath, record, source }) => {
   return (

admin/src/react-components/identities.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message */
 import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 import {

admin/src/react-components/import-content.js

@@ -1,3 +1,5 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
+/* eslint-disable react/prop-types */
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";

admin/src/react-components/pending-scenes.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import { SceneLink, OwnedFileImage, OwnedFileSizeField, ConditionalReferenceField } from "./fields";
 import { ApproveSceneButton } from "./approve-buttons";

admin/src/react-components/projects.js

@@ -1,5 +1,5 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
-
 import {
   List,
   Show,

admin/src/react-components/scene-listings.js

@@ -1,3 +1,4 @@
+/* eslint-disable @calm/react-intl/missing-formatted-message*/
 import React from "react";
 import { SceneLink, OwnedFileImage, OwnedFileSizeField } from "./fields";
 import { FeatureSceneListingButton } from "./feature-listing-buttons";
@@ -39,7 +40,10 @@ export const SceneListingEdit = props => (
       <SelectInput
         label="Status"
         source="state"
-        choices={[{ id: "active", name: "active" }, { id: "delisted", name: "delisted" }]}
+        choices={[
+          { id: "active", name: "active" },
+          { id: "delisted", name: "delisted" }
+        ]}
       />
     </SimpleForm>
   </Edit>