Optimize recent changes query

src/pages/Parks.tsx

@@ -37,6 +37,8 @@ import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { useParks } from '@/hooks/parks/useParks';
+import { Pagination } from '@/components/common/Pagination';
 
 export interface FilterState {
   search: string;
@@ -91,13 +93,12 @@ const initialSort: SortState = {
 };
 
 export default function Parks() {
-  const [parks, setParks] = useState<Park[]>([]);
-  const [loading, setLoading] = useState(true);
   const [filters, setFilters] = useState<FilterState>(initialFilters);
   const [sort, setSort] = useState<SortState>(initialSort);
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [showFilters, setShowFilters] = useState(false);
   const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('parks-sidebar-collapsed');
     return saved ? JSON.parse(saved) : false;
@@ -108,40 +109,23 @@ export default function Parks() {
   const { isModerator } = useUserRole();
   const { requireAuth } = useAuthModal();
 
-  useEffect(() => {
-    fetchParks();
-  }, []);
+  // Use TanStack Query hook for data fetching with caching
+  const { data: parks = [], isLoading: loading, error } = useParks();
 
   useEffect(() => {
     localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
   }, [sidebarCollapsed]);
 
-  const fetchParks = async () => {
-    try {
-      setLoading(true);
-      const { data, error } = await supabase
-        .from('parks')
-        .select(`
-          *,
-          location:locations(*),
-          operator:companies!parks_operator_id_fkey(*),
-          property_owner:companies!parks_property_owner_id_fkey(*)
-        `)
-        .order('name');
-
-      if (error) throw error;
-      setParks(data || []);
-    } catch (error) {
-      console.error('Error fetching parks:', error);
+  // Show error toast if query fails
+  useEffect(() => {
+    if (error) {
       toast({
         variant: "destructive",
         title: "Error loading parks",
         description: error instanceof Error ? error.message : 'Failed to load parks',
       });
-    } finally {
-      setLoading(false);
     }
-  };
+  }, [error, toast]);
 
   const filteredAndSortedParks = useMemo(() => {
     let filtered = parks.filter(park => {
@@ -333,6 +317,21 @@ export default function Parks() {
     navigate(`/parks/${park.slug}`);
   };
 
+  // Pagination for display
+  const ITEMS_PER_PAGE = 24;
+  const paginatedParks = useMemo(() => {
+    const start = (currentPage - 1) * ITEMS_PER_PAGE;
+    const end = start + ITEMS_PER_PAGE;
+    return filteredAndSortedParks.slice(start, end);
+  }, [filteredAndSortedParks, currentPage]);
+
+  const totalPages = Math.ceil(filteredAndSortedParks.length / ITEMS_PER_PAGE);
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters, sort]);
+
   const handleParkSubmit = async (parkData: any) => {
     try {
       const { submitParkCreation } = await import('@/lib/entitySubmissionHelpers');
@@ -548,14 +547,21 @@ export default function Parks() {
               <div>
                 {viewMode === 'grid' ? (
                   <ParkGridView 
-                    parks={filteredAndSortedParks} 
+                    parks={paginatedParks} 
                   />
                 ) : (
                   <ParkListView 
-                    parks={filteredAndSortedParks} 
+                    parks={paginatedParks} 
                     onParkClick={handleParkClick}
                   />
                 )}
+                
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={setCurrentPage}
+                  isLoading={loading}
+                />
               </div>
             ) : (
               <div className="text-center py-12">