Merge pull request #695 from cityofaustin/9561-jc-react-scripts-5

Upgrade to react-scripts v5

moped-editor/.babelrc.js

@@ -1,3 +1,4 @@
+// https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment
 const plugins = [
   [
     "babel-plugin-import",

moped-editor/.eslintrc.json

@@ -1,4 +1,3 @@
 {
-  "extends": ["plugin:prettier/recommended"],
-  "parser": "babel-eslint"
+  "extends": ["react-app"]
 }

moped-editor/.prettierrc

@@ -3,4 +3,4 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false
-}
+}

moped-editor/package.json

@@ -24,9 +24,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.3%",
@@ -87,24 +84,15 @@
     "react-quill": "^2.0.0-beta.4",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^5.0.0",
     "styled-components": "^5.3.0",
     "uuid": "^8.3.2",
     "yup": "^0.29.3"
   },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "prettier": "^1.19.1"
-  },
   "engines": {
     "npm": ">=6.0.0"
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.13.5"
   }
 }

moped-editor/src/components/FileUpload/FileUpload.js

@@ -5,7 +5,9 @@ import config from "../../config";
 import { useUser, getJwt } from "../../auth/user";
 
 // File Pond Library
-import { FilePond, File, registerPlugin } from "react-filepond";
+import { FilePond, registerPlugin } from "react-filepond";
+// `File` imported from filepond to workaround react-scripts 5 import error
+import { File } from "filepond"
 import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
 import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";

moped-editor/src/config.js

@@ -1,4 +1,4 @@
-export default {
+const config = {
   env: {
     APP_CLOUDFRONT: process.env.REACT_APP_AWS_CLOUDFRONT,
     APP_ENVIRONMENT: process.env.REACT_APP_HASURA_ENV,
@@ -14,3 +14,5 @@ export default {
     USER_POOL_ID: process.env.REACT_APP_AWS_COGNITO_USER_POOL_ID,
   },
 };
+
+export default config;

moped-editor/src/theme/shadows.js

@@ -1,4 +1,4 @@
-export default [
+const shadow = [
   "none",
   "0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)",
   "0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)",
@@ -25,3 +25,5 @@ export default [
   "0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)",
   "0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)",
 ];
+
+export default shadow;

moped-editor/src/theme/typography.js

@@ -1,4 +1,4 @@
-export default {
+const typography = {
   h1: {
     fontWeight: 500,
     fontSize: 29,
@@ -35,3 +35,5 @@ export default {
   },
   fontFamily: `"Roboto", san-serif`,
 };
+
+export default typography;

moped-editor/src/utils/downloadFileAttachment.js

@@ -5,7 +5,7 @@ import config from "../config";
  * @param {string} file_key - The full to the file in the bucket
  * @param {string} token - The JWT token to use against the API
  */
-export default (file_key, token) => {
+const downloadFileAttachment = (file_key, token) => {
   if (file_key) {
     // Remove forward slash if present
     if (file_key[0] === "/") file_key = file_key.substring(1);
@@ -17,28 +17,30 @@ export default (file_key, token) => {
         Authorization: `Bearer ${token}`,
       },
     })
-      .then(response => {
+      .then((response) => {
         if (response.status === 200) {
           // We care
           response
             .json()
-            .then(data => {
+            .then((data) => {
               if (data?.download_url) {
                 window.location = data.download_url;
               } else {
                 console.log("Error Downloading File: No download URL");
               }
             })
-            .catch(err => {
+            .catch((err) => {
               console.log("Error Downloading File: " + JSON.stringify(err));
             });
         } else {
           // Error
           console.log("Error: Unable to download file.");
         }
       })
-      .catch(err => {
+      .catch((err) => {
         console.log("Error Downloading File: " + JSON.stringify(err));
       });
   }
 };
+
+export default downloadFileAttachment;

moped-editor/src/utils/emailToInitials.js

@@ -1,4 +1,4 @@
-export default email => {
+const emailToInitials = (email) => {
   try {
     const subdomain = "austintexas.gov";
     if (!email.endsWith(subdomain)) return null;
@@ -12,3 +12,5 @@ export default email => {
     return null;
   }
 };
+
+export default emailToInitials;

moped-editor/src/utils/humanReadableFileSize.js

@@ -7,23 +7,27 @@
  *
  * @return {string} - Formatted string.
  */
-export default (bytes, si=false, dp=1) => {
-    const thresh = si ? 1000 : 1024;
+const humanReadableFileSize = (bytes, si = false, dp = 1) => {
+  const thresh = si ? 1000 : 1024;
 
-    if (Math.abs(bytes) < thresh) {
-        return bytes + ' B';
-    }
+  if (Math.abs(bytes) < thresh) {
+    return bytes + " B";
+  }
 
-    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
-    let u = -1;
-    const r = 10 ** dp;
+  let u = -1;
+  const r = 10 ** dp;
 
-    do {
-        bytes /= thresh;
-        ++u;
-    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (
+    Math.round(Math.abs(bytes) * r) / r >= thresh &&
+    u < units.length - 1
+  );
 
+  return Math.round(bytes.toFixed(dp)) + " " + units[u];
+};
 
-    return Math.round(bytes.toFixed(dp)) + ' ' + units[u];
-}
+export default humanReadableFileSize;

moped-editor/src/views/projects/projectView/ProjectComponentsBaseMap.js

@@ -6,11 +6,11 @@ import { SpeedDial, SpeedDialAction } from "@material-ui/lab";
 export const useStyles = makeStyles(theme => ({
   speedDialStreets: {
     color: "black",
-    backgroundImage: "url(/moped/static/images/mapStreets.jpg) !important",
+    backgroundImage: `url(${process.env.PUBLIC_URL}/static/images/mapStreets.jpg) !important`,
   },
   speedDialAerial: {
     color: "white",
-    backgroundImage: "url(/moped/static/images/mapAerial.jpg) !important",
+    backgroundImage: `url(${process.env.PUBLIC_URL}/static/images/mapAerial.jpg) !important`,
   },
   mapStyleToggle: {
     position: "absolute",
@@ -123,6 +123,7 @@ const ProjectComponentsBaseMap = ({
             tooltipTitle={"Streets Base Map"}
             tooltipPlacement={"top"}
             onClick={() => handleBasemapSpeedDialClose("streets")}
+            className={classes.speedDialStreets}
           />
           <SpeedDialAction
             key={"aerial"}
@@ -133,6 +134,7 @@ const ProjectComponentsBaseMap = ({
             }
             tooltipTitle={"Aerial Base Map"}
             tooltipPlacement={"top"}
+            className={classes.speedDialAerial}
             onClick={() => handleBasemapSpeedDialClose("aerial")}
           />
         </SpeedDial>,

moped-editor/src/views/projects/projectView/ProjectComponentsMap.css

@@ -18,16 +18,6 @@
   height: 4rem !important;
 }
 
-.MuiFab-sizeSmall:nth-of-type(1) {
-  background-image: url(/moped/static/images/mapStreets.jpg) !important;
-  color: black;
-}
-
-.MuiFab-sizeSmall:nth-of-type(2) {
-  background-image: url(/moped/static/images/mapAerial.jpg) !important;
-  color: white;
-}
-
 .MuiFab-label {
   font-size: 0.8rem !important;
   font-weight: bold !important;

moped-editor/src/views/staff/StaffListViewExportConf.js

@@ -5,38 +5,38 @@
  * @default
  */
 export const StaffListViewExportConf = {
-    user_id: {
-        label: "user_id",
-    },
-    first_name: {
-        label: "first_name",
-    },
-    last_name: {
-        label: "last_name",
-    },
-    email: {
-        label: "email",
-    },
-    date_added: {
-        label: "date_added",
-    },
-    staff_uuid: {
-        label: "staff_uuid",
-    },
-    title: {
-        label: "title",
-    },
-    workgroup: {
-        label: "workgroup",
-    },
-    cognito_user_id: {
-        label: "cognito_user_id",
-    },
-    is_coa_staff: {
-        label: "is_coa_staff",
-        filter: value => value === true ? "True" : "False",
-    },
-    status_id: {
-        label: "status_id",
-    },
-}
+  user_id: {
+    label: "user_id",
+  },
+  first_name: {
+    label: "first_name",
+  },
+  last_name: {
+    label: "last_name",
+  },
+  email: {
+    label: "email",
+  },
+  date_added: {
+    label: "date_added",
+  },
+  staff_uuid: {
+    label: "staff_uuid",
+  },
+  title: {
+    label: "title",
+  },
+  workgroup: {
+    label: "workgroup",
+  },
+  cognito_user_id: {
+    label: "cognito_user_id",
+  },
+  is_coa_staff: {
+    label: "is_coa_staff",
+    filter: (value) => (value === true ? "True" : "False"),
+  },
+  status_id: {
+    label: "status_id",
+  },
+};