fix logout client

Author: bechirboujelbene

client/src/App.jsx

@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 
 import LandingPage from './pages/LandingPage';
 import CallbackPage from './pages/CallbackPage.jsx';
+import LogoutPage from './pages/LogoutPage.jsx';
 import useUpdateLocation from './hooks/useUpdateLocation.js';
 import RequireAuth from './components/RequireAuth';
 import useRegisterUser from './hooks/useRegisterUser';
@@ -22,6 +23,7 @@ function App() {
     <Routes>
       <Route path="/" element={<LandingPage />} />
       <Route path="/callback" element={<CallbackPage />} />
+      <Route path="/logout" element={<LogoutPage />} />
       <Route path="/home" element={<Home />} />
       <Route path="/signin/" element={<SignInPage />} />
       <Route path="/signup/" element={<SignUpPage />} />

client/src/components/Header.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { useNavigate } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
 import '../styles/LandingPage.css';
 
 const Header = () => {
     const { isAuthenticated, user, logout, loginWithRedirect } = useAuth0();
+    const navigate = useNavigate();
     const authNav = [
         { path: '/home', label: 'Home' },
         { path: '/matches', label: 'Matching' },
@@ -65,7 +67,7 @@ const Header = () => {
                                 style={{ width: 32, height: 32, borderRadius: '50%' }}
                                 onClick={() => navigate('/profile')}
                             />
-                        )}                        <button onClick={() => logout({ returnTo: window.location.origin })} className="btn btn-secondary">Log out</button>
+                        )}                        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin + '/logout' } })} className="btn btn-secondary">Log out</button>
                     </div>
                 ) : (
                     <div className="auth-links">

client/src/pages/LogoutPage.jsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+// Simple page shown after Auth0 redirects back to our app post-logout.
+// It briefly shows a spinner and then navigates to the landing page (/).
+export default function LogoutPage() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Give users brief feedback, then redirect.
+    const id = setTimeout(() => navigate('/', { replace: true }), 1000);
+    return () => clearTimeout(id);
+  }, [navigate]);
+
+  return <LoadingSpinner text="Logging out…" />;
+}

client/src/pages/MatchingPage.jsx

@@ -106,10 +106,52 @@ function MatchingPage() {
   const [profile, setProfile] = useState(null);
   const [location, setLocation] = useState('');
   const [matches, setMatches] = useState([]);
+  const [loadingHistory, setLoadingHistory] = useState(true);
   const [matchingLoading, setMatchingLoading] = useState(false);
   const [showExplanationModal, setShowExplanationModal] = useState(false);
   const [selectedExplanation, setSelectedExplanation] = useState(null);
 
+  // Load previously stored matches on first mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const token = await getAccessTokenSilently();
+        const historyRes = await fetch(`${API_URL}/matching/history/${encodeURIComponent(user.sub)}`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        if (historyRes.ok) {
+          const history = await historyRes.json();
+          // Fetch user details for each matched user in parallel
+          const userDetailsArr = await Promise.all(history.map(h => 
+            fetch(`${API_URL}/user/${encodeURIComponent(h.matchedUserId)}`, {
+              headers: { Authorization: `Bearer ${token}` },
+            }).then(res => res.ok ? res.json() : null)
+          ));
+          const userMap = Object.fromEntries(userDetailsArr.filter(Boolean).map(u => [u.id, u]));
+
+          const formatted = history.map(h => {
+            const u = userMap[h.matchedUserId] || {};
+            return {
+              id: h.matchedUserId,
+              name: u.name || 'Unknown',
+              distance: 0,
+              avatar: u.picture || '/images/default-avatar.png',
+              sports: u.sportInterests || [],
+              shared: Array.isArray(h.commonPreferences) ? h.commonPreferences.join(', ') : '',
+              match: h.score ? Math.round(h.score * 100) : 0,
+              explanation: h.explanation,
+            };
+          });
+          setMatches(formatted);
+        }
+      } catch (e) {
+        console.warn('Failed to load match history', e);
+      } finally {
+        setLoadingHistory(false);
+      }
+    })();
+  }, []); // run once on mount
+
   // validation helpers and Match click handler
   const hasValidAvailability = (avl) => avl && Object.values(avl).some((arr) => Array.isArray(arr) && arr.length);
 
@@ -337,7 +379,7 @@ function MatchingPage() {
 
         {/* Matches list */}
         {view === 'cards' && (
-          matchingLoading ? (
+          (matchingLoading || loadingHistory) ? (
             <div className="match-loader">
               <div className="spinner" />
               <p>Finding your best matches…</p>
@@ -349,7 +391,7 @@ function MatchingPage() {
                 <button className="btn-link edit">⚙️ Edit Preferences</button>
               </div>
               <div className="match-grid">
-                {(matches.length ? matches : mockMatches).map((m) => (
+                {matches.map((m) => (
                   <div key={m.id} className="match-card card">
                     <div className="match-header">
                       <img src={m.avatar} alt={m.name} className="avatar-sm" />