Skip to content

Commit

Permalink
UI: update Gatsby v2 -> v5, MUI v4 -> v5, @react-oauth/google
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nebual
Nebual committed Dec 28, 2022
1 parent e152432 commit d6cd8ef
Show file tree
Hide file tree
Showing 14 changed files with 4,373 additions and 7,571 deletions.
10 changes: 0 additions & 10 deletions ui/gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") },
Expand All @@ -35,6 +26,5 @@ module.exports = {
path: `${__dirname}/static/`,
},
},
`gatsby-plugin-react-helmet`,
],
};
48 changes: 23 additions & 25 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,46 @@
"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",
"serve": "gatsby serve",
"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": {
Expand Down
22 changes: 12 additions & 10 deletions ui/src/components/BackupsViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -76,6 +76,7 @@ export default function BackupsViewer({
{name.replace(gameId + "-", "")}
</span>
<Button
color="inherit"
onClick={async () => {
await authedAxios.post(`${baseUrl}restore/`, {
file: name,
Expand All @@ -96,6 +97,7 @@ export default function BackupsViewer({
</DialogContent>
<DialogActions>
<Button
color="inherit"
onClick={() => {
setOpen(false);
}}
Expand Down
13 changes: 7 additions & 6 deletions ui/src/components/ConfirmationModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";
import PropTypes from "prop-types";

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 DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
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 DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

ConfirmationModal.propTypes = {
title: PropTypes.string.isRequired,
Expand Down Expand Up @@ -37,6 +37,7 @@ export default function ConfirmationModal({
</DialogContent>
<DialogActions>
<Button
color="inherit"
onClick={() => {
setOpen(false);
}}
Expand Down
23 changes: 13 additions & 10 deletions ui/src/components/LogViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useEffect, useRef, useState } from "react";
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 DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { TextField } from "@material-ui/core";
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 DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { TextField } from "@mui/material";
import { useAuthedAxios } from "../util/useAuthedAxios";
import { useLocalStorage } from "@rehooks/local-storage";
import { useInterval } from "../util/hooks";
Expand Down Expand Up @@ -57,13 +57,15 @@ export default function LogViewer({
onClose={() => {
setOpen(false);
}}
onEnter={() => {
dialogContentRef.current.scrollIntoView({ block: "end" });
}}
scroll="paper"
maxWidth="md"
aria-labelledby="scroll-dialog-title"
className="LogViewer"
TransitionProps={{
onEnter: () => {
dialogContentRef.current.scrollIntoView({ block: "end" });
},
}}
>
<DialogTitle id="scroll-dialog-title">{title} Logs</DialogTitle>
<DialogContent
Expand Down Expand Up @@ -142,6 +144,7 @@ export default function LogViewer({
</form>
)}
<Button
color="inherit"
onClick={() => {
setOpen(false);
}}
Expand Down
95 changes: 62 additions & 33 deletions ui/src/components/LoginButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,36 @@
import React from "react";
import PropTypes from "prop-types";
import axios from "axios";
import { GoogleLogin, GoogleLogout } from "react-google-login";
import {
GoogleLogin,
googleLogout,
GoogleOAuthProvider,
} from "@react-oauth/google";
import { useLocalStorage } from "@rehooks/local-storage";
import useAsyncEffect from "use-async-effect";
import { Button } from "@mui/material";

export function tokenIsValid(loginToken) {
if (!loginToken) {
return false;
}
return loginToken.expires_at >= Date.now() / 1000;
}
function parseJwt(token) {
var base64Url = token.split(".")[1];
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(
window
.atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);

return JSON.parse(jsonPayload);
}

const oAuthClientId =
"341262452680-svcd6b3uaqi5ij0ltbtrh539s55t174f.apps.googleusercontent.com";
Expand Down Expand Up @@ -51,37 +71,46 @@ export default function LoginButton({ gatewayUrl }) {
[loginToken]
);
return (
<div
style={{
position: "absolute",
top: "1em",
right: "1em",
}}
>
{!tokenIsValid(loginToken) ? (
<GoogleLogin
clientId={oAuthClientId}
buttonText="Login"
onSuccess={async (response) => {
console.debug("Google Login: Success", response);
setLoginToken({
...response.tokenObj,
...response.profileObj,
});
}}
onFailure={(response) => {
console.warn("Google Login: Failure", response);
}}
/>
) : (
<GoogleLogout
clientId={oAuthClientId}
buttonText="Logout"
onLogoutSuccess={() => {
delLoginToken();
}}
/>
)}
</div>
<GoogleOAuthProvider clientId={oAuthClientId}>
<div
style={{
position: "absolute",
top: "1em",
right: "1em",
}}
>
{!tokenIsValid(loginToken) ? (
<GoogleLogin
buttonText="Login"
auto_select
onSuccess={async (response) => {
console.debug(
"Google Login: Success",
response,
parseJwt(response.credential)
);

setLoginToken({
id_token: response.credential,
expires_at: parseJwt(response.credential).exp,
});
}}
onFailure={(response) => {
console.warn("Google Login: Failure", response);
}}
/>
) : (
<Button
color="inherit"
onClick={() => {
googleLogout();
delLoginToken();
}}
>
Logout
</Button>
)}
</div>
</GoogleOAuthProvider>
);
}
47 changes: 25 additions & 22 deletions ui/src/components/ModsSearch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
<div style={{ padding: "6px 16px" }}>
<div>{option.label}</div>
<div style={{ fontSize: "x-small" }}>
{option.href ? (
<a
href={option.href}
target="_blank"
rel="noopener noreferrer"
>
{option.id}
</a>
) : (
option.id
)}
<li {...props}>
<div style={{ padding: "6px 16px" }}>
<div>{option.label}</div>
<div style={{ fontSize: "x-small" }}>
{option.href ? (
<a
href={option.href}
target="_blank"
rel="noopener noreferrer"
>
{option.id}
</a>
) : (
option.id
)}
</div>
</div>
</div>
</li>
);
}
return option.id;
Expand Down Expand Up @@ -256,6 +258,7 @@ export default function ModsSearch({
)}

<Button
color="inherit"
onClick={() => {
let modId = (modIdInput || "").trim();
let modOption;
Expand Down
Loading

0 comments on commit d6cd8ef

Please sign in to comment.