video section notification init added🚨

client/components/button/VideoButtonPatient.tsx → client/components/button/VideoSectionButtonPatient.tsx

@@ -1,44 +1,53 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { ButtonV2 } from './ButtonV2';
 import Image from 'next/image';
 import { Badge } from '@/components/ui/badge'
 import VideoCallModal from '../models/VideoSectionsModel';
+import { useGetSectionsInOneDayPatient } from '@/lib/hooks/video/usePatient';
+import { Skeleton } from '../ui/skeleton';
 
-const VideoButtonPatient = () => {
+const VideoSectionButtonPatient = () => {
+    const { data: upcomingSections, isLoading } = useGetSectionsInOneDayPatient();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    console.log(upcomingSections);
+
+    if(isLoading) return <Skeleton className="w-10 h-10" />
+
     const handleClick = () => {
         console.log('Video button clicked');
     }
 
+
     return (
         <>
             <ButtonV2 variant="ghost" size="icon" className="relative" onClick={handleClick}>
-                {/* <Image
+                 <Image
                     src="/assets/icons/utils/video.svg"
                     width={20}
                     height={20}
                     alt="Video Calls"
                     className="text-muted-foreground"
                 />
-                {upcomingSections.length > 0 && (
+                {upcomingSections!.length > 0 && (
                     <Badge
                         variant="destructive"
                         className="absolute -right-1 -top-1 h-5 w-5 rounded-full p-0 text-xs flex items-center justify-center"
                     >
-                        {upcomingSections.length}
+                        {upcomingSections!.length}
                     </Badge>
-                )} */}
+                )} 
                 <span className="sr-only">View Upcoming Video Calls</span>
             </ButtonV2>
-            {/* <VideoCallModal
+            <VideoCallModal
                 open={isModalOpen}
                 setOpen={setIsModalOpen}
-                sections={upcomingSections}
+                sections={upcomingSections!}
                 link="/video-call" 
-            /> */}
+            />
         </>
     )
 }
 
-export default VideoButtonPatient
+export default memo(VideoSectionButtonPatient)

client/components/layout/NavBar.tsx

@@ -22,7 +22,7 @@ import { useState } from "react";
 import LogoutModel from "../models/LogoutModel";
 import { ButtonV2 } from "../button/ButtonV2";
 import NotificationButtonPatient from "../button/NotificationButtonPatient";
-import VideoButtonPatient from "../button/VideoButtonPatient";
+import VideoSectionButtonPatient from "../button/VideoSectionButtonPatient";
 
 export const NavBar = () => {
   const path = usePathname();
@@ -133,7 +133,7 @@ export const NavBar = () => {
         </SheetContent>
       </Sheet>
       <div className="flex items-center gap-4">
-        <VideoButtonPatient />
+        <VideoSectionButtonPatient />
         <NotificationButtonPatient /> 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>

client/lib/api/video/index.ts

@@ -0,0 +1,23 @@
+import { withTempBaseUrl } from "@/lib/utils/withTempBaseUrl";
+import patientAxiosInstance from "../patient/authorizedRoutes";
+import doctorAxiosInstance from "../doctor/authorizedRoutes";
+
+const patientBaseUrl = `${process.env.NEXT_PUBLIC_API_URL}/video/patient`;
+const doctorBaseUrl = `${process.env.NEXT_PUBLIC_API_URL}/video/doctor`;
+
+export const getSectionsInOneDayPatient = async () => {
+   const response = await withTempBaseUrl(patientAxiosInstance, patientBaseUrl, {
+      method: "GET",
+      url: `/day`,
+   });
+   return response.data;
+};
+
+export const getSectionsInOneDayDoctor = async () => {
+   const response = await withTempBaseUrl(doctorAxiosInstance, doctorBaseUrl, {
+      method: "GET",
+      url: `/day`,
+   });
+   return response.data;
+};
+

client/lib/hooks/slots/useSlot.ts

@@ -11,7 +11,7 @@ import {
    addSlotsAllDayDoctor,
    deleteSlotsAllDayDoctor,
    getSlotsOfDoctor,
-} from "@/lib/api/slots/route";
+} from "@/lib/api/slots";
 
 export const useAddSlotsDoctor = () => {
    return useMutation<MessageResponse, AxiosError<ErrorResponse>, { slots: ISlot[]; day: Days }>({

client/lib/hooks/video/useDoctor.ts

@@ -0,0 +1,10 @@
+import { getSectionsInOneDayDoctor } from "@/lib/api/video";
+import IVideoSection from "@/types/entities";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetSectionsInOneDayDoctor = () => {
+    return useQuery<IVideoSection[]>({
+        queryKey: ["section-day"],
+        queryFn: () => getSectionsInOneDayDoctor(),
+    });
+};

client/lib/hooks/video/usePatient.ts

@@ -0,0 +1,10 @@
+import { getSectionsInOneDayPatient } from "@/lib/api/video";
+import IVideoSection from "@/types/entities";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetSectionsInOneDayPatient = () => {
+    return useQuery<IVideoSection[]>({
+        queryKey: ["section-day"],
+        queryFn: () => getSectionsInOneDayPatient(),
+    });
+};

server/src/use_case/slot/GetSlotUseCase.ts

@@ -46,7 +46,6 @@ export default class GetSlotUseCase {
       return dayNames[dayOfWeek] as Days;
    }
 
-   // parsing the slot start time to date
    private parseTimeStringToDate (timeString: string): Date {
       const [time, modifier] = timeString.split(' ');
       let [hours, minutes] = time.split(':').map(Number);