From d1981e72bf481fc58ce478fc62d5b861f1ca3df2 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Fri, 3 Mar 2023 08:48:10 +0200 Subject: [PATCH] Added app menu --- package-lock.json | 22 +- package.json | 2 +- src/components/App.js | 96 ++++---- src/components/Layout.js | 253 ++++++++++++++++++++++ src/components/layout/Main.js | 25 +-- src/components/layout/Switcher.js | 4 +- src/constants/steps.js | 2 +- src/index.css | 1 + src/index.js | 21 +- src/providers/ApplicationStateProvider.js | 28 +++ src/providers/ToastProvider.js | 26 +++ 11 files changed, 393 insertions(+), 87 deletions(-) create mode 100644 src/components/Layout.js create mode 100644 src/providers/ApplicationStateProvider.js create mode 100644 src/providers/ToastProvider.js diff --git a/package-lock.json b/package-lock.json index 17c4552..1e14487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1327,6 +1327,11 @@ } } }, + "@flare/js-utils": { + "version": "1.0.3", + "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz", + "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A==" + }, "@flare/tuitio-client": { "version": "1.0.4", "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.0.4.tgz", @@ -1336,15 +1341,10 @@ "axios": "^1.3.2" }, "dependencies": { - "@flare/js-utils": { - "version": "1.0.3", - "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz", - "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A==" - }, "axios": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz", - "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", "requires": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", @@ -1354,9 +1354,9 @@ } }, "@flare/tuitio-client-react": { - "version": "1.0.0", - "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.0.0.tgz", - "integrity": "sha512-iIsyteZaCLXQCAFAnifYq6Stw7Jg72id7Ky/b3hB8ZGaNkrTDKDsmLTW7a2bHWljcFbCbYuRXrmHgpt8YJ6Hzg==", + "version": "1.0.1", + "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.0.1.tgz", + "integrity": "sha512-WA+1UzfBgZ4gGdcT0AT6lQ9zOQ3mxc5UxQvxoM1SBR5i5tbIuQQCY6M8dudm1l02fNfwNQqJIcrtuOTTXZqMOA==", "requires": { "@flare/tuitio-client": "^1.0.4" } diff --git a/package.json b/package.json index da674e5..bdda783 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "private": true, "dependencies": { - "@flare/tuitio-client-react": "^1.0.0", + "@flare/tuitio-client-react": "^1.0.1", "@material-ui/core": "^4.11.2", "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^5.11.6", diff --git a/src/components/App.js b/src/components/App.js index 6b1ffa8..2ca86d7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,46 +1,62 @@ -import React, { useReducer, useMemo } from "react"; -import Main from "./layout/Main"; -import { initialState } from "../state/initialState"; -import { - reducer, - dispatchActions as reducerDispatchActions -} from "../state/reducer"; -import { - ApplicationStateContext, - ApplicationDispatchContext -} from "../state/ApplicationContexts"; -import { ToastContainer, Slide } from "react-toastify"; -import "react-toastify/dist/ReactToastify.css"; +import React from "react"; +import Layout from "./Layout"; +import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom"; +import { useTuitioToken } from "@flare/tuitio-client-react"; +import LoginContainer from "../features/login/components/LoginContainer"; -const App = () => { - const [state, dispatch] = useReducer(reducer, initialState); - const dispatchActions = useMemo( - () => reducerDispatchActions(dispatch), - [dispatch] - ); +const PrivateRoute = ({ component, ...rest }) => { + const { valid } = useTuitioToken(); return ( - <> - - -
- - - - + + valid ? ( + React.createElement(component, props) + ) : ( + + ) + } + /> ); }; -export default App; +const PublicRoute = ({ component, ...rest }) => { + const { valid } = useTuitioToken(); + return ( + + valid ? ( + + ) : ( + React.createElement(component, props) + ) + } + /> + ); +}; + +const AppWrapper = () => { + return ( + + + + + + + ); +}; + +export default AppWrapper; diff --git a/src/components/Layout.js b/src/components/Layout.js new file mode 100644 index 0000000..e5827d7 --- /dev/null +++ b/src/components/Layout.js @@ -0,0 +1,253 @@ +import React from "react"; +import clsx from "clsx"; +import { makeStyles, useTheme } from "@material-ui/core/styles"; +import Drawer from "@material-ui/core/Drawer"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import List from "@material-ui/core/List"; +import Typography from "@material-ui/core/Typography"; +import Divider from "@material-ui/core/Divider"; +import IconButton from "@material-ui/core/IconButton"; +import MenuIcon from "@material-ui/icons/Menu"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import ChevronRightIcon from "@material-ui/icons/ChevronRight"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import InboxIcon from "@material-ui/icons/MoveToInbox"; +import MailIcon from "@material-ui/icons/Mail"; +import DnsIcon from "@material-ui/icons/Dns"; +import MenuItem from "@material-ui/core/MenuItem"; +import Menu from "@material-ui/core/Menu"; +import AccountCircle from "@material-ui/icons/AccountCircle"; +import SettingsIcon from "@material-ui/icons/Settings"; +import Main from "./layout/Main"; +import { useHistory } from "react-router-dom"; +import { useTuitioClient } from "@flare/tuitio-client-react"; + +const drawerWidth = 240; + +const useStyles = makeStyles(theme => ({ + root: { + display: "flex" + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen + }) + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen + }) + }, + menuButton: { + marginRight: 36 + }, + hide: { + display: "none" + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + whiteSpace: "nowrap" + }, + drawerOpen: { + width: drawerWidth, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen + }) + }, + drawerClose: { + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen + }), + overflowX: "hidden", + width: theme.spacing(7) + 1, + [theme.breakpoints.up("sm")]: { + width: theme.spacing(9) + 1 + } + }, + toolbar: { + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + padding: theme.spacing(0, 1), + // necessary for content to be below app bar + ...theme.mixins.toolbar + }, + title: { + flexGrow: 1 + }, + content: { + flexGrow: 1, + padding: theme.spacing(2) + } +})); + +export default function MiniDrawer() { + const classes = useStyles(); + const theme = useTheme(); + const [open, setOpen] = React.useState(false); + const history = useHistory(); + const { logout } = useTuitioClient(); + + const handleDrawerOpen = () => { + setOpen(true); + }; + + const handleDrawerClose = () => { + setOpen(false); + }; + + const [userAnchorEl, setUserAnchorEl] = React.useState(null); + const openUser = Boolean(userAnchorEl); + + const handleMenu = event => { + setUserAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setUserAnchorEl(null); + }; + + return ( +
+ + + + + + + Network resurrector + +
+ + + + + { + history.push("/user-profile"); + handleClose(); + }} + > + Profile + + logout()}>Logout + +
+ + + +
+ + {theme.direction === "rtl" ? ( + + ) : ( + + )} + +
+ + + {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( + + + {index % 2 === 0 ? : } + + + + ))} + + + + history.push("/machines")} + > + + + + + + history.push("/settings")} + > + + + + + + {["All mail", "Trash", "Spam"].map((text, index) => ( + + + {index % 2 === 0 ? : } + + + + ))} + + +
+
+
+
+
+ ); +} diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js index db0702a..76aeafd 100644 --- a/src/components/layout/Main.js +++ b/src/components/layout/Main.js @@ -1,36 +1,13 @@ import React from "react"; -import ApplicationStepper from "./stepper/ApplicationStepper"; import Switcher from "./Switcher"; -import { makeStyles } from "@material-ui/core/styles"; import { useTuitioToken } from "@flare/tuitio-client-react"; import LoginContainer from "../../features/login/components/LoginContainer"; -const useStyles = makeStyles(() => ({ - app: { - backgroundColor: "#282c34", - minHeight: "100vh", - display: "flex", - flexDirection: "column" - } -})); - const Main = () => { - const classes = useStyles(); const { validate: validateToken } = useTuitioToken(); const tokenIsValid = validateToken(); - return ( -
- {tokenIsValid ? ( - <> - - - - ) : ( - - )} -
- ); + return <>{tokenIsValid ? : }; }; export default Main; diff --git a/src/components/layout/Switcher.js b/src/components/layout/Switcher.js index 9cb45d5..471c4ef 100644 --- a/src/components/layout/Switcher.js +++ b/src/components/layout/Switcher.js @@ -8,8 +8,8 @@ import SettingsContainer from "../../features/settings/components/SettingsContai const Switcher = () => { return ( - - + + diff --git a/src/constants/steps.js b/src/constants/steps.js index 7cc158e..f38d65f 100644 --- a/src/constants/steps.js +++ b/src/constants/steps.js @@ -11,7 +11,7 @@ const steps = [ { id: 1, title: "Steps.Network", - route: "/network", + route: "/machines", disabled: false, icon: }, diff --git a/src/index.css b/src/index.css index 4a1df4d..9f93577 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ body { margin: 0; + background-color: #282c34; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; diff --git a/src/index.js b/src/index.js index b9d2971..a699898 100644 --- a/src/index.js +++ b/src/index.js @@ -2,17 +2,22 @@ import React, { Suspense } from "react"; import ReactDOM from "react-dom"; import "./index.css"; import "./utils/i18n"; +import CssBaseline from "@material-ui/core/CssBaseline"; import App from "./components/App"; -import { BrowserRouter as Router } from "react-router-dom"; import { TuitioProvider } from "@flare/tuitio-client-react"; +import ApplicationStateProvider from "./providers/ApplicationStateProvider"; +import ToastProvider from "./providers/ToastProvider"; ReactDOM.render( - - Loading...
}> - - - - - , + + + + Loading...}> + + + + + + , document.getElementById("root") ); diff --git a/src/providers/ApplicationStateProvider.js b/src/providers/ApplicationStateProvider.js new file mode 100644 index 0000000..44ee81f --- /dev/null +++ b/src/providers/ApplicationStateProvider.js @@ -0,0 +1,28 @@ +import React, { useReducer, useMemo } from "react"; +import { + ApplicationStateContext, + ApplicationDispatchContext +} from "../state/ApplicationContexts"; +import { + reducer, + dispatchActions as reducerDispatchActions +} from "../state/reducer"; +import { initialState } from "../state/initialState"; + +const ApplicationStateProvider = ({ children }) => { + const [state, dispatch] = useReducer(reducer, initialState); + const dispatchActions = useMemo( + () => reducerDispatchActions(dispatch), + [dispatch] + ); + + return ( + + + {children} + + + ); +}; + +export default ApplicationStateProvider; diff --git a/src/providers/ToastProvider.js b/src/providers/ToastProvider.js new file mode 100644 index 0000000..1a3a836 --- /dev/null +++ b/src/providers/ToastProvider.js @@ -0,0 +1,26 @@ +import React from "react"; +import { ToastContainer, Slide } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +const ToastProvider = ({ children }) => { + return ( + <> + {children} + + + ); +}; + +export default ToastProvider;