feat: improve search functionality and display talks sorted by room and time

Author: LiliGC

src/app/talks/page.js

@@ -6,6 +6,7 @@ import Link from "next/link";
 import allTalks from "@/data/talks";
 import cityData from "@/data/cities";
 import EmptyState from "@/components/EmptyState";
+import { FaSearch } from "react-icons/fa";
 
 export default function TalksPage() {
   const [selectedCity, setSelectedCity] = useState("");
@@ -25,18 +26,18 @@ export default function TalksPage() {
   const filteredTalks = allTalks.filter((talk) => {
     const cityInfo = cityData[talk.city];
     const searchTerms = debouncedSearch.toLowerCase();
-
+    
     const cityMatch = !selectedCity || talk.city === selectedCity;
-    const categoryMatch =
-      !selectedCategory || talk.category === selectedCategory;
-    const dateMatch = selectedDay ? cityInfo.date === selectedDay : true;
-
+    const categoryMatch = !selectedCategory || talk.category === selectedCategory;
+    const dateMatch = selectedDay ? cityInfo?.date === selectedDay : true;
+    
     const searchMatch =
       talk.title.toLowerCase().includes(searchTerms) ||
       talk.description.toLowerCase().includes(searchTerms) ||
-      talk.tags?.some((tag) => tag.toLowerCase().includes(searchTerms)) ||
-      talk.speaker.name.toLowerCase().includes(searchTerms);
-
+      (talk.tags && talk.tags.some(tag => tag.toLowerCase().includes(searchTerms))) ||
+      (talk.speaker?.name && talk.speaker.name.toLowerCase().includes(searchTerms)) ||
+      (talk.speakers && talk.speakers.some(s => s.name.toLowerCase().includes(searchTerms)));
+    
     return cityMatch && categoryMatch && dateMatch && searchMatch;
   });
 
@@ -99,7 +100,8 @@ export default function TalksPage() {
           ))}
         </div>
       </div>
-      {/* Filtros de charlas */}
+      
+      {/* Filtros de charlas (estructura original) */}
       <div className="mb-8 backdrop-blur-sm rounded-lg p-4 md:p-6">
         <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between">
           <div className="flex items-center gap-2 flex-wrap">
@@ -125,7 +127,6 @@ export default function TalksPage() {
               <option value="tecnica">Técnica</option>
               <option value="comunidad">Comunidad</option>
               <option value="caso-de-exito">Caso de Éxito</option>
-              <option value="keynote">Keynote</option>
             </select>
           </div>
           <div className="relative">
@@ -136,73 +137,51 @@ export default function TalksPage() {
               onChange={(e) => setSearchQuery(e.target.value)}
               className="text-py-text border border-py-text/20 rounded pl-9 pr-3 py-1.5 w-full md:w-64 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
             />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-4 w-4 absolute left-3 top-2 text-py-text/60"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
+            <FaSearch className="h-4 w-4 absolute left-3 top-2 text-py-text/60" />
           </div>
         </div>
       </div>
 
-      {/* Renderizado de charlas */}
+      {/* Renderizado agrupado por sala */}
       {filteredTalks.length > 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredTalks.map((talk) => {
-            const cityInfo = cityData[talk.city];
-            return (
-              <TalkCard
-                key={talk.id}
-                talk={{
-                  ...talk,
-                  date: cityInfo.date,
-                  location: cityInfo.name,
-                  cityInfo: cityInfo,
-                }}
-              />
-            );
-          })}
-        </div>
+        Object.entries(
+          filteredTalks.reduce((acc, talk) => {
+            const room = talk.room || "Sala no asignada";
+            if (!acc[room]) acc[room] = [];
+            acc[room].push(talk);
+            return acc;
+          }, {})
+        ).map(([roomName, talksInRoom]) => {
+          // Ordena por hora dentro de la sala
+          const sortedTalks = talksInRoom.sort((a, b) =>
+            a.time.localeCompare(b.time)
+          );
+
+          return (
+            <div key={roomName} className="mb-12">
+              <h2 className="text-xl font-bold mb-4 text-py-green">{roomName}</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {sortedTalks.map((talk) => {
+                  const cityInfo = cityData[talk.city];
+                  return (
+                    <TalkCard
+                      key={talk.id}
+                      talk={{
+                        ...talk,
+                        date: cityInfo.date,
+                        location: cityInfo.name,
+                        cityInfo: cityInfo,
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })
       ) : (
         <EmptyState context="global" />
       )}
-
-      {/* TODO: API para que funcione: */}
-      {/* Subscribe for updates */}
-      {/* <div className="mt-16 bg-green-800/30 backdrop-blur-sm rounded-lg p-6 md:p-8">
-        <div className="max-w-4xl mx-auto">
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
-            <div>
-              <h3 className="text-xl md:text-2xl font-bold mb-2">
-                ¿Quieres recibir actualizaciones?
-              </h3>
-              <p className="text-sm md:text-base text-white/80">
-                Suscríbete para recibir notificaciones sobre nuevas charlas y
-                cambios en el programa.
-              </p>
-            </div>
-            <div className="flex flex-col sm:flex-row gap-3">
-              <input
-                type="email"
-                placeholder="Tu correo electrónico"
-                className="bg-black/30 text-white border border-white/20 rounded px-4 py-2 w-full sm:w-64 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
-              />
-              <button className="btn-primary whitespace-nowrap py-2">
-                Suscribirse
-              </button>
-            </div>
-          </div>
-        </div>
-      </div> */}
     </div>
   );
-}
+}