Reverted to commit 0091584677

src/components/lists/ListDisplay.tsx

@@ -1,16 +1,78 @@
-import { UserTopList, Park, Ride, Company } from "@/types/database";
+import { useState, useEffect } from "react";
+import { UserTopList, UserTopListItem, Park, Ride, Company } from "@/types/database";
+import { supabase } from "@/integrations/supabase/client";
 import { Link } from "react-router-dom";
 import { Badge } from "@/components/ui/badge";
-import { useListItems } from "@/hooks/lists/useListItems";
 
 interface ListDisplayProps {
   list: UserTopList;
 }
 
-export function ListDisplay({ list }: ListDisplayProps) {
-  const { data: items, isLoading } = useListItems(list.id);
+interface EnrichedListItem extends UserTopListItem {
+  entity?: Park | Ride | Company;
+}
 
-  const getEntityUrl = (item: NonNullable<typeof items>[0]) => {
+export function ListDisplay({ list }: ListDisplayProps) {
+  const [items, setItems] = useState<EnrichedListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchItemsWithEntities();
+  }, [list.id]);
+
+  const fetchItemsWithEntities = async () => {
+    setLoading(true);
+
+    // First, get the list items
+    const { data: itemsData, error: itemsError } = await supabase
+      .from("user_top_list_items")
+      .select("*")
+      .eq("list_id", list.id)
+      .order("position", { ascending: true });
+
+    if (itemsError) {
+      console.error("Error fetching items:", itemsError);
+      setLoading(false);
+      return;
+    }
+
+    // Then, fetch the entities for each item
+    const enrichedItems = await Promise.all(
+      (itemsData as UserTopListItem[]).map(async (item) => {
+        let entity = null;
+
+        if (item.entity_type === "park") {
+          const { data } = await supabase
+            .from("parks")
+            .select("id, name, slug, park_type, location_id")
+            .eq("id", item.entity_id)
+            .single();
+          entity = data;
+        } else if (item.entity_type === "ride") {
+          const { data } = await supabase
+            .from("rides")
+            .select("id, name, slug, category, park_id")
+            .eq("id", item.entity_id)
+            .single();
+          entity = data;
+        } else if (item.entity_type === "company") {
+          const { data } = await supabase
+            .from("companies")
+            .select("id, name, slug, company_type")
+            .eq("id", item.entity_id)
+            .single();
+          entity = data;
+        }
+
+        return { ...item, entity };
+      })
+    );
+
+    setItems(enrichedItems);
+    setLoading(false);
+  };
+
+  const getEntityUrl = (item: EnrichedListItem) => {
     if (!item.entity) return "#";
     
     const entity = item.entity as { slug?: string };
@@ -27,11 +89,11 @@ export function ListDisplay({ list }: ListDisplayProps) {
     return "#";
   };
 
-  if (isLoading) {
+  if (loading) {
     return <div className="text-center py-4 text-muted-foreground">Loading...</div>;
   }
 
-  if (!items || items.length === 0) {
+  if (items.length === 0) {
     return (
       <div className="text-center py-8 text-muted-foreground">
         This list is empty. Click "Edit" to add items.