47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { onAuthStateChanged, User } from 'firebase/auth';
|
|
import { firebaseAuth } from '../../lib/firebase-client';
|
|
import { GroupRidesShowcase } from '../../components/group-rides/group-rides-showcase';
|
|
import { GroupRidesManagement } from '../../components/group-rides/group-rides-management';
|
|
|
|
export default function GroupRidesPage() {
|
|
const [currentUser, setCurrentUser] = useState<User | null>(firebaseAuth?.currentUser ?? null);
|
|
const [authChecked, setAuthChecked] = useState(Boolean(firebaseAuth?.currentUser));
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = onAuthStateChanged(firebaseAuth, (user) => {
|
|
setCurrentUser(user);
|
|
setAuthChecked(true);
|
|
});
|
|
|
|
return () => unsubscribe();
|
|
}, []);
|
|
|
|
// Loading skeleton to eliminate page flickering while auth state resolves
|
|
if (!authChecked) {
|
|
return (
|
|
<div
|
|
className="flagship-page min-h-screen bg-surface text-on-surface flex flex-col justify-center items-center px-4 py-16"
|
|
data-testid="group-rides-skeleton"
|
|
>
|
|
<div className="flex flex-col items-center gap-4 text-center max-w-sm w-full">
|
|
<div className="w-12 h-12 rounded-full border-2 border-primary-container border-t-transparent animate-spin" />
|
|
<div className="w-48 h-4 bg-surface-container-high rounded animate-pulse" />
|
|
<div className="w-32 h-3 bg-surface-container rounded animate-pulse" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// If user is authenticated: render Group Rides Hub / Management Console
|
|
if (currentUser) {
|
|
return <GroupRidesManagement currentUser={currentUser} />;
|
|
}
|
|
|
|
// If user is not authenticated: render Group Rides Feature Showcase Page
|
|
return <GroupRidesShowcase isLoggedIn={false} />;
|
|
}
|
|
|