Merge pull request #9 from moevm/Link-doctor-api

Linked docs front and back

backend/src/services/DoctorsService.ts

@@ -10,24 +10,24 @@ class DoctorsService {
         const objId = new mongoose.Types.ObjectId(id)
         const doctor = await DoctorMongoCollection.findById(objId)
 
-        const appoitments = await AppoitmentMongoCollection.find({doctor_id: objId})
+        const appointments = await AppoitmentMongoCollection.find({doctor_id: objId})
 
-        let myAppoitments: { [key: string]: any }[] = [];
+        let myAppointments: { [key: string]: any }[] = [];
 
-        for(const appoitment of appoitments) {
-            const procedure = await ProceduresMongoCollection.findOne({_id: appoitment?.procedure_id})
-            const patient = await PatientsMongoCollection.findOne({_id: appoitment?.patient_id})
-            const date = appoitment?.date
+        for(const appointment of appointments) {
+            const procedure = await ProceduresMongoCollection.findOne({_id: appointment?.procedure_id})
+            const patient = await PatientsMongoCollection.findOne({_id: appointment?.patient_id})
+            const date = appointment?.date
             const appointmentDetails = {
                 "date": date,
                 "procedure": procedure?.name,
                 "patient": patient?.name + " " + patient?.surname
             };
-            myAppoitments.push(appointmentDetails);
+            myAppointments.push(appointmentDetails);
         }
 
 
-        return { "name": doctor?.name, "surname": doctor?.surname,  "appoitments": myAppoitments}
+        return { "name": doctor?.name, "surname": doctor?.surname,  "appointments": myAppointments}
     }
 }
 

frontend/src/Components/SignOutButton/SignOutButton.tsx

@@ -1,10 +1,19 @@
+import {Dispatch} from "react";
+import {UnknownAction} from "redux";
+import {useDispatch} from "react-redux";
+import {useNavigate} from "react-router-dom";
 
 function SignOutButton() {
-
+  const dispatch: Dispatch<UnknownAction> = useDispatch()
+  const navigate = useNavigate()
+  const onClick = () => {
+    dispatch({type: ""})
+    navigate("/")
+  }
   return (
-    <a className="col-start-3 justify-self-end" href="/">
+    <button className="col-start-3 justify-self-end" onClick={onClick}>
       <img className="h-14 m-1" src="src/assets/sign-out-icon.png"/>
-    </a>
+    </button>
   )
 }
 

frontend/src/Config/routeConfig.ts

@@ -1,5 +1,6 @@
 // Перечисление роутов
 export enum AppRoutes {
+  MAIN = "main",
   WELCOME = "welcome",
   // REGISTER = "register",
   LOGIN = "login",
@@ -16,14 +17,11 @@ export enum AppRoutes {
 // метода replace менять на параметр сущности.
 // Пример:
 // RoutePaths.user.replace(RouteParams.USERNAME, username)
-export enum RouteParams {
-  POST_ID = ":id",
-  USERNAME = ":username",
-}
 
 export const RoutePaths: Record<AppRoutes, string> = {
   // Будем отрисовывать профиль в зависимости от параметра.
   // Если на беке не найдётся юзер, то кинем на 404.
+  [AppRoutes.MAIN]: "/",
   [AppRoutes.WELCOME]: '/' + AppRoutes.WELCOME,
   // [AppRoutes.REGISTER]: "/register",
   [AppRoutes.LOGIN]: "/login",

frontend/src/Pages/DoctorPage/DoctorPage.tsx

@@ -1,59 +1,55 @@
 import Header from "../../Widgets/Header/Header.tsx";
 import SignOutButton from "../../Components/SignOutButton/SignOutButton.tsx";
-import ProfileButton from "../../Components/ProfileButton/ProfileButton.tsx";
 import FilterCard from "../../Widgets/FilterCard/FilterCard.tsx";
 import FormInput from "../../Components/FormInput/FormInput.tsx";
 import RecordsStand from "../../Widgets/RecordsStand/RecordsStand.tsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {timeRepresentationOptions} from "../../Config/timeRepresentationConfig.ts";
+import {useSelector} from "react-redux";
+import {getDoctorById} from "../../api/requests.ts";
+import {useNavigate} from "react-router-dom";
+
 
-const person = {
-  name: "Dr. A",
-  appointments: [
-    {
-      id: 1,
-      date: "22.12.2023, 15:54",
-      doctor: "Doctor Doolittle",
-      procedure: "Procedure 1"
-    },
-    {
-      id: 2,
-      date: "20.12.2012, 11:00",
-      doctor: "Doctor Aybolit",
-      procedure: "Procedure 2"
-    },
-    {
-      id: 3,
-      date: "20.12.2022, 06:00",
-      doctor: "Doctor A",
-      procedure: "Procedure 2"
-    }
-  ]
-}
 function DoctorPage() {
-  const gridCol3 = "w-full grid grid-cols-3 justify-items-center"
+  const [info, setInfo] = useState({})
+  const navigate = useNavigate()
+  const id = useSelector((state: any) => state.id)
+  const [appointments, setAppointments] = useState([])
+  useEffect(() => {
+    getDoctorById(id)
+      .then(res => {
+        setInfo(res.data)
+        setAppointments(res.data.appointments)
+      })
+      .catch(err => {
+        console.log(err)
+        navigate("/welcome")
+      })
+  }, []);
 
-  const [records, setRecords] = useState(person.appointments)
 
   const onChange = (event: any) => {
     const target = event.target
     const comparators: {[index: string]: any} = {
       'date': (x: any) => x.date.includes(new Date(target.value).toLocaleString('ru-RU', timeRepresentationOptions)),
       'procedure': (x: any) => x.procedure.includes(target.value),
-      'doctor': (x: any) => x.patient.includes(target.value)
+      'patient': (x: any) => x.patient.includes(target.value)
     }
-    setRecords(records.filter(comparators[target.name]))
+    console.log(target.value)
+    setAppointments(appointments.filter(comparators[target.name]))
   }
 
   const dropFilter = () => {
-    setRecords(person.appointments)
+    setAppointments(info.appointments)
   }
 
+  const gridCol3 = "w-full grid grid-cols-3 justify-items-center"
+
   return (
     <>
-      <Header profileButton={<ProfileButton/>} signOutButton={<SignOutButton/>} />
+      <Header signOutButton={<SignOutButton />} />
       <div className="px-14 font-bold min-w-fit">
-        <h3 className="text-2xl my-7">Hello, <span className="text-base1">{person.name}</span>!</h3>
+        <h3 className="text-2xl my-7">Hello, <span className="text-base1">{info.name}</span>!</h3>
         <FilterCard theme="primary" dropFilter={dropFilter} onChange={onChange}>
           <div>
             <label htmlFor="" className="block ml-3">Date</label>
@@ -75,12 +71,12 @@ function DoctorPage() {
             <h4>Patient</h4>
           </div>
           <ul className="w-full">
-            {/*{records.map((currentValue, idx) =>*/}
-            {/*  <div key={idx}  className={`${gridCol3} text-lg font-medium mb-7`}>*/}
-            {/*    <li>{currentValue.date}</li>*/}
-            {/*    <li>{currentValue.procedure}</li>*/}
-            {/*    <li>{currentValue.doctor}</li>*/}
-            {/*  </div>)}*/}
+            {appointments.map((currentValue, idx) =>
+              <div key={idx}  className={`${gridCol3} text-lg font-medium mb-7`}>
+                <li>{currentValue.date}</li>
+                <li>{currentValue.procedure}</li>
+                <li>{currentValue.patient}</li>
+              </div>)}
           </ul>
         </RecordsStand>
       </div>

frontend/src/Pages/LoginPage/LoginPage.tsx

@@ -22,7 +22,7 @@ function LoginPage() {
     loginRequest(username, password)
       .then(res => {
         const {id, role} = res.data
-        dispatch({type: "", id, role})
+        dispatch({type: "INIT_ROLE_ID", id, role})
         navigate("/" + role)
       })
       .catch((err) => {

frontend/src/Router/AppRouter.tsx

@@ -6,6 +6,10 @@ import PatientPage from "../Pages/PatientPage/PatientPage.tsx";
 import DoctorPage from "../Pages/DoctorPage/DoctorPage.tsx";
 
 const routes: Record<AppRoutes, RouteProps> = {
+  [AppRoutes.MAIN]: {
+    path: RoutePaths.main,
+    element: <WelcomePage/>
+  },
   [AppRoutes.WELCOME]: {
     path: RoutePaths.welcome,
     element: <WelcomePage />,

frontend/src/Store/index.ts

@@ -2,15 +2,15 @@ import {createStore} from "redux"
 
 
 const defaultState = {
-  id: "12",
-  role: "21",
+  id: "",
+  role: "",
   data: {}
 }
 
 const reducer = (state = defaultState, action: any) => {
   switch (action.type) {
-    case "":
-      return {...state, role: state.role, id: state.id}
+    case "INIT_ROLE_ID":
+      return {...state, role: action.role, id: action.id}
     default:
       return state
   }

frontend/src/api/endpoints.ts

@@ -1,4 +1,5 @@
 
 export enum Endpoints {
-  login = "login",
+  LOGIN = "login",
+  GET_DOCTOR_BY_ID = "doctors"
 }

frontend/src/api/requests.ts

@@ -12,8 +12,16 @@ export const loginRequest = (username: string, password: string): Promise<AxiosR
     "password": password
   }
   return axios({
-    url: API_URL + Endpoints.login,
+    url: API_URL + Endpoints.LOGIN,
     method: 'POST',
     data
   })
 }
+
+
+export const getDoctorById = (id: string) => {
+  return axios({
+    url: API_URL + Endpoints.GET_DOCTOR_BY_ID + "/" + id,
+    method: 'GET',
+  })
+}

frontend/src/main.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-// import App from './App.tsx'
 import './index.css'
 import App from "./App.tsx";