2023 12 refresh

.eslintrc.yaml

@@ -7,13 +7,10 @@ parserOptions:
     presets: ["@babel/preset-env", "@babel/preset-react"]
 env:
   browser: true
-extends: ["airbnb", "plugin:react/recommended", "prettier"]
+extends: ["airbnb", "airbnb/hooks", "plugin:react/recommended", "prettier"]
 plugins: [import, react, react-hooks]
 settings:
-  import/resolver:
-    node: {}
-    webpack:
-      config: webpack.config.js
+  import/resolver: webpack
   react:
     version: detect
 rules:
@@ -27,3 +24,5 @@ rules:
   react/jsx-one-expression-per-line: 0
   no-param-reassign: 0
   react/jsx-curly-newline: 0
+  default-param-last: 0
+  react/function-component-definition: 0

.pre-commit-config.yaml

@@ -20,11 +20,9 @@ repos:
     hooks:
       - id: prettier
         exclude: ".*config.yaml"
-  - repo: local
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.55.0
     hooks:
-      - id: ESLint
-        name: ESLint
-        entry: npx eslint -c .eslintrc.yaml --fix
-        language: system
-        files: \.[j]sx?$
+      - id: eslint
+        files: ^static/js/.*\.[jt]sx?$
         types: [file]

README.md

@@ -17,6 +17,10 @@ Clone this repository:
 
 `git clone --recursive git://github.com/cesium-ml/baselayer_template_app`
 
+Initialize the database (see database permissions below):
+
+`make db_init`
+
 Start the application with:
 
 `make run`
@@ -29,4 +33,4 @@ Run `make help` for descriptions of other Make targets.
 
 ## Documentation
 
-Please refer to http://cesium-ml.org/baselayer/
+Please refer to http://cesium-ml.org/baselayer/ for more detailed instructions.

config.yaml.defaults

@@ -28,3 +28,7 @@ server:
         debug_login: True
         google_oauth2_key:
         google_oauth2_secret:
+
+services:
+  # Empty disabled list, to enable dask
+  disabled:

package.json

@@ -6,41 +6,37 @@
     "test": "eslint -c .eslintrc --ext .jsx,.js ../static/scripts/ && make test"
   },
   "dependencies": {
-    "check-dependencies": "1.1.0",
+    "check-dependencies": "1.1.1",
     "css-loader": "3.5.3",
     "exports-loader": "0.7.0",
     "imports-loader": "0.8.0",
     "prop-types": "15.7.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-redux": "7.2.0",
-    "redux": "4.0.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.1.2",
+    "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
-    "style-loader": "1.2.1",
-    "whatwg-fetch": "3.0.0"
+    "redux-thunk": "2.4.2",
+    "style-loader": "2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.17.8",
-    "@babel/eslint-parser": "7.18.9",
-    "@babel/plugin-proposal-class-properties": "7.17.12",
-    "@babel/plugin-proposal-object-rest-spread": "7.18.9",
-    "@babel/plugin-transform-arrow-functions": "7.16.7",
-    "@babel/plugin-transform-async-to-generator": "7.18.6",
-    "@babel/preset-env": "7.18.6",
-    "@babel/preset-react": "7.18.6",
-    "@types/eslint": "8.4.3",
+    "@babel/core": "7.23.5",
+    "@babel/eslint-parser": "7.22.9",
+    "@babel/plugin-transform-async-to-generator": "7.23.3",
+    "@babel/preset-env": "7.23.6",
+    "@babel/preset-react": "7.22.5",
+    "@types/eslint": "8.40.2",
     "babel-loader": "8.2.2",
-    "eslint": "7.5.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-import-resolver-webpack": "0.13.2",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.1",
+    "eslint": "8.55.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-import-resolver-webpack": "0.13.8",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "webpack": "5.65.0",
-    "webpack-cli": "4.10.0"
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4"
   },
   "repository": {
     "type": "git",

static/js/components/Main.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { Provider } from "react-redux";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import messageHandler from "baselayer/MessageHandler";
 import WebSocket from "baselayer/components/WebSocket";
@@ -57,9 +57,10 @@ MainContent.propTypes = {
   root: PropTypes.string.isRequired,
 };
 
-ReactDOM.render(
+const container = document.getElementById("content");
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <MainContent root={window.location.host + window.location.pathname} />
-  </Provider>,
-  document.getElementById("content")
+  </Provider>
 );

webpack.config.js

@@ -4,10 +4,7 @@ const path = require("path");
 
 const config = {
   entry: {
-    main: [
-      "@babel/polyfill",
-      path.resolve(__dirname, "static/js/components/Main.jsx"),
-    ],
+    main: [path.resolve(__dirname, "static/js/components/Main.jsx")],
   },
   output: {
     path: path.resolve(__dirname, "static/build"),
@@ -23,12 +20,7 @@ const config = {
         exclude: /node_modules/,
         options: {
           presets: ["@babel/preset-env", "@babel/preset-react"],
-          plugins: [
-            "@babel/plugin-transform-async-to-generator",
-            "@babel/plugin-transform-arrow-functions",
-            "@babel/plugin-proposal-class-properties",
-            "@babel/plugin-proposal-object-rest-spread",
-          ],
+          plugins: ["@babel/plugin-transform-async-to-generator"],
           compact: false,
         },
       },
@@ -58,6 +50,7 @@ const config = {
       baselayer: path.resolve(__dirname, "baselayer/static/js"),
     },
     extensions: [".js", ".jsx"],
+    modules: [path.resolve("./node_modules")],
   },
   watchOptions: {
     ignored: /node_modules/,