Skip to content

Commit

Permalink
chore: added logout button to navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
ayussh-2 committed Oct 24, 2024
1 parent ed31f4d commit 80b7ea8
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 29 deletions.
14 changes: 0 additions & 14 deletions src/app/logout/page.jsx

This file was deleted.

2 changes: 2 additions & 0 deletions src/app/register/page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ function Page() {
const userDetails = getUserDetails();
if (userDetails.name) {
setIsLoggedIn(true);
} else {
setIsLoggedIn(false);
}
}, [getUserDetails, userInfo]);

Expand Down
44 changes: 33 additions & 11 deletions src/components/Marginals/navbar/navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use client';
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import {
HamburgerContainer,
MainBar,
Expand All @@ -19,10 +19,14 @@ import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { AnimatePresence, motion } from 'framer-motion';
import { AuthContext } from '@/context/auth-context';
import { useUserDetails } from '@/hooks/useUserDetails';

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const pathname = usePathname();
const { handleSignOut, userInfo } = useContext(AuthContext);
const [isLoggedIn, setIsLoggedIn] = useState(false);

function handleToggle() {
setIsOpen(!isOpen);
Expand All @@ -36,6 +40,16 @@ const Navbar = () => {
handleCloseMenu();
}, [pathname]);

const getUserDetails = useUserDetails();
useEffect(() => {
const userDetails = getUserDetails();
if (userDetails.name) {
setIsLoggedIn(true);
} else {
setIsLoggedIn(false);
}
}, [getUserDetails, userInfo]);

return (
<NavContainer>
<div>
Expand All @@ -54,11 +68,15 @@ const Navbar = () => {
</MainBarItems>
))}
</MainBar>
<RegisterButton>
<Link href='/register' onClick={handleCloseMenu}>
{ButtonData.title}
</Link>
</RegisterButton>
{isLoggedIn ? (
<RegisterButton onClick={handleSignOut}>Logout</RegisterButton>
) : (
<RegisterButton>
<Link href='/register' onClick={handleCloseMenu}>
{ButtonData.title}
</Link>
</RegisterButton>
)}
<HamburgerContainer>
<Hamburger toggled={isOpen} toggle={handleToggle} size={20} />
</HamburgerContainer>
Expand Down Expand Up @@ -89,11 +107,15 @@ const Navbar = () => {
</ResItem>
))}

<HamburgerRegisterButton>
<Link href={ButtonData.link} onClick={handleCloseMenu}>
{ButtonData.title}
</Link>
</HamburgerRegisterButton>
{isLoggedIn ? (
<HamburgerRegisterButton onClick={handleSignOut}>Logout</HamburgerRegisterButton>
) : (
<HamburgerRegisterButton>
<Link href='/register' onClick={handleCloseMenu}>
{ButtonData.title}
</Link>
</HamburgerRegisterButton>
)}
</ResList>
</ResMen>
</motion.div>
Expand Down
8 changes: 4 additions & 4 deletions src/context/auth-context.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { auth } from '@/firebase/firebase';
export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
const [userInfo, setUserData] = useState({});
const [userInfo, setUserInfo] = useState({});
const [authLoading, setAuthLoading] = useState(false);

const handleGoogleSignIn = async () => {
Expand All @@ -23,7 +23,7 @@ export const AuthProvider = ({ children }) => {
expires: 7,
sameSite: 'strict',
});
setUserData(userData);
setUserInfo(userData);
toast.success('Successfully signed in with Google.');
} else {
toast.error('Google sign-in failed. Please try again.');
Expand All @@ -39,7 +39,7 @@ export const AuthProvider = ({ children }) => {
const handleSignOut = async () => {
try {
await signOutUser();
setUserData({});
setUserInfo({});
Cookies.remove('userData');
toast.success('Successfully signed out.');
} catch (error) {
Expand All @@ -50,7 +50,7 @@ export const AuthProvider = ({ children }) => {

return (
<AuthContext.Provider
value={{ userInfo, setUserData, handleGoogleSignIn, handleSignOut, authLoading }}
value={{ userInfo, setUserInfo, handleGoogleSignIn, handleSignOut, authLoading }}
>
{children}
</AuthContext.Provider>
Expand Down

0 comments on commit 80b7ea8

Please sign in to comment.