import React, { useState, useEffect } from "react"; import TopicItems from "./TopicItem"; import { useIsLoggedIn } from '../lib/isLoggedIn'; import { Button } from "./ui/button"; import Loader from "./ui/loader"; const topicPageDesc = 'Cutting-edge discussions on tech, digital services, news, and digital freedom. Stay informed on AI, cybersecurity, privacy, and the future of innovation.'; export default function TopicCreation() { const PUBLIC_TOPIC_API_URL = import.meta.env.PUBLIC_TOPIC_API_URL; const { isLoggedIn, loading: authLoading, error: authError } = useIsLoggedIn(); const [topics, setTopics] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [pagination, setPagination] = useState({ current_page: 1, last_page: 1, per_page: 10, total: 0 }); // Get current page from URL or default to 1 const getCurrentPage = () => { const params = new URLSearchParams(window.location.search); const page = parseInt(params.get('page')) || 1; return Math.max(1, Math.min(page, pagination.last_page)); }; // Fetch topics data const fetchTopics = async (page, search = '') => { setLoading(true); try { let url = `${PUBLIC_TOPIC_API_URL}?query=get-all-topics&page=${page}`; if (search) { url += `&search=${encodeURIComponent(search)}`; } const response = await fetch(url, { method: 'GET', credentials: 'include' }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setTopics(data.data || []); setPagination(prev => ({ ...data.pagination, current_page: Math.min(data.pagination.current_page, data.pagination.last_page) })); setSearchTerm(data.search_term || ''); } catch (err) { setError(err.message); console.error('Fetch error:', err); } finally { setLoading(false); } }; // Handle page change const handlePageChange = (newPage) => { const validatedPage = Math.max(1, Math.min(newPage, pagination.last_page)); const params = new URLSearchParams(window.location.search); params.set('page', validatedPage); window.history.pushState({}, '', `?${params.toString()}`); fetchTopics(validatedPage, searchTerm); window.scrollTo({ top: 0, behavior: 'smooth' }); }; // Handle search const handleSearch = (e) => { e.preventDefault(); const newSearchTerm = e.target.elements.search.value.trim(); setSearchTerm(newSearchTerm); // Reset to page 1 when searching const params = new URLSearchParams(window.location.search); params.set('page', 1); if (newSearchTerm) { params.set('search', newSearchTerm); } else { params.delete('search'); } window.history.pushState({}, '', `?${params.toString()}`); fetchTopics(1, newSearchTerm); }; // Initial load and URL change handling useEffect(() => { const params = new URLSearchParams(window.location.search); const initialSearch = params.get('search') || ''; setSearchTerm(initialSearch); fetchTopics(getCurrentPage(), initialSearch); const handlePopState = () => { const newParams = new URLSearchParams(window.location.search); const newSearch = newParams.get('search') || ''; setSearchTerm(newSearch); fetchTopics(getCurrentPage(), newSearch); }; window.addEventListener('popstate', handlePopState); return () => { window.removeEventListener('popstate', handlePopState); }; }, []); // ... (keep existing authLoading and authError checks) return ( <> {isLoggedIn && ( <>
)} {loading && !topics.length ? ( ) : error ? (
Error loading topics: {error}
) : ( <> {pagination.last_page > 1 && (
Showing {(pagination.current_page - 1) * pagination.per_page + 1}- {Math.min(pagination.current_page * pagination.per_page, pagination.total)} of {pagination.total} topics {searchTerm && ( matching "{searchTerm}" )}
{ pagination.current_page > 1 && ( <> ) }
{generatePageNumbers(pagination.current_page, pagination.last_page).map((page, i) => ( page === '...' ? ( ... ) : ( ) ))}
)} )} ); } // Helper function to generate smart page numbers function generatePageNumbers(currentPage, lastPage) { const pages = []; const maxVisible = 5; // Maximum visible page numbers if (lastPage <= maxVisible) { for (let i = 1; i <= lastPage; i++) { pages.push(i); } } else { // Always show first page pages.push(1); // Calculate start and end of middle pages let start = Math.max(2, currentPage - 1); let end = Math.min(lastPage - 1, currentPage + 1); // Adjust if we're at the beginning if (currentPage <= 3) { end = maxVisible - 2; } // Adjust if we're at the end if (currentPage >= lastPage - 2) { start = lastPage - (maxVisible - 2); } // Add ellipsis if needed if (start > 2) { pages.push('...'); } // Add middle pages for (let i = start; i <= end; i++) { pages.push(i); } // Add ellipsis if needed if (end < lastPage - 1) { pages.push('...'); } // Always show last page pages.push(lastPage); } return pages; }