From d6cd8ef06028212cdf84fb4c9e70cc5c59b19a2c Mon Sep 17 00:00:00 2001 From: Nebual Date: Wed, 28 Dec 2022 00:47:00 -0800 Subject: [PATCH] UI: update Gatsby v2 -> v5, MUI v4 -> v5, @react-oauth/google --- ui/gatsby-config.js | 10 - ui/package.json | 48 +- ui/src/components/BackupsViewer.js | 22 +- ui/src/components/ConfirmationModal.js | 13 +- ui/src/components/LogViewer.js | 23 +- ui/src/components/LoginButton.js | 95 +- ui/src/components/ModsSearch.js | 47 +- ui/src/components/ModsViewer.js | 25 +- ui/src/components/ServerCard.js | 52 +- ui/src/pages/index.js | 57 +- ui/src/pages/ss/[name].js | 16 +- ui/src/styles/global.scss | 6 + ui/src/theme.js | 6 +- ui/yarn.lock | 11524 ++++++++--------------- 14 files changed, 4373 insertions(+), 7571 deletions(-) diff --git a/ui/gatsby-config.js b/ui/gatsby-config.js index ef80d36..8fa830e 100644 --- a/ui/gatsby-config.js +++ b/ui/gatsby-config.js @@ -8,15 +8,6 @@ module.exports = { "https://gmanman.nebtown.info/gateway/", }, plugins: [ - { - resolve: `gatsby-plugin-material-ui`, - options: { - stylesProvider: { - injectFirst: true, - }, - disableMinification: true, - }, - }, { resolve: `gatsby-plugin-sass`, options: { implementation: require("sass") }, @@ -35,6 +26,5 @@ module.exports = { path: `${__dirname}/static/`, }, }, - `gatsby-plugin-react-helmet`, ], }; diff --git a/ui/package.json b/ui/package.json index 173566b..4bca14f 100644 --- a/ui/package.json +++ b/ui/package.json @@ -6,7 +6,7 @@ "license": "MIT", "scripts": { "build": "gatsby build", - "develop": "gatsby develop --host=0.0.0.0", + "develop": "gatsby develop --host=0.0.0.0 --port=8001", "local": "GMANMAN_GATEWAY_URL=http://localhost:6725/ gatsby develop", "format": "prettier --write \"**/*.{js,jsx,json,md}\"", "start": "npm run develop", @@ -14,40 +14,38 @@ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"" }, "dependencies": { - "@babel/plugin-proposal-optional-chaining": "^7.6.0", - "@material-ui/core": "^4.4.3", - "@material-ui/icons": "^4.4.3", - "@material-ui/lab": "^4.0.0-alpha.61", - "@material-ui/styles": "^4.4.3", - "@rehooks/local-storage": "^1.7.0", + "@babel/plugin-proposal-optional-chaining": "^7.20.7", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/icons-material": "^5.11.0", + "@mui/material": "^5.11.2", + "@mui/styles": "^5.11.2", + "@react-oauth/google": "^0.5.1", + "@rehooks/local-storage": "^2.4.4", "awesome-debounce-promise": "^2.1.0", - "axios": "^0.19.0", + "axios": "^1.2.1", "classnames": "^2.2.6", - "gatsby": "^2.15.28", - "gatsby-image": "^2.2.23", - "gatsby-plugin-manifest": "^2.12.1", - "gatsby-plugin-material-ui": "^2.1.6", - "gatsby-plugin-react-helmet": "^3.1.10", - "gatsby-plugin-sass": "^3.2.0", - "gatsby-source-filesystem": "^2.1.28", - "gatsby-transformer-json": "^2.2.11", - "notistack": "^0.9.5", + "gatsby": "^5.3.3", + "gatsby-plugin-image": "^3.3.2", + "gatsby-plugin-manifest": "^5.3.1", + "gatsby-plugin-sass": "^6.3.1", + "gatsby-source-filesystem": "^5.3.1", + "gatsby-transformer-json": "^5.3.0", + "notistack": "^2.0.8", "prop-types": "^15.8.1", - "query-string": "^6.10.1", - "react": "^16.10.0", - "react-dom": "^16.10.0", - "react-google-login": "^5.0.7", - "react-helmet": "^5.2.1", + "query-string": "^8.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-virtualized": "^9.22.3", "react-window": "^1.8.5", - "sass": "^1.30.0", + "sass": "^1.57.1", "use-async-effect": "^2.2.1", "use-constant": "^1.0.0" }, "devDependencies": { - "eslint": "^6.6.0", + "eslint": "^8.30.0", "eslint-plugin-react": "^7.16.0", - "eslint-plugin-react-hooks": "^2.2.0", + "eslint-plugin-react-hooks": "^4.6.0", "prettier": "^2.8.1" }, "repository": { diff --git a/ui/src/components/BackupsViewer.js b/ui/src/components/BackupsViewer.js index c0cf4fd..3014c6b 100644 --- a/ui/src/components/BackupsViewer.js +++ b/ui/src/components/BackupsViewer.js @@ -2,17 +2,17 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import axios from "axios"; -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogTitle from "@material-ui/core/DialogTitle"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; +import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogTitle from "@mui/material/DialogTitle"; +import List from "@mui/material/List"; +import ListItem from "@mui/material/ListItem"; -import CloudDownloadIcon from "@material-ui/icons/CloudDownload"; -import CloudUploadIcon from "@material-ui/icons/CloudUpload"; -import CloseIcon from "@material-ui/icons/Close"; +import CloudDownloadIcon from "@mui/icons-material/CloudDownload"; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import CloseIcon from "@mui/icons-material/Close"; import { useAuthedAxios } from "../util/useAuthedAxios"; @@ -76,6 +76,7 @@ export default function BackupsViewer({ {name.replace(gameId + "-", "")} + )} + + ); } diff --git a/ui/src/components/ModsSearch.js b/ui/src/components/ModsSearch.js index acb9b71..c533d4d 100644 --- a/ui/src/components/ModsSearch.js +++ b/ui/src/components/ModsSearch.js @@ -6,12 +6,12 @@ import AwesomeDebouncePromise from "awesome-debounce-promise"; import useConstant from "use-constant"; import { useSnackbar } from "notistack"; -import { makeStyles } from "@material-ui/core/styles"; -import Autocomplete from "@material-ui/lab/Autocomplete"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import TextField from "@material-ui/core/TextField"; -import Button from "@material-ui/core/Button"; -import AddIcon from "@material-ui/core/SvgIcon/SvgIcon"; +import makeStyles from "@mui/styles/makeStyles"; +import Autocomplete from "@mui/material/Autocomplete"; +import CircularProgress from "@mui/material/CircularProgress"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import AddIcon from "@mui/material/SvgIcon/SvgIcon"; function renderRow(props) { const { data, index, style } = props; @@ -187,25 +187,27 @@ export default function ModsSearch({ setModIdInput(option ? option.id : ""); }} getOptionLabel={(option) => option.label || option.id} - renderOption={(option) => { + renderOption={(props, option) => { if (option.label) { return ( -
-
{option.label}
-
- {option.href ? ( - - {option.id} - - ) : ( - option.id - )} +
  • +
    +
    {option.label}
    +
    + {option.href ? ( + + {option.id} + + ) : ( + option.id + )} +
    -
    • + ); } return option.id; @@ -256,6 +258,7 @@ export default function ModsSearch({ )} @@ -256,6 +256,7 @@ export default function ServerCard({