feat: Implement Phase 4 cleanup and polish

src/pages/DesignerDetail.tsx

@@ -26,20 +26,21 @@ import { trackPageView } from '@/lib/viewTracking';
 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';
 
 export default function DesignerDetail() {
   const { slug } = useParams<{ slug: string }>();
   const navigate = useNavigate();
-  const [designer, setDesigner] = useState<Company | null>(null);
-  const [loading, setLoading] = useState(true);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [totalRides, setTotalRides] = useState<number>(0);
-  const [totalPhotos, setTotalPhotos] = useState<number>(0);
-  const [statsLoading, setStatsLoading] = useState(true);
   const { user } = useAuth();
   const { isModerator } = useUserRole();
   const { requireAuth } = useAuthModal();
   
+  // Use custom hooks for data fetching
+  const { data: designer, isLoading: loading } = useCompanyDetail(slug, 'designer');
+  const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(designer?.id, 'designer');
+  
   // Update document title when designer changes
   useDocumentTitle(designer?.name || 'Designer Details');
   
@@ -53,12 +54,6 @@ export default function DesignerDetail() {
     enabled: !!designer
   });
 
-  useEffect(() => {
-    if (slug) {
-      fetchDesignerData();
-    }
-  }, [slug]);
-
   // Track page view when designer is loaded
   useEffect(() => {
     if (designer?.id) {
@@ -66,54 +61,6 @@ export default function DesignerDetail() {
     }
   }, [designer?.id]);
 
-  const fetchDesignerData = async () => {
-    try {
-      const { data, error } = await supabase
-        .from('companies')
-        .select('*')
-        .eq('slug', slug)
-        .eq('company_type', 'designer')
-        .maybeSingle();
-
-      if (error) throw error;
-      setDesigner(data);
-      if (data) {
-        fetchStatistics(data.id);
-      }
-    } catch (error) {
-      console.error('Error fetching designer:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchStatistics = async (designerId: string) => {
-    try {
-      // Count rides
-      const { count: ridesCount, error: ridesError } = await supabase
-        .from('rides')
-        .select('id', { count: 'exact', head: true })
-        .eq('designer_id', designerId);
-
-      if (ridesError) throw ridesError;
-      setTotalRides(ridesCount || 0);
-
-      // Count photos
-      const { count: photosCount, error: photosError } = await supabase
-        .from('photos')
-        .select('id', { count: 'exact', head: true })
-        .eq('entity_type', 'designer')
-        .eq('entity_id', designerId);
-
-      if (photosError) throw photosError;
-      setTotalPhotos(photosCount || 0);
-    } catch (error) {
-      console.error('Error fetching statistics:', error);
-    } finally {
-      setStatsLoading(false);
-    }
-  };
-
   const handleEditSubmit = async (data: any) => {
     try {
       await submitCompanyUpdate(
@@ -295,10 +242,10 @@ export default function DesignerDetail() {
           <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="rides">
-              Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
+              Rides {!statsLoading && statistics?.ridesCount ? `(${statistics.ridesCount})` : ''}
             </TabsTrigger>
             <TabsTrigger value="photos">
-              Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
+              Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
             </TabsTrigger>
             <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>