Merge pull request #240 from posadev/add-sala

feat: add sala name

Author: Yaidi

src/components/session/SessionCard.tsx

@@ -6,9 +6,10 @@ import {ISessionInfo} from "@/types/sessions.ts";
 
 interface SessionCardProps {
     session: ISessionInfo
+    room?: string
 }
 
-const SessionCard: React.FC<SessionCardProps> = ({session}) => {
+const SessionCard: React.FC<SessionCardProps> = ({session, room}) => {
     const category = session.category
     const startTime = new Date(session.startsAt).toLocaleTimeString(["en-US"], {hour: '2-digit', minute:'2-digit'})
     const endTime = new Date(session.endsAt).toLocaleTimeString(["en-US"], {hour: '2-digit', minute:'2-digit'})
@@ -20,9 +21,12 @@ const SessionCard: React.FC<SessionCardProps> = ({session}) => {
           <h3 className="text-2xl text-gray-700 font-semibold">
               {session.title}
           </h3>
-          { startTime && endTime &&
-              <h1 className="text-lg font-bold text-alternative-700"><time dateTime={startTime}>{startTime}</time> <span aria-label="a">-</span> <time dateTime={endTime}>{endTime}</time></h1>
-          }
+          <aside className="flex flex-col gap-2" aria-label="Sala y hora" role="group">
+              <h1 className="text-lg font-bold text-alternative-700">Sala: {room}</h1>
+              { startTime && endTime &&
+                  <h1 className="text-lg font-bold text-alternative-700"><time dateTime={startTime}>{startTime}</time> <span aria-label="a">-</span> <time dateTime={endTime}>{endTime}</time></h1>
+              }
+          </aside>
           <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">

src/components/session/SessionTracks.tsx

@@ -5,22 +5,30 @@ import {Speech} from "lucide-react";
 import {Badge} from "@/components/ui/badge.tsx";
 import {formatTiemstamp} from "@/lib/utils.ts";
 import {ISessionInfo} from "@/types/sessions.ts";
+import {IRoom} from "@/types/speakers.ts";
 
 interface SessionTracksProps {
     currentSession?: ISessionInfo
     sessions: ISessionInfo[]
     category: string
+    rooms: IRoom[]
 }
 
-const SessionTracks: React.FC<SessionTracksProps> = ({sessions, category, currentSession}) => {
+const SessionTracks: React.FC<SessionTracksProps> = ({sessions, category, currentSession, rooms}) => {
     const tracks = sessions.filter(session => session.category === category && session.id !== currentSession.id);
+
+    const findRoomName = (id: string) => {
+        return rooms.find(room => room.id === Number(id)).name
+    }
+
     return (
       <Card className="py-8 px-6 flex flex-col gap-6 md:gap-8">
           <Badge variant="alternative" className="flex gap-2"><Speech/> Charlas de {category}</Badge>
           <div className="grid md:grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-6 w-full h-full">
           {
               tracks.map(session => (
                     <article className="flex flex-col gap-y-2 h-full" key={`track-${session.id}`}>
+                        <h3 className="text-xl font-bold text-alternative-700 px-2">Sala: {findRoomName(session.roomId)}</h3>
                         <h3 className="text-xl font-bold text-alternative-700 px-2 flex gap-2">
                             <time>{formatTiemstamp(session.startsAt)}</time>
                             <span aria-label="a">-</span>

src/components/speakers/SpeakerInfo.tsx

@@ -11,15 +11,17 @@ import Shared from "@/components/Shared.tsx";
 import Loading from "@/pages/Loading.tsx";
 import SessionCard from "@/components/session/SessionCard.tsx";
 import SessionTracks from "@/components/session/SessionTracks.tsx";
+import {ISession} from "@/types/sessions.ts";
 
 const SpeakerInfo = () => {
     const navigate = useNavigate()
     const location = useLocation();
     const { speakerId } = useParams();
-    const { speakers, sessions } = useAppContext();
+    const { speakers, sessions, rooms } = useAppContext();
     const speaker = location.state?.speaker as ISpeaker;
     const [currentSpeaker, setCurrentSpeaker] = useState<ISpeaker>()
     const fullUrl = `${window.location.origin}${location.pathname}${location.search}${location.hash}`;
+    const getRoomName = (session: ISession) => rooms.find(room => room.id == Number(session.roomId)).name;
 
     useEffect(() => {
         scrollToTop()
@@ -78,12 +80,12 @@ const SpeakerInfo = () => {
 
               {
                   currentSpeaker.sessions.map(session => (
-                      <SessionCard key={session.id} session={session}/>
+                      <SessionCard key={session.id} session={session} room={getRoomName(session)}/>
                   ))
               }
           </article>
           { currentSpeaker.sessions.length == 1 &&
-              <SessionTracks currentSession={currentSpeaker.sessions[0]} sessions={sessions} category={currentSpeaker.sessions[0].category} />
+              <SessionTracks currentSession={currentSpeaker.sessions[0]} sessions={sessions} category={currentSpeaker.sessions[0].category} rooms={rooms} />
           }
       </Gradient>
   )

src/context/AppContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useState, useEffect } from "react";
-import { ISpeaker} from "@/types/speakers.ts";
+import {IRoom, ISpeaker} from "@/types/speakers.ts";
 import {getAll} from "@/https/fetch.ts";
 import {AppStatus} from "@/types/types.ts";
 import {addInformationToSession, addSessionSpeakers} from "@/lib/utils.ts";
@@ -20,6 +20,7 @@ interface AppContextType {
     setSavedSessions: (sessions: Set<number>) => void;
     displayAll: boolean;
     setDisplayAll: (displayAll: boolean) => void;
+    rooms: IRoom[];
 }
 
 const AppContext = createContext(null);
@@ -30,6 +31,7 @@ export const AppProvider = ({ children }) => {
     const [appStatus, setAppStatus] = useState(AppStatus.Loading);
     const [displayAll, setDisplayAll] = useState<boolean>(true);
     const [sessions, setSessions] = useState<ISessionInfo[]>([]);
+    const [rooms, setRooms] = useState<IRoom[]>([]);
     const [error, setError] = useState<Error>(null)
     const [savedSessions, setSavedSessions] = useState<Set<number>>(() => {
         const raw = localStorage.getItem("savedSessions");
@@ -49,6 +51,7 @@ export const AppProvider = ({ children }) => {
                     sessionsInfo,
                     speakers
                 );
+                setRooms(rooms);
                 setSpeakers(getSpeakersWithSessions);
                 setSessions(sessionsInfo);
                 setAppStatus(AppStatus.Success);
@@ -69,7 +72,8 @@ export const AppProvider = ({ children }) => {
         speakers,
         agenda,
         appStatus,
-        setAppStatus
+        setAppStatus,
+        rooms
     };
 
     return (

src/pages/SessionPage.tsx

@@ -9,9 +9,10 @@ import SessionTracks from "@/components/session/SessionTracks.tsx";
 
 const SessionPage = () => {
     const navigate = useNavigate()
-    const {sessions} = useAppContext()
+    const {sessions, rooms} = useAppContext()
     const { sessionId } = useParams();
     const session = sessions.find(session => session.id == Number(sessionId))
+    const getRoom = rooms.find(room => room.id === Number(session?.roomId)).name
 
     const handleGoBack = () => {
         if (window.history.length > 1){
@@ -48,8 +49,8 @@ const SessionPage = () => {
                   {window.history.length > 1 ? "Volver atras" : "Volver a la agenda"}
   </span>
           </button>
-        <SessionCard session={session} />
-          <SessionTracks sessions={sessions} category={session.category} currentSession={session}/>
+        <SessionCard session={session} room={getRoom} />
+          <SessionTracks sessions={sessions} category={session.category} currentSession={session} rooms={rooms}/>
       </Gradient>
   )
 }