"use client"; import Link from "next/link"; import { useEffect, useState } from "react"; import FileGrid from "~/app/_components/FileGrid"; import UploadForm from "~/app/_components/UploadForm"; import { Toaster } from "react-hot-toast"; import { Suspense } from "react"; import LoadingSkeleton from "./LoadingSkeleton"; // Custom fallback for FileGrid function FileGridFallback() { return (
{[...Array(6)].map((_, i) => (
Loading
))}
); } // Custom fallback for UploadForm function UploadFormFallback() { return (
); } function Home() { const [session, setSession] = useState<{ user?: any } | null>(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchSession() { setLoading(true); const res = await fetch("/api/auth/session"); const data = await res.json(); setSession(data); setLoading(false); } fetchSession(); }, []); return ( <>
{/* Top-right corner sign-out button */} {session?.user && (
{/* Search Button */} Sign out
)}

File Hosting

{/* Conditionally render FileGrid and UploadForm if the user is logged in */} {session?.user ? ( <> }> }> ) : !loading ? (

Please log in to upload and view files.

) : null} {!session?.user && (
{!loading ? ( {session ? "Sign out" : "Sign in"} ) : (
)}
)}
); } export default Home;