renamed

2023-08-08 16:02:54 +03:00
commit 0a7a469d56
315 changed files with 426907 additions and 0 deletions
@@ -0,0 +1,106 @@
+import { useState } from "react";
+import {
+  Box,
+  Table,
+  Button,
+  TableHead,
+  Typography,
+  TableCell,
+  TableRow,
+  TableBody,
+} from "@mui/material";
+import axios from "axios";
+import { Link } from "react-router-dom";
+
+import { PatientFormValues, Patient } from "../../types";
+import AddPatientModal from "../AddPatientModal";
+
+import HealthRatingBar from "../HealthRatingBar";
+
+import patientService from "../../services/patients";
+
+interface Props {
+  patients: Patient[];
+  setPatients: React.Dispatch<React.SetStateAction<Patient[]>>;
+}
+
+const PatientListPage = ({ patients, setPatients }: Props) => {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+
+  const openModal = (): void => setModalOpen(true);
+
+  const closeModal = (): void => {
+    setModalOpen(false);
+    setError(undefined);
+  };
+
+  const submitNewPatient = async (values: PatientFormValues) => {
+    try {
+      const patient = await patientService.create(values);
+      setPatients(patients.concat(patient));
+      setModalOpen(false);
+    } catch (e: unknown) {
+      if (axios.isAxiosError(e)) {
+        if (e?.response?.data && typeof e?.response?.data === "string") {
+          const message = e.response.data.replace(
+            "Something went wrong. Error: ",
+            ""
+          );
+          console.error(message);
+          setError(message);
+        } else {
+          setError("Unrecognized axios error");
+        }
+      } else {
+        console.error("Unknown error", e);
+        setError("Unknown error");
+      }
+    }
+  };
+
+  return (
+    <div className="App">
+      <Box>
+        <Typography align="center" variant="h6">
+          Patient list
+        </Typography>
+      </Box>
+      <Table style={{ marginBottom: "1em" }}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Gender</TableCell>
+            <TableCell>Occupation</TableCell>
+            <TableCell>Health Rating</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.values(patients).map((patient: Patient) => (
+            <TableRow key={patient.id}>
+              <TableCell>
+                <Link to={`/patient/${patient.id}`}>{patient.name}</Link>
+              </TableCell>
+              <TableCell>{patient.gender}</TableCell>
+              <TableCell>{patient.occupation}</TableCell>
+              <TableCell>
+                <HealthRatingBar showText={false} rating={1} />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <AddPatientModal
+        modalOpen={modalOpen}
+        onSubmit={submitNewPatient}
+        error={error}
+        onClose={closeModal}
+      />
+      <Button variant="contained" onClick={() => openModal()}>
+        Add New Patient
+      </Button>
+    </div>
+  );
+};
+
+export default PatientListPage;