Merge pull request #153 from pedrolivaresanchez/fix/auth-sso-refresh

Update session after each change
pedrolivaresanchez · Nov 8, 2024 · 8fce976 · 8fce976
2 parents 8fd1680 + 0e8cdf7
commit 8fce976
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 20 deletions.
diff --git a/src/app/casos-activos/mapa/page.tsx b/src/app/casos-activos/mapa/page.tsx
@@ -1,14 +1,22 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
 import { supabase } from '@/lib/supabase/client';
 import SolicitudCard from '@/components/SolicitudCard';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import Map, { PinMapa } from '@/components/map/map';
 import PickupPoint from '@/components/PickupPoint';
 
-export default function Mapa() {
+export default function MapaPage() {
+  return (
+    <Suspense>
+      <Mapa />
+    </Suspense>
+  );
+}
+
+function Mapa() {
   const searchParams = useSearchParams();
   const router = useRouter();
 

diff --git a/src/app/casos-activos/ofertas/page.js b/src/app/casos-activos/ofertas/page.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { HeartHandshake } from 'lucide-react';
 import { supabase } from '@/lib/supabase/client';
 import Pagination from '@/components/Pagination';
@@ -9,10 +9,19 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useTowns } from '@/context/TownProvider';
 import OfferCard from '@/components/OfferCard';
 
-export default function Ofertas() {
+export default function OfertasPage() {
+  return (
+    <Suspense>
+      <Ofertas />
+    </Suspense>
+  );
+}
+
+function Ofertas() {
   const { towns } = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();
+  const {} = router;
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);

diff --git a/src/app/casos-activos/solicitudes/page.js b/src/app/casos-activos/solicitudes/page.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { HeartHandshake } from 'lucide-react';
 import { supabase } from '@/lib/supabase/client';
 import SolicitudCard from '@/components/SolicitudCard';
@@ -14,7 +14,15 @@ import { useTowns } from '@/context/TownProvider';
 
 const MODAL_NAME = 'solicitudes';
 
-export default function Solicitudes() {
+export default function SolicitudesPage() {
+  return (
+    <Suspense>
+      <Solicitudes />
+    </Suspense>
+  );
+}
+
+function Solicitudes() {
   const { getTownById, towns } = useTowns();
   const searchParams = useSearchParams();
   const router = useRouter();

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import './globals.css';
 import 'leaflet/dist/leaflet.css';
 import SidebarLayout from '@/components/layout/SidebarLayout';
 import { ModalProvider } from '@/context/ModalProvider';
-import { createClient } from '@/lib/supabase/server';
 import { SessionProvider } from '@/context/SessionProvider';
 import { Toaster } from 'sonner';
 import { PropsWithChildren } from 'react';
@@ -13,19 +12,12 @@ export const metadata = {
   description: 'Sistema de coordinación para emergencias en la Comunidad Valenciana',
 };
 
-const getSession = async () => {
-  const supabase = await createClient();
-  const { data, error } = await supabase.auth.getUser();
-  return data;
-};
-
 export default async function RootLayout({ children }: PropsWithChildren) {
-  const session = await getSession();
   return (
     <html lang="es">
       <body suppressHydrationWarning={true}>
         <Toaster position="bottom-left" richColors />
-        <SessionProvider session={session}>
+        <SessionProvider>
           <QueryClientProvider>
             <ModalProvider>
               <SidebarLayout>{children}</SidebarLayout>

diff --git a/src/app/ofertas/page.tsx b/src/app/ofertas/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
 import { HeartHandshake } from 'lucide-react';
 import { supabase } from '@/lib/supabase/client';
 import Pagination from '@/components/Pagination';
@@ -12,7 +12,15 @@ import OfferCard from '@/components/OfferCard';
 import Link from 'next/link';
 import { HelpRequestData } from '@/types/Requests';
 
-export default function ListaSolicitudes() {
+export default function ListaSolicitudesPage() {
+  return (
+    <Suspense>
+      <ListaSolicitudes />
+    </Suspense>
+  );
+}
+
+function ListaSolicitudes() {
   const session = useSession();
 
   const searchParams = useSearchParams();

diff --git a/src/context/SessionProvider.tsx b/src/context/SessionProvider.tsx
@@ -1,17 +1,37 @@
 'use client';
-import React, { createContext, ReactNode, useContext } from 'react';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { User } from '@supabase/auth-js';
+import { supabase } from '@/lib/supabase/client';
 
 const SessionContext = createContext<UserSession>({ user: null });
 
 type UserSession = { user: User } | { user: null };
 
 type SessionProviderProps = {
   children: ReactNode;
-  session: UserSession;
 };
 
-export const SessionProvider: React.FC<SessionProviderProps> = ({ children, session }) => {
+export const SessionProvider: React.FC<SessionProviderProps> = ({ children }) => {
+  const [session, setSession] = useState<UserSession>(() => ({ user: null }));
+
+  useEffect(() => {
+    // Fetch initial session
+    const fetchSession = async () => {
+      const { data } = await supabase.auth.getUser();
+      setSession(data);
+    };
+    fetchSession();
+
+    // Subscribe to session changes
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      setSession(() => ({ user: session?.user ?? null })); // Update the session in state
+    });
+
+    // Clean up listener on component unmount
+    return () => {
+      authListener?.subscription.unsubscribe();
+    };
+  }, []);
   return <SessionContext.Provider value={session}>{children}</SessionContext.Provider>;
 };