Merge pull request #6 from app-generator/dev

Fix / logout button fixes

Author: app-generator

src/config/constant.js

@@ -1,2 +1 @@
 export const API_SERVER = "http://localhost:5000/api/";
-// export const API_SERVER = "https://api-server-nodejs.appseed.us/api/";

src/examples/Navbars/DashboardNavbar/index.js

@@ -16,7 +16,7 @@ Coded by www.creative-tim.com
 import { useState, useEffect } from "react";
 
 // react-router components
-import { useLocation, Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 // prop-types is a library for typechecking of props.
 import PropTypes from "prop-types";
@@ -30,9 +30,7 @@ import Icon from "@mui/material/Icon";
 
 // Soft UI Dashboard React components
 import SuiBox from "components/SuiBox";
-import SuiTypography from "components/SuiTypography";
 import SuiInput from "components/SuiInput";
-import Cube from "examples/Icons/Cube";
 
 // Soft UI Dashboard React example components
 import Breadcrumbs from "examples/Breadcrumbs";
@@ -48,20 +46,14 @@ import { useSoftUIController } from "context";
 import team2 from "assets/images/team-2.jpg";
 import logoSpotify from "assets/images/small-logos/logo-spotify.svg";
 
-import { useAuth } from "../../../auth-context/auth.context";
-import { useHistory } from "react-router-dom";
-import AuthApi from "../../../api/auth";
-
 function DashboardNavbar({ absolute, light, isMini }) {
   const [navbarType, setNavbarType] = useState();
   const [controller, dispatch] = useSoftUIController();
   const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator } = controller;
   const [openMenu, setOpenMenu] = useState(false);
   const classes = styles({ transparentNavbar, absolute, light, isMini });
   const route = useLocation().pathname.split("/").slice(1);
-  const { setUser } = useAuth();
-  let { user } = useAuth();
-  const history = useHistory();
+
   useEffect(() => {
     // Setting the navbar type
     if (fixedNavbar) {
@@ -97,13 +89,6 @@ function DashboardNavbar({ absolute, light, isMini }) {
   const handleOpenMenu = (event) => setOpenMenu(event.currentTarget);
   const handleCloseMenu = () => setOpenMenu(false);
 
-  const handleLogout = async () => {
-    await AuthApi.Logout(user);
-    await setUser(null);
-    localStorage.removeItem("user");
-    return history.push("/authentication/sign-in");
-  };
-
   // Render the notifications menu
   const renderMenu = () => (
     <Menu
@@ -166,20 +151,6 @@ function DashboardNavbar({ absolute, light, isMini }) {
               color={light ? "white" : "inherit"}
               customClass={classes.navbar_section_desktop}
             >
-              <Link to="#">
-                <IconButton onClick={handleLogout} className={classes.navbar_icon_button}>
-                  <Icon className={light ? "text-white" : "text-dark"}>
-                    <Cube size="12px" />
-                  </Icon>
-                  <SuiTypography
-                    variant="button"
-                    fontWeight="medium"
-                    textColor={light ? "white" : "dark"}
-                  >
-                    Sign Out
-                  </SuiTypography>
-                </IconButton>
-              </Link>
               <IconButton
                 size="small"
                 color="inherit"

src/layouts/authentication/sign-in/index.js

@@ -63,6 +63,7 @@ function SignIn() {
     if (password === "") {
       return setError("You must enter your password");
     }
+    setButtonText("Signing in");
     try {
       let response = await AuthApi.Login({
         email,
@@ -71,7 +72,6 @@ function SignIn() {
       if (response.data && response.data.success === false) {
         return setError(response.data.msg);
       }
-      setButtonText("Signing in");
       return setProfile(response);
     } catch (err) {
       console.log(err);

src/layouts/authentication/sign-out/index.js

@@ -0,0 +1,39 @@
+/**
+=========================================================
+* Soft UI Dashboard React - v2.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-material-ui
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+import { useEffect } from "react";
+import AuthApi from "../../../api/auth";
+import { useHistory } from "react-router-dom";
+import { useAuth } from "../../../auth-context/auth.context";
+
+function SignOut() {
+  const history = useHistory();
+  const { setUser } = useAuth();
+  let { user } = useAuth();
+
+  const handleLogout = async () => {
+    await AuthApi.Logout(user);
+    await setUser(null);
+    localStorage.removeItem("user");
+    return history.push("/authentication/sign-in");
+  };
+
+  useEffect(() => {
+    handleLogout();
+  }, []);
+
+  return null;
+}
+
+export default SignOut;

src/routes.js

@@ -44,6 +44,7 @@ import RTL from "layouts/rtl";
 import Profile from "layouts/profile";
 import SignIn from "layouts/authentication/sign-in";
 import SignUp from "layouts/authentication/sign-up";
+import SignOut from "layouts/authentication/sign-out";
 
 // Soft UI Dashboard React icons
 import Shop from "examples/Icons/Shop";
@@ -118,7 +119,7 @@ const routes = [
     protected: true,
   },
   {
-    type: "collapse",
+    type: "none",
     name: "Sign In",
     key: "sign-in",
     route: "/authentication/sign-in",
@@ -127,14 +128,23 @@ const routes = [
     noCollapse: true,
   },
   {
-    type: "collapse",
+    type: "none",
     name: "Sign Up",
     key: "sign-up",
     route: "/authentication/sign-up",
     icon: <SpaceShip size="12px" />,
     component: SignUp,
     noCollapse: true,
   },
+  {
+    type: "collapse",
+    name: "Logout",
+    key: "sign-out",
+    route: "/authentication/sign-out",
+    icon: <SpaceShip size="12px" />,
+    component: SignOut,
+    noCollapse: true,
+  },
 ];
 
 export default routes;