Select rooms by slug (#15)

Author: reivilibre

src/components/schedule/EventList.tsx

@@ -18,7 +18,7 @@ interface IGroupHeaderProps {
   index: number;
 }
 
-const getRoomName = () => {
+const getRoomSlug = () => {
   const urlParams = new URLSearchParams(window.location.search);
   return urlParams.get('room');
 };
@@ -40,10 +40,11 @@ const EventList = () => {
   const error = useSelector(selectError);
   const schedule = useSelector(selectSchedule);
   const dispatch = useDispatch();
+  // Room slug
   const [room, setRoom] = useState<string | null>(null);
 
   const fetchData = useCallback(async () => {
-    const selectedRoom = getRoomName();
+    const selectedRoom = getRoomSlug();
     setRoom(selectedRoom);
     dispatch(getScheduleAsync(selectedRoom));
   }, [dispatch]);

src/reducer/schedulesSlice.ts

@@ -122,7 +122,7 @@ export const scheduleSlice = createSlice({
   }
 });
 
-export const getScheduleAsync = debounceAction((roomName: string): AppThunk => {
+export const getScheduleAsync = debounceAction((roomSlug: string): AppThunk => {
   return async (dispatch: any) => {
     dispatch(scheduleSlice.actions.setIsLoading(true));
     try {
@@ -140,7 +140,7 @@ export const getScheduleAsync = debounceAction((roomName: string): AppThunk => {
         // Build up a map of events by day
         for (const dayElement of dom.querySelectorAll('day').values()) {
           const dateOfDay = dayElement.attributes.getNamedItem('date')?.nodeValue as string;
-          const eventsOfDay = mapEvents(dayElement.querySelectorAll(`room${roomName ? `[name='${roomName}']` : ''} event`), dateOfDay);
+          const eventsOfDay = mapEvents(dayElement.querySelectorAll(`room${roomSlug ? `[slug='${roomSlug}']` : ''} event`), dateOfDay);
           events[dateOfDay] = eventsOfDay;
         }