Merge pull request #96 from AgainIoT/feature/83

Fix : manage login state only in Header #83

Author: bentshrimp

src/layout/Header.js

@@ -17,9 +17,10 @@ import MenuItem from "@mui/material/MenuItem";
 import MenuIcon from "@mui/icons-material/Menu";
 import LOGO from "../../src/assets/images/Logo.svg";
 import axios from "axios";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import { avatar, id, name, isLogin } from "../recoil/authorize";
 import styled from "styled-components";
+
 const ElevationScroll = (props) => {
   const { children, window } = props;
   // Note that you normally won't need to set the window ref as useScrollTrigger
@@ -42,19 +43,44 @@ ElevationScroll.propTypes = {
    */
   window: PropTypes.func,
 };
+
+async function checkTokenValid() {
+  const isTokenValid = await axios.get(
+    `${process.env.REACT_APP_SERVER_URL}/auth/checkToken`,
+    {
+      validateStatus: (status) => {
+        return status < 500;
+      },
+      withCredentials: true,
+    },
+  );
+  return isTokenValid.status < 400;
+}
+
 export const Header = (props) => {
   const [anchorElNav, setAnchorElNav] = useState(null);
   const [anchorElUser, setAnchorElUser] = useState(null);
   const [src, setSrc] = useRecoilState(avatar);
   const [userId, setUserId] = useRecoilState(id);
   const [userName, setUserName] = useRecoilState(name);
-  const [Login, setLogin] = useRecoilState(isLogin);
-  React.useEffect(() => {
-    if (Login) {
+  const setIsLogin = useSetRecoilState(isLogin);
+
+  const checkIsLogin = async () => {
+    const loggedIn = await checkTokenValid();
+    if (loggedIn) {
       setSrc(localStorage.avatar);
       setUserId(localStorage.id);
       setUserName(localStorage.name);
+    } else {
+      localStorage.removeItem("id");
+      localStorage.removeItem("name");
+      localStorage.removeItem("avatar");
     }
+    setIsLogin(loggedIn);
+  };
+
+  React.useEffect(() => {
+    checkIsLogin();
   }, []);
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
@@ -78,7 +104,7 @@ export const Header = (props) => {
       "",
       { withCredentials: true },
     );
-    setLogin(false);
+    setIsLogin(false);
     localStorage.setItem("id", "guest");
     localStorage.setItem("name", "guest");
     localStorage.setItem("avatar", "");
@@ -162,7 +188,7 @@ export const Header = (props) => {
                 <MenuItem
                   key={"Docs"}
                   onClick={() =>
-                    handleOpenNewTab("https://docs.open-set-go.com")
+                    handleOpenNewTab("https://open-set-go.netlify.app/")
                   }
                 >
                   <Typography textAlign="center">Docs</Typography>
@@ -211,7 +237,9 @@ export const Header = (props) => {
               ))}
               <MenuItemWrapper
                 key="docs"
-                onClick={() => handleOpenNewTab("https://docs.open-set-go.com")}
+                onClick={() =>
+                  handleOpenNewTab("https://open-set-go.netlify.app/")
+                }
               >
                 Docs
               </MenuItemWrapper>

src/pages/MainPage.js

@@ -3,40 +3,8 @@ import Footer from "../components/main/Footer";
 import Steps from "../components/main/Steps";
 import propTypes from "prop-types";
 import { Header } from "../layout/Header";
-import { useEffect } from "react";
-import { useSetRecoilState } from "recoil";
-import { isLogin } from "../recoil/authorize";
-import axios from "axios";
-
-async function checkTokenValid() {
-  const isTokenValid = await axios.get(
-    `${process.env.REACT_APP_SERVER_URL}/auth/checkToken`,
-    {
-      validateStatus: (status) => {
-        return status < 500;
-      },
-      withCredentials: true,
-    },
-  );
-  return isTokenValid.status < 400;
-}
 
 function MainPage() {
-  const setIsLogin = useSetRecoilState(isLogin);
-
-  const checkIsLogin = async () => {
-    const loggedIn = await checkTokenValid();
-    if (!loggedIn) {
-      localStorage.removeItem("id");
-      localStorage.removeItem("name");
-      localStorage.removeItem("avatar");
-    }
-    setIsLogin(loggedIn);
-  };
-
-  useEffect(() => {
-    checkIsLogin();
-  }, []);
   return (
     <>
       <Header burger={true} pages={["Steps"]} settings={["Logout"]} />