From 441a9f1f4ef4c5393547b076dcde91e68664b7e6 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 21 Jun 2023 12:12:03 +0530
Subject: [PATCH] Tailwinds `SampleTest.tsx` (#5653)

* fixes #4984

* adds more padding below icmr ref

* wrap lines for overflowing texts for all ButtonV2

* fixes testing_facility handleSubmit

* whitespace-pre-wrap only for submit and cancel.
---
 src/Components/Common/components/ButtonV2.tsx |   4 +-
 src/Components/Patient/SampleTest.tsx         | 462 ++++++------------
 2 files changed, 145 insertions(+), 321 deletions(-)

diff --git a/src/Components/Common/components/ButtonV2.tsx b/src/Components/Common/components/ButtonV2.tsx
index a236ec96135..38018144246 100644
--- a/src/Components/Common/components/ButtonV2.tsx
+++ b/src/Components/Common/components/ButtonV2.tsx
@@ -176,7 +176,7 @@ export const Submit = ({ label = "Submit", ...props }: CommonButtonProps) => {
       children={
         <>
           <CareIcon className="care-l-check-circle text-lg" />
-          <span>{t(label)}</span>
+          <span className="whitespace-pre-wrap">{t(label)}</span>
         </>
       }
       {...props}
@@ -196,7 +196,7 @@ export const Cancel = ({ label = "Cancel", ...props }: CommonButtonProps) => {
       children={
         <>
           <CareIcon className="care-l-times-circle text-lg" />
-          <span>{t(label)}</span>
+          <span className="whitespace-pre-wrap">{t(label)}</span>
         </>
       }
       {...props}
diff --git a/src/Components/Patient/SampleTest.tsx b/src/Components/Patient/SampleTest.tsx
index 20ffd2388ea..9d3cbea5eaf 100644
--- a/src/Components/Patient/SampleTest.tsx
+++ b/src/Components/Patient/SampleTest.tsx
@@ -1,33 +1,22 @@
-import { Card, CardContent } from "@material-ui/core";
 import { navigate } from "raviger";
 import loadable from "@loadable/component";
-import { useReducer, useCallback, useState, useEffect } from "react";
+import { useReducer, useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { SAMPLE_TYPE_CHOICES, ICMR_CATEGORY } from "../../Common/constants";
-import {
-  createSampleTest,
-  getAllFacilities,
-  getPatient,
-} from "../../Redux/actions";
+import { createSampleTest, getPatient } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import {
-  LegacyCheckboxField,
-  LegacySelectField,
-  LegacyTextInputField,
-} from "../Common/HelperInputFields";
-import { SampleTestModel, FacilityNameModel } from "./models";
-import Typography from "@material-ui/core/Typography";
-import Container from "@material-ui/core/Container";
+import { SampleTestModel } from "./models";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import useAppHistory from "../../Common/hooks/useAppHistory";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import TextFormField from "../Form/FormFields/TextFormField";
+import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import { FieldChangeEvent } from "../Form/FormFields/Utils";
+import Page from "../Common/components/Page";
+import { FacilitySelect } from "../Common/FacilitySelect";
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
-
-const icmrCategories = [...ICMR_CATEGORY];
-const sampleTestTypes = [...SAMPLE_TYPE_CHOICES];
 
 const initForm: SampleTestModel = {
   isFastTrack: false,
@@ -77,62 +66,17 @@ const sampleTestFormReducer = (state = initialState, action: any) => {
   }
 };
 
-export const SampleTest = (props: any) => {
+export const SampleTest = ({ facilityId, patientId }: any) => {
   const { goBack } = useAppHistory();
   const dispatchAction: any = useDispatch();
-  const { facilityId, patientId } = props;
   const [state, dispatch] = useReducer(sampleTestFormReducer, initialState);
   const [isLoading, setIsLoading] = useState(false);
-  const [facilityNames, setFacilityNames] = useState<Array<FacilityNameModel>>(
-    []
-  );
   const [facilityName, setFacilityName] = useState("");
   const [patientName, setPatientName] = useState("");
 
   const headerText = "Request Sample";
   const buttonText = "Confirm your request to send sample for testing";
 
-  const fetchFacilityNames = useCallback(
-    async (status: statusType) => {
-      const coronaLabType = 950;
-      const labType = 9;
-      setIsLoading(true);
-      const LabList = await dispatchAction(
-        getAllFacilities({ facility_type: labType })
-      );
-
-      const CoronaLabList = await dispatchAction(
-        getAllFacilities({ facility_type: coronaLabType })
-      );
-
-      if (
-        !status.aborted &&
-        LabList.data.results &&
-        CoronaLabList.data.results
-      ) {
-        setFacilityNames([
-          ...LabList.data.results,
-          ...CoronaLabList.data.results,
-        ]);
-        dispatch({
-          type: "set_form",
-          form: {
-            ...state.form,
-            testing_facility: LabList.data.results[0]?.id,
-          },
-        });
-      }
-      setIsLoading(false);
-    },
-    [dispatchAction]
-  );
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchFacilityNames(status);
-    },
-    [dispatch, fetchFacilityNames]
-  );
-
   useEffect(() => {
     async function fetchPatientName() {
       if (patientId) {
@@ -212,7 +156,7 @@ export const SampleTest = (props: any) => {
         diff_diagnosis: state.form.diff_diagnosis
           ? state.form.diff_diagnosis
           : undefined,
-        testing_facility: state.form.testing_facility,
+        testing_facility: state.form.testing_facility?.id,
         doctor_name: state.form.doctor_name
           ? state.form.doctor_name
           : undefined,
@@ -238,264 +182,144 @@ export const SampleTest = (props: any) => {
     }
   };
 
-  const handleChange = (e: any) => {
-    const form = { ...state.form };
-    form[e.target.name] = e.target.value;
-    dispatch({ type: "set_form", form });
+  const handleFormFieldChange = (e: FieldChangeEvent<unknown>) => {
+    dispatch({ type: "set_form", form: { ...state.form, [e.name]: e.value } });
   };
 
-  const handleTextAreaChange = (e: any) => {
-    const form = { ...state.form };
-    form[e.name] = e.value;
-    dispatch({ type: "set_form", form });
-  };
-
-  const handleCheckboxFieldChange = (e: any) => {
-    const form = { ...state.form };
-    const { checked, name } = e.target;
-    form[name] = checked;
-    dispatch({ type: "set_form", form });
-  };
+  const field = (name: string, label: string) => ({
+    name,
+    label,
+    value: state.form[name],
+    onChange: handleFormFieldChange,
+    error: state.errors[name],
+  });
 
   if (isLoading) {
     return <Loading />;
   }
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={headerText}
-        crumbsReplacements={{
-          [facilityId]: { name: facilityName },
-          [patientId]: { name: patientName },
-        }}
-        backUrl={`/facility/${facilityId}/patient/${patientId}`}
-      />
-      <div className="mt-4">
-        <Card>
-          <CardContent>
-            <form onSubmit={(e) => handleSubmit(e)}>
-              <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-                <div className="space-y-4">
-                  <div>
-                    <FieldLabel>Sample Test Type*</FieldLabel>
-                    <LegacySelectField
-                      name="sample_type"
-                      variant="outlined"
-                      margin="dense"
-                      optionArray={false}
-                      value={state.form.sample_type}
-                      options={sampleTestTypes}
-                      onChange={handleChange}
-                      errors={state.errors.sample_type}
-                    />
-                  </div>
-                  {state.form.sample_type === "OTHER TYPE" && (
-                    <div>
-                      <TextAreaFormField
-                        label="Sample Test Type Details"
-                        required
-                        rows={4}
-                        name="sample_type_other"
-                        value={state.form.sample_type_other}
-                        onChange={handleTextAreaChange}
-                        error={state.errors.sample_type_other}
-                      />
-                    </div>
-                  )}
-                </div>
-                <div className="row-span-3 space-y-4">
-                  <div>
-                    <FieldLabel>ICMR Category (for COVID Test)</FieldLabel>
-                    <LegacySelectField
-                      name="icmr_category"
-                      variant="outlined"
-                      margin="dense"
-                      optionArray={true}
-                      value={state.form.icmr_category}
-                      options={icmrCategories}
-                      onChange={handleChange}
-                      errors={state.errors.icmr_category}
-                    />
-                  </div>
-                  <Container>
-                    <FieldLabel>
-                      Reference below to know more about ICMR Categories
-                    </FieldLabel>
-                    <Typography>
-                      <li>
-                        Cat 0 - Repeat Sample of Positive Case / Follow Up case
-                      </li>
-                      <li>
-                        Cat 1 - Symptomatic International Traveller in last 14
-                        days
-                      </li>
-                      <li>Cat 2 - Symptomatic contact of lab confirmed Case</li>
-                      <li>Cat 3 - Symptomatic Healthcare Worker</li>
-                      <li>
-                        Cat 4 - Hospitalized SARI (Severe Acute Respiratory
-                        illness Patient)
-                      </li>
-                      <li>
-                        Cat 5a - Asymptomatic Direct and High Risk contact of
-                        confirmed case - family Member
-                      </li>
-                      <li>
-                        Cat 5b - Asymptomatic Healthcare worker in contact with
-                        confirmed case without adequate protection
-                      </li>
-                    </Typography>
-                  </Container>
-                </div>
-                <div className="space-y-4">
-                  <div>
-                    <FieldLabel required>Label</FieldLabel>
-                    <LegacyTextInputField
-                      name="icmr_label"
-                      variant="outlined"
-                      margin="dense"
-                      value={state.form.icmr_label}
-                      onChange={handleChange}
-                      errors={state.errors.icmr_label}
-                    />
-                  </div>
-                  <div className="mt-4 w-full">
-                    <FieldLabel>Testing Facility Name</FieldLabel>
-                    <LegacySelectField
-                      name="testing_facility"
-                      variant="outlined"
-                      margin="dense"
-                      value={state.form.testing_facility || ""}
-                      options={facilityNames.map((e) => {
-                        return { id: e.id, name: e.name };
-                      })}
-                      optionValue="name"
-                      optionKey="id"
-                      onChange={handleChange}
-                      errors={state.errors.testing_facility}
-                    />
-                  </div>
-                  <div className="flex items-center">
-                    <LegacyCheckboxField
-                      checked={state.form.isFastTrack}
-                      onChange={handleCheckboxFieldChange}
-                      name="isFastTrack"
-                      label="Is fast-track testing required?"
-                    />
-                  </div>
-                  {state.form.isFastTrack && (
-                    <div>
-                      <FieldLabel required>
-                        Provide reasons for fast-track testing
-                      </FieldLabel>
-                      <TextAreaFormField
-                        rows={4}
-                        name="fast_track"
-                        value={state.form.fast_track}
-                        onChange={handleTextAreaChange}
-                        error={state.errors.fast_track}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-                <div>
-                  <FieldLabel>Doctor's Name</FieldLabel>
-                  <LegacyTextInputField
-                    name="doctor_name"
-                    variant="outlined"
-                    margin="dense"
-                    value={state.form.doctor_name}
-                    onChange={handleChange}
-                    errors={state.errors.doctor_name}
-                  />
-                </div>
-                <div className="flex items-center">
-                  <LegacyCheckboxField
-                    checked={state.form.is_atypical_presentation}
-                    onChange={handleCheckboxFieldChange}
-                    name="is_atypical_presentation"
-                    label="Is atypical presentation?"
-                  />
-                </div>
-                {state.form.is_atypical_presentation && (
-                  <div>
-                    <TextAreaFormField
-                      required
-                      label="Atypical presentation details"
-                      rows={4}
-                      name="atypical_presentation"
-                      value={state.form.atypical_presentation}
-                      onChange={handleTextAreaChange}
-                      error={state.errors.atypical_presentation}
-                    />
-                  </div>
-                )}
-                <div>
-                  <TextAreaFormField
-                    label="Diagnosis"
-                    rows={4}
-                    name="diagnosis"
-                    value={state.form.diagnosis}
-                    onChange={handleTextAreaChange}
-                    error={state.errors.diagnosis}
-                  />
-                </div>
-                <div>
-                  <TextAreaFormField
-                    label="Etiology identified"
-                    rows={4}
-                    name="etiology_identified"
-                    value={state.form.etiology_identified}
-                    onChange={handleTextAreaChange}
-                    error={state.errors.etiology_identified}
-                  />
-                </div>
-                <div>
-                  <TextAreaFormField
-                    label="Differential diagnosis"
-                    rows={4}
-                    name="diff_diagnosis"
-                    value={state.form.diff_diagnosis}
-                    onChange={handleTextAreaChange}
-                    error={state.errors.diff_diagnosis}
-                  />
-                </div>
-              </div>
-              <div className="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-                <div className="flex items-center">
-                  <LegacyCheckboxField
-                    checked={state.form.has_sari}
-                    onChange={handleCheckboxFieldChange}
-                    name="has_sari"
-                    label="SARI - Severe Acute Respiratory illness ?"
-                  />
-                </div>
-                <div className="flex items-center">
-                  <LegacyCheckboxField
-                    checked={state.form.has_ari}
-                    onChange={handleCheckboxFieldChange}
-                    name="has_ari"
-                    label="ARI - Acute Respiratory illness ?"
-                  />
-                </div>
-                <div className="flex items-center">
-                  <LegacyCheckboxField
-                    checked={state.form.is_unusual_course}
-                    onChange={handleCheckboxFieldChange}
-                    name="is_unusual_course"
-                    label="Is unusual course?"
-                  />
-                </div>
-              </div>
-              <div className="flex justify-between mt-4">
-                <Cancel onClick={() => goBack()} />
-                <Submit onClick={handleSubmit} label={buttonText} />
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+    <Page
+      title={headerText}
+      crumbsReplacements={{
+        [facilityId]: { name: facilityName },
+        [patientId]: { name: patientName },
+      }}
+      backUrl={`/facility/${facilityId}/patient/${patientId}`}
+    >
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white rounded w-full mx-auto px-8 md:px-16 py-5 md:py-11 max-w-5xl"
+      >
+        <SelectFormField
+          {...field("sample_type", "Sample Test Type")}
+          required
+          options={SAMPLE_TYPE_CHOICES}
+          optionLabel={(option) => option.text}
+          optionValue={(option) => option.id}
+        />
+
+        {state.form.sample_type === "OTHER TYPE" && (
+          <TextAreaFormField
+            {...field("sample_type_other", "Sample Test Type Details")}
+            required
+          />
+        )}
+
+        <SelectFormField
+          {...field("icmr_category", "ICMR Category (for COVID Test)")}
+          options={ICMR_CATEGORY}
+          optionLabel={(option) => option}
+          optionValue={(option) => option}
+        />
+        <div className="flex flex-col gap-1 mb-6">
+          <p className="font-medium">
+            Refer below to know more about ICMR Categories
+          </p>
+          <span>
+            <li>Cat 0 - Repeat Sample of Positive Case / Follow Up case</li>
+            <li>Cat 1 - Symptomatic International Traveller in last 14 days</li>
+            <li>Cat 2 - Symptomatic contact of lab confirmed Case</li>
+            <li>Cat 3 - Symptomatic Healthcare Worker</li>
+            <li>
+              Cat 4 - Hospitalized SARI (Severe Acute Respiratory illness
+              Patient)
+            </li>
+            <li>
+              Cat 5a - Asymptomatic Direct and High Risk contact of confirmed
+              case - family Member
+            </li>
+            <li>
+              Cat 5b - Asymptomatic Healthcare worker in contact with confirmed
+              case without adequate protection
+            </li>
+          </span>
+        </div>
+
+        <TextFormField {...field("icmr_label", "ICMR Label")} required />
+        <div className="w-full flex-none mb-6">
+          <FieldLabel>Testing Facility</FieldLabel>
+          <FacilitySelect
+            name="testing_facility"
+            setSelected={(selected) =>
+              dispatch({
+                type: "set_form",
+                form: { ...state.form, testing_facility: selected },
+              })
+            }
+            facilityType={950}
+            selected={state.form.testing_facility}
+            errors={state.errors.testing_facility}
+            showAll
+            multiple={false}
+          />
+        </div>
+        <CheckBoxFormField
+          {...field("isFastTrack", "Is fast-track testing required?")}
+        />
+        {state.form.isFastTrack && (
+          <TextAreaFormField
+            {...field("fast_track", "Reasons for fast-track testing")}
+            required
+          />
+        )}
+
+        <TextFormField {...field("doctor_name", "Doctor's Name")} />
+        <CheckBoxFormField
+          {...field("is_atypical_presentation", "Is atypical presentation?")}
+        />
+        {state.form.is_atypical_presentation && (
+          <div>
+            <TextAreaFormField
+              {...field(
+                "atypical_presentation",
+                "Atypical presentation details"
+              )}
+              required
+            />
+          </div>
+        )}
+        <TextAreaFormField {...field("diagnosis", "Diagnosis")} />
+        <TextAreaFormField
+          {...field("etiology_identified", "Etiology identified")}
+        />
+        <TextAreaFormField
+          {...field("diff_diagnosis", "Differential diagnosis")}
+        />
+
+        <CheckBoxFormField
+          {...field("has_sari", "Has SARI (Severe Acute Respiratory illness)?")}
+        />
+        <CheckBoxFormField
+          {...field("has_ari", "Has ARI (Acute Respiratory illness)?")}
+        />
+        <CheckBoxFormField
+          {...field("is_unusual_course", "Is unusual course?")}
+        />
+        <div className="flex flex-col lg:flex-row gap-2 justify-end mt-4">
+          <Cancel onClick={() => goBack()} />
+          <Submit onClick={handleSubmit} label={buttonText} />
+        </div>
+      </form>
+    </Page>
   );
 };