From 049332662d7ec0e2622e63150e54333a54ab9603 Mon Sep 17 00:00:00 2001
From: Pedro Sousa - ICRC <68599335+icrc-psousa@users.noreply.github.com>
Date: Mon, 1 Apr 2024 15:36:50 +0100
Subject: [PATCH] (feat) Patient name sorting (#76)

* Patient sorting by name

* Fixed session patient list toggle issue

* Removed unnecessary div tag

* Use name instead of deprecated extensionSlotName property

* Adjusted AttendanceTable rendering to prevent undefined patient issues

* Fixed AttendanceTable

* Added cleanup function to SortedPatientLists effect

* Consider only patient name and not id when sorting

* Refactored patient list ordering

* Removed unnecessary sort on reducer
---
 src/add-group-modal/AddGroupModal.tsx         | 60 ++++++++++++-------
 .../SessionDetailsForm.tsx                    |  4 +-
 .../attendance-table/AttendanceTable.tsx      |  4 +-
 .../group-search-header/GroupSearchHeader.tsx |  5 +-
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/add-group-modal/AddGroupModal.tsx b/src/add-group-modal/AddGroupModal.tsx
index 5d917fc..ef03aa1 100644
--- a/src/add-group-modal/AddGroupModal.tsx
+++ b/src/add-group-modal/AddGroupModal.tsx
@@ -16,7 +16,12 @@ import {
 } from "@carbon/react";
 import { TrashCan } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
-import { ExtensionSlot, showToast, usePatient } from "@openmrs/esm-framework";
+import {
+  ExtensionSlot,
+  fetchCurrentPatient,
+  showToast,
+  usePatient,
+} from "@openmrs/esm-framework";
 import styles from "./styles.scss";
 import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
 import { usePostCohort } from "../hooks";
@@ -111,7 +116,7 @@ const NewGroupForm = (props) => {
             <PatientRow
               patient={patient}
               removePatient={removePatient}
-              key={index}
+              key={patient.uuid}
             />
           ))}
         </ul>
@@ -125,7 +130,7 @@ const NewGroupForm = (props) => {
       </FormLabel>
       <div className={styles.searchBar}>
         <MemExtension
-          extensionSlotName="patient-search-bar-slot"
+          name="patient-search-bar-slot"
           state={{
             selectPatientAction: updatePatientList,
             buttonProps: {
@@ -139,14 +144,14 @@ const NewGroupForm = (props) => {
 };
 
 const AddGroupModal = ({
-  patients = undefined,
-  isCreate = undefined,
-  groupName = "",
-  cohortUuid = undefined,
-  isOpen,
-  handleCancel,
-  onPostSubmit,
-}) => {
+                         patients = undefined,
+                         isCreate = undefined,
+                         groupName = "",
+                         cohortUuid = undefined,
+                         isOpen,
+                         onPostCancel,
+                         onPostSubmit,
+                       }) => {
   const { setGroup } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
   const [errors, setErrors] = useState({});
@@ -191,17 +196,25 @@ const AddGroupModal = ({
   );
 
   const updatePatientList = useCallback(
-    (patient) => {
-      setPatientList((patientList) => {
-        if (!patientList.find((p) => p.uuid === patient)) {
-          return [...patientList, { uuid: patient }];
-        } else {
-          return patientList;
-        }
-      });
+    (patientUuid) => {
+      if (!patientList.find((p) => p.uuid === patientUuid)) {
+        fetchCurrentPatient(patientUuid).then((result) => {
+          const newPatient = {
+            uuid: patientUuid,
+            name: [result?.name?.[0]?.given, result?.name?.[0]?.family].join(
+              " "
+            ),
+          };
+          setPatientList(
+            [...patientList, newPatient].sort((a, b) =>
+              a.name?.localeCompare(b?.name, { sensitivity: "base" })
+            )
+          );
+        });
+      }
       setErrors((errors) => ({ ...errors, patientList: null }));
     },
-    [setPatientList]
+    [patientList, setPatientList]
   );
 
   const handleSubmit = () => {
@@ -217,6 +230,13 @@ const AddGroupModal = ({
     }
   };
 
+  const handleCancel = () => {
+    setPatientList(patients || []);
+    if (onPostCancel) {
+      onPostCancel();
+    }
+  };
+
   useEffect(() => {
     if (result) {
       setGroup({
diff --git a/src/group-form-entry-workflow/SessionDetailsForm.tsx b/src/group-form-entry-workflow/SessionDetailsForm.tsx
index 785ecfc..df766d6 100644
--- a/src/group-form-entry-workflow/SessionDetailsForm.tsx
+++ b/src/group-form-entry-workflow/SessionDetailsForm.tsx
@@ -34,8 +34,8 @@ const SessionDetailsForm = () => {
     control,
   } = useFormContext();
 
-  const { patientUuids } = useContext(GroupFormWorkflowContext);
-  const { patients, isLoading } = useGetPatients(patientUuids);
+  const { activeGroupMembers} = useContext(GroupFormWorkflowContext);
+  const { patients, isLoading } = useGetPatients(activeGroupMembers);
 
   return (
     <div>
diff --git a/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx b/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
index 3f8042d..dc50209 100644
--- a/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
+++ b/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
@@ -83,7 +83,7 @@ const AttendanceTable = ({ patients }) => {
     t("patientIsPresent", "Patient is present"),
   ];
 
-  const handleCancel = useCallback(() => {
+  const onPostCancel = useCallback(() => {
     setOpen(false);
   }, []);
 
@@ -116,7 +116,7 @@ const AttendanceTable = ({ patients }) => {
           isCreate: false,
           groupName: activeGroupName,
           isOpen: isOpen,
-          handleCancel: handleCancel,
+          onPostCancel: onPostCancel,
           onPostSubmit: onPostSubmit,
         }}
       />
diff --git a/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx b/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx
index 4c19e97..207ea0c 100644
--- a/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx
+++ b/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx
@@ -14,6 +14,9 @@ const GroupSearchHeader = () => {
   );
   const [isOpen, setOpen] = useState(false);
   const handleSelectGroup = (group) => {
+    group.cohortMembers.sort((a, b) =>
+      a.display?.localeCompare(b?.display, { sensitivity: "base" })
+    );
     setGroup(group);
   };
 
@@ -50,7 +53,7 @@ const GroupSearchHeader = () => {
           {...{
             isCreate: true,
             isOpen: isOpen,
-            handleCancel: handleCancel,
+            onPostCancel: handleCancel,
             onPostSubmit: onPostSubmit,
           }}
         />