import React, { useState, useEffect, useCallback } from 'react'; import Head from 'next/head'; import { Navbar } from '../components/Navbar'; import { MaterialCard } from '../components/MaterialCard'; import { MaterialDetail } from '../components/MaterialDetail'; import { CreateModal } from '../components/CreateModal'; import { ProfileModal } from '../components/ProfileModal'; import { DataService } from '../services/dataService'; import { MaterialDTO, UserDTO, MaterialType } from '../types'; import { Filter, Grid } from 'lucide-react'; export default function Home() { const [materials, setMaterials] = useState([]); const [page, setPage] = useState(1); const pageSize = 20; const [total, setTotal] = useState(0); const [hasNext, setHasNext] = useState(false); const [currentUser, setCurrentUser] = useState(null); const [selectedId, setSelectedId] = useState(null); const [isCreateOpen, setIsCreateOpen] = useState(false); const [isProfileOpen, setIsProfileOpen] = useState(false); const [filter, setFilter] = useState<'ALL' | 'CODE' | 'VIDEO' | 'ASSET_ZIP'>('ALL'); const [searchQuery, setSearchQuery] = useState(''); const loadMaterials = useCallback(async () => { try { const filterKey: MaterialType | 'ALL' = filter === 'ALL' ? 'ALL' : filter as any; const result = await DataService.getMaterials(page, pageSize, filterKey, searchQuery); setMaterials(result.items); setTotal(result.total); setHasNext(result.hasNext); } catch (e) { console.error("Failed to load materials", e); } }, [page, filter, searchQuery]); const refreshUser = useCallback(async () => { const user = await DataService.getCurrentUser(); setCurrentUser(user); }, []); useEffect(() => { const run = async () => { await refreshUser(); await loadMaterials(); }; run(); }, [loadMaterials, refreshUser]); const filteredMaterials = materials; return (
NEXUS_MAT.OS setIsCreateOpen(true)} onProfileClick={() => setIsProfileOpen(true)} searchQuery={searchQuery} onSearch={(q) => { setSearchQuery(q); setPage(1); }} />
{/* Header / Filter Section */}

GRID_ACCESS

INDEXING {total} RESOURCES FROM THE NETWORK

{(['ALL', 'CODE', 'VIDEO', 'ASSET_ZIP'] as const).map(f => ( ))}
{/* The Grid */}
{filteredMaterials.map(m => ( setSelectedId(id)} currentUser={currentUser} /> ))}
{/* Pagination */}
PAGE {page} / {Math.max(1, Math.ceil(total / pageSize))}
{/* Empty State */} {filteredMaterials.length === 0 && (

NO DATA FOUND IN SECTOR.

)}
{/* Modals */} {selectedId && ( setSelectedId(null)} currentUser={currentUser} /> )} {isCreateOpen && ( setIsCreateOpen(false)} onSuccess={() => { setIsCreateOpen(false); loadMaterials(); }} /> )} {isProfileOpen && currentUser && ( setIsProfileOpen(false)} onUpdate={refreshUser} /> )} {/* Footer Decoration */}
); }