export function useEngineerProfile(): EngineerProfileType | null {
  const localUserProfile = localStorage.getItem("userProfile")
  const userProfile: EngineerProfileType | null = localUserProfile
    ? JSON.parse(localUserProfile)
    : null
  return userProfile
}
import { UserType } from "../types/user.type"
import React, { ReactNode, createContext, useContext, useState } from "react"

type AuthContextType = {
  user: UserType | null
  login: (userData: UserType) => void
  logout: () => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

type AuthProviderProps = {
  children: ReactNode
}

export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
  const [user, setUser] = useState<UserType | null>(null)

  const login = (userData: UserType) => {
    setUser(userData)
    localStorage.setItem("currentUser", JSON.stringify(userData))
  }

  const logout = () => {
    setUser(null)
    localStorage.removeItem("currentUser")
  }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
import { useState, useEffect, CSSProperties } from "react"
import { useModal } from "../modal"
import { MdOutlineShortText } from "react-icons/md"
import { NavLink, useNavigate } from "react-router-dom"
import { HashLink } from "react-router-hash-link"
import { useCookies } from "react-cookie"
import { Button } from "../button/button.component"
import { useTranslation } from "react-i18next"
import { IoMailOutline } from "react-icons/io5"
import i18n from "../../utils/i18n"
import { UserType, UserKind } from "../../types/user.type"
import { PopupOpener } from "../popup/popup-opener.provider"
import { Menu, MenuItem } from "../menu"
import { UserSignInComponent } from "../../module/user-sign-in/user-sign-in.component"
import { useAuth } from "../../context/auth.context"
import { Icon } from "../icon/icon.component"
import logo from "../../../public/images/logo.png"
import styles from "./navigation.module.css"
import { Config } from "../../utils/config"
import { useEngineerProfile } from "../../hooks/use-user.hook"

export function Navigation({ style }: { style?: CSSProperties }) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------
  const { t: translate } = useTranslation()
  const modal = useModal()
  const { user, logout } = useAuth()
  const navigate = useNavigate()
  const accountProfile = useEngineerProfile()

  const [activeLang, setActiveLang] = useState([false, false])
  const [isOpen, setOpen] = useState(false)
  const [currentUser, setCurrentUser] = useState<UserType | null>(user)
  const [cookies] = useCookies(["accessToken", "refreshToken"])
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  const [isMobile, setIsMobile] = useState(window.innerWidth < 1120)

  // ---------------------------------------------------------------------------
  // useEffect
  // ---------------------------------------------------------------------------

  useEffect(() => {
    const savedLanguage = localStorage.getItem("language")
    if (savedLanguage) {
      i18n.changeLanguage(savedLanguage)
      if (savedLanguage === "jp") {
        setActiveLang([true, false])
      } else if (savedLanguage === "en") {
        setActiveLang([false, true])
      }
    } else {
      handleJp()
    }
    function handleResize() {
      setIsMobile(window.innerWidth < 1120)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  useEffect(() => {
    const currentUser = localStorage.getItem("currentUser")

    if (!currentUser) return

    setCurrentUser(JSON.parse(currentUser))
  }, [cookies, user])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  const toggleDrawer = () => {
    setIsDrawerOpen(!isDrawerOpen)
  }

  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language)
    localStorage.setItem("language", language)
  }

  const handleJp = () => {
    changeLanguage("jp")
    setActiveLang([true, false])
  }

  const handleEn = () => {
    changeLanguage("en")
    setActiveLang([false, true])
  }

  function openMenu() {
    setOpen(!isOpen)
  }

  return (
    <div className={styles.navigation} style={style}>
      <div className={styles.menuIcon} onClick={openMenu}>
        {isOpen ? (
          <Icon name="fal fa-xmark" size="2.4" />
        ) : (
          <MdOutlineShortText color={"#fff"} size={"2.4rem"} />
        )}
      </div>
      <div className={styles.logo}>
        <NavLink to={"/"}>
          <img className={styles.logologo} src={logo} width={110} height={34} />
        </NavLink>
      </div>
      <div className={styles.navbar}>
        <NavLink to="/project-list" className={styles.navLink}>
          {translate("navbar.projects")}
        </NavLink>

        <NavLink to="/team-search" className={styles.navLink}>
          {translate("navbar.engineer-search")}
        </NavLink>
        <HashLink smooth to="/#build-team" className={styles.navLink}>
          {translate("navbar.build-team")}
        </HashLink>
        {/*<NavLink to="#review" className={styles.navLink}>*/}
        {/*  {translate("navbar.requirement")}*/}
        {/*</NavLink>*/}
        {/* <NavLink to="/privacy-policy" className={styles.navLink}>
          {translate("navbar.teams")}
        </NavLink> */}
        <HashLink smooth to="/#contact" className={styles.navLink}>
          {translate("navbar.contact")}
        </HashLink>
      </div>
      <nav className={`${styles.menu} ${isOpen ? styles.open : styles.close}`}>
        <div className={styles.menuHeader}>
          <Icon
            className={styles.closeIcon}
            onClick={openMenu}
            name="fal fa-xmark"
            size="2.4"
          />
          <div className={styles.logo} onClick={() => navigate("/")}>
            <img src={logo} width={110} height={34} />
          </div>
        </div>
        {isOpen && (
          <div className={styles.menuContent}>
            <div className={styles.menuBlock}>
              <span>{translate("navbar.menu")}</span>
              <Button className={styles.btnLang} mode="outline-small">
                <span
                  style={{ color: `${activeLang?.[0] ? "#B5B8BF" : ""}` }}
                  onClick={handleJp}
                >
                  Jp
                </span>
                /
                <span
                  style={{
                    color: `${activeLang?.[1] ? "#B5B8BF" : ""}`,
                  }}
                  onClick={handleEn}
                >
                  En
                </span>
              </Button>
            </div>
            <NavLink to="/project-list" className={styles.navLink}>
              {translate("navbar.projects")}
            </NavLink>

            <NavLink to="/team-search" className={styles.navLink}>
              {translate("navbar.engineer-search")}
            </NavLink>
            <HashLink smooth to="/#build-team" className={styles.navLink}>
              {translate("navbar.build-team")}
            </HashLink>
            {/*<NavLink to="#review" className={styles.navLink}>*/}
            {/*  {translate("navbar.requirement")}*/}
            {/*</NavLink>*/}
            {/* <NavLink to="/privacy-policy" className={styles.navLink}>
              {translate("navbar.teams")}
            </NavLink> */}
            <HashLink smooth to="/#contact" className={styles.navLink}>
              {translate("navbar.contact")}
            </HashLink>
          </div>
        )}
      </nav>
      <div className={styles.rightSideWrap}>
        {currentUser ? (
          <div className={styles.userLogoBlock}>
            <NavLink to={""}>
              <IoMailOutline size={25} color="#fff" />
            </NavLink>

            {isMobile ? (
              <div>
                <Icon
                  onClick={() => setIsDrawerOpen(!isDrawerOpen)}
                  className={styles.userCircle}
                  name="fa-solid fa-circle-user"
                  size="large"
                />
              </div>
            ) : (
              <PopupOpener
                mode={"click"}
                placement="bottom-end"
                offset={[60, 5]}
                content={() => {
                  return (
                    <Menu>
                      <MenuItem
                        iconClassName={styles.iconSettings}
                        icon="fa-solid fa-gear"
                        label="Settings"
                        link={
                          currentUser.role === UserKind.engineer
                            ? `/profile-engineer/${currentUser.id}`
                            : "/profile-company"
                        }
                      />
                      <MenuItem
                        iconClassName={styles.iconSettings}
                        icon="fa-solid fa-arrow-right-from-bracket"
                        label="Sign out"
                        onClick={() => {
                          logout()
                          navigate("/")
                        }}
                      />
                    </Menu>
                  )
                }}
                closeOnInteract={true}
              >
                {accountProfile && accountProfile.profilePicture ? (
                  <img
                    className={styles.profileImg}
                    src={Config.imageUrl + accountProfile.profilePicture}
                    alt="profile_logo"
                  />
                ) : (
                  <Icon
                    className={styles.userCircle}
                    name="fa-solid fa-circle-user"
                    size="large"
                  />
                )}
              </PopupOpener>
            )}
          </div>
        ) : (
          <span
            className={styles.signInBtn}
            onClick={() => {
              modal.open({
                component: <UserSignInComponent />,
                width: "80rem",
                closeOnEsc: true,
                closeOnOutsideClick: true,
                modalClassName: styles.modal,
              })
            }}
          >
            {translate("registration.sign-in")}
          </span>
        )}
        <Button className={styles.btnLang} mode="outline-small">
          <span
            style={{ color: `${activeLang?.[0] ? "#B5B8BF" : ""}` }}
            onClick={handleJp}
          >
            Jp
          </span>
          /
          <span
            style={{
              color: `${activeLang?.[1] ? "#B5B8BF" : ""}`,
            }}
            onClick={handleEn}
          >
            En
          </span>
        </Button>
      </div>
      {isDrawerOpen && (
        <div
          className={`${styles.drawerMenu} ${isDrawerOpen ? styles.open : styles.close}`}
        >
          <div className={styles.closeDrawer}>
            <Icon
              onClick={toggleDrawer}
              name="fal fa-xmark"
              size="2.4"
              style={{ color: "#fff" }}
            />
          </div>
          {currentUser && (
            <div className={styles.drawerHeader}>
              <NavLink
                to={
                  currentUser.role === UserKind.engineer
                    ? `/profile-engineer/${currentUser.id}`
                    : "/profile-company"
                }
              >
                <Icon
                  className={styles.userPicture}
                  name="fa-solid fa-circle-user"
                  size="auto"
                />
              </NavLink>
              <span className={styles.userName}>{currentUser.name}</span>
            </div>
          )}
          <div className={styles.drawerContent}>
            <NavLink to="" className={styles.drawerItemBlock}>
              <Icon
                name="fa-solid fa-gear"
                size="2.2"
                style={{ color: "#fff" }}
              />
              <span className={styles.drawerItem}>Setting</span>
            </NavLink>
            <div
              onClick={() => {
                logout(), toggleDrawer(), navigate("/")
              }}
              className={styles.drawerItemBlock}
            >
              <Icon
                name="fa-solid fa-arrow-right-from-bracket"
                size="2.2"
                style={{ color: "#fff" }}
              />
              <span className={styles.drawerItem}>Sign out</span>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
when i logout it's logout but issue not login out from coockies. How to fix it ?