Merge branch 'develop' of https://github.com/project-shelf/project-shelf

into fix/routes
ivanms1 · Jul 28, 2023 · 4055b67 · 4055b67
2 parents f00772f + c143065
commit 4055b67
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/apps/web/src/components/MobileMenu/MobileMenu.tsx b/apps/web/src/components/MobileMenu/MobileMenu.tsx
@@ -11,7 +11,7 @@ import MenuIcon from '@/assets/icons/menu-icon.svg';
 const MobileMenu = () => {
   const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
-  const { isLoggedIn, logout, currentUser } = useIsLoggedIn();
+  const { isLoggedIn, logout, currentUser, loading } = useIsLoggedIn();
   const [isAuthLoading, setIsAuthLoading] = useState(false);
 
   const handleLogout = async () => {
@@ -100,7 +100,7 @@ const MobileMenu = () => {
               className='px-7'
               size='small'
               onClick={handleLogin}
-              isLoading={isAuthLoading}
+              isLoading={isAuthLoading || loading}
             >
               {t('login')}
             </Button>

diff --git a/apps/web/src/components/Navbar/Navbar.tsx b/apps/web/src/components/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { signIn } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/future/image';
@@ -10,12 +10,18 @@ import MobileMenu from '../MobileMenu';
 import useIsLoggedIn from '@/hooks/useIsLoggedIn';
 
 const Navbar = () => {
-  const { isLoggedIn, logout, currentUser } = useIsLoggedIn();
+  const { isLoggedIn, logout, currentUser, loading, session } = useIsLoggedIn();
   const [isAuthLoading, setIsAuthLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [isTopOpen, setIsTopOpen] = useState(false);
   const { t } = useTranslation('common');
 
+  useEffect(() => {
+    if (session.status === 'unauthenticated') {
+      setIsAuthLoading(false);
+    }
+  }, [session.status]);
+
   const handleLogin = async () => {
     setIsAuthLoading(true);
     await signIn('github');
@@ -86,13 +92,17 @@ const Navbar = () => {
               open={open}
               setOpen={setOpen}
               parent={
-                <Image
-                  className='h-10 w-10 cursor-pointer rounded-full object-cover'
-                  src={currentUser?.avatar ?? ''}
-                  width={40}
-                  height={40}
-                  alt={currentUser?.name ?? 'user avatar'}
-                />
+                currentUser?.avatar ? (
+                  <Image
+                    className='h-10 w-10 cursor-pointer rounded-full object-cover'
+                    src={currentUser?.avatar ?? ''}
+                    width={40}
+                    height={40}
+                    alt={currentUser?.name ?? 'user avatar'}
+                  />
+                ) : (
+                  <div className='h-10 w-10 animate-pulse rounded-full bg-slate-700' />
+                )
               }
             >
               <div className='flex w-40 flex-col rounded-sm bg-grey-dark'>
@@ -122,9 +132,9 @@ const Navbar = () => {
           </>
         ) : (
           <Button
-            className='px-7'
+            className='min-w-[120px] px-7'
             size='small'
-            isLoading={isAuthLoading}
+            isLoading={loading || isAuthLoading}
             onClick={handleLogin}
           >
             {t('login')}

diff --git a/apps/web/src/hooks/useIsLoggedIn.tsx b/apps/web/src/hooks/useIsLoggedIn.tsx
@@ -13,10 +13,12 @@ const useIsLoggedIn = () => {
   };
 
   return {
-    isLoggedIn: !!data?.getCurrentUser?.id,
-    loading,
+    isLoggedIn:
+      !!data?.getCurrentUser?.id || session.status === 'authenticated',
+    loading: loading || session.status === 'loading',
     logout,
     currentUser: data?.getCurrentUser,
+    session,
   };
 };
 

diff --git a/apps/web/src/pages/Home/Home.tsx b/apps/web/src/pages/Home/Home.tsx
@@ -27,7 +27,7 @@ function Home() {
   const { data: projectsData } = useGetTopProjectsForHomePageQuery();
   const { data: creatorsData } = useGetTopCreatorsForHomePageQuery();
 
-  const { isLoggedIn } = useIsLoggedIn();
+  const { isLoggedIn, loading } = useIsLoggedIn();
 
   const isMobile = useIsMobile();
 
@@ -58,7 +58,7 @@ function Home() {
         <Button
           className='w-fit max-lg:mb-10 max-lg:w-full'
           onClick={handleLogin}
-          isLoading={isAuthLoading}
+          isLoading={isAuthLoading || loading}
         >
           {t('common:login')}
         </Button>