import { useState, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { type Video } from "@shared/schema"; import SearchHeader from "@/components/search-header"; import VideoGrid from "@/components/video-grid"; interface VideosResponse { videos: Video[]; total: number; hasMore: boolean; } export default function Home() { const [searchQuery, setSearchQuery] = useState(""); const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); const [offset, setOffset] = useState(0); const [allVideos, setAllVideos] = useState([]); // Fetch videos const { data: videosResponse, isLoading, refetch } = useQuery({ queryKey: ["/api/videos", { limit: 20, offset, search: searchQuery || undefined }], queryFn: async ({ queryKey }) => { const [, params] = queryKey as [string, any]; const searchParams = new URLSearchParams(); Object.entries(params).forEach(([key, value]) => { if (value !== undefined) { searchParams.append(key, String(value)); } }); const response = await fetch(`/api/videos?${searchParams}`); if (!response.ok) { throw new Error('Failed to fetch videos'); } return response.json(); } }); // Update videos when new data comes in useEffect(() => { if (videosResponse) { if (offset === 0) { setAllVideos(videosResponse.videos); } else { setAllVideos(prev => [...prev, ...videosResponse.videos]); } } }, [videosResponse, offset]); // Reset videos when search changes const handleSearch = (query: string) => { setSearchQuery(query); setOffset(0); setAllVideos([]); }; const handleLoadMore = () => { setOffset(prev => prev + 20); }; // Force refetch when search changes useEffect(() => { refetch(); }, [searchQuery, offset, refetch]); return (
{/* Footer */}
); }