Migrate to React 19, Vite, functional components and general modernize the UI

ui/public/index.html → ui/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#3f51b5">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="manifest.json">
     <title>Gotify</title>
 
     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="static/apple-touch-icon-57x57.png" />
@@ -35,8 +35,7 @@
     Gotify requires JavaScript.
 </noscript>
 <div id="root"></div>
-<% if (process.env.NODE_ENV === 'production') { %>
-    <script>window.config = %CONFIG%;</script>
-<% } %>
+<script>window.config = %CONFIG%;</script>
+<script type="module" src="/src/index.tsx"></script>
 </body>
 </html>

ui/package.json

@@ -2,72 +2,71 @@
   "name": "gotify-ui",
   "version": "0.2.0",
   "private": true,
-  "homepage": ".",
-  "proxy": "http://localhost:80",
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.9.1",
-    "axios": "^0.21.1",
-    "codemirror": "^5.61.1",
-    "detect-browser": "^5.2.0",
-    "js-base64": "^3.6.1",
-    "mobx": "^5.15.6",
-    "mobx-react": "^6.3.0",
-    "mobx-utils": "^5.6.1",
-    "notifyjs": "^3.0.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.2",
-    "react-codemirror2": "^7.2.1",
-    "react-dom": "^16.4.2",
-    "react-infinite": "^0.13.0",
-    "react-markdown": "^6.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-timeago": "^6.2.1",
-    "remark-gfm": "^1.0.0",
-    "remove-markdown": "^0.3.0",
-    "typeface-roboto": "1.1.13"
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@fontsource/roboto": "5.1.1",
+    "@mui/icons-material": "6.3.0",
+    "@mui/material": "6.3.0",
+    "@uiw/codemirror-extensions-langs": "^4.23.7",
+    "@uiw/codemirror-theme-material": "^4.23.7",
+    "@uiw/react-codemirror": "^4.23.7",
+    "axios": "1.7.9",
+    "detect-browser": "5.3.0",
+    "install": "^0.13.0",
+    "js-base64": "3.7.7",
+    "notifyjs": "3.0.0",
+    "prop-types": "15.8.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-markdown": "9.0.1",
+    "react-redux": "9.2.0",
+    "react-router": "7.1.1",
+    "react-router-dom": "7.1.1",
+    "react-timeago": "7.2.0",
+    "react-window": "1.8.11",
+    "remark-gfm": "4.0.0",
+    "remove-markdown": "0.6.0",
+    "tss-react": "4.9.14"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=node",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "format": "prettier \"src/**/*.{ts,tsx}\" --write",
     "testformat": "prettier \"src/**/*.{ts,tsx}\" --list-different"
   },
   "devDependencies": {
-    "@types/codemirror": "5.60.0",
-    "@types/detect-browser": "^4.0.0",
-    "@types/get-port": "^4.0.0",
-    "@types/jest": "^26.0.23",
-    "@types/js-base64": "^3.3.1",
-    "@types/node": "^15.12.2",
-    "@types/notifyjs": "^3.0.2",
-    "@types/puppeteer": "^5.4.6",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-infinite": "0.0.35",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/remove-markdown": "^0.3.0",
-    "@types/rimraf": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.0.0",
-    "eslint-plugin-prefer-arrow": "^1.2.2",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-unicorn": "^21.0.0",
-    "get-port": "^5.1.1",
-    "prettier": "^2.3.1",
-    "puppeteer": "^17.1.3",
-    "react-scripts": "^4.0.3",
-    "rimraf": "^3.0.2",
-    "tree-kill": "^1.2.0",
-    "typescript": "4.0.2",
-    "wait-on": "^5.3.0"
+    "@reduxjs/toolkit": "2.5.0",
+    "@types/codemirror": "5.60.15",
+    "@types/detect-browser": "4.0.3",
+    "@types/js-base64": "3.3.1",
+    "@types/node": "22.10.3",
+    "@types/notifyjs": "3.0.5",
+    "@types/puppeteer": "7.0.4",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "@types/react-router-dom": "5.3.3",
+    "@types/remove-markdown": "0.3.4",
+    "@typescript-eslint/eslint-plugin": "8.19.0",
+    "@typescript-eslint/parser": "8.19.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-react": "7.37.3",
+    "eslint-plugin-unicorn": "56.0.1",
+    "get-port": "7.1.0",
+    "prettier": "3.4.2",
+    "puppeteer": "17.1.3",
+    "rimraf": "6.0.1",
+    "tree-kill": "1.2.2",
+    "typescript": "5.7.2",
+    "vite": "6.0.6",
+    "vitest": "2.1.8",
+    "wait-on": "8.0.1"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -83,5 +82,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "resolutions": {
+    "rollup": "npm:@rollup/wasm-node"
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

ui/serve.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-gonic/gin"
+
 	"github.com/gotify/server/v2/model"
 )
 

ui/src/App.tsx

@@ -0,0 +1,115 @@
+import React, {useEffect} from 'react';
+import {createHashRouter, RouterProvider} from 'react-router-dom';
+import Applications from './application/Applications.tsx';
+import Clients from './client/Clients.tsx';
+import {checkAuthLoader} from './common/Auth.ts';
+import Messages from './message/Messages.tsx';
+import {WebSocketStore} from './message/WebSocketStore.ts';
+import PluginsRootLayout from './pages/plugins.tsx';
+import RootLayout from './pages/root';
+import PluginDetailView from './plugin/PluginDetailView.tsx';
+import Plugins from './plugin/Plugins.tsx';
+import * as Notifications from './snack/browserNotification.ts';
+import {useAppDispatch, useAppSelector} from './store';
+import {messageActions} from './message/message-slice.ts';
+import Login from './user/Login.tsx';
+import Users from './user/Users.tsx';
+
+const router = createHashRouter([
+    {
+        path: '/',
+        element: <RootLayout />,
+        children: [
+            {
+                index: true,
+                element: <Messages />,
+                loader: checkAuthLoader,
+            },
+            {
+                path: 'messages',
+                element: <Messages />,
+                loader: checkAuthLoader,
+                children: [
+                    {
+                        path: ':id',
+                        element: <Messages />,
+                    }
+                ]
+            },
+            {
+                path: 'login',
+                element: <Login />,
+            },
+            {
+                path: 'applications',
+                element: <Applications />,
+                loader: checkAuthLoader,
+            },
+            {
+                path: 'users',
+                element: <Users />,
+                loader: checkAuthLoader,
+            },
+            {
+                path: 'clients',
+                element: <Clients />,
+                loader: checkAuthLoader,
+            },
+            {
+                path: 'plugins',
+                element: <PluginsRootLayout />,
+                loader: checkAuthLoader,
+                children: [
+                    { index: true, element: <Plugins /> },
+                    {
+                        path: ':id',
+                        element: <PluginDetailView />,
+                    }
+                ],
+            },
+        ],
+    },
+]);
+
+const ws = new WebSocketStore();
+
+const App = () => {
+    const dispatch = useAppDispatch();
+    const loggedIn = useAppSelector((state) => state.auth.loggedIn);
+
+    useEffect(() => {
+        if (loggedIn) {
+            ws.listen((message) => {
+                dispatch(messageActions.loading(true));
+                dispatch(messageActions.add(message));
+                Notifications.notifyNewMessage(message);
+                if (message.priority >= 4) {
+                    const src = 'static/notification.ogg';
+                    const audio = new Audio(src);
+                    audio.play();
+                }
+            });
+            window.onbeforeunload = () => {
+                ws.close();
+            };
+        } else {
+            ws.close();
+        }
+    }, [dispatch, loggedIn]);
+
+
+    return (
+        <RouterProvider router={router} />
+    );
+};
+
+export default App;
+
+/*
+<Routes>
+    {authenticating ? (<Route path="/" element={<LoadingSpinner />} />) : null}
+    <Route path="/" element={<Messages />} />
+    <Route path="messages/:id" element={<Messages />} />
+
+</Routes>
+*/