fix show durations in bookingdrawer

Vincit · Jun 26, 2024 · 9da87b8 · 9da87b8
1 parent fa3828c
commit 9da87b8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -4,7 +4,7 @@
     "description": "",
     "main": "src/app.ts",
     "engines": {
-        "node": ">=20.14.0"
+        "node": ">=20.12.2"
     },
     "scripts": {
         "test": "jest",

diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
@@ -10,6 +10,7 @@ import RoomCard from '../RoomCard/RoomCard';
 import NoRoomsCard from '../RoomCard/NoRoomsCard';
 import BookingDrawer from '../BookingDrawer/BookingDrawer';
 import TimePickerDrawer from '../TimePickerDrawer/TimePickerDrawer';
+
 const SKIP_CONFIRMATION = true;
 
 const TimePickerButton = styled(ToggleButton)(() => ({
@@ -81,6 +82,8 @@ type BookingListProps = {
     setPreferences: (pref: Preferences) => void;
     startingTime: string;
     setStartingTime: (newStartingTime: string) => void;
+    setBookingDuration: (minutes: number) => void;
+    setDuration: React.Dispatch<React.SetStateAction<number>>;
 };
 
 const AvailableRoomList = (props: BookingListProps) => {
@@ -94,7 +97,9 @@ const AvailableRoomList = (props: BookingListProps) => {
         preferences,
         setPreferences,
         startingTime,
-        setStartingTime
+        setStartingTime,
+        setBookingDuration,
+        setDuration
     } = props;
     const { createSuccessNotification, createErrorNotification } =
         useCreateNotification();
@@ -279,6 +284,9 @@ const AvailableRoomList = (props: BookingListProps) => {
                     onAddTimeUntilFull={handleUntilFull}
                     onAddTimeUntilNext={handleUntilNextDurationChange}
                     startingTime={startingTime}
+                    bookingDuration={bookingDuration}
+                    setBookingDuration={setBookingDuration}
+                    setDuration={setDuration}
                 />
                 <TimePickerDrawer
                     open={expandTimePickerDrawer}

diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
@@ -10,6 +10,7 @@ import SwipeableEdgeDrawer, {
 import { Room } from '../../types';
 import { getTimeLeft, getTimeLeftMinutes2 } from '../util/TimeLeft';
 import { theme } from '../../theme';
+import DurationPicker from './DurationPicker';
 
 const MIN_DURATION = 15;
 
@@ -174,6 +175,9 @@ interface Props {
     availableMinutes: number;
     room?: Room;
     startingTime: string;
+    bookingDuration: number;
+    setBookingDuration: (minutes: number) => void;
+    setDuration: React.Dispatch<React.SetStateAction<number>>;
 }
 
 const BookingDrawer = (props: Props) => {
@@ -189,14 +193,21 @@ const BookingDrawer = (props: Props) => {
         onAddTimeUntilFull,
         onAddTimeUntilNext,
         availableMinutes,
-        startingTime
+        startingTime,
+        bookingDuration,
+        setBookingDuration,
+        setDuration
     } = props;
 
     useEffect(() => {
         updateHalfHour();
         updateFullHour();
     });
 
+    const handleDurationChange = (newDuration: number) => {
+        setBookingDuration(newDuration);
+    };
+
     // Placeholder values
     const [nextHalfHour, setNextHalfHour] = useState('00:30');
     const [nextFullHour, setNextFullHour] = useState('01:00');
@@ -305,6 +316,14 @@ const BookingDrawer = (props: Props) => {
                 }}
             >
                 <DrawerContent>
+                    <RowCentered>
+                        <DurationPicker
+                            duration={duration}
+                            setDuration={setDuration}
+                            onChange={handleDurationChange}
+                            title="duration"
+                        />
+                    </RowCentered>
                     <RowCentered>
                         <TimeTextBold>
                             {minutesToSimpleString(

diff --git a/...components/BookingView/DurationPicker.tsx → ...mponents/BookingDrawer/DurationPicker.tsx b/...components/BookingView/DurationPicker.tsx → ...mponents/BookingDrawer/DurationPicker.tsx
diff --git a/frontend/src/components/BookingView/BookingView.tsx b/frontend/src/components/BookingView/BookingView.tsx
@@ -502,6 +502,8 @@ function BookingView(props: BookingViewProps) {
                     expandedFeaturesAll={expandedFeaturesAll}
                     preferences={preferences}
                     setPreferences={setPreferences}
+                    setBookingDuration={setBookingDuration}
+                    setDuration={setDuration}
                 />
             )}