light dark toggle

src/components/layout/LightDarkToggle.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { IconButton } from "@material-ui/core";
+import {
+  Brightness2 as MoonIcon,
+  WbSunny as SunIcon
+} from "@material-ui/icons";
+import { useApplicationTheme } from "../../providers/ThemeProvider";
+
+const LightDarkToggle = () => {
+  const { isDark, onDarkModeChanged } = useApplicationTheme();
+
+  const handleChange = () => onDarkModeChanged(!isDark);
+
+  return (
+    <IconButton
+      aria-label="light-dark-toggle"
+      color="inherit"
+      onClick={handleChange}
+    >
+      {isDark ? <SunIcon /> : <MoonIcon />}
+    </IconButton>
+  );
+};
+
+export default LightDarkToggle;

src/components/layout/ProfileButton.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import { useHistory } from "react-router-dom";
+import { useTuitioClient } from "@flare/tuitio-client-react";
+
+const ProfileButton = () => {
+  const history = useHistory();
+  const { logout } = useTuitioClient();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const openUserMenu = Boolean(anchorEl);
+
+  const handleMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right"
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right"
+        }}
+        open={openUserMenu}
+        onClose={handleClose}
+      >
+        <MenuItem
+          onClick={() => {
+            history.push("/user-profile");
+            handleClose();
+          }}
+        >
+          Profile
+        </MenuItem>
+        <MenuItem onClick={() => logout()}>Logout</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default ProfileButton;

src/components/layout/TopBar.js

@@ -1,39 +1,17 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  IconButton,
-  Menu,
-  MenuItem
-} from "@material-ui/core";
-
+import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-import { useHistory } from "react-router-dom";
-import { useTuitioClient } from "@flare/tuitio-client-react";
+import ProfileButton from "./ProfileButton";
+import LightDarkToggle from "./LightDarkToggle";
 import styles from "./styles";
 
 const useStyles = makeStyles(styles);
 
 const TopBar = ({ open, handleDrawerOpen }) => {
   const classes = useStyles();
-  const history = useHistory();
-  const { logout } = useTuitioClient();
-
-  const [userAnchorEl, setUserAnchorEl] = useState(null);
-  const openUserMenu = Boolean(userAnchorEl);
-
-  const handleMenu = event => {
-    setUserAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setUserAnchorEl(null);
-  };
 
   return (
     <AppBar
@@ -57,42 +35,8 @@ const TopBar = ({ open, handleDrawerOpen }) => {
         <Typography variant="h6" noWrap className={classes.title}>
           Network resurrector
         </Typography>
-        <div>
-          <IconButton
-            aria-label="account of current user"
-            aria-controls="menu-appbar"
-            aria-haspopup="true"
-            onClick={handleMenu}
-            color="inherit"
-          >
-            <AccountCircle />
-          </IconButton>
-          <Menu
-            id="menu-appbar"
-            anchorEl={userAnchorEl}
-            anchorOrigin={{
-              vertical: "top",
-              horizontal: "right"
-            }}
-            keepMounted
-            transformOrigin={{
-              vertical: "top",
-              horizontal: "right"
-            }}
-            open={openUserMenu}
-            onClose={handleClose}
-          >
-            <MenuItem
-              onClick={() => {
-                history.push("/user-profile");
-                handleClose();
-              }}
-            >
-              Profile
-            </MenuItem>
-            <MenuItem onClick={() => logout()}>Logout</MenuItem>
-          </Menu>
-        </div>
+        <LightDarkToggle />
+        <ProfileButton />
       </Toolbar>
     </AppBar>
   );