added booking function to fetch data to blockout selection days and time

scheduler_app/app/(routes)/[business]/_components/MeetingEventSelection.js

@@ -7,7 +7,7 @@ import { format } from "date-fns";
 import TimeDateSelection from "./TimeDateSelection";
 import { Button } from "@/components/ui/button";
 import UserFormInfo from "./UserFormInfo";
-import { doc, getFirestore, setDoc } from "firebase/firestore";
+import { collection, doc, getDocs, getFirestore, query, setDoc, where } from "firebase/firestore";
 import { app } from "@/config/FirebaseConfig";
 import { toast } from "sonner";
 
@@ -25,6 +25,9 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
     //setup the next step
     const [nextStep, setNextStep] = useState(1);
 
+    //meeting/event booking
+    const [booking, setBooking] = useState([])
+
     const db = getFirestore(app);
 
     //create time slot
@@ -48,7 +51,8 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
         const day = format(date, 'EEEE')
         if(businessInfo?.availableDays?.[day]){
             setUnavialableTime(true)
-        } else {
+            eventBooking(date)
+        } else{
             setUnavialableTime(false)
         }
     }
@@ -65,20 +69,30 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
         await setDoc(doc(db, 'ScheduleMeeting', docId), {
             businessName: businessInfo.businessName,
             businessEmail: businessInfo.email,
-            selectedTime: selectedTime,
-            selectedDate: date,
             duration: meetingEventInfo.timeDuration,
             urlMeeting: meetingEventInfo.urlMeeting,
             eventId: meetingEventInfo.id,
             id: docId,
             userName: userName,
             userEmail: userEmail,
-            userMessage: userMessage
+            selectedTime: selectedTime,
+            selectedDate: date,
+            userMessage: userMessage          
         }).then(res => {
             toast('Your schedule is created successfully');
         }) 
     }
 
+    //fetch data to block out selection days and time
+    const eventBooking = async (datebooking) => {
+        const q = query(collection(db, 'ScheduleMeeting'), where('selectedDate', '==', datebooking), where('eventId', '==', meetingEventInfo.id));
+        const querySnapshot = await getDocs(q);
+        querySnapshot.forEach((doc) => {
+            console.log("--" , doc.data)
+            setBooking(prev => [...prev, doc.data()])
+        })
+    }
+
     useEffect(() => {
         meetingEventInfo?.timeDuration && createTimeSlot(meetingEventInfo?.timeDuration)
     }, [meetingEventInfo])
@@ -101,7 +115,7 @@ const MeetingEventSelection = ({meetingEventInfo, businessInfo}) => {
                 </div>
             </div>
             {nextStep == 1 ?
-                <TimeDateSelection date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange}  setSelectedTime={setSelectedTime} timeSlots={timeSlots} selectedTime={selectedTime}/>
+                <TimeDateSelection booking={booking} date={date} unavialableTime={unavialableTime} handleDatechange={handleDatechange}  setSelectedTime={setSelectedTime} timeSlots={timeSlots} selectedTime={selectedTime}/>
                 : 
                 <UserFormInfo setUserName={setUserName} setUserEmail={setUserEmail} setUserMessage={setUserMessage}/>
             }

scheduler_app/app/(routes)/[business]/_components/TimeDateSelection.js

@@ -1,7 +1,14 @@
 import { Calendar } from "@/components/ui/calendar"
 import React from 'react'
 
-const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime, selectedTime}) => {
+
+
+const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime, selectedTime, booking}) => {
+  const checkTimeSlot = (time) => {
+    return (booking.filter(item => item.selectedTime == time)).length > 0
+  }
+
+  
   return (
     <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
         <div className="flex flex-col">
@@ -10,7 +17,7 @@ const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime,
         </div>
         <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
             {timeSlots?.map((time, index) => (
-                <button disabled={!unavialableTime} onClick={() => setSelectedTime(time)} className={`text-xs p-2 border rounded-md hover:bg-gray-100 ${time == selectedTime && 'bg-gray-200'}`}>{time}</button>
+                <button key={index} disabled={!unavialableTime || checkTimeSlot(time)} onClick={() => setSelectedTime(time)} className={`text-xs p-2 border rounded-md hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-200 ${time == selectedTime && 'bg-gray-200'}`}>{time}</button>
             ))}
         </div>
     </div>

scheduler_app/app/layout.js

@@ -5,7 +5,7 @@ import { Toaster } from "sonner";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Scheduler.Me",
+  title: "Schedule.Me",
   description: "Generated by create next app",
 };