From 1e67ff87fdf2f92901aeb884dc26fe6978c8383b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 23:08:53 +0000
Subject: [PATCH] Fix versioning component errors

---
 .../versioning/VersionComparisonDialog.tsx    |  2 +-
 src/pages/ParkDetail.tsx                      | 59 ++++++++++---------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/versioning/VersionComparisonDialog.tsx b/src/components/versioning/VersionComparisonDialog.tsx
index 9a937184..75bb74eb 100644
--- a/src/components/versioning/VersionComparisonDialog.tsx
+++ b/src/components/versioning/VersionComparisonDialog.tsx
@@ -41,7 +41,7 @@ export function VersionComparisonDialog({
     };
 
     loadDiff();
-  }, [open, fromVersionId, toVersionId]);
+  }, [open, fromVersionId, toVersionId, compareVersions]);
 
   const formatValue = (value: any): string => {
     if (value === null || value === undefined) return 'null';
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 67aaf99f..abfed0bc 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Header } from '@/components/layout/Header';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -41,19 +41,25 @@ export default function ParkDetail() {
   const [photoCount, setPhotoCount] = useState<number>(0);
   const [statsLoading, setStatsLoading] = useState(true);
   const { isModerator } = useUserRole();
-  useEffect(() => {
-    if (slug) {
-      fetchParkData();
-    }
-  }, [slug]);
+  const fetchPhotoCount = useCallback(async (parkId: string) => {
+    try {
+      const { count, error } = await supabase
+        .from('photos')
+        .select('id', { count: 'exact', head: true })
+        .eq('entity_type', 'park')
+        .eq('entity_id', parkId);
 
-  // Track page view when park is loaded
-  useEffect(() => {
-    if (park?.id) {
-      trackPageView('park', park.id);
+      if (error) throw error;
+      setPhotoCount(count || 0);
+    } catch (error) {
+      console.error('Error fetching photo count:', error);
+      setPhotoCount(0);
+    } finally {
+      setStatsLoading(false);
     }
-  }, [park?.id]);
-  const fetchParkData = async () => {
+  }, []);
+
+  const fetchParkData = useCallback(async () => {
     try {
       // Fetch park details
       const {
@@ -79,25 +85,20 @@ export default function ParkDetail() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [slug, fetchPhotoCount]);
 
-  const fetchPhotoCount = async (parkId: string) => {
-    try {
-      const { count, error } = await supabase
-        .from('photos')
-        .select('id', { count: 'exact', head: true })
-        .eq('entity_type', 'park')
-        .eq('entity_id', parkId);
-
-      if (error) throw error;
-      setPhotoCount(count || 0);
-    } catch (error) {
-      console.error('Error fetching photo count:', error);
-      setPhotoCount(0);
-    } finally {
-      setStatsLoading(false);
+  useEffect(() => {
+    if (slug) {
+      fetchParkData();
     }
-  };
+  }, [slug, fetchParkData]);
+
+  // Track page view when park is loaded
+  useEffect(() => {
+    if (park?.id) {
+      trackPageView('park', park.id);
+    }
+  }, [park?.id]);
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'operating':