feat: 86extdm6t (#89)

* feat: add conected to back

* fix: add Appointment component

* fix

Author: rachelishteren

src/constants/api.constants.ts

@@ -2,5 +2,6 @@ export const API_ENDPOINTS = {
   patient: '/api/patients/',
   metrics: '/api/metrics/',
   metricsToday: '/api/metrics/today/',
+  appointment: '/api/appointment/nextAppointment',
   email: '/api/email',
 }

src/constants/index.ts

@@ -1,6 +1,12 @@
+import { formatIsoDate } from '@/utils/datesUtils'
+
 export const DOT = '•'
 export const METRIC_MAX_VALUE = '10'
 export const SLIDER_MIN_VALUE = 1
 export const SLIDER_MAX_VALUE = 10
 export const BALANCE_VIDEO_TIME = 15
 export const STRETCH_VIDEO_TIME = 10
+export const MOCK_DATA = {
+  patientID: Number('1622017'),
+  date: formatIsoDate(new Date(2026, 5, 23)),
+}

src/pages/home/AppointmentBottomSheet/AppointmentBottomSheet.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { BottomSheetDialog } from '@/components/BottomSheetDialog/BottomSheetDialog'
+import { apiService } from '@/services/api/api.service'
+import { useState } from 'react'
+import type { Appointment } from '@/components/BottomSheetDialog/types'
+import { API_ENDPOINTS } from '@/constants/api.constants'
+import { MOCK_DATA } from '@/constants'
+
+export const AppointmentBottomSheet = () => {
+  const [selectedAppointment, setSelectedAppointment] = useState<boolean>(true)
+
+  const patientid = MOCK_DATA.patientID
+  const date = MOCK_DATA.date
+
+  const { data: appointment } = useQuery({
+    queryKey: ['nextAppointment', patientid, date],
+    queryFn: async () => {
+      const response = await apiService.get<Appointment>(API_ENDPOINTS.appointment, {
+        params: {
+          patientid,
+          date,
+        },
+      })
+      return response
+    },
+  })
+
+  const handleCloseBottomSheet = () => {
+    setSelectedAppointment(false)
+  }
+
+  return (
+    <BottomSheetDialog
+      appointment={appointment}
+      isOpen={selectedAppointment && !!appointment}
+      onClose={handleCloseBottomSheet}
+    />
+  )
+}

src/pages/home/home.tsx

@@ -1,7 +1,4 @@
-import { useState } from 'react'
 import { ProgressCard } from '@/pages/home/progress/ProgressCard'
-import { BottomSheetDialog } from '@/components/BottomSheetDialog/BottomSheetDialog'
-import type { Appointment } from '@/components/BottomSheetDialog/types'
 import { DailyTips } from './dailyTips/DailyTips'
 import { CheckIn } from './checkIn/CheckIn'
 import { HomeButtomDesktop, HomeButtomMobile, HomeTopDesktop, HomeTopMobile } from './styles'
@@ -10,29 +7,15 @@ import { SGLTypography } from '@/components/UI/Typography/SGLTypography'
 import { useTranslation } from 'react-i18next'
 import { useIsMobile } from '@/hooks/useIsMobile'
 import { Welcome } from './welcome/Welcome'
+import { AppointmentBottomSheet } from './AppointmentBottomSheet/AppointmentBottomSheet'
 
 export const Home = () => {
-  const [selectedAppointment, setSelectedAppointment] = useState<Appointment | undefined>({
-    appointmentId: '1',
-    patientId: 1622017,
-    time: '10:12:50',
-    date: '2026-05-15',
-    chamber: 'appointment.chamber.hyperbaric',
-    chairNumber: 9,
-    treatmentNumber: 2,
-    status: 'confirmed',
-  })
-
   const { t } = useTranslation()
   const isMobile = useIsMobile()
 
   return (
     <>
-      <BottomSheetDialog
-        appointment={selectedAppointment}
-        isOpen={!!selectedAppointment}
-        onClose={() => setSelectedAppointment(undefined)}
-      />
+      <AppointmentBottomSheet />
       <div style={isMobile ? HomeTopMobile : HomeTopDesktop}>
         <Welcome />
         <ProgressCard value={10} />