feat(frontend): ✨ search connection with api, actions

minor fixes to api connection work, .env.example

client/.env.example

@@ -0,0 +1 @@
+API_URL=https://clinica-medica-production.up.railway.app/api/v1/

client/.gitignore

@@ -19,13 +19,15 @@
 # misc
 .DS_Store
 *.pem
+.vscode
 
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

client/src/actions/doctors/doctorActions.ts

@@ -0,0 +1,26 @@
+'use server'
+
+const BASE_URL = process.env.API_URL
+
+export const getAllDoctors = async () => {
+  const url = BASE_URL + '/doctor/allDoctors'
+  const data = await fetch(url).then((res) => res.json())
+
+  if (data) {
+    return data
+  }
+
+  return []
+}
+
+export const getDoctorById = async (id: number) => {
+  const url = BASE_URL + '/doctor/getById/' + id
+
+  const data = await fetch(url).then((res) => res.json())
+
+  if (data) {
+    return data
+  }
+
+  return null
+}

client/src/app/(patients)/appointment/[id]/page.tsx

@@ -1,31 +1,10 @@
-import { Data } from '@/interfaces/user'
-import data from '../../../../utils/data.json'
 import { DoctorDetails } from '@/ui/doctors/Details'
+import { getDoctorById } from '@/actions/doctors/doctorActions'
 
 export default async function AppointmentById({ params }: { params: { id: string } }) {
   const id = Number(params.id)
-  /*   const url = '../../../../utils/data.json'
-    const data = await fetch(url) */
 
-  const getDoctorData = (data: Data) => {
-    const doctor = data.doctors.find((doctor) => {
-      const user = data.users.find((user) => user.id === doctor.id_user && user.id === id)
-      return user
-    })
-
-    const user = data.users.find((user) => user.id === doctor?.id_user)
-    return {
-      speciality: doctor?.speciality || 'error',
-      name: user?.name || 'error',
-      dni: user?.dni || '12312312',
-      phone: user?.phone || 'error',
-      email: user?.email || 'error',
-      address: user?.address || 'error'
-    }
-
-  }
-
-  const doctor = getDoctorData(data)
+  const doctor = await getDoctorById(id)
 
   return (
     <div className="flex flex-col p-4 gap-4">

client/src/app/(patients)/appointment/page.tsx

@@ -1,9 +1,10 @@
-import data from '../../../utils/data.json'
 import { DoctorList } from "@/ui/doctors/List"
 import { Search, SearchResults } from "@/components";
 import { Suspense } from "react";
+import { getAllDoctors } from '@/actions/doctors/doctorActions';
+import { DoctorFromResponse } from "@/interfaces/user";
 
-export default function AppointmentsPage({
+export default async function AppointmentsPage({
   searchParams,
 }: {
   searchParams?: {
@@ -15,18 +16,22 @@ export default function AppointmentsPage({
 }) {
   const query = searchParams?.q || '';
 
-  const doctorListWithPlacesFiltered = data.doctors.filter((doctor, index, self) =>
+  const data: DoctorFromResponse[] = await getAllDoctors()
+
+  const doctorListWithPlacesFiltered = data.filter((doctor, index, self) =>
     index === self.findIndex((d) => d.place === doctor.place)
   )
-  const doctorListWithSpecialityFiltered = data.doctors.filter((doctor, index, self) =>
-    index === self.findIndex((d) => d.speciality === doctor.speciality)
+  const doctorListWithSpecialityFiltered = data.filter((doctor, index, self) =>
+    index === self.findIndex((d) => d.specialization === doctor.specialization)
   )
+
+
   return (
     <div className="w-full max-w-[1480px] m-auto h-screen flex flex-col p-4 gap-4">
       <div className="relative flex flex-col">
         <Search placeholder="Buscá por profesional, establecimiento o especialidad..." />
         <Suspense key={query} fallback={'Cargando ...'}>
-          <SearchResults query={query} />
+          <SearchResults query={query} data={data} />
         </Suspense>
       </div>
 

client/src/components/search/SearchResults.tsx

@@ -1,74 +1,74 @@
-import data from '../../utils/data.json'
-import { Data } from "@/interfaces/user"
+import { DoctorFromResponse } from '@/interfaces/user'
 import { DoctorCard, PlaceCard, SpecialityCard } from "@/ui"
 
 type Props = {
   query: string
+  data: DoctorFromResponse[]
 }
 
-export const SearchResults: React.FC<Props> = async ({ query }) => {
-  const getDoctorData = (data: Data) => {
-    const doctorList = data.doctors
+export const SearchResults: React.FC<Props> = async ({ query, data }) => {
+  const getDoctorData = (data: DoctorFromResponse[]) => {
+    const doctorList = data
       .filter((doctor) => {
-        const user = data.users.find((user) => user.id === doctor.id_user)
+        const user = data.find((user) => user.id === doctor.id)
 
         if (user) {
           const matchesQuery =
             user.name.toLowerCase().includes(query.toLowerCase()) ||
-            doctor.place.toLowerCase().includes(query.toLowerCase()) ||
-            doctor.speciality.toLowerCase().includes(query.toLowerCase())
+            doctor.place?.toLowerCase().includes(query.toLowerCase()) ||
+            doctor.specialization.toLowerCase().includes(query.toLowerCase())
 
           return matchesQuery
         }
         return false
       })
       .map((doctor) => {
-        const user = data.users.find((user) => user.id === doctor.id_user)
+        const user = data.find((user) => user.id === doctor.id)
 
         if (user) {
           return {
             id: user.id,
             name: user.name,
-            speciality: doctor.speciality,
-            place: doctor.place,
-            address: doctor.address || "Dirección no disponible"
-
+            speciality: doctor.specialization,
+            place: 'Consultorio Principal',
+            address: doctor.email || 'Dirección no disponible',
           }
         }
       })
       .filter(Boolean)
 
     const uniqueDoctorList = Array.from(
       new Map(
-        doctorList.map(item => [`${item?.speciality}-${item?.place}`, item])
+        doctorList.map((item) => [`${item?.speciality}-${item?.place}`, item])
       ).values()
     )
 
     return uniqueDoctorList
   }
 
   const results = getDoctorData(data)
+  console.log(results);
 
   const isNameSearch = results.some(result => result?.name.toLowerCase().includes(query.toLowerCase()))
   const isSpecialitySearch = results.some(result => result?.speciality.toLowerCase().includes(query.toLowerCase()))
   const isPlaceSearch = results.some(result => result?.place.toLowerCase().includes(query.toLowerCase()))
 
-  let filteredResults = results;
+  let filteredResults = results
 
   if (isSpecialitySearch) {
     filteredResults = Array.from(
       new Map(
         filteredResults.map(item => [item?.speciality, item])
       ).values()
-    );
+    )
   }
 
   if (isPlaceSearch) {
     filteredResults = Array.from(
       new Map(
         filteredResults.map(item => [item?.place, item])
       ).values()
-    );
+    )
   }
 
   return (
@@ -82,7 +82,7 @@ export const SearchResults: React.FC<Props> = async ({ query }) => {
           <>
             <div className='flex flex-wrap gap-4 h-min w-full max-w-6xl'>
               {filteredResults.map((doctor) => (
-                <div className="flex h-min flex-grow" key={doctor?.id}>
+                <div className="flex h-min flex-grow flex-wrap gap-4" key={doctor?.id}>
                   {isNameSearch && (
                     <DoctorCard id={doctor?.id} name={doctor?.name} img="" place={doctor?.place} speciality={doctor?.speciality} />
                   )}

client/src/interfaces/user.d.ts

@@ -38,3 +38,16 @@ export interface Data {
   users: User[]
   doctors: Doctor[]
 }
+
+export interface DoctorFromResponse {
+  id: number
+  name: string
+  password: string
+  email: string
+  phone: string
+  img: string
+  active: boolean
+  specialization: string
+  licenseNumber: string
+  place?: string
+}

client/src/ui/cards/DoctorCard.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 export function DoctorCard({ id, name, speciality, place, img }: Props) {
   return (
-    <div className="w-full flex gap-4 border-b border-b-black pl-4 pb-4">
+    <div className="min-w-full flex gap-4 border-b border-b-black pl-4 pb-4">
       <>
         {img !== '' ? (
           <Image src={img} height={120} width={275} alt={name + "image"} />

client/src/ui/doctors/Details.tsx

@@ -1,22 +1,20 @@
 'use client'
 
-import { DoctorComplete } from "@/interfaces/user"
+import { DoctorFromResponse } from "@/interfaces/user"
 import { Alert } from "../alert"
 
 interface Props {
-  doctor: DoctorComplete
+  doctor: DoctorFromResponse
 }
 
 export function DoctorDetails({ doctor }: Props) {
   return (
     <div className="flex flex-col gap-2">
       <div>
         <p className="text-2xl font-bold">{doctor.name}</p>
-        <p>Especialidad: {doctor.speciality}</p>
-        <p>DNI: {doctor.dni}</p>
+        <p>Especialidad: {doctor.specialization}</p>
         <p>Teléfono: {doctor.phone}</p>
         <p>Email: {doctor.email}</p>
-        <p>Dirección:{doctor.address}</p>
       </div>
 
       <div className="flex flex-col gap-2">

client/src/ui/doctors/List.tsx

@@ -1,8 +1,8 @@
-import { Doctor } from "@/interfaces/user"
+import { DoctorFromResponse } from "@/interfaces/user"
 import { SpecialityCard, PlaceCard } from "../index"
 
 interface Props {
-  list: Doctor[]
+  list: DoctorFromResponse[]
   title: string
 }
 
@@ -13,9 +13,9 @@ export function DoctorList({ list, title }: Props) {
         {list.map((doctor) => (
           <>
             {title === 'speciality' ? (
-              <SpecialityCard key={doctor.id} name={doctor.speciality} img="" />
+              <SpecialityCard key={doctor.id} name={doctor.specialization} img="" />
             ) : (
-              <PlaceCard details={false} key={doctor.id} name={doctor.place} img="" address="Calle falsa 123" />
+              <PlaceCard details={false} key={doctor.id} name={doctor.place || 'Consultorio Principal'} img="" address="Jujuy 2176" />
             )}
           </>
         ))}