Implemented a configurable buffer between events

pages/api/availability/[user].ts

@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import prisma from '../../../lib/prisma';
 import { getBusyTimes } from '../../../lib/calendarClient';
+import dayjs from "dayjs";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     const { user } = req.query
@@ -11,10 +12,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         },
         select: {
             credentials: true,
-            timeZone: true
+            timeZone: true,
+            bufferTime: true
         }
     });
 
-    const availability = await getBusyTimes(currentUser.credentials, req.query.dateFrom, req.query.dateTo);
+    let availability = await getBusyTimes(currentUser.credentials, req.query.dateFrom, req.query.dateTo);
+
+    availability = availability.map(a => ({
+        start: dayjs(a.start).subtract(currentUser.bufferTime, 'minute').toString(),
+        end: dayjs(a.end).add(currentUser.bufferTime, 'minute').toString()
+    }));
+
     res.status(200).json(availability);
 }

pages/api/availability/day.ts

@@ -13,6 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     if (req.method == "PATCH") {
         const startMins = req.body.start;
         const endMins = req.body.end;
+        const bufferMins = req.body.buffer;
 
         const updateDay = await prisma.user.update({
             where: {
@@ -20,10 +21,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             },
             data: {
                 startTime: startMins,
-                endTime: endMins
+                endTime: endMins,
+                bufferTime: bufferMins
             },
         });
 
         res.status(200).json({message: 'Start and end times updated successfully'});
     }
-}
+}

pages/availability/index.tsx

@@ -25,6 +25,8 @@ export default function Availability(props) {
     const startMinsRef = useRef<HTMLInputElement>();
     const endHoursRef = useRef<HTMLInputElement>();
     const endMinsRef = useRef<HTMLInputElement>();
+    const bufferHoursRef = useRef<HTMLInputElement>();
+    const bufferMinsRef = useRef<HTMLInputElement>();
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
@@ -80,15 +82,18 @@ export default function Availability(props) {
         const enteredStartMins = parseInt(startMinsRef.current.value);
         const enteredEndHours = parseInt(endHoursRef.current.value);
         const enteredEndMins = parseInt(endMinsRef.current.value);
+        const enteredBufferHours = parseInt(bufferHoursRef.current.value);
+        const enteredBufferMins = parseInt(bufferMinsRef.current.value);
 
         const startMins = enteredStartHours * 60 + enteredStartMins;
         const endMins = enteredEndHours * 60 + enteredEndMins;
+        const bufferMins = enteredBufferHours * 60 + enteredBufferMins;
 
         // TODO: Add validation
 
         const response = await fetch('/api/availability/day', {
             method: 'PATCH',
-            body: JSON.stringify({start: startMins, end: endMins}),
+            body: JSON.stringify({start: startMins, end: endMins, buffer: bufferMins}),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -298,7 +303,7 @@ export default function Availability(props) {
                                         </h3>
                                         <div>
                                             <p className="text-sm text-gray-500">
-                                                Set the start and end time of your day.
+                                                Set the start and end time of your day and a minimum buffer between your meetings.
                                             </p>
                                         </div>
                                     </div>
@@ -316,7 +321,7 @@ export default function Availability(props) {
                                             <input ref={startMinsRef} type="number" name="minutes" id="minutes" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={convertMinsToHrsMins(props.user.startTime).split(":")[1]} />
                                         </div>
                                     </div>
-                                    <div className="flex">
+                                    <div className="flex mb-4">
                                         <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">End time</label>
                                         <div>
                                             <label htmlFor="hours" className="sr-only">Hours</label>
@@ -328,6 +333,18 @@ export default function Availability(props) {
                                             <input ref={endMinsRef} type="number" name="minutes" id="minutes" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={convertMinsToHrsMins(props.user.endTime).split(":")[1]} />
                                         </div>
                                     </div>
+                                    <div className="flex mb-4">
+                                        <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">Buffer</label>
+                                        <div>
+                                            <label htmlFor="hours" className="sr-only">Hours</label>
+                                            <input ref={bufferHoursRef} type="number" name="hours" id="hours" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="0" defaultValue={convertMinsToHrsMins(props.user.bufferTime).split(":")[0]} />
+                                        </div>
+                                        <span className="mx-2 pt-1">:</span>
+                                        <div>
+                                            <label htmlFor="minutes" className="sr-only">Minutes</label>
+                                            <input ref={bufferMinsRef} type="number" name="minutes" id="minutes" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="10" defaultValue={convertMinsToHrsMins(props.user.bufferTime).split(":")[1]} />
+                                        </div>
+                                    </div>
                                     <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                         <button type="submit" className="btn btn-primary">
                                             Update
@@ -361,7 +378,8 @@ export async function getServerSideProps(context) {
             id: true,
             username: true,
             startTime: true,
-            endTime: true
+            endTime: true,
+            bufferTime: true
         }
     });
 
@@ -381,4 +399,4 @@ export async function getServerSideProps(context) {
     return {
       props: {user, types}, // will be passed to the page component as props
     }
-}
+}

prisma/migrations/20210615153546_added_buffer_time/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "bufferTime" INTEGER NOT NULL DEFAULT 0;

prisma/schema.prisma

@@ -44,6 +44,7 @@ model User {
   weekStart     String? @default("Sunday")
   startTime     Int @default(0)
   endTime       Int @default(1440)
+  bufferTime    Int @default(0)
   createdDate   DateTime  @default(now()) @map(name: "created")
   eventTypes    EventType[]
   credentials   Credential[]
@@ -119,4 +120,4 @@ model Booking {
 
   createdAt     DateTime    @default(now())
   updatedAt     DateTime?
-}
+}