feat: Implement Phase 4 cleanup and polish

src/pages/OperatorDetail.tsx

@@ -27,23 +27,23 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
+import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
+import { useCompanyParks } from '@/hooks/companies/useCompanyParks';
 
 export default function OperatorDetail() {
   const { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
-  const [operator, setOperator] = useState<Company | null>(null);
-  const [parks, setParks] = useState<Park[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [parksLoading, setParksLoading] = useState(true);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [totalParks, setTotalParks] = useState<number>(0);
-  const [operatingRides, setOperatingRides] = useState<number>(0);
-  const [statsLoading, setStatsLoading] = useState(true);
-  const [totalPhotos, setTotalPhotos] = useState<number>(0);
   const { user } = useAuth();
   const { isModerator } = useUserRole();
   const { requireAuth } = useAuthModal();
   
+  // Use custom hooks for data fetching
+  const { data: operator, isLoading: loading } = useCompanyDetail(slug, 'operator');
+  const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(operator?.id, 'operator');
+  const { data: parks = [], isLoading: parksLoading } = useCompanyParks(operator?.id, 'operator', 6);
+  
   // Update document title when operator changes
   useDocumentTitle(operator?.name || 'Operator Details');
   
@@ -57,12 +57,6 @@ export default function OperatorDetail() {
     enabled: !!operator
   });
 
-  useEffect(() => {
-    if (slug) {
-      fetchOperatorData();
-    }
-  }, [slug]);
-
   // Track page view when operator is loaded
   useEffect(() => {
     if (operator?.id) {
@@ -70,95 +64,6 @@ export default function OperatorDetail() {
     }
   }, [operator?.id]);
 
-  const fetchOperatorData = async () => {
-    try {
-      const { data, error } = await supabase
-        .from('companies')
-        .select('*')
-        .eq('slug', slug)
-        .eq('company_type', 'operator')
-        .maybeSingle();
-
-      if (error) throw error;
-      setOperator(data);
-      
-      // Fetch parks operated by this operator
-      if (data) {
-        fetchParks(data.id);
-        fetchStatistics(data.id);
-        fetchPhotoCount(data.id);
-      }
-    } catch (error) {
-      console.error('Error fetching operator:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchParks = async (operatorId: string) => {
-    try {
-      const { data, error } = await supabase
-        .from('parks')
-        .select(`
-          *,
-          location:locations(*)
-        `)
-        .eq('operator_id', operatorId)
-        .order('name')
-        .limit(6);
-
-      if (error) throw error;
-      setParks(data || []);
-    } catch (error) {
-      console.error('Error fetching parks:', error);
-    } finally {
-      setParksLoading(false);
-    }
-  };
-
-  const fetchStatistics = async (operatorId: string) => {
-    try {
-      // Get total parks count
-      const { count: parksCount, error: parksError } = await supabase
-        .from('parks')
-        .select('id', { count: 'exact', head: true })
-        .eq('operator_id', operatorId);
-
-      if (parksError) throw parksError;
-      setTotalParks(parksCount || 0);
-
-      // Get operating rides count across all parks
-      const { data: ridesData, error: ridesError } = await supabase
-        .from('rides')
-        .select('id, parks!inner(operator_id)')
-        .eq('parks.operator_id', operatorId)
-        .eq('status', 'operating');
-
-      if (ridesError) throw ridesError;
-      setOperatingRides(ridesData?.length || 0);
-    } catch (error) {
-      console.error('Error fetching statistics:', error);
-    } finally {
-      setStatsLoading(false);
-    }
-  };
-
-  const fetchPhotoCount = async (operatorId: string) => {
-    try {
-      const { count, error } = await supabase
-        .from('photos')
-        .select('id', { count: 'exact', head: true })
-        .eq('entity_type', 'operator')
-        .eq('entity_id', operatorId);
-
-      if (error) throw error;
-      setTotalPhotos(count || 0);
-    } catch (error) {
-      console.error('Error fetching photo count:', error);
-      setTotalPhotos(0);
-    }
-  };
-
   const handleEditSubmit = async (data: any) => {
     try {
       await submitCompanyUpdate(
@@ -309,29 +214,29 @@ export default function OperatorDetail() {
 
         {/* Company Info */}
         <div className="flex flex-wrap justify-center gap-4 mb-8">
-          {!statsLoading && totalParks > 0 && (
+          {!statsLoading && statistics?.parksCount ? (
             <Card>
               <CardContent className="p-4 text-center">
                 <FerrisWheel className="w-6 h-6 text-primary mx-auto mb-2" />
-                <div className="text-2xl font-bold">{totalParks}</div>
+                <div className="text-2xl font-bold">{statistics.parksCount}</div>
                 <div className="text-sm text-muted-foreground">
-                  {totalParks === 1 ? 'Park Operated' : 'Parks Operated'}
+                  {statistics.parksCount === 1 ? 'Park Operated' : 'Parks Operated'}
                 </div>
               </CardContent>
             </Card>
-          )}
+          ) : null}
           
-          {!statsLoading && operatingRides > 0 && (
+          {!statsLoading && statistics?.operatingRidesCount ? (
             <Card>
               <CardContent className="p-4 text-center">
                 <Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
-                <div className="text-2xl font-bold">{operatingRides}</div>
+                <div className="text-2xl font-bold">{statistics.operatingRidesCount}</div>
                 <div className="text-sm text-muted-foreground">
-                  Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
+                  Operating {statistics.operatingRidesCount === 1 ? 'Ride' : 'Rides'}
                 </div>
               </CardContent>
             </Card>
-          )}
+          ) : null}
           
           {operator.founded_year && (
             <Card>
@@ -365,10 +270,10 @@ export default function OperatorDetail() {
           <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="parks">
-              Parks {!statsLoading && totalParks > 0 && `(${totalParks})`}
+              Parks {!statsLoading && statistics?.parksCount ? `(${statistics.parksCount})` : ''}
             </TabsTrigger>
             <TabsTrigger value="photos">
-              Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
+              Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
             </TabsTrigger>
             <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>