feat(web-assessment): implementing doctors list and detail page

Web/starter_project_vanguard/data/db.json

@@ -165,6 +165,7 @@
       }
     ]
   }
+<<<<<<< HEAD
   ],
   "team-members":
   [
@@ -291,4 +292,7 @@
     }
 ]
 
+=======
+]
+>>>>>>> cb48f84 (implement fetch from json-server for home page)
 }

Web/starter_project_vanguard/store/index.ts

@@ -4,21 +4,28 @@ import { configureStore } from '@reduxjs/toolkit'
 import { aboutApi } from './about/about-api'
 import { successStoryApi } from '@/store/features/success-story/success-story-api'
 import { getBlogs } from '@/store/features/blog/blogs-api'
+<<<<<<< HEAD
 import { homeApi } from '@/store/features/home/home-api'
 import { userApi } from '@pages/api/profile'
 import { singleBlogApi } from '@/store/features/blog/single-blog-api'
 import { teamsApi } from '@/store/features/teams/teams-api'
 
+import { homeApi } from './features/home/home-api'
+
+
+
 export const store = configureStore({
   reducer: {
     [successStoryApi.reducerPath]: successStoryApi.reducer,
     [addNewBlogApi.reducerPath]: addNewBlogApi.reducer,
     [aboutApi.reducerPath]: aboutApi.reducer,
     [getBlogs.reducerPath]: getBlogs.reducer,
     [homeApi.reducerPath]: homeApi.reducer,
+
     [teamsApi.reducerPath]: teamsApi.reducer,
     [userApi.reducerPath]: userApi.reducer,
     [singleBlogApi.reducerPath]: singleBlogApi.reducer,
+
   },
   middleware: (getDefaultMiddleware) => {
     return getDefaultMiddleware()
@@ -31,6 +38,7 @@ export const store = configureStore({
       .concat(userApi.miidleware)
       .concat(singleBlogApi.middleware)
 
+
   },
 },)
 

Web/web_assessment/components/DoctorCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+interface Props {
+    id:string;
+    photoUrl: string;
+    name: string;
+    specialty: string;
+    address: string;
+  }
+const DoctorCard: React.FC<Props> = ({ id, photoUrl, name, specialty, address }) => {
+
+  return (
+    <Link href={`/doctors/${id}`}>
+    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+      <div className="flex justify-center items-center h-32 bg-gray-200">
+        <div className="h-24 w-24 rounded-full overflow-hidden">
+          <img src={photoUrl} alt={name} className="h-full w-full object-cover" />
+        </div>
+      </div>
+      <div className="p-4 flex flex-col justify-center items-center">
+        <h2 className="text-xl font-bold">{name}</h2>
+        <div className='bg-blue-500 rounded max-width'>
+        <p className="text-gray-600">{specialty}</p>
+        </div>
+
+        <p className="text-gray-600">{address}</p>
+      </div>
+    </div>
+    </Link>
+  )
+}
+export default DoctorCard

Web/web_assessment/components/DoctorList.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import { useSearchDoctorsQuery } from "@/store/features/doctors/doctors-api";
+import DoctorCard from "./DoctorCard";
+
+
+const DoctorList: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const {
+    data: response,
+    isLoading,
+    isError,
+  } = useSearchDoctorsQuery(searchTerm);
+  const doctors = response?.data;
+
+  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchTerm(event.currentTarget.search.value);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <form onSubmit={handleSearch} className="w-full max-w-sm">
+        <div className="flex items-center border-2 border-teal-500 py-2">
+          <input
+            className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+            type="text"
+            name="search"
+            placeholder="Search..."
+            value={searchTerm}
+            onChange={handleInputChange}
+          />
+          <button
+            className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
+            type="submit"
+          >
+            Search
+          </button>
+        </div>
+      </form>
+      {isLoading && <div>Loading...</div>}
+      {isError && <div>Error fetching search results</div>}
+      <div className = "">
+      {Array.isArray(doctors) &&
+        doctors.map((doctor: any) => (
+          <DoctorCard
+            key={doctor._id}
+            id={doctor._id}
+            photoUrl={doctor.photo}
+            name={doctor.fullName}
+            specialty="CardioLogist"
+            address="Addis Ababa"
+          />
+        ))}
+
+      </div>
+    </div>
+  );
+};
+
+export default DoctorList;