sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add search and view mode functionality to video pages

Browse Source 
Introduces state management for search queries and view modes (grid/list) on both FolxStadlPage and VideoPage, enhancing user interaction and navigation with updated SearchHeader props.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/izllXJt
This commit is contained in:
sebastjanartic 2025-08-30 20:45:13 +00:00
parent 8d319bca14
commit b9a21c4ee7
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/pages/FolxStadlPage.tsx
View File

@ -13,6 +13,8 @@ export default function FolxStadlPage() {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const itemsPerPage = 10; const itemsPerPage = 10;
const { data, isLoading } = useQuery<{videos: Video[], total: number}>({ const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@ -54,9 +56,12 @@ export default function FolxStadlPage() {
return ( return (
<div className="min-h-screen bg-bunny-dark text-white"> <div className="min-h-screen bg-bunny-dark text-white">
<SearchHeader <SearchHeader
onSearch={() => {}} onSearch={(query) => {
onViewChange={() => {}} setSearchQuery(query);
currentView="grid" if (query) window.location.href = `/?search=${encodeURIComponent(query)}`;
}}
onViewChange={setViewMode}
currentView={viewMode}
/> />
{/* Main Content */} {/* Main Content */}

11
client/src/pages/VideoPage.tsx
View File

@ -53,6 +53,8 @@ export default function VideoPage() {
const [, params] = useRoute("/video/:id"); const [, params] = useRoute("/video/:id");
const videoId = params?.id; const videoId = params?.id;
const [showShareMenu, setShowShareMenu] = useState(false); const [showShareMenu, setShowShareMenu] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Fetch current video // Fetch current video
@ -200,9 +202,12 @@ export default function VideoPage() {
return ( return (
<div className="min-h-screen bunny-dark static-triangles"> <div className="min-h-screen bunny-dark static-triangles">
<SearchHeader <SearchHeader
onSearch={() => {}} onSearch={(query) => {
onViewChange={() => {}} setSearchQuery(query);
currentView="grid" if (query) window.location.href = `/?search=${encodeURIComponent(query)}`;
}}
onViewChange={setViewMode}
currentView={viewMode}
/> />
<div className="max-w-7xl mx-auto p-4 lg:p-6 relative"> <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">