sign in

4 files changed, 104 insertions, 115 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index c6575831..06c15b73 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,7 +10,7 @@ import DesktopView from '../../views/DesktopView'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import Category from '@/lib/category/components/Category'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCountCart } from '@/core/utils/cart'
@@ -21,11 +21,13 @@ import { getAuth, setAuth } from '@/core/utils/auth'
 import { createSlug, getIdFromSlug } from '@/core/utils/slug'
 import productApi from '@/lib/product/api/productApi'
 import { useSession } from 'next-auth/react'
+import { AuthContext } from '@/pages/_app'
 
 const Search = dynamic(() => import('./Search'))
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
+  const {authenticated} = useContext(AuthContext)
   const auth = useAuth()
 
   const [cartCount, setCartCount] = useState(0)
@@ -177,7 +179,7 @@ const NavbarDesktop = () => {
             </div>
 
             <div className='w-3/12 flex gap-x-1 relative'>
-              {!auth && (
+              {!authenticated && (
                 <>
                   <Link
                     href='/login'
@@ -193,10 +195,10 @@ const NavbarDesktop = () => {
                   </Link>
                 </>
               )}
-              {auth && (
+              {authenticated && (
                 <>
                   <div href='/' className='navbar-user-dropdown-button'>
-                    <span>Halo, {auth?.name}</span>
+                    <span>Halo, {authenticated?.name}</span>
                     <div className='ml-auto'>
                       <ChevronDownIcon className='w-6' />
                     </div>
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index e8f6434b..e5c6908a 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -18,26 +18,20 @@ const AnimationLayout = dynamic(() => import('./AnimationLayout'))
 const BasicLayout = ({ children }) => {
   const [templateWA, setTemplateWA] = useState(null)
   const [payloadWA, setPayloadWa] = useState(null)
-  const [isLoading, setIsloading] = useState(false)
 
   const router = useRouter()
   const { data: session } = useSession()
   const auth = getAuth()
   const setting = async () => {
-    if (!auth && session) {
-      setCookie('auth', JSON.stringify(session?.odooUser))
-      setIsloading(false)
-    }
+    setCookie('auth', JSON.stringify(session?.odooUser))
   }
 
   useEffect(() => {
-    setting()
-  }, [session])
-
-  useEffect(() => {
-    setting()
+    // if (!auth && session) {
+    //   setting()
+    // }
+    console.log('ini auth', auth)
     console.log('ini session', session)
-    console.log('ini auth', getAuth())
     const getIP = async () => {
       const ip = await odooApi('GET', '/api/ip-address')
       const data = {
@@ -65,44 +59,39 @@ const BasicLayout = ({ children }) => {
       setTemplateWA('product')
     }
   }, [])
-  if(isLoading){
-
-  }else{
-    return (
-      <>
-        <Navbar />
-        <AnimationLayout>
-          {children}
-          <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
-            <a
-              href={whatsappUrl(templateWA, payloadWA)}
-              className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
-              rel='noopener noreferrer'
-              target='_blank'
-            >
-              <Image
-                src='/images/socials/WHATSAPP.svg'
-                alt='Whatsapp'
-                className='block sm:hidden'
-                width={36}
-                height={36}
-              />
-              <Image
-                src='/images/socials/WHATSAPP.svg'
-                alt='Whatsapp'
-                className='hidden sm:block'
-                width={44}
-                height={44}
-              />
-              <span className='text-white font-bold ml-1.5'>Whatsapp</span>
-            </a>
-          </div>
-        </AnimationLayout>
-        <BasicFooter />
-      </>
-    )
-  }
-  
+  return (
+    <>
+      <Navbar />
+      <AnimationLayout>
+        {children}
+        <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
+          <a
+            href={whatsappUrl(templateWA, payloadWA)}
+            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+            rel='noopener noreferrer'
+            target='_blank'
+          >
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='block sm:hidden'
+              width={36}
+              height={36}
+            />
+            <Image
+              src='/images/socials/WHATSAPP.svg'
+              alt='Whatsapp'
+              className='hidden sm:block'
+              width={44}
+              height={44}
+            />
+            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
+          </a>
+        </div>
+      </AnimationLayout>
+      <BasicFooter />
+    </>
+  )
 }
 
 export default BasicLayout
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index e3bff492..06c90d45 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -6,8 +6,10 @@ import Alert from '@/core/components/elements/Alert/Alert'
 import { useSession, signIn, SignOut } from 'next-auth/react'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
+import { AuthContext } from '@/pages/_app'
+import { getAuth, setAuth } from '@/core/utils/auth'
 
 const LoginDesktop = () => {
   const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
@@ -16,37 +18,20 @@ const LoginDesktop = () => {
   const router = useRouter()
   const [query, setQuery] = useState(router?.query?.next || '/')
   const { data: session } = useSession()
-  const [googleLoading, setGoogleloading] = useState(true)
-
-  useEffect(() => {
-    // Simulate loading for 2 seconds
-    const delay = setTimeout(() => {
-      setGoogleloading(false);
-    }, 3000);
-
-    return () => {
-      clearTimeout(delay); // Clear the timeout if the component unmounts
-    };
-  }, []);
-
+  const auth = getAuth()
+  const { setAuthenticated } = useContext(AuthContext)
 
   const handleGoogle = async () => {
-    await signIn('google', { callbackUrl: '/login' })
+    const url = query != '/' ? '/login?next=' + query : '/login'
+    await signIn('google', { callbackUrl: url })
   }
 
   useEffect(() => {
-    if (session) {
-      router.push(query)
+    if (session || auth) {
+      setAuthenticated(session ? session.odooUser : auth)
     }
-  }, [session, query])
+  }, [session])
 
-  if (googleLoading) {
-    return (
-      <div className='flex justify-center my-6'>
-        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-      </div>
-    )
-  }
   return (
     <DesktopView>
       <div className='container mx-auto'>
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index cda9e970..9f30752a 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -5,18 +5,29 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
-import { useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
 import { SessionProvider } from 'next-auth/react'
+import { getAuth } from '@/core/utils/auth'
 
 const queryClient = new QueryClient()
 
-function MyApp({ Component, pageProps :{session, ...pageProps} }) {
+export const AuthContext = createContext({
+  authenticated : false,
+  setAuthenticated : (auth) => {}
+})
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   const router = useRouter()
   const { isMobile } = useDevice()
-  console.log('ini session', session)
 
   const [animateLoader, setAnimateLoader] = useState(false)
+  const [authenticated, setAuthenticated] = useState(null)
+  const auth = getAuth()
+
+  useEffect(() => {
+    setAuthenticated(auth)
+  }, [auth])
 
   useEffect(() => {
     const handleRouteChangeStart = () => setAnimateLoader(true)
@@ -49,41 +60,43 @@ function MyApp({ Component, pageProps :{session, ...pageProps} }) {
   }, [isMobile])
 
   return (
-    <SessionProvider session={session}>
-      <AnimatePresence>
-        {animateLoader && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{
-              duration: 0.1
-            }}
-            className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
-          >
-            <LogoSpinner />
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <Toaster
-        position='top-center'
-        containerStyle={toasterStyle}
-        toastOptions={{
-          duration: 3000,
-          className: 'border border-gray_r-8'
-        }}
-      />
-      <NextProgress color='#F01C21' options={{ showSpinner: false }} />
-      <QueryClientProvider client={queryClient}>
-        <AnimatePresence
-          mode='popLayout'
-          initial={false}
-          onExitComplete={() => window.scrollTo(0, 0)}
-        >
-          {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+    <AuthContext.Provider value={{authenticated, setAuthenticated}}>
+      <SessionProvider session={session}>
+        <AnimatePresence>
+          {animateLoader && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{
+                duration: 0.1
+              }}
+              className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
+            >
+              <LogoSpinner />
+            </motion.div>
+          )}
         </AnimatePresence>
-      </QueryClientProvider>
-    </SessionProvider>
+        <Toaster
+          position='top-center'
+          containerStyle={toasterStyle}
+          toastOptions={{
+            duration: 3000,
+            className: 'border border-gray_r-8'
+          }}
+        />
+        <NextProgress color='#F01C21' options={{ showSpinner: false }} />
+        <QueryClientProvider client={queryClient}>
+          <AnimatePresence
+            mode='popLayout'
+            initial={false}
+            onExitComplete={() => window.scrollTo(0, 0)}
+          >
+            {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+          </AnimatePresence>
+        </QueryClientProvider>
+      </SessionProvider>
+    </AuthContext.Provider>
   )
 }