Webapp maintenance (2024)

.github/workflows/node.yml

@@ -18,17 +18,17 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, lts/*, latest]
+        node-version: [18.x, lts/*, latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         # Recommended versions to include:
         # - minimum supported version
         # - latest LTS
         # - latest stable
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'

dicoogle/src/main/resources/webapp/eslint.config.js

@@ -0,0 +1,96 @@
+const babelParser = require("@babel/eslint-parser");
+const globals = require("globals");
+const { configs } = require("@eslint/js");
+const reactPlugin = require("eslint-plugin-react");
+const importPlugin = require("eslint-plugin-import");
+
+module.exports = [
+  configs.recommended,
+  {
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        ecmaVersion: 2017,
+        sourceType: "module",
+        ecmaFeatures: {
+          modules: true,
+          jsx: true
+        }
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        process: false
+      }
+    },
+    plugins: {
+      react: reactPlugin,
+      import: importPlugin
+    },
+    settings: {
+      "import/resolver": {
+        node: {
+          extensions: [".js", ".jsx"]
+        }
+      },
+      react: {
+        pragma: "React",
+        version: "15"
+      }
+    },
+    rules: {
+      "no-console": 0,
+      quotes: 0,
+      camelcase: 0,
+      curly: 0,
+      "new-cap": 0,
+      "no-trailing-spaces": 0,
+      "comma-spacing": 0,
+      "no-mixed-spaces-and-tabs": 0,
+      "key-spacing": 0,
+      "space-infix-ops": 0,
+      "no-multi-spaces": 0,
+      "comma-dangle": 0,
+      "semi-spacing": 0,
+      eqeqeq: 1,
+      "no-alert": 1,
+      "no-unused-vars": [
+        1,
+        {
+          vars: "all",
+          args: "none",
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+          ignoreRestSiblings: true
+        }
+      ],
+      "no-extra-semi": 1,
+      "eol-last": 1,
+      "no-empty": 1,
+      "no-dupe-args": 2,
+      "no-dupe-keys": 2,
+      "no-undef": 2,
+      "import/no-unresolved": [2, { commonjs: true }],
+      "import/named": 2,
+      "import/namespace": 2,
+      "import/default": 2,
+      "import/export": 2,
+      "import/no-extraneous-dependencies": 1,
+      "import/no-mutable-exports": 1,
+      "react/no-deprecated": 1,
+      "react/no-did-mount-set-state": 1,
+      "react/no-did-update-set-state": 1,
+      "react/jsx-boolean-value": 1,
+      "react/jsx-no-duplicate-props": 2,
+      "react/jsx-no-undef": 2,
+      "react/jsx-uses-react": 2,
+      "react/jsx-uses-vars": 2,
+      "react/no-danger": 2,
+      "react/no-direct-mutation-state": 2,
+      "react/no-unknown-property": 2,
+      "react/react-in-jsx-scope": 2,
+      "react/no-is-mounted": 2
+    }
+  }
+];

dicoogle/src/main/resources/webapp/js/app.js

@@ -70,7 +70,7 @@ class App extends React.Component {
   componentWillMount() {
     UserStore.listen(this.handleUserStoreUpdate);
 
-    let lastLocation = this.props.location.pathname.slice(1);
+    let lastLocation = (location.hash || "").slice(2);
     if (
       lastLocation !== "" &&
       lastLocation !== "login" &&
@@ -95,8 +95,8 @@ class App extends React.Component {
       UserStore.loadLocalStore();
     }
 
-    if (this.props.location.pathname === "/") {
-      this.props.router.push("login");
+    if (location.hash === "" || location.hash === "/") {
+      this.props.router.push("/login");
     }
   }
 
@@ -107,18 +107,19 @@ class App extends React.Component {
       this.setState(data);
     }
 
+    let history = this.props.router;
     if (!data.isLoggedIn) {
       if (!process.env.GUEST_USERNAME) {
-        this.props.router.replace("login");
+        history.replace("/login");
       } else {
         if (!data.loginFailed) {
-          this.props.router.push("loading");
+          history.push("/loading");
         } else {
-          this.props.router.push("login");
+          history.push("/login");
         }
       }
     } else {
-      this.props.router.replace(this.state.lastLocation);
+      history.replace("/" + this.state.lastLocation);
     }
   }
 
@@ -171,7 +172,7 @@ class App extends React.Component {
       lastLocation: "search"
     });
     this.needsPluginUpdate = true;
-    this.context.router.push("login");
+    this.context.router.history.push("/login");
   }
 
   render() {
@@ -237,16 +238,16 @@ ReactDOM.render(
   <Router history={hashHistory}>
     <Route path="/" component={App}>
       <IndexRoute component={LoadingView} />
-      <Route path="search" component={Search} />
-      <Route path="management" component={ManagementView} />
-      <Route path="results" component={SearchResultView} />
-      <Route path="indexer" component={IndexStatusView} />
-      <Route path="about" component={AboutView} />
-      <Route path="login" component={LoginView} />
-      <Route path="loading" component={LoadingView} />
-      <Route path="image/:uid" component={DirectImageView} />
-      <Route path="dump/:uid" component={DirectDumpView} />
-      <Route path="ext/:plugin" component={PluginView} />
+      <Route path="/search" component={Search} />
+      <Route path="/management" component={ManagementView} />
+      <Route path="/results" component={SearchResultView} />
+      <Route path="/indexer" component={IndexStatusView} />
+      <Route path="/about" component={AboutView} />
+      <Route path="/login" component={LoginView} />
+      <Route path="/loading" component={LoadingView} />
+      <Route path="/image/:uid" component={DirectImageView} />
+      <Route path="/dump/:uid" component={DirectDumpView} />
+      <Route path="/ext/:plugin" component={PluginView} />
       <Route path="*" component={NotFoundView} />
     </Route>
   </Router>,

dicoogle/src/main/resources/webapp/js/components/login/loginView.js

@@ -31,8 +31,8 @@ const LoginView = createReactClass({
       return;
     }
 
-    if (data.isLoggedIn) {
-      router.replace("search");
+    if (data.isLoggedIn && router.history.location.pathname === "/login") {
+      router.history.replace("/search");
     }
   },
 

dicoogle/src/main/resources/webapp/js/components/plugin/pluginView.jsx

@@ -33,7 +33,7 @@ export default class PluginView extends React.Component {
     if (component) {
       const node = component;
       node.addEventListener("plugin-load", e => {
-        //console.log('[plugin-load]', e);
+        console.debug('[plugin-load]', e);
         if (e && e.detail) {
           this.handleLoaded(e.detail);
         }
@@ -56,11 +56,12 @@ export default class PluginView extends React.Component {
   }
 
   getPluginName() {
-    return this.props.plugin || (this.props.params && this.props.params.plugin);
+    return this.props.plugin || (this.props.params?.plugin);
   }
 
   render() {
     const plugin = this.getPluginName();
+    console.debug("Trying to render plugin", plugin);
     return (
       <div className={this.props.className} style={this.props.style}>
         {this.state.elements[plugin] ? (

dicoogle/src/main/resources/webapp/js/components/search/searchView.jsx

@@ -14,7 +14,6 @@ import Select from "react-select";
 
 const Search = createReactClass({
   propTypes: {
-    params: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired
   },