Merged in Feature/google_sign_up (pull request #48)

Feature/google sign up

1 files changed, 51 insertions, 36 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 4c4fed89..86cbe963 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -5,16 +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 }) {
+export const AuthContext = createContext({
+  authenticated : false,
+  setAuthenticated : (auth) => {}
+})
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
   const [animateLoader, setAnimateLoader] = useState(false)
+  const [authenticated, setAuthenticated] = useState(null)
+  const auth = getAuth()
+
+  // useEffect(() => {
+  //   setAuthenticated(auth)
+  // }, [auth])
 
   useEffect(() => {
     const handleRouteChangeStart = () => setAnimateLoader(true)
@@ -47,41 +60,43 @@ function MyApp({ Component, pageProps }) {
   }, [isMobile])
 
   return (
-    <>
-      <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>
-    </>
+        <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>
   )
 }