Replaced custom filter minute field with duration picker

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -66,7 +66,6 @@ const getUnavailableTimeInMinutes = (room: Room) => {
     const nextEvent = room.busy!.find((b) => b.start === nextStartDate);
     const end = DateTime.fromISO(nextEvent!.end!);
 
-    console.log(end, 'end');
     console.log(getNextCalendarEvent(room), 'etNextCalendarEvent(room)');
 
     const now = DateTime.now();
@@ -261,6 +260,7 @@ interface Props {
     bookRoom: () => void;
     duration: number;
     additionalDuration: number;
+    setAdditionalDuration: (minutes: number) => void;
     onAddTime: (minutes: number) => void;
     onAddTimeUntilHalf: () => void;
     onAddTimeUntilFull: () => void;
@@ -269,7 +269,6 @@ interface Props {
     room?: Room;
     startingTime: string;
     setBookingDuration: (minutes: number) => void;
-    setAdditionalDuration: (minutes: number) => void;
     setDuration: React.Dispatch<React.SetStateAction<number>>;
     setExpandDurationTimePickerDrawer: (show: boolean) => void;
     setStartingTime: (s: string) => void;
@@ -334,14 +333,14 @@ const BookingDrawer = (props: Props) => {
         room,
         duration,
         additionalDuration,
+        setAdditionalDuration,
         onAddTime,
         onAddTimeUntilHalf,
         onAddTimeUntilFull,
         onAddTimeUntilNext,
         availableMinutes,
         startingTime,
         setBookingDuration,
-        setAdditionalDuration,
         setDuration,
         setExpandDurationTimePickerDrawer,
         setStartingTime
@@ -526,7 +525,9 @@ const BookingDrawer = (props: Props) => {
                         </AvailableText>
                     </RowCentered>
                     <Row>
-                        <SmallText>quick duration selection</SmallText>
+                        <SmallText>
+                            quick duration selection (Minutes)
+                        </SmallText>
                     </Row>
 
                     <DurationPicker

frontend/src/components/BookingDrawer/DurationPicker.tsx

@@ -74,7 +74,7 @@ const DurationPicker = (props: DurationPickerProps) => {
                     value={quickDuration}
                     aria-label={toHourMinuteFormat(quickDuration)}
                 >
-                    {toHourMinuteFormat(quickDuration)}
+                    {quickDuration}
                 </DurationButton>
             );
         }
@@ -98,28 +98,28 @@ const DurationPicker = (props: DurationPickerProps) => {
                     value={'15'}
                     aria-label="15 minutes"
                 >
-                    15 min
+                    15
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker30"
                     value={'30'}
                     aria-label="30 minutes"
                 >
-                    30 min
+                    30
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker60"
                     value={'60'}
                     aria-label="1 hour"
                 >
-                    1 h
+                    60
                 </DurationButton>
                 <DurationButton
                     data-testid="DurationPicker120"
                     value={'120'}
                     aria-label="2 hours"
                 >
-                    2 h
+                    120
                 </DurationButton>
                 {CustomDurationValueButton()}
                 <DurationButton

frontend/src/components/BookingView/BookingView.tsx

@@ -157,7 +157,6 @@ function BookingView(props: BookingViewProps) {
             const buildingPreference = preferences.building?.id;
             getRooms(buildingPreference, GET_RESERVED)
                 .then((allRooms) => {
-                    console.log('Setting rooms at update');
                     setRooms(allRooms);
                 })
                 .catch((error) => console.log(error));
@@ -488,11 +487,11 @@ function BookingView(props: BookingViewProps) {
         useState(false);
 
     function maxDuration(room: Room | undefined, startingTime: String) {
-        const mm = availableForMinutes(room, startingTime);
+        const minutesAvailable = availableForMinutes(room, startingTime);
 
         return dayjs()
-            .minute(mm % 60)
-            .hour(Math.floor(mm / 60));
+            .minute(minutesAvailable % 60)
+            .hour(Math.floor(minutesAvailable / 60));
     }
 
     const handleUntilHalf = () => {
@@ -622,14 +621,14 @@ function BookingView(props: BookingViewProps) {
                     room={selectedRoom}
                     duration={getBookingDuration()}
                     additionalDuration={additionalDuration}
+                    setAdditionalDuration={setAdditionalDuration}
                     availableMinutes={availableMinutes}
                     onAddTime={handleAdditionalDurationChange}
                     onAddTimeUntilHalf={handleUntilHalf}
                     onAddTimeUntilFull={handleUntilFull}
                     onAddTimeUntilNext={handleUntilNextDurationChange}
                     startingTime={startingTime}
                     setBookingDuration={setBookingDuration}
-                    setAdditionalDuration={setAdditionalDuration}
                     setDuration={setDuration}
                     setExpandDurationTimePickerDrawer={
                         setExpandDurationTimePickerDrawer
@@ -805,9 +804,15 @@ function BookingView(props: BookingViewProps) {
                         setOnlyFavourites={setOnlyFavourites}
                         filterCount={filterCount}
                         allFeatures={allFeatures}
-                        duration={duration}
+                        duration={getBookingDuration()}
                         setDuration={setDuration}
                         onChange={handleDurationChange}
+                        additionalDuration={additionalDuration}
+                        setBookingDuration={setBookingDuration}
+                        setAdditionalDuration={setAdditionalDuration}
+                        setExpandDurationTimePickerDrawer={
+                            setExpandDurationTimePickerDrawer
+                        }
                     />
                 </div>
             </Box>

frontend/src/components/BookingView/FilteringDrawer.tsx

@@ -5,13 +5,13 @@ import TextField from '@mui/material/TextField';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import SearchIcon from '@mui/icons-material/Search';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import InputAdornment from '@mui/material/InputAdornment';
 import styled from '@mui/styled-engine';
 import { useUserSettings } from '../../contexts/UserSettingsContext';
 import { COLORS } from '../../theme_2024';
 import BottomDrawer, { DrawerContent } from '../BottomDrawer/BottomDrawer';
 import { Bookmark, BookmarkBorder } from '@mui/icons-material';
+import DurationPicker from '../BookingDrawer/DurationPicker';
 
 export const Row = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -46,6 +46,10 @@ interface Props {
     onChange: (duration: number) => void;
     duration: number;
     setDuration: React.Dispatch<React.SetStateAction<number>>;
+    setExpandDurationTimePickerDrawer: (show: boolean) => void;
+    additionalDuration: number;
+    setAdditionalDuration: (minutes: number) => void;
+    setBookingDuration: (minutes: number) => void;
 }
 
 // Note: Actual filtering of the rooms is done one level up in booking view
@@ -66,7 +70,10 @@ const FilteringDrawer = (props: Props) => {
         allFeatures,
         onChange,
         duration,
-        setDuration
+        setDuration,
+        additionalDuration,
+        setAdditionalDuration,
+        setBookingDuration
     } = props;
 
     const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
@@ -116,11 +123,22 @@ const FilteringDrawer = (props: Props) => {
     const handleCustomFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
         setCustomFilter(event.target.value);
     };
+    const handleDurationChange = (newDuration: number) => {
+        if (newDuration !== -1) {
+            setBookingDuration(newDuration);
+        } else {
+            setDuration(duration);
+        }
+        setAdditionalDuration(0);
+    };
 
     const handleCustomDuration = (
-        event: React.ChangeEvent<HTMLInputElement>
+        event: React.MouseEvent<HTMLElement>,
+        customDuration: string
     ) => {
-        let value = parseInt(event.target.value);
+        if (customDuration === 'Custom') {
+        }
+        let value = parseInt(customDuration);
         if (!isNaN(value)) {
             value = Math.max(0, value);
             setDuration(value);
@@ -166,14 +184,13 @@ const FilteringDrawer = (props: Props) => {
                     <Row>
                         <SmallText>Custom Duration (Minutes)</SmallText>
                     </Row>
-
-                    <TextField
-                        size="small"
-                        type="number"
-                        placeholder="Give duration in minutes"
-                        inputProps={{ min: 0, max: 1439 }}
-                        value={duration}
-                        onChange={handleCustomDuration}
+                    <DurationPicker
+                        onChange={handleDurationChange}
+                        bookingDuration={duration}
+                        setExpandDurationTimePickerDrawer={
+                            props.setExpandDurationTimePickerDrawer
+                        }
+                        additionalDuration={additionalDuration}
                     />
 
                     <Row>

frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx

@@ -72,6 +72,8 @@ const DurationTimePickerDrawer = (props: DurationTimePickerDrawerProps) => {
         setExpandDurationTimePickerDrawer(false);
     };
 
+    const nowValue = dayjs(nowDate() + ' ' + time);
+
     return (
         <BottomDrawer
             headerTitle={'Custom duration'}
@@ -92,7 +94,7 @@ const DurationTimePickerDrawer = (props: DurationTimePickerDrawerProps) => {
                                 setTime(val ? getHourMinute(val) : '03:00');
                             }}
                             ampm={false}
-                            value={dayjs(nowDate() + ' ' + time)}
+                            value={nowValue}
                             maxTime={maxDuration}
                             data-testid="CustomDurationClock"
                         />

frontend/src/components/GetARoomForm/GetARoomForm.tsx

@@ -9,7 +9,6 @@ var GetARoomForm = ({ children }: Props) => {
     return (
         <Box component="form" noValidate>
             {children}
-            after
         </Box>
     );
 };

frontend/src/components/util/AvailableTime.tsx

@@ -4,15 +4,12 @@ import { Room } from '../../types';
 export function availableForMinutes(
     room: Room | undefined,
     startingTime: String
-) {
-    if (room === undefined) {
-        return 0;
-    }
-
+): number {
     let availableUntil: DateTime<true> | DateTime<false> = DateTime.now()
         .set({ hour: 23, minute: 59 })
         .toUTC();
-    if (room.nextCalendarEvent) {
+
+    if (room && room.nextCalendarEvent) {
         availableUntil = DateTime.fromISO(room.nextCalendarEvent).toUTC();
     }