opensupplyhub · TaiWilkin · Mar 11, 2021 · Mar 3, 2021 · Mar 3, 2021 · Mar 4, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
+- Use Craco and Prettier [#1271](https://github.com/open-apparel-registry/open-apparel-registry/pull/1271)
+
 ### Deprecated
 
 ### Removed

diff --git a/scripts/lint b/scripts/lint
@@ -23,8 +23,14 @@ if [ "${BASH_SOURCE[0]}" = "${0}" ]; then
 
         # Lint React frontend
         docker-compose \
-            run --rm --no-deps app \
-            yarn lint
+            run --rm --entrypoint ./node_modules/.bin/eslint \
+            app src/ --ext .js --ext .jsx
+
+        docker-compose \
+            run --rm --no-deps app yarn prettier \
+                --config .prettierrc \
+                --check 'src/**/*.js' 'src/**/*.jsx'
+
 
         if [ "${1:-}" = "--ci" ]; then
             # Lint Django app

diff --git a/src/app/.eslintrc b/src/app/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "parser": "babel-eslint",
   "env": {
     "browser": true,
@@ -13,9 +13,6 @@
       "react-hooks"
   ],
   "rules": {
-    "indent": [2, 4, { "SwitchCase": 1, "VariableDeclarator": 2 }],
-    "react/jsx-indent": [2, 4],
-    "react/jsx-indent-props": [2, 4],
     "max-statements": [0, 10],
     "jsx-a11y/label-has-for": [2, {
       "required": {
@@ -35,6 +32,15 @@
     "react/prop-types": "off",
     "react/sort-comp": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "prefer-object-spread": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/state-in-constructor": "off",
+    "react/jsx-fragments": "off",
+    "import/no-cycle": "off",
+    "react/forbid-prop-types": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "func-names": "off"
   }
 }
diff --git a/src/app/.prettierignore b/src/app/.prettierignore
@@ -0,0 +1,4 @@
+node_modules
+build
+src/__tests__
+src/data
diff --git a/src/app/.prettierrc b/src/app/.prettierrc
@@ -0,0 +1,17 @@
+{
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "parser": "babel",
+    "printWidth": 80,
+    "proseWrap": "always",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false,
+}
diff --git a/src/app/config-overrides.js b/src/app/config-overrides.js
diff --git a/src/app/craco.config.js b/src/app/craco.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+    babel: {
+        plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
+    },
+    webpack: {
+        configure: (webpackConfig, { env }) => {
+            if (env !== 'development') {
+                return webpackConfig;
+            }
+
+            webpackConfig.module.rules.unshift({
+                test: /\.jsx?$/,
+                use: ['prettier-loader'],
+                // force this loader to run first if it's not first in loaders list
+                enforce: 'pre',
+                exclude: /node_modules/,
+            });
+
+            return webpackConfig;
+        },
+    },
+};
diff --git a/src/app/package.json b/src/app/package.json
@@ -4,13 +4,13 @@
     "license": "MIT",
     "private": true,
     "dependencies": {
-        "@hot-loader/react-dom": "16.8.6",
+        "@craco/craco": "6.1.1",
         "@material-ui/core": "3.1.0",
         "@material-ui/icons": "3.0.1",
         "@turf/distance": "6.0.1",
         "@turf/turf": "5.1.6",
         "axios": "0.21.1",
-        "core-js": "2.6.4",
+        "core-js": "3.9.1",
         "file-saver": "2.0.0",
         "http-proxy-middleware": "0.19.1",
         "immutability-helper": "2.9.0",
@@ -21,12 +21,9 @@
         "moment": "2.24.0",
         "object-hash": "1.3.1",
         "prop-types": "15.6.2",
-        "react": "16.8.6",
-        "react-app-rewire-hot-loader": "2.0.1",
-        "react-app-rewired": "2.1.3",
+        "react": "^16.13.1",
         "react-copy-to-clipboard": "5.0.1",
         "react-dom": "16.8.6",
-        "react-hot-loader": "4.9.0",
         "react-infinite": "0.13.0",
         "react-infinite-any-height": "2.3.0",
         "react-leaflet": "2.4.0",
@@ -37,7 +34,7 @@
         "react-redux": "5.1.0",
         "react-router": "4.3.1",
         "react-router-dom": "4.3.1",
-        "react-scripts": "2.1.3",
+        "react-scripts": "4.0.2",
         "react-select": "2.3.0",
         "react-toastify": "4.1.0",
         "redux": "4.0.0",
@@ -48,24 +45,20 @@
         "validator": "10.11.0"
     },
     "scripts": {
-        "start": "PORT=6543 react-app-rewired start",
-        "build": "react-app-rewired build",
-        "test": "CI=1 react-app-rewired test --env=node",
-        "lint": "eslint src/ --ext .js --ext .jsx",
-        "eject": "react-app-rewired eject"
+        "start": "PORT=6543 FAST_REFRESH=false CHOKIDAR_USEPOLLING=true craco start",
+        "build": "craco build",
+        "test": "CI=1 craco test --env=node",
+        "lint": "prettier --config .prettierrc --check 'src/**/*.js' 'src/**/*.jsx'",
+        "eject": "craco eject"
     },
     "devDependencies": {
-        "@babel/cli": "7.0.0-beta.49",
-        "@babel/core": "7.0.0-beta.49",
-        "@babel/preset-env": "7.0.0-beta.49",
-        "babel-plugin-lodash": "3.3.3",
-        "eslint": "5.6.0",
-        "eslint-config-airbnb": "17.1.0",
-        "eslint-plugin-import": "2.14.0",
-        "eslint-plugin-jest": "21.27.2",
-        "eslint-plugin-jsx-a11y": "6.1.2",
-        "eslint-plugin-react": "7.11.1",
-        "eslint-plugin-react-hooks": "1.6.0"
+        "@babel/helper-builder-react-jsx": "^7.12.13",
+        "@babel/plugin-transform-react-jsx": "^7.12.17",
+        "@babel/plugin-transform-react-jsx-self": "^7.12.13",
+        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-prettier": "^8.1.0",
+        "prettier": "2.0.2",
+        "prettier-loader": "3.3.0"
     },
     "browserslist": [
         ">0.2%",

diff --git a/src/app/src/App.jsx b/src/app/src/App.jsx
@@ -5,7 +5,6 @@ import { bool, func } from 'prop-types';
 import { Router, Route, Switch } from 'react-router-dom';
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/first
-import { hot } from 'react-hot-loader/root';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import history from './util/history';
@@ -75,10 +74,12 @@ const appStyles = Object.freeze({
 
 class App extends Component {
     componentDidMount() {
-        window.addEventListener('resize', () => this.props.handleWindowResize({
-            innerHeight: window.innerHeight,
-            innerWidth: window.innerWidth,
-        }));
+        window.addEventListener('resize', () =>
+            this.props.handleWindowResize({
+                innerHeight: window.innerHeight,
+                innerWidth: window.innerWidth,
+            }),
+        );
 
         window.setGridColorRamp = this.props.setRamp;
 
@@ -90,7 +91,8 @@ class App extends Component {
     render() {
         const { fetchingFeatureFlags, embed } = this.props;
 
-        const mainPanelStyle = embed ? { ...appStyles.mainPanelStyle, bottom: 0, top: 0 }
+        const mainPanelStyle = embed
+            ? { ...appStyles.mainPanelStyle, bottom: 0, top: 0 }
             : appStyles.mainPanelStyle;
         return (
             <ErrorBoundary>
@@ -106,7 +108,11 @@ class App extends Component {
                                     render={() => (
                                         <FeatureFlag
                                             flag={CLAIM_A_FACILITY}
-                                            alternative={<Route component={MapAndSidebar} />}
+                                            alternative={
+                                                <Route
+                                                    component={MapAndSidebar}
+                                                />
+                                            }
                                         >
                                             <Route component={ClaimFacility} />
                                         </FeatureFlag>
@@ -119,21 +125,23 @@ class App extends Component {
                                             flag={CLAIM_A_FACILITY}
                                             alternative={<RouteNotFound />}
                                         >
-                                            <Route component={ClaimedFacilities} />
+                                            <Route
+                                                component={ClaimedFacilities}
+                                            />
                                         </FeatureFlag>
                                     )}
                                 />
                                 <Route
                                     path={facilitiesRoute}
-                                    render={
-                                        () => {
-                                            if (fetchingFeatureFlags) {
-                                                return <CircularProgress />;
-                                            }
-
-                                            return <Route component={MapAndSidebar} />;
+                                    render={() => {
+                                        if (fetchingFeatureFlags) {
+                                            return <CircularProgress />;
                                         }
-                                    }
+
+                                        return (
+                                            <Route component={MapAndSidebar} />
+                                        );
+                                    }}
                                 />
                                 <Route
                                     exact
@@ -197,15 +205,15 @@ class App extends Component {
                                 <Route
                                     exact
                                     path={mainRoute}
-                                    render={
-                                        () => {
-                                            if (fetchingFeatureFlags) {
-                                                return <CircularProgress />;
-                                            }
-
-                                            return <Route component={MapAndSidebar} />;
+                                    render={() => {
+                                        if (fetchingFeatureFlags) {
+                                            return <CircularProgress />;
                                         }
-                                    }
+
+                                        return (
+                                            <Route component={MapAndSidebar} />
+                                        );
+                                    }}
                                 />
                                 <Route render={() => <RouteNotFound />} />
                             </Switch>
@@ -230,12 +238,8 @@ App.propTypes = {
 };
 
 function mapStateToProps({
-    featureFlags: {
-        fetching: fetchingFeatureFlags,
-    },
-    embeddedMap: {
-        embed,
-    },
+    featureFlags: { fetching: fetchingFeatureFlags },
+    embeddedMap: { embed },
 }) {
     return {
         fetchingFeatureFlags,
@@ -253,4 +257,7 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default hot(connect(mapStateToProps, mapDispatchToProps)(withStyles(appStyles)(App)));
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(withStyles(appStyles)(App));