Skip to content

Commit 1bf4902

Browse files
mfechnermfechner
committed
Upgrade react to 18.3.1
Rewrite all components to functional component using hooks Upgrade react-router to 7.1.0 Use reduxjs/toolkit and react-redux for state management Upgrade material to 6.3.0 Updated most dependencies to current versions
1 parent 0b9a2e4 commit 1bf4902

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+6167
-4424
lines changed

‎ui/package.json

+49-52
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,29 @@
55
"homepage": ".",
66
"proxy": "http://localhost:80",
77
"dependencies": {
8-
"@material-ui/core": "^4.11.4",
9-
"@material-ui/icons": "^4.9.1",
10-
"axios": "^0.21.1",
11-
"codemirror": "^5.61.1",
12-
"detect-browser": "^5.2.0",
13-
"js-base64": "^3.6.1",
14-
"mobx": "^6.13.3",
15-
"mobx-react": "^9.1.1",
16-
"mobx-utils": "^6.1.0",
17-
"notifyjs": "^3.0.0",
18-
"prop-types": "^15.6.2",
19-
"react": "^16.8.6",
20-
"react-codemirror2": "^7.2.1",
21-
"react-dom": "^16.8.6",
22-
"react-infinite": "^0.13.0",
23-
"react-markdown": "^6.0.2",
24-
"react-router": "^5.2.0",
25-
"react-router-dom": "^5.2.0",
26-
"react-timeago": "^6.2.1",
27-
"remark-gfm": "^1.0.0",
28-
"remove-markdown": "^0.3.0",
29-
"typeface-roboto": "1.1.13"
8+
"@emotion/react": "11.14.0",
9+
"@emotion/styled": "11.14.0",
10+
"@fontsource/roboto": "5.1.1",
11+
"@mui/icons-material": "6.3.0",
12+
"@mui/material": "6.3.0",
13+
"axios": "1.7.4",
14+
"codemirror": "6.0.1",
15+
"detect-browser": "5.3.0",
16+
"js-base64": "3.7.7",
17+
"notifyjs": "3.0.0",
18+
"prop-types": "15.8.1",
19+
"react": "18.3.1",
20+
"react-codemirror2": "7.2.1",
21+
"react-dom": "18.3.1",
22+
"react-markdown": "9.0.1",
23+
"react-redux": "9.2.0",
24+
"react-router": "7.1.0",
25+
"react-router-dom": "7.1.0",
26+
"react-timeago": "7.2.0",
27+
"react-window": "1.8.11",
28+
"remark-gfm": "4.0.0",
29+
"remove-markdown": "0.6.0",
30+
"tss-react": "4.9.14"
3031
},
3132
"scripts": {
3233
"start": "vite",
@@ -38,38 +39,34 @@
3839
"testformat": "prettier \"src/**/*.{ts,tsx}\" --list-different"
3940
},
4041
"devDependencies": {
41-
"@types/codemirror": "5.60.0",
42-
"@types/detect-browser": "^4.0.0",
43-
"@types/get-port": "^4.0.0",
44-
"@types/jest": "^26.0.23",
45-
"@types/js-base64": "^3.3.1",
46-
"@types/node": "^15.12.2",
47-
"@types/notifyjs": "^3.0.2",
48-
"@types/puppeteer": "^5.4.6",
49-
"@types/react": "^16.9.49",
50-
"@types/react-dom": "^16.9.8",
51-
"@types/react-infinite": "0.0.35",
52-
"@types/react-router-dom": "^5.1.7",
53-
"@types/remove-markdown": "^0.3.0",
54-
"@types/rimraf": "^3.0.0",
42+
"@reduxjs/toolkit": "2.5.0",
43+
"@types/codemirror": "5.60.15",
44+
"@types/detect-browser": "4.0.3",
45+
"@types/js-base64": "3.3.1",
46+
"@types/node": "22.10.3",
47+
"@types/notifyjs": "3.0.5",
48+
"@types/puppeteer": "7.0.4",
49+
"@types/react": "18.3.18",
50+
"@types/react-dom": "18.3.5",
51+
"@types/react-router-dom": "5.3.3",
52+
"@types/remove-markdown": "0.3.4",
5553
"@typescript-eslint/eslint-plugin": "^4.1.0",
5654
"@typescript-eslint/parser": "^4.1.0",
57-
"@vitejs/plugin-react": "^4.3.2",
58-
"eslint-config-prettier": "^6.11.0",
59-
"eslint-plugin-import": "^2.22.0",
60-
"eslint-plugin-jest": "^24.0.0",
61-
"eslint-plugin-prefer-arrow": "^1.2.2",
62-
"eslint-plugin-react": "^7.20.6",
63-
"eslint-plugin-unicorn": "^21.0.0",
64-
"get-port": "^5.1.1",
65-
"prettier": "^2.3.1",
66-
"puppeteer": "^17.1.3",
67-
"rimraf": "^3.0.2",
68-
"tree-kill": "^1.2.0",
69-
"typescript": "4.0.2",
70-
"vite": "^5.4.8",
71-
"vitest": "^2.1.3",
72-
"wait-on": "^5.3.0"
55+
"@vitejs/plugin-react": "4.3.4",
56+
"eslint-config-prettier": "9.1.0",
57+
"eslint-plugin-import": "2.31.0",
58+
"eslint-plugin-prefer-arrow": "1.2.3",
59+
"eslint-plugin-react": "7.37.3",
60+
"eslint-plugin-unicorn": "56.0.1",
61+
"get-port": "7.1.0",
62+
"prettier": "3.4.2",
63+
"puppeteer": "23.11.1",
64+
"rimraf": "6.0.1",
65+
"tree-kill": "1.2.2",
66+
"typescript": "5.6.3",
67+
"vite": "6.0.6",
68+
"vitest": "2.1.8",
69+
"wait-on": "8.0.1"
7370
},
7471
"eslintConfig": {
7572
"extends": "react-app"

‎ui/src/App.tsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, {useEffect} from 'react';
2+
import {createBrowserRouter, RouterProvider} from 'react-router-dom';
3+
import Applications from './application/Applications.tsx';
4+
import Clients from './client/Clients.tsx';
5+
import {checkAuthLoader} from './common/Auth.ts';
6+
import Messages from './message/Messages.tsx';
7+
import {WebSocketStore} from './message/WebSocketStore.ts';
8+
import RootLayout from './pages/root';
9+
import Plugins from './plugin/Plugins.tsx';
10+
import * as Notifications from './snack/browserNotification.ts';
11+
import {useAppDispatch, useAppSelector} from './store';
12+
import {messageActions} from './store/message-slice.ts';
13+
import Login from './user/Login.tsx';
14+
import Users from './user/Users.tsx';
15+
16+
const router = createBrowserRouter([
17+
{
18+
path: '/',
19+
element: <RootLayout />,
20+
children: [
21+
{
22+
index: true,
23+
element: <Messages />,
24+
loader: checkAuthLoader,
25+
},
26+
{
27+
path: 'messages',
28+
element: <Messages />,
29+
loader: checkAuthLoader,
30+
children: [
31+
{
32+
path: ':id',
33+
element: <Messages />,
34+
}
35+
]
36+
},
37+
{
38+
path: 'login',
39+
element: <Login />,
40+
},
41+
{
42+
path: 'applications',
43+
element: <Applications />,
44+
loader: checkAuthLoader,
45+
},
46+
{
47+
path: 'users',
48+
element: <Users />,
49+
loader: checkAuthLoader,
50+
},
51+
{
52+
path: 'clients',
53+
element: <Clients />,
54+
loader: checkAuthLoader,
55+
},
56+
{
57+
path: 'plugins',
58+
element: <Plugins />,
59+
loader: checkAuthLoader,
60+
children: [
61+
{
62+
path: ':id',
63+
// TODO: fix problem in PluginDetailView
64+
//element: <PluginDetailView />,
65+
},
66+
],
67+
},
68+
],
69+
},
70+
]);
71+
72+
const App = () => {
73+
const dispatch = useAppDispatch();
74+
const loggedIn = useAppSelector((state) => state.auth.loggedIn);
75+
const ws = new WebSocketStore();
76+
77+
useEffect(() => {
78+
if (loggedIn) {
79+
ws.listen((message) => {
80+
dispatch(messageActions.add(message));
81+
Notifications.notifyNewMessage(message);
82+
if (message.priority >= 4) {
83+
const src = 'static/notification.ogg';
84+
const audio = new Audio(src);
85+
audio.play();
86+
}
87+
});
88+
window.onbeforeunload = () => {
89+
ws.close();
90+
};
91+
} else {
92+
ws.close();
93+
}
94+
}, [dispatch, loggedIn]);
95+
96+
97+
return (
98+
<RouterProvider router={router} />
99+
);
100+
};
101+
102+
export default App;
103+
104+
/*
105+
<Routes>
106+
{authenticating ? (<Route path="/" element={<LoadingSpinner />} />) : null}
107+
<Route path="/" element={<Messages />} />
108+
<Route path="messages/:id" element={<Messages />} />
109+
110+
</Routes>
111+
*/

0 commit comments

Comments
 (0)