Start React & Material UI update

2024-11-23 13:59:23 +00:00 · 2022-06-12 18:50:22 +02:00 · 2022-06-12 18:50:22 +02:00 · a8f1354a43
commit a8f1354a43
parent cd086f2a4c
22 changed files with 27339 additions and 17143 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,48 +1,49 @@
 {
-  "name": "comunic-console",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/data-grid": "^4.0.0-alpha.26",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^12.20.11",
-    "@types/react": "^17.0.4",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-router-dom": "^5.1.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "comunic-console",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@mui/icons-material": "^5.8.3",
+		"@mui/material": "^5.8.3",
+		"@mui/x-data-grid": "^5.12.1",
+		"@testing-library/jest-dom": "^5.16.4",
+		"@testing-library/react": "^13.3.0",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/jest": "^27.5.2",
+		"@types/node": "^16.11.39",
+		"@types/react": "^18.0.12",
+		"@types/react-dom": "^18.0.5",
+		"react": "^18.1.0",
+		"react-dom": "^18.1.0",
+		"react-router-dom": "^6.3.0",
+		"react-scripts": "5.0.1",
+		"typescript": "^4.7.3",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,14 +1,14 @@
+import { createTheme, ThemeProvider } from "@mui/material";
+import { lightBlue, pink } from "@mui/material/colors";
 import React from "react";
 import "./App.css";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core";
 import { ApplicationDialogsProvider } from "./ui/widgets/DialogsProvider";
-import { lightBlue, pink } from "@material-ui/core/colors";
 import { InitWidget } from "./ui/widgets/InitWidget";

 function App() {
-	const darkTheme = createMuiTheme({
+	const darkTheme = createTheme({
 		palette: {
-			type: "dark",
+			mode: "dark",
 			primary: lightBlue,
 			secondary: pink,
 		},
--- a/src/ui/accountSettings/GeneralSettings.tsx
+++ b/src/ui/accountSettings/GeneralSettings.tsx
@ -4,7 +4,7 @@
 * @author Pierre Hubert
 */

-import { TextField, Button } from "@material-ui/core";
+import { TextField, Button } from "@mui/material";
 import React from "react";
 import { AdminAccount, AccountHelper } from "../../helpers/AccountHelper";
 import { snackbar, matAlert } from "../widgets/DialogsProvider";
--- a/src/ui/accountSettings/KeySettingsSection.tsx
+++ b/src/ui/accountSettings/KeySettingsSection.tsx
@ -8,9 +8,9 @@ import {
 	TableHead,
 	TableRow,
 	Tooltip,
-} from "@material-ui/core";
-import { Delete } from "@material-ui/icons";
-import LockIcon from "@material-ui/icons/Lock";
+} from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import LockIcon from "@mui/icons-material/Lock";
 import React from "react";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import { AdminAccountKey, AdminKeyHelper } from "../../helpers/AdminKeyHelper";
--- a/src/ui/accountSettings/RoleSettingsSection.tsx
+++ b/src/ui/accountSettings/RoleSettingsSection.tsx
@ -4,7 +4,7 @@
 * @author Pierre Hubert
 */

-import { Checkbox, FormControlLabel, Tooltip } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Tooltip } from "@mui/material";
 import React from "react";
 import { AdminAccount } from "../../helpers/AccountHelper";
 import {
--- a/src/ui/accountSettings/SettingsSection.tsx
+++ b/src/ui/accountSettings/SettingsSection.tsx
@ -1,4 +1,4 @@
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import React from "react";
 import { CustomCard } from "../widgets/CustomCard";

--- a/src/ui/routes/AccountLogsRoute.tsx
+++ b/src/ui/routes/AccountLogsRoute.tsx
@ -6,7 +6,7 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
 import {
--- a/src/ui/routes/AccountSettingsRoute.tsx
+++ b/src/ui/routes/AccountSettingsRoute.tsx
@ -4,7 +4,7 @@
 * @author Pierre Hubert
 */

-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
--- a/src/ui/routes/AccountsListRoute.tsx
+++ b/src/ui/routes/AccountsListRoute.tsx
@ -13,9 +13,9 @@ import {
 	TableContainer,
 	TableHead,
 	TableRow,
-} from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import SettingsIcon from "@material-ui/icons/Settings";
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import SettingsIcon from "@mui/icons-material/Settings";
 import React from "react";
 import { Link } from "react-router-dom";
 import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
--- a/src/ui/routes/ComunicUserRoute.tsx
+++ b/src/ui/routes/ComunicUserRoute.tsx
@ -6,8 +6,8 @@ import {
 	TableBody,
 	TableCell,
 	TableRow,
-} from "@material-ui/core";
-import EmailIcon from "@material-ui/icons/Email";
+} from "@mui/material";
+import EmailIcon from "@mui/icons-material/Email";
 import React from "react";
 import {
 	ComunicUser,
@ -24,7 +24,7 @@ import {
 } from "../widgets/DialogsProvider";
 import { PageTitle } from "../widgets/PageTitle";
 import { TimestampWidget } from "../widgets/TimestampWidget";
-import LinkIcon from "@material-ui/icons/Link";
+import LinkIcon from "@mui/icons-material/Link";
 import { CopyToClipboard } from "../../utils/ClipboardUtils";
 interface UserProperty {
 	name: string;
@ -254,7 +254,7 @@ export class ComunicUserRoute extends React.Component<
 							>
 								<Button
 									variant="outlined"
-									color="default"
+									color="secondary"
 									startIcon={<EmailIcon />}
 									style={{
 										width: "100%",
@ -268,7 +268,7 @@ export class ComunicUserRoute extends React.Component<

 								<Button
 									variant="outlined"
-									color="default"
+									color="secondary"
 									startIcon={<LinkIcon />}
 									style={{ width: "100%" }}
 									onClick={this.createPasswordResetLink}
--- a/src/ui/routes/LoginRoute.tsx
+++ b/src/ui/routes/LoginRoute.tsx
@ -17,9 +17,9 @@ import {
 	Paper,
 	TextField,
 	Typography,
-} from "@material-ui/core";
-import { ErrorOutline, Lock, VpnKey } from "@material-ui/icons";
-import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+} from "@mui/material";
+import { ErrorOutline, Lock, VpnKey } from "@mui/icons-material";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import React from "react";
 import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper";
 import { AdminKeyHelper, AuthKey } from "../../helpers/AdminKeyHelper";
--- a/src/ui/routes/MainRoute.tsx
+++ b/src/ui/routes/MainRoute.tsx
@ -16,19 +16,19 @@ import {
 	Paper,
 	Toolbar,
 	Typography,
-} from "@material-ui/core";
-import { Home, Person } from "@material-ui/icons";
-import CloseSharpIcon from "@material-ui/icons/CloseSharp";
-import GroupIcon from "@material-ui/icons/Group";
-import HistoryIcon from "@material-ui/icons/History";
+} from "@mui/material";
+import { Home, Person } from "@mui/icons-material";
+import CloseSharpIcon from "@mui/icons-material/CloseSharp";
+import GroupIcon from "@mui/icons-material/Group";
+import HistoryIcon from "@mui/icons-material/History";
 import React from "react";
 import {
 	BrowserRouter as Router,
 	Route,
-	Switch,
-	useHistory,
+	Routes,
+	useNavigate,
 	useParams,
-	useRouteMatch,
+	useMatch,
 } from "react-router-dom";
 import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper";
 import { AccountLogsRoute } from "./AccountLogsRoute";
@ -39,55 +39,6 @@ import { HomeRoute } from "./HomeRoute";
 import { NotFoundRoute } from "./NotFoundRoute";
 import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute";

-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-	},
-	toolbar: {
-		paddingRight: 24, // keep right padding when drawer closed
-	},
-	toolbarIcon: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		padding: "0 8px",
-		...theme.mixins.toolbar,
-	},
-	appBar: {
-		zIndex: theme.zIndex.drawer + 1,
-		width: `100%`,
-		color: "white",
-	},
-	menuButton: {
-		marginRight: 36,
-	},
-	menuButtonHidden: {
-		display: "none",
-	},
-	title: {
-		flexGrow: 1,
-	},
-	appBarSpacer: theme.mixins.toolbar,
-	content: {
-		flexGrow: 1,
-		height: "100vh",
-		overflow: "auto",
-	},
-	container: {
-		paddingTop: theme.spacing(4),
-		paddingBottom: theme.spacing(4),
-	},
-	paper: {
-		padding: theme.spacing(2),
-		display: "flex",
-		overflow: "auto",
-		flexDirection: "column",
-	},
-	fixedHeight: {
-		height: 240,
-	},
-}));
-
 function Menu() {
 	return (
 		<div>
@ -126,14 +77,10 @@ function MainMenuItem(p: {
 	uri: string;
 	needsRole?: AdminAccountRole;
 }) {
-	const history = useHistory();
-	const openMyAccount = () => history.push(p.uri);
+	const n = useNavigate();
+	const openMyAccount = () => n(p.uri);

-	const selected =
-		useRouteMatch({
-			path: p.uri,
-			exact: true,
-		}) != null;
+	const selected = useMatch(p.uri) != null;

 	// Check if roles are filtered
 	if (p.needsRole) {
@ -150,8 +97,6 @@ function MainMenuItem(p: {
 }

 export function MainRoute() {
-	const classes = useStyles();
-
 	const signOut = () => {
 		AccountHelper.signOut();
 	};
@ -169,16 +114,20 @@ export function MainRoute() {

 				<AppBar
 					position="fixed"
-					className={classes.appBar}
+					style={{
+						zIndex: 1,
+						width: `100%`,
+						color: "white",
+					}}
 					color="primary"
 				>
-					<Toolbar className={classes.toolbar}>
+					<Toolbar style={{ padding: 24 }}>
 						<Typography
 							component="h1"
 							variant="h6"
 							color="inherit"
 							noWrap
-							className={classes.title}
+							style={{ flexGrow: 1 }}
 						>
 							Comunic Console
 						</Typography>
@ -214,12 +163,12 @@ export function MainRoute() {
 								maxWidth: "1280px",
 							}}
 						>
-							<Switch>
-								<Route exact path="/">
+							<Routes>
+								<Route path="/">
 									<HomeRoute></HomeRoute>
 								</Route>

-								<Route exact path="/users">
+								<Route path="/users">
 									<SearchComunicUsersRoute />
 								</Route>

@ -227,7 +176,7 @@ export function MainRoute() {
 									<ComunicUserRouteProxy />
 								</Route>

-								<Route exact path="/accounts">
+								<Route path="/accounts">
 									<AccountsListRoute />
 								</Route>

@ -242,7 +191,7 @@ export function MainRoute() {
 								<Route path="*">
 									<NotFoundRoute />
 								</Route>
-							</Switch>
+							</Routes>
 						</div>
 					</div>
 				</div>
--- a/src/ui/routes/NotFoundRoute.tsx
+++ b/src/ui/routes/NotFoundRoute.tsx
@ -4,7 +4,7 @@
 * @author Pierre Hubert
 */

-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";

 export function NotFoundRoute() {
 	return (
--- a/src/ui/routes/SearchComunicUsersRoute.tsx
+++ b/src/ui/routes/SearchComunicUsersRoute.tsx
@ -11,9 +11,9 @@ import {
 	Paper,
 	TextField,
 	Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import React from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
 	ComunicUsersHelper,
 	SearchResult,
@ -134,11 +134,8 @@ export class SearchComunicUsersRoute extends React.Component<
 }

 function ResultItem(p: { user: SearchResult }) {
-	const history = useHistory();
-	const openButton = () => {
-		history.push("/user/" + p.user.id);
-	};
-
+	const n = useNavigate();
+	const openButton = () => n("/user/" + p.user.id);
 	return (
 		<ListItem button onClick={openButton}>
 			<Grid container wrap="nowrap" spacing={2}>
--- a/src/ui/widgets/AsyncWidget.tsx
+++ b/src/ui/widgets/AsyncWidget.tsx
@ -4,7 +4,7 @@
 * @author Pierre Hubert
 */

-import { Button, Paper } from "@material-ui/core";
+import { Button, Paper } from "@mui/material";
 import React, { ReactNode } from "react";
 import { CenterCircularProgress } from "./CenterCircularProgress";

--- a/src/ui/widgets/CenterCircularProgress.tsx
+++ b/src/ui/widgets/CenterCircularProgress.tsx
@ -1,12 +1,16 @@
-import { CircularProgress } from "@material-ui/core";
+import { CircularProgress } from "@mui/material";

 export function CenterCircularProgress() {
-   return <div style={{
-       display: "flex", 
-       justifyContent: "center", 
-       alignItems: "center", 
-       height: "100%"
-    }}>
-        <CircularProgress></CircularProgress>
-    </div>
+	return (
+		<div
+			style={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				height: "100%",
+			}}
+		>
+			<CircularProgress></CircularProgress>
+		</div>
+	);
 }
--- a/src/ui/widgets/CustomCard.tsx
+++ b/src/ui/widgets/CustomCard.tsx
@ -1,4 +1,4 @@
-import { Divider, Paper, Typography } from "@material-ui/core";
+import { Divider, Paper, Typography } from "@mui/material";
 import React from "react";

 export function CustomCard(p: { title: string; children?: React.ReactNode }) {
--- a/src/ui/widgets/DialogsProvider.tsx
+++ b/src/ui/widgets/DialogsProvider.tsx
@ -14,8 +14,8 @@ import {
 	TextField,
 	Snackbar,
 	IconButton,
-} from "@material-ui/core";
-import { Close } from "@material-ui/icons";
+} from "@mui/material";
+import { Close } from "@mui/icons-material";
 import React, { FormEvent } from "react";

 let cache: ApplicationDialogsProvider;
@ -116,7 +116,7 @@ export class ApplicationDialogsProvider extends React.Component<
 	}

 	handleCloseSnackbar(
-		_event: React.SyntheticEvent | React.MouseEvent,
+		_event: React.SyntheticEvent | React.MouseEvent | Event,
 		reason?: string
 	) {
 		if (reason === "clickaway") {
@ -216,7 +216,7 @@ export class ApplicationDialogsProvider extends React.Component<
 						</DialogContentText>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.handleCloseAlert} color="default">
+						<Button onClick={this.handleCloseAlert} color="primary">
 							OK
 						</Button>
 					</DialogActions>
@ -265,10 +265,10 @@ export class ApplicationDialogsProvider extends React.Component<
 						</DialogContentText>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.rejectConfirm} color="default">
+						<Button onClick={this.rejectConfirm} color="secondary">
 							Cancel
 						</Button>
-						<Button onClick={this.acceptConfirm} color="default">
+						<Button onClick={this.acceptConfirm} color="secondary">
 							Confirm
 						</Button>
 					</DialogActions>
@ -305,12 +305,12 @@ export class ApplicationDialogsProvider extends React.Component<
 						</form>
 					</DialogContent>
 					<DialogActions>
-						<Button onClick={this.cancelInput} color="default">
+						<Button onClick={this.cancelInput} color="secondary">
 							Cancel
 						</Button>
 						<Button
 							onClick={this.confirmInput}
-							color="default"
+							color="secondary"
 							disabled={!this.isInputValid}
 						>
 							OK
--- a/src/ui/widgets/PageTitle.tsx
+++ b/src/ui/widgets/PageTitle.tsx
@ -1,4 +1,4 @@
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";

 /**
 * Page title widget
--- a/src/ui/widgets/TimestampWidget.tsx
+++ b/src/ui/widgets/TimestampWidget.tsx
@ -1,4 +1,4 @@
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import React from "react";

 /**
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,26 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"]
 }