tudor.stanciu
/
network-resurrector
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector
1
0
Fork 0
Code Issues 1 Packages Projects Releases Wiki Activity

Changes for react-router-dom upgrade

master
Tudor Stanciu 2024-03-25 01:16:11 +02:00
parent ae71b142fa
commit a5dba2e346
7 changed files with 98 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/AppRouter.js
View File

@ -1,73 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import App from "./App";
import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
import { useTuitioToken } from "@flare/tuitio-client-react";
import LoginContainer from "../features/login/components/LoginContainer";
const PrivateRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
React.createElement(component, props)
) : (
<Redirect
to={{
pathname: "/login",
state: {
from: props.location
}
}}
/>
)
}
/>
);
};
PrivateRoute.propTypes = {
component: PropTypes.func.isRequired,
location: PropTypes.object
};
const PublicRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
<Redirect
to={{
pathname: "/"
}}
/>
) : (
React.createElement(component, props)
)
}
/>
);
};
PublicRoute.propTypes = {
component: PropTypes.func.isRequired
};
const AppRouter = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL || ""}>
<Switch>
<Route exact path="/" render={() => <Redirect to="/dashboard" />} />
<PublicRoute path="/login" component={LoginContainer} />
<PrivateRoute path="/" component={App} />
</Switch>
</BrowserRouter>
);
};
export default AppRouter;

70
frontend/src/components/AppRouter.tsx Normal file
View File

@ -0,0 +1,70 @@
import React, { useMemo } from "react";
import App from "./App";
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { useTuitioToken } from "@flare/tuitio-client-react";
import LoginContainer from "../features/login/components/LoginContainer";
const PrivateRoute = ({ children }: { children: JSX.Element }): JSX.Element => {
const { valid } = useTuitioToken();
const location = useLocation();
return valid ? (
children
) : (
<Navigate
to="/login"
state={{
from: location.pathname,
search: location.search
}}
/>
);
};
const PublicRoute = ({ children }: { children: JSX.Element }): JSX.Element => {
const location = useLocation();
const { valid } = useTuitioToken();
const to = useMemo(() => {
if (location.state?.from) {
return location.state.from + location.state.search;
}
return "/";
}, [location.state?.from, location.state?.search]);
return valid ? (
<Navigate
to={to}
state={{
from: location.pathname
}}
/>
) : (
children
);
};
const AppRouter: React.FC = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL || ""}>
<Routes>
<Route path="/" element={<Navigate to="/dashboard" />} />
<Route
path="/login"
element={
<PublicRoute>
<LoginContainer />
</PublicRoute>
}
/>
<Route
path="/*"
element={
<PrivateRoute>
<App />
</PrivateRoute>
}
/>
</Routes>
</BrowserRouter>
);
};
export default AppRouter;

22
frontend/src/components/layout/AppRoutes.js → frontend/src/components/layout/AppRoutes.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { Route, Switch } from "react-router-dom";
import { Route, Routes } from "react-router-dom";
import PageNotFound from "./PageNotFound";
import NetworkContainer from "../../features/network/components/NetworkContainer";
import SystemContainer from "../../features/system/SystemContainer";
@ -8,17 +8,17 @@ import DashboardContainer from "../../features/dashboard/DashboardContainer";
import UserProfileContainer from "../../features/user/profile/card/UserProfileContainer";
import AboutContainer from "../../features/about/AboutContainer";
const AppRoutes = () => {
const AppRoutes: React.FC = () => {
return (
<Switch>
<Route exact path="/dashboard" component={DashboardContainer} />
<Route exact path="/user-profile" component={UserProfileContainer} />
<Route exact path="/machines" component={NetworkContainer} />
<Route exact path="/system" component={SystemContainer} />
<Route exact path="/settings" component={SettingsContainer} />
<Route exact path="/about" component={AboutContainer} />
<Route component={PageNotFound} />
</Switch>
<Routes>
<Route path="/dashboard" element={<DashboardContainer />} />
<Route path="/user-profile" element={<UserProfileContainer />} />
<Route path="/machines" element={<NetworkContainer />} />
<Route path="/system" element={<SystemContainer />} />
<Route path="/settings" element={<SettingsContainer />} />
<Route path="/about" element={<AboutContainer />} />
<Route path="/*" element={<PageNotFound />} />
</Routes>
);
};

16
frontend/src/components/layout/ProfileButton.js
View File

@ -1,16 +1,10 @@
import React, { useState } from "react";
import {
IconButton,
Menu,
MenuItem,
Typography,
ListItemIcon
} from "@material-ui/core";
import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
import SettingsIcon from "@material-ui/icons/Settings";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useTuitioClient } from "@flare/tuitio-client-react";
import { useToast } from "../../hooks";
import styles from "./styles";
@ -20,7 +14,7 @@ import { useTranslation } from "react-i18next";
const useStyles = makeStyles(styles);
const ProfileButton = () => {
const history = useHistory();
const navigate = useNavigate();
const { error } = useToast();
const classes = useStyles();
const { t } = useTranslation();
@ -69,7 +63,7 @@ const ProfileButton = () => {
>
<MenuItem
onClick={() => {
history.push("/user-profile");
navigate("/user-profile");
handleClose();
}}
>
@ -80,7 +74,7 @@ const ProfileButton = () => {
</MenuItem>
<MenuItem
onClick={() => {
history.push("/settings");
navigate("/settings");
handleClose();
}}
>

28
frontend/src/components/layout/Sidebar.js
View File

@ -2,14 +2,7 @@ import React, { useState } from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import {
Drawer,
List,
Divider,
IconButton,
ListItemIcon,
ListItemText
} from "@material-ui/core";
import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
@ -19,7 +12,7 @@ import DeviceHubIcon from "@material-ui/icons/DeviceHub";
import SettingsIcon from "@material-ui/icons/Settings";
import DashboardIcon from "@material-ui/icons/Dashboard";
import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import styles from "./styles";
@ -92,12 +85,12 @@ const Sidebar = ({ open, handleDrawerClose }) => {
const classes = useStyles();
const theme = useTheme();
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation();
const handleClick = route => () => {
setSelected(route);
history.push(route);
navigate(route);
};
const isSelected = key => selected === key;
@ -118,11 +111,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
{theme.direction === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
<Divider />
@ -135,12 +124,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
{menu.items
.sort((i1, i2) => i1 - i2)
.map(item => (
<ListItem
button
key={item.code}
onClick={handleClick(item.route)}
selected={isSelected(item.route)}
>
<ListItem button key={item.code} onClick={handleClick(item.route)} selected={isSelected(item.route)}>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={t(item.name)} />
</ListItem>

4
frontend/src/features/network/components/NetworkContainer.js → frontend/src/features/network/components/NetworkContainer.tsx
View File

@ -4,10 +4,10 @@ import NetworkStateProvider from "../state/NetworkStateProvider";
import { usePermissions } from "../../../hooks";
import NotAllowed from "../../../components/common/NotAllowed";
const NetworkContainer = () => {
const NetworkContainer = (): JSX.Element | null => {
const { loading, viewMachines } = usePermissions();
if (loading) return "";
if (loading) return null;
if (!viewMachines) return <NotAllowed />;
return (

15
frontend/src/providers/ThemeProvider.js
View File

@ -13,13 +13,10 @@ const COLOR_SCHEME = {
};
const colorScheme = localStorage.getItem(LOCAL_STORAGE_COLOR_SCHEME_KEY);
const prefersDarkMode = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
const initialState = {
scheme:
colorScheme ?? (prefersDarkMode ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT)
scheme: colorScheme ?? (prefersDarkMode ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT)
};
const reducer = (state = initialState, action) => {
@ -48,8 +45,7 @@ const useApplicationTheme = () => {
const { onColorSchemeChanged } = actions;
const { scheme } = state;
const onDarkModeChanged = active =>
onColorSchemeChanged(active ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT);
const onDarkModeChanged = active => onColorSchemeChanged(active ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT);
return { isDark: scheme === COLOR_SCHEME.DARK, onDarkModeChanged };
};
@ -57,10 +53,7 @@ const useApplicationTheme = () => {
const ThemeProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
const actions = useMemo(() => dispatchActions(dispatch), [dispatch]);
const themes = useMemo(
() => getThemes(state.scheme === COLOR_SCHEME.DARK),
[state.scheme]
);
const themes = useMemo(() => getThemes(state.scheme === COLOR_SCHEME.DARK), [state.scheme]);
return (
<ApplicationThemeContext.Provider