Merge pull request #326 from OpenFactorioServerManager/324-update-jav…

…ascript-dependencies

update javascript dependencies

.github/workflows/test-workflow.yml

@@ -1,4 +1,4 @@
-on: 
+on:
   push:
     branches:
       - '**'
@@ -21,7 +21,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
       - run: make app/bundle
   test-go:
     strategy:

package.json

@@ -24,42 +24,43 @@
   },
   "homepage": "https://github.com/OpenFactorioServerManager/factorio-server-manager#readme",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.5",
-    "@babel/preset-react": "^7.14.5",
-    "autoprefixer": "^10.3.4",
-    "babel-loader": "^8.2.2",
-    "classnames": "^2.2.6",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "autoprefixer": "^10.4.16",
+    "babel-loader": "^9.1.3",
+    "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "file-loader": "^6.2.0",
     "locks": "^0.2.2",
-    "mini-css-extract-plugin": "^2.3.0",
-    "node-sass": "^6.0.1",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "postcss-loader": "^6.1.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "^7.3.3",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-native-listener": "^1.1.0",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
-    "webpack": "^5.53.0",
-    "webpack-cli": "^4.8.0",
+    "react-router": "^6.17.0",
+    "react-router-dom": "^6.17.0",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "axios": "^0.21.4",
-    "fuse.js": "^6.4.6",
-    "react-hook-form": "^7.15.4",
-    "regenerator-runtime": "^0.13.9",
-    "semver": "^6.3.0",
-    "tailwindcss": "^1.9.6"
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.6.0",
+    "fuse.js": "^7.0.0",
+    "react-hook-form": "^7.47.0",
+    "regenerator-runtime": "^0.14.0",
+    "semver": "^7.3.7",
+    "tailwindcss": "^3.3.5"
   }
 }

src/api/routes.go

@@ -32,28 +32,28 @@ func ServerOffMiddleware(next http.Handler) http.Handler {
 }
 
 func NewRouter() *mux.Router {
-	r := mux.NewRouter().StrictSlash(true)
+	mainRouter := mux.NewRouter().StrictSlash(true)
 
 	// create subrouter for authenticated calls
-	sr := r.NewRoute().Subrouter()
-	sr.Use(AuthMiddleware)
+	subRouter := mainRouter.NewRoute().Subrouter()
+	subRouter.Use(AuthMiddleware)
 
 	// API subrouter
 	// Serves all JSON REST handlers prefixed with /api
-	s := r.PathPrefix("/api").Subrouter()
-	s.Use(AuthMiddleware)
+	apiRouter := mainRouter.PathPrefix("/api").Subrouter()
+	apiRouter.Use(AuthMiddleware)
 
 	// use subrouter for calls, that run only, when server is turned off
-	so := s.NewRoute().Subrouter()
+	so := apiRouter.NewRoute().Subrouter()
 	so.Use(ServerOffMiddleware)
 
-	s.NewRoute().Subrouter()
+	apiRouter.NewRoute().Subrouter()
 	for _, route := range apiRoutes {
 		var router *mux.Router
 		if route.ServerOff {
 			router = so
 		} else {
-			router = s
+			router = apiRouter
 		}
 		router.Methods(route.Method).
 			Path(route.Pattern).
@@ -62,7 +62,7 @@ func NewRouter() *mux.Router {
 	}
 
 	// The login handler does not check for authentication.
-	r.Path("/api/login").
+	mainRouter.Path("/api/login").
 		Methods("POST").
 		Name("LoginUser").
 		HandlerFunc(LoginUser)
@@ -71,7 +71,7 @@ func NewRouter() *mux.Router {
 	// Clients connecting to /ws establish websocket connection by upgrading
 	// HTTP session.
 	// Ensure user is logged in with the AuthorizeHandler middleware
-	sr.Path("/ws").
+	subRouter.Path("/ws").
 		Methods("GET").
 		Name("Websocket").
 		Handler(
@@ -85,51 +85,51 @@ func NewRouter() *mux.Router {
 	// Serves the frontend application from the app directory
 	// Uses basic file server to serve index.html and Javascript application
 	// Routes match the ones defined in React frontend application
-	r.Path("/login").
+	mainRouter.Path("/login").
 		Methods("GET").
 		Name("Login").
 		Handler(http.StripPrefix("/login", http.FileServer(http.Dir("./app/"))))
 
-	sr.Path("/saves").
+	subRouter.Path("/saves").
 		Methods("GET").
 		Name("Saves").
 		Handler(http.StripPrefix("/saves", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/mods").
+	subRouter.Path("/mods").
 		Methods("GET").
 		Name("Mods").
 		Handler(http.StripPrefix("/mods", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/server-settings").
+	subRouter.Path("/server-settings").
 		Methods("GET").
 		Name("Server settings").
 		Handler(http.StripPrefix("/server-settings", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/game-settings").
+	subRouter.Path("/game-settings").
 		Methods("GET").
 		Name("Game settings").
 		Handler(http.StripPrefix("/game-settings", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/console").
+	subRouter.Path("/console").
 		Methods("GET").
 		Name("Console").
 		Handler(http.StripPrefix("/console", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/logs").
+	subRouter.Path("/logs").
 		Methods("GET").
 		Name("Logs").
 		Handler(http.StripPrefix("/logs", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/user-management").
+	subRouter.Path("/user-management").
 		Methods("GET").
 		Name("User management").
 		Handler(http.StripPrefix("/user-management", http.FileServer(http.Dir("./app/"))))
-	sr.Path("/help").
+	subRouter.Path("/help").
 		Methods("GET").
 		Name("Help").
 		Handler(http.StripPrefix("/help", http.FileServer(http.Dir("./app/"))))
 
 	// catch all route
-	r.PathPrefix("/").
+	mainRouter.PathPrefix("/").
 		Methods("GET").
 		Name("Index").
 		Handler(http.FileServer(http.Dir("./app/")))
 
-	return r
+	return mainRouter
 }
 
 // Defines all API REST endpoints

tailwind.config.js

@@ -3,13 +3,10 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true,
   },
-  purge: {
-    mode: 'all',
-    content: [
-      './ui/**/*.jsx',
-      './ui/**/*.html',
-    ]
-},
+  content: [
+    './ui/**/*.jsx',
+    './ui/**/*.html',
+  ],
   theme: {
     extend: {
       width: {

ui/App/App.jsx

@@ -2,9 +2,9 @@ import React, {useCallback, useState} from 'react';
 
 import user from "../api/resources/user";
 import Login from "./views/Login";
-import {Redirect, Route, Switch, useHistory} from "react-router";
+import {Navigate, Route, Routes} from "react-router";
 import Controls from "./views/Controls";
-import {BrowserRouter} from "react-router-dom";
+import {BrowserRouter, Outlet} from "react-router-dom";
 import Logs from "./views/Logs";
 import Saves from "./views/Saves/Saves";
 import Layout from "./components/Layout";
@@ -45,35 +45,33 @@ const App = () => {
         }
     }, []);
 
-    const ProtectedRoute = useCallback(({component: Component, ...rest}) => (
-        <Route {...rest} render={(props) => (
-            isAuthenticated && Component
-                ? <Component serverStatus={serverStatus} {...props} />
-                : <Redirect to={{
-                    pathname: '/login',
-                    state: {from: props.location}
-                }}/>
-        )}/>
-    ), [isAuthenticated, serverStatus]);
+    const ProtectedRoute = ({isAuthenticated}) => {
+        if (!isAuthenticated) {
+            return <Navigate to="/login" replace />;
+        }
+        return <Outlet/>;
+    }
 
     return (
-        <BrowserRouter basename="/">
-            <Switch>
-                <Route path="/login" render={() => (<Login handleLogin={handleAuthenticationStatus}/>)}/>
+        <BrowserRouter>
+            <Routes>
+                <Route path="login" element={<Login handleLogin={handleAuthenticationStatus}/>}/>
 
-                <Layout handleLogout={handleLogout} serverStatus={serverStatus}>
-                    <ProtectedRoute exact path="/" component={Controls}/>
-                    <ProtectedRoute path="/saves" component={Saves}/>
-                    <ProtectedRoute path="/mods" component={Mods}/>
-                    <ProtectedRoute path="/server-settings" component={ServerSettings}/>
-                    <ProtectedRoute path="/game-settings" component={GameSettings}/>
-                    <ProtectedRoute path="/console" component={Console}/>
-                    <ProtectedRoute path="/logs" component={Logs}/>
-                    <ProtectedRoute path="/user-management" component={UserManagement}/>
-                    <ProtectedRoute path="/help" component={Help}/>
-                    <Flash/>
-                </Layout>
-            </Switch>
+                {/* route with only `element` will cause the proper children to be place in `<Outlet/>` */}
+                <Route element={<ProtectedRoute isAuthenticated={isAuthenticated}/> }>
+                    <Route element={<Layout handleLogout={handleLogout} serverStatus={serverStatus} />}>
+                        <Route index element={<Controls serverStatus={serverStatus}/>}/>
+                        <Route path="saves" element={<Saves serverStatus={serverStatus}/>}/>
+                        <Route path="mods" element={<Mods serverStatus={serverStatus}/>}/>
+                        <Route path="server-settings" element={<ServerSettings serverStatus={serverStatus}/>}/>
+                        <Route path="game-settings" element={<GameSettings serverStatus={serverStatus}/>}/>
+                        <Route path="console" element={<Console serverStatus={serverStatus}/>}/>
+                        <Route path="logs" element={<Logs serverStatus={serverStatus}/>}/>
+                        <Route path="user-management" element={<UserManagement serverStatus={serverStatus}/>}/>
+                        <Route path="help" element={<Help serverStatus={serverStatus}/>}/>
+                    </Route>
+                </Route>
+            </Routes>
         </BrowserRouter>
     );
 }

ui/App/components/Layout.jsx

@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from "react";
-import {NavLink} from "react-router-dom";
+import {NavLink, Outlet} from "react-router-dom";
 import Button from "./Button";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBars} from "@fortawesome/free-solid-svg-icons";
+import {Flash} from "./Flash";
 
-const Layout = ({children, handleLogout, serverStatus}) => {
+const Layout = ({handleLogout, serverStatus}) => {
 
     const [isNavCollapsed, setIsNavCollapsed] = useState(true);
 
@@ -30,10 +31,14 @@ const Layout = ({children, handleLogout, serverStatus}) => {
         return (
             <NavLink
                 onClick={() => setIsNavCollapsed(true)}
-                exact={true}
+                end
                 to={to}
-                activeClassName="bg-orange"
-                className={`hover:glow-orange accentuated bg-gray-light hover:bg-orange text-black font-bold py-2 px-4 w-full block${last ? '' : ' mb-1'}`}
+                className={({isActive}) => {
+                    return [
+                        isActive ? "bg-orange" : "",
+                        `hover:glow-orange accentuated bg-gray-light hover:bg-orange text-black font-bold py-2 px-4 w-full block${last ? '' : ' mb-1'}`,
+                    ].join(" ")
+                }}
             >{children}</NavLink>)
     }
 
@@ -90,7 +95,8 @@ const Layout = ({children, handleLogout, serverStatus}) => {
             {/*Main*/}
             <div className="md:ml-88 min-h-screen">
                 <div className="container md:mx-auto pt-16 md:px-6">
-                    {children}
+                    <Outlet />
+                    <Flash/>
                 </div>
             </div>
         </>

ui/App/views/Login.jsx

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 import {useForm} from "react-hook-form";
 import user from "../../api/resources/user";
 import Button from "../components/Button";
-import {useHistory, useLocation} from "react-router";
+import {useLocation, useNavigate} from "react-router";
 import Panel from "../components/Panel";
 import Input from "../components/Input";
 import Label from "../components/Label";
@@ -11,15 +11,15 @@ import Error from "../components/Error";
 
 const Login = ({handleLogin}) => {
     const {register, handleSubmit, formState: { errors }} = useForm();
-    const history = useHistory();
+    const navigate = useNavigate();
     const location = useLocation();
 
     const onSubmit = async data => {
         try {
             const loginAttempt = await user.login(data)
             if (loginAttempt?.username) {
                 await handleLogin(loginAttempt);
-                history.push('/');
+                navigate('/');
             }
         } catch (e) {
             console.log(e);
@@ -34,7 +34,7 @@ const Login = ({handleLogin}) => {
             const status = await user.status();
             if (status?.username) {
                 await handleLogin(status);
-                history.push(location?.state?.from || '/');
+                navigate(location?.state?.from || '/');
             }
         })();
     }, [])

ui/index.js

@@ -1,11 +1,10 @@
 import regeneratorRuntime from "regenerator-runtime"
 import Bus from "./notifications"
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App/App.jsx';
 
 window.flash = (message, color="gray-light") => Bus.emit('flash', ({message, color}));
 
-ReactDOM.render(
-    <App/>
-, document.getElementById('app'));
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(<App/>);