Merge branch 'dev10.4' into unit_test_init

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      "@babel/preset-env",  
+      "@babel/preset-react" 
+    ],
+  };
+

eslint.config.mjs

@@ -1,10 +1,59 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-
+import babelParser from "@babel/eslint-parser";
+import reactHooks from "eslint-plugin-react-hooks";
 
 export default [
-  {languageOptions: { globals: globals.browser }},
   pluginJs.configs.recommended,
   pluginReactConfig,
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],     
+    plugins: {
+      "react-hooks": reactHooks,  
+    },
+    languageOptions: {
+      globals: globals.browser,
+      parser: babelParser,
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    },
+    rules: {
+      "semi": 2,
+      "react/prop-types": 0,
+      "jsx-no-bind": 0,
+      "react/jsx-no-bind": 0,
+      "react/jsx-filename-extension": 0,
+      "react/jsx-props-no-spreading": 0,
+      "react/destructuring-assignment": 0,
+      "react/forbid-prop-types": 0,
+      "react/jsx-wrap-multilines": 0,
+      "react/style-prop-object": [2, { "allow": ["FormattedNumber"] }],
+      "import/prefer-default-export": 0,
+      "function-paren-newline": 0,
+      "react/function-component-definition": 0,
+      "func-names": 0,
+      "no-underscore-dangle": 0,
+      "no-console": 1,
+      "prefer-destructuring": 0,
+      "operator-linebreak": 0,
+      "indent": 0,
+      "camelcase": 0,
+      "space-before-function-paren": 0,
+      "implicit-arrow-linebreak": 0,
+      "nonblock-statement-body-position": 0,
+      "react/prefer-stateless-function": 0,
+      "curly": 0,
+      "object-curly-newline": 0,
+      "prefer-template": 0,
+      "arrow-parens": 0,
+      "no-param-reassign": 0,
+      "no-mixed-operators": 0,
+      "no-else-return": 0,
+
+    },
+  },
 ];

frontend/README.md

@@ -7,14 +7,12 @@
 ### steps to build and deploy react
 
 1. create a folder `react` under deployed `wildbook/` dir
-2. create a `.env` under the root of `REPO/frontend/`, add public-facing url like this:
-  - `PUBLIC_URL=http://localhost:8080/react/` (for local tomcat)
-  - `PUBLIC_URL=https://public.url.example.com/react/`
-   add site name like this:
-  - `SITE_NAME=Amphibian Wildbook`  
+2. create a `.env` for React environment variables under the root of `REPO/frontend/`. In this file:
+    1. Add the public URL. For local tomcat development, use `PUBLIC_URL=http://localhost:81/react/` (or whatever port your local server is running on). For public deployment, use the following, where `public.url.example.com` is your deployed URL: `PUBLIC_URL=https://public.url.example.com/react/`
+    2. Add site name like this: `SITE_NAME=Amphibian Wildbook`
 3. cd to `REPO/frontend/` and run `npm run build`
 4. copy everything under `frontend/build/` to the `wildbook/react/` created in step 1
-5. refresh your browser page by visiting either `http://localhost:8080/react/` for local testing or `https://public.url.example.com/react/` for the public-facing deployment
+5. refresh your browser page by visiting either `http://localhost:81/react/` for local testing or `https://public.url.example.com/react/` for the public-facing deployment
 
 
 ### steps to setup dev environment

frontend/config-overrides.js

@@ -1,14 +1,15 @@
 // config-overrides.js
-const webpack = require('webpack');
-module.exports = function override(config, env) { 
-  if(env === 'production'){
-    config.devtool = 'source-map';
+/* eslint-disable no-undef */
+const webpack = require("webpack");
+module.exports = function override(config, env) {
+  if (env === "production") {
+    config.devtool = "source-map";
     // config.devtool = 'cheap-module-source-map';
   }
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.SITE_NAME': JSON.stringify(process.env.SITE_NAME),
-      })
-    );
-    return config;
-  };
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      "process.env.SITE_NAME": JSON.stringify(process.env.SITE_NAME),
+    }),
+  );
+  return config;
+};

frontend/config/webpack/webpack.dev.js

@@ -1,14 +1,16 @@
-const path = require('path');
-const webpack = require('webpack');
-const UnusedWebpackPlugin = require('unused-webpack-plugin');
+/* eslint-disable no-undef */
+
+const path = require("path");
+const webpack = require("webpack");
+const UnusedWebpackPlugin = require("unused-webpack-plugin");
 
 module.exports = {
-  mode: 'development',
-  devtool: 'source-map',
+  mode: "development",
+  devtool: "source-map",
   devServer: {
     disableHostCheck: true,
     headers: {
-      'Access-Control-Allow-Origin': '*',
+      "Access-Control-Allow-Origin": "*",
     },
     historyApiFallback: true,
     hot: true,
@@ -18,7 +20,7 @@ module.exports = {
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new UnusedWebpackPlugin({
-      directories: [path.join(__dirname, '../../src')],
+      directories: [path.join(__dirname, "../../src")],
     }),
   ],
 };

frontend/config/webpack/webpack.prod.js

@@ -1,24 +1,26 @@
+/* eslint-disable no-undef */
+
 // const webpack = require("webpack");
-const { resolve } = require('path');
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
+const { resolve } = require("path");
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
 
-const rootDir = resolve(__dirname, '../../');
-const dist = path.resolve(rootDir, 'dist');
+const rootDir = resolve(__dirname, "../../");
+const dist = path.resolve(rootDir, "dist");
 
 module.exports = {
-  mode: 'production',
-  devtool: 'source-map',
+  mode: "production",
+  devtool: "source-map",
   entry: {
-    main: path.resolve(rootDir, 'src/index.jsx'),
+    main: path.resolve(rootDir, "src/index.jsx"),
   },
   output: {
     path: dist,
-    filename: '[name].js',
-    chunkFilename: '[name].chunk.js',
-    publicPath: '/',
+    filename: "[name].js",
+    chunkFilename: "[name].chunk.js",
+    publicPath: "/",
   },
   optimization: {
-      minimizer: [new TerserPlugin()],
+    minimizer: [new TerserPlugin()],
   },
 };