Fetch concerts from Supabase and update concert selection logic

ventaboletos/src/pages/index.js

@@ -1,21 +1,50 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { supabaseClient } from "@/utils/supabase";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-const concerts = [
+/*const concerts = [
   { id: 1, name: "Concierto Fake", location: "Arena Xalapa" },
   { id: 2, name: "Concierto Fake", location: "Arena Xalapa" },
   { id: 3, name: "Concierto Fake", location: "Arena Xalapa" },
-];
+];*/
 
 export default function ConcertList() {
   const [open, setOpen] = useState(false);
-  const [selectedConcert, setSelectedConcert] = useState(null);
+  const [conciertos, setConciertos] = useState([]);
+  const [selectedConcierto, setSelectedConcierto] = useState(null);
   const [seatType, setSeatType] = useState("");
 
-  const handleSelect = (concert) => {
-    setSelectedConcert(concert);
+  useEffect(() => {
+    fetchConciertos();
+  }, []);
+
+  const fetchConciertos = async () => {
+    let { data: conciertos, error } = await supabaseClient
+      .from("conciertos")
+      .select("*");
+    if (error) {
+      console.error(error);
+    } else {
+      setConciertos(conciertos);
+      console.log(conciertos);
+    }
+  };
+
+  const handleSelect = (concierto) => {
+    setSelectedConcierto(concierto);
     setOpen(true);
   };
 
@@ -27,14 +56,17 @@ export default function ConcertList() {
         <Button variant="outline">Reportes</Button>
       </div>
       <div className="space-y-4">
-        {concerts.map((concert) => (
-          <div key={concert.id} className="flex items-center gap-4 p-4 border rounded-lg">
+        {conciertos.map((concierto) => (
+          <div
+            key={concierto.id}
+            className="flex items-center gap-4 p-4 border rounded-lg"
+          >
             <div className="w-16 h-16 bg-gray-300" />
             <div>
-              <p className="text-lg font-semibold">{concert.name}</p>
-              <p className="text-sm text-gray-600">{concert.location}</p>
+              <p className="text-lg font-semibold">{concierto.nombre}</p>
+              <p className="text-sm text-gray-600">{concierto.fecha}</p>
             </div>
-            <Button className="ml-auto" onClick={() => handleSelect(concert)}>
+            <Button className="ml-auto" onClick={() => handleSelect(concierto)}>
               Seleccionar
             </Button>
           </div>
@@ -43,8 +75,10 @@ export default function ConcertList() {
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{selectedConcert?.name}</DialogTitle>
-            <p className="text-sm text-gray-600">{selectedConcert?.location}</p>
+            <DialogTitle>{selectedConcierto?.name}</DialogTitle>
+            <p className="text-sm text-gray-600">
+              {selectedConcierto?.location}
+            </p>
           </DialogHeader>
           <div className="space-y-4">
             <Select onValueChange={setSeatType}>
@@ -58,7 +92,9 @@ export default function ConcertList() {
             </Select>
           </div>
           <div className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancelar
+            </Button>
             <Button> Aceptar</Button>
           </div>
         </DialogContent>