fix session badge in agenda

Author: Yaidi

src/components/agenda/AgendaItem.tsx

@@ -23,7 +23,7 @@ const AgendaItem: React.FC<AgendaItemProps> = ({ icon: Icon, title, time }) => {
                 <p className="font-medium text-primary-800">{title}</p>
                 {
                     time.map((timeString, index) => (
-                        <time key={`time-${index}`} className={`flex ${isSingleTime ? "md:flex-col lg:flex-row lg:gap-2" : "md:flex-col lg:flex-row flex-wrap lg:gap-2"} text-primary-600 text-sm leading-tight`}>
+                        <time key={`time-${index}`} className={`flex gap-1 md:gap-0.5 lg:gap-x-2 lg:gap-y-1 ${isSingleTime ? "md:flex-col  lg:flex-row " : "md:flex-col lg:flex-row flex-wrap"} text-primary-600 justify-center text-sm leading-tight`}>
                             <span>{splitTime(timeString).start}</span>
                             {splitTime(timeString).end && <span aria-label="a" className="text-xs">-</span>}
                             <span>{splitTime(timeString).end}</span>

src/components/session/SessionCard.tsx

@@ -4,6 +4,7 @@ import {Speech} from "lucide-react";
 import React from "react";
 
 const SessionCard = ({session}) => {
+    const category = session.category
   return (
       <Card className="py-8 px-6 flex flex-col gap-4">
           <h2 className="text-3xl font-bold text-alternative-700">
@@ -15,7 +16,7 @@ const SessionCard = ({session}) => {
           <span className="text-lg text-primary-600 font-semibold">Descripción</span>
           <p className="text-lg text-gray-700">{session.description}</p>
           <CardFooter className="p-0">
-              <Badge variant="default" className="flex gap-2"><Speech/> Track: {session.category}</Badge>
+              <Badge variant="default" className="flex gap-2"><Speech/> Track: {category}</Badge>
           </CardFooter>
       </Card>
   )

src/context/AppContext.tsx

@@ -1,16 +1,16 @@
 import { createContext, useContext, useState, useEffect } from "react";
-import {ISession, ISpeaker} from "@/types/speakers.ts";
+import {ISession, ISessionInfo, ISpeaker} from "@/types/speakers.ts";
 import {getAll} from "@/https/fetch.ts";
 import {AppStatus} from "@/types/types.ts";
-import {addSessionSpeakers} from "@/lib/utils.ts";
+import {addSessionSpeakers, getCategoryNameSessions} from "@/lib/utils.ts";
 import {ITimeSlot} from "@/types/agenda.ts";
 import ErrorPage from "@/pages/ErrorPage.tsx";
 import Loading from "@/pages/Loading.tsx";
 
 
 interface AppContextType {
     speakers: ISpeaker[];
-    sessions: ISession[];
+    sessions: ISessionInfo[];
     agenda: ITimeSlot[];
     appStatus: AppStatus;
     setAgenda: (agenda: ITimeSlot[]) => void;
@@ -27,7 +27,7 @@ export const AppProvider = ({ children }) => {
     const [agenda, setAgenda] = useState<ITimeSlot[]>([]);
     const [appStatus, setAppStatus] = useState(AppStatus.Loading);
     const [displayAll, setDisplayAll] = useState<boolean>(true);
-    const [sessions, setSessions] = useState<ISession[]>([]);
+    const [sessions, setSessions] = useState<ISessionInfo[]>([]);
     const [savedSessions, setSavedSessions] = useState<Set<number>>(() => {
         const raw = localStorage.getItem("savedSessions");
         return raw ? new Set<number>(JSON.parse(raw)) : new Set<number>();
@@ -40,13 +40,14 @@ export const AppProvider = ({ children }) => {
     useEffect(() => {
         getAll()
             .then((data) => {
+                const categories = data.categories[0].items
                 const getSpeakersWithSessions = addSessionSpeakers(
                     data.sessions,
                     data.speakers,
-                    data.categories[0].items
+                    categories
                 );
                 setSpeakers(getSpeakersWithSessions);
-                setSessions(data.sessions);
+                setSessions(getCategoryNameSessions(categories, data.sessions));
                 setAppStatus(AppStatus.Success);
             })
             .catch(() => {

src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
-import {ICategory, ISession, ISpeaker} from "@/types/speakers.ts";
+import {ICategory, ISession, ISessionInfo, ISpeaker} from "@/types/speakers.ts";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -34,6 +34,16 @@ export const addSessionSpeakers = (sessions: ISession[], speakers: ISpeaker[], c
   });
 }
 
+export const getCategoryNameSessions = (categories: ICategory[], sessions: ISession[]): ISessionInfo[] => {
+    return sessions.map(session => {
+        const category = categories.find(category => session.categoryItems.includes(category.id));
+        return {
+            ...session,
+            category: category ? category.name : ""
+        }
+    })
+}
+
 export const findSpeaker = (speakers: ISpeaker[], id: string) => speakers.find((speaker) => speaker.id === id);
 
 export const formatTime =(timeString: string) => {

src/types/speakers.ts

@@ -27,6 +27,10 @@ export interface ISession {
     categoryItems: number[]
 }
 
+export interface ISessionInfo extends ISession {
+    category: string
+}
+
 export interface ILink {
     title: string
     url: string