Release/summer 2024

frontend/src/components/App.tsx

@@ -10,7 +10,10 @@ import { UserSettingsProvider } from '../contexts/UserSettingsContext';
 import { clarity } from 'react-microsoft-clarity';
 import GETAROOM_ENV from '../util/getARoomEnv';
 
-export const GarApp = styled(Divider)(() => ({}));
+export const GarApp = styled(Divider)(() => ({
+    width: '100%',
+    height: '100%'
+}));
 
 const App = () => {
     if (GETAROOM_ENV().VITE_CLARITY_ID != null) {

frontend/src/components/AvailableRoomList/AvailableRoomList.test.tsx

@@ -119,6 +119,7 @@ describe('AvailableRoomList', () => {
         },
         selectedRoom: fakeRooms[0]
     };
+
     it('renders room data', async () => {
         render(
             <AvailableRoomList

frontend/src/components/AvailableRoomList/AvailableRoomList.tsx

@@ -1,7 +1,7 @@
-import { Box, List, ToggleButton, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Box, List, ToggleButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { Booking, Preferences, Room } from '../../types';
+import { Preferences, Room } from '../../types';
 import RoomCard from '../RoomCard/RoomCard';
 import NoRoomsCard from '../RoomCard/NoRoomsCard';
 import { sortByFavoritedAndName } from '../../util/arrayUtils';
@@ -20,26 +20,14 @@ const TimePickerButton = styled(ToggleButton)(() => ({
     }
 }));
 
-export async function isFavorited(room: Room, pref?: Preferences) {
-    try {
-        if (pref === undefined || pref.fav_rooms === undefined) {
-            return false;
-        }
-        if (pref.fav_rooms.includes(room.id)) {
-            room.favorited = true;
-        } else {
-            room.favorited = false;
-        }
-    } catch {
-        // add error notification
+function checkIfFavorited(room: Room, pref?: Preferences) {
+    if (pref && pref.fav_rooms) {
+        room.favorited = pref.fav_rooms.includes(room.id);
+    } else {
         room.favorited = false;
     }
 }
 
-function noAvailableRooms(rooms: Room[]) {
-    return rooms.length === 0;
-}
-
 type BookingListProps = {
     bookingDuration: number;
     rooms: Room[];
@@ -67,30 +55,42 @@ const AvailableRoomList = (props: BookingListProps) => {
         selectedRoom
     } = props;
 
+    const [updatedRooms, setUpdatedRooms] = useState<Room[]>([]);
+
+    // Effect to update room favorited status
+    useEffect(() => {
+        const updateFavoritedRooms = () => {
+            const roomsCopy = [...rooms]; // Make a shallow copy of rooms
+            for (const room of roomsCopy) {
+                checkIfFavorited(room, preferences);
+            }
+            setUpdatedRooms(roomsCopy); // Update state after processing all rooms
+        };
+
+        updateFavoritedRooms();
+    }, [rooms, preferences]);
+
     return (
         <Box id="available-room-list">
             <List>
-                {noAvailableRooms(rooms) ? (
+                {updatedRooms.length === 0 ? (
                     <NoRoomsCard />
                 ) : (
-                    sortByFavoritedAndName<Room>(rooms).map((room) =>
-                        isAvailableFor(bookingDuration, room, startingTime)
-                            ? (isFavorited(room, preferences),
-                              (
-                                  <li key={room.id}>
-                                      <RoomCard
-                                          room={room}
-                                          onClick={handleCardClick}
-                                          bookingLoading={bookingLoading}
-                                          disableBooking={false}
-                                          isSelected={selectedRoom === room}
-                                          expandFeatures={expandedFeaturesAll}
-                                          preferences={preferences}
-                                          setPreferences={setPreferences}
-                                      />
-                                  </li>
-                              ))
-                            : null
+                    sortByFavoritedAndName<Room>(updatedRooms).map((room) =>
+                        isAvailableFor(bookingDuration, room, startingTime) ? (
+                            <li key={room.id}>
+                                <RoomCard
+                                    room={room}
+                                    onClick={handleCardClick}
+                                    bookingLoading={bookingLoading}
+                                    disableBooking={false}
+                                    isSelected={selectedRoom === room}
+                                    expandFeatures={expandedFeaturesAll}
+                                    preferences={preferences}
+                                    setPreferences={setPreferences}
+                                />
+                            </li>
+                        ) : null
                     )
                 )}
             </List>

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -162,24 +162,30 @@ export const Alert = (props: {
         return <></>;
     }
     return (
-        <RowAlert>
-            <ColAlertIcon>
-                <span
-                    style={{
-                        color: '#FBFBF6',
-                        fontSize: '20px',
-                        fontFamily: 'Material Icons',
-                        textAlign: 'center',
-                        fontWeight: '400'
-                    }}
-                >
-                    not_interested
-                </span>
-            </ColAlertIcon>
-            <ColAlertMessage>
-                <Typography variant={'body2'}>{props.alertText}</Typography>
-            </ColAlertMessage>
-        </RowAlert>
+        <>
+            {props.showAlert && (
+                <RowAlert>
+                    <ColAlertIcon>
+                        <span
+                            style={{
+                                color: '#FBFBF6',
+                                fontSize: '20px',
+                                fontFamily: 'Material Icons',
+                                textAlign: 'center',
+                                fontWeight: '400'
+                            }}
+                        >
+                            not_interested
+                        </span>
+                    </ColAlertIcon>
+                    <ColAlertMessage>
+                        <Typography variant={'body2'}>
+                            {props.alertText}
+                        </Typography>
+                    </ColAlertMessage>
+                </RowAlert>
+            )}
+        </>
     );
 };
 
@@ -470,7 +476,8 @@ const BookingDrawer = (props: Props) => {
     }, [startingTime]);
 
     useEffect(() => {
-        if (room && DateTime.fromISO(room.nextCalendarEvent) < DateTime.now()) {
+        const date = DateTime.fromFormat(startingTime, 'hh:mm');
+        if (room && date < DateTime.now()) {
             setAlertText(
                 `Room is currently unavailable for ${unavailable}
              minutes. You may book the room in advance. Your starting
@@ -479,8 +486,12 @@ const BookingDrawer = (props: Props) => {
             setStartingTime(getNextAvailableTime(room));
             setShowAlert(true);
             unavailable = getUnavailableTimeInMinutes(room);
+        } else {
+            if (showAlert) {
+                setShowAlert(false);
+            }
         }
-    }, [room]);
+    }, [startingTime]);
 
     return (
         <BottomDrawer

frontend/src/components/BookingDrawer/DurationPicker.tsx

@@ -3,14 +3,10 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { styled, Typography } from '@mui/material';
 
-const DurationButton = styled(ToggleButton)(() => ({
-    padding: '4px 4px'
-}));
+const DurationButton = styled(ToggleButton)(() => ({}));
 
 const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
-    minWidth: '100%',
-    padding: '8px 24px',
-    marginBottom: '0px !important'
+    minWidth: '100%'
 }));
 
 type DurationPickerProps = {
@@ -74,7 +70,7 @@ const DurationPicker = (props: DurationPickerProps) => {
                     value={quickDuration}
                     aria-label={toHourMinuteFormat(quickDuration)}
                 >
-                    {quickDuration}
+                    {quickDuration} min
                 </DurationButton>
             );
         }
@@ -90,36 +86,35 @@ const DurationPicker = (props: DurationPickerProps) => {
                 exclusive
                 onChange={handleChange}
                 aria-label="duration picker"
-                sx={{ marginBottom: '24px' }}
                 fullWidth
             >
                 <DurationButton
                     data-testid="DurationPicker15"
                     value={'15'}
                     aria-label="15 minutes"
                 >
-                    15
+                    15 min
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker30"
                     value={'30'}
                     aria-label="30 minutes"
                 >
-                    30
+                    30 min
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker60"
                     value={'60'}
                     aria-label="1 hour"
                 >
-                    60
+                    60 min
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker120"
                     value={'120'}
                     aria-label="2 hours"
                 >
-                    120
+                    120 min
                 </DurationButton>
                 {CustomDurationValueButton()}
                 <DurationButton