feat: connect daily tips to backend

src/constants/api.constants.ts

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

src/hooks/useDailyTip.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+import { API_ENDPOINTS } from '@/constants/api.constants'
+import { apiService } from '@/services/api/api.service'
+import type { DailyTip } from '@/services/api/tips.service'
+
+export const useDailyTip = () => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['dailyTip'],
+    queryFn: () => apiService.get<DailyTip>(API_ENDPOINTS.tips),
+  })
+
+  return { tip: data, isLoading, error }
+}

src/pages/home/dailyTips/titleAndDescription/TitleAndDescription.tsx

@@ -1,17 +1,20 @@
-import { useTranslation } from 'react-i18next'
 import { SGLTypography } from '@/components/UI/Typography/SGLTypography'
 import { titleAndDescriptionStyles } from './styles'
+import { useDailyTip } from '@/hooks/useDailyTip'
 
 export const TitleAndDescription = () => {
-  const { t } = useTranslation()
+  const { tip, isLoading, error } = useDailyTip()
+
+  if (isLoading) return null
+  if (error || !tip) return null
 
   return (
     <>
       <SGLTypography variant="smallTitle" styles={titleAndDescriptionStyles.title}>
-        {t('daily.tip.title')}
+        {tip.title}
       </SGLTypography>
       <SGLTypography variant="smallText" styles={titleAndDescriptionStyles.description}>
-        {t('daily.tip.description')}
+        {tip.description}
       </SGLTypography>
     </>
   )

src/services/api/tips.service.ts

@@ -0,0 +1,10 @@
+import { apiService } from './api.service'
+
+export interface DailyTip {
+  title: string
+  description: string
+}
+
+export const getDailyTip = (): Promise<DailyTip> => {
+  return apiService.get<DailyTip>('/tips/daily')
+}