(feat) Patient name sorting

src/add-group-modal/AddGroupModal.tsx

@@ -16,7 +16,11 @@ 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,
+} from "@openmrs/esm-framework";
 import styles from "./styles.scss";
 import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
 import { usePostCohort } from "../hooks";
@@ -25,26 +29,11 @@ const MemExtension = React.memo(ExtensionSlot);
 
 const PatientRow = ({ patient, removePatient }) => {
   const { t } = useTranslation();
-  const { patient: patientInfo, error, isLoading } = usePatient(patient?.uuid);
   const onClickHandler = useCallback(
     () => removePatient(patient?.uuid),
     [patient, removePatient]
   );
 
-  const patientDisplay = useMemo(() => {
-    if (isLoading || error || !patientInfo) return "";
-
-    const { identifier, name } = patientInfo;
-    const displayIdentifier = identifier?.[0]?.value || "";
-    const givenNames = `${(name?.[0]?.given || []).join(" ")} ${
-      name?.[0]?.family || ""
-    }`;
-
-    return `${displayIdentifier ? `${displayIdentifier} -` : ""}${
-      givenNames ? ` ${givenNames}` : ""
-    }`.trim();
-  }, [isLoading, error, patientInfo]);
-
   return (
     <li className={styles.patientRow}>
       <span>
@@ -59,11 +48,80 @@ const PatientRow = ({ patient, removePatient }) => {
           iconDescription={t("remove", "Remove")}
         />
       </span>
-      <span className={styles.patientName}>{patientDisplay}</span>
+      <span className={styles.patientName}>{patient.display}</span>
     </li>
   );
 };
 
+const SortedPatientList = (props) => {
+  const { patientList, removePatient } = props;
+
+  const [patients, setPatients] = useState([]);
+
+  useEffect(() => {
+    let ignore = false;
+
+    const getPatients = async (uuids) => {
+      return await Promise.all(uuids.map((uuid) => fetchCurrentPatient(uuid)));
+    };
+
+    getPatients(patientList.map((obj) => obj.uuid)).then((result) => {
+      if (!ignore) {
+        setPatients(result);
+      }
+    });
+
+    return () => {
+      ignore = true;
+    };
+  }, [patientList]);
+
+  const sortedPatientList = useMemo(() => {
+    if (patients?.length === 0 || patientList?.length === 0) return [];
+
+    const getPersonDisplay = (patient) => {
+      if (!patient) return null;
+
+      const displayIdentifier = patient.identifier?.[0]?.value || "";
+
+      return `${
+        displayIdentifier ? `${displayIdentifier} -` : ""
+      } ${getPersonName(patient)}`.trim();
+    };
+
+    const getPersonName = (patient) => {
+      if (!patient) return null;
+      return `${(patient.name?.[0]?.given || []).join(" ")} ${
+        patient.name?.[0]?.family
+      }`.trim();
+    };
+
+    return patientList
+      .map((obj) => {
+        return {
+          uuid: obj.uuid,
+          name: getPersonName(obj),
+          display: getPersonDisplay(
+            patients.find((value) => value.id === obj.uuid)
+          ),
+        };
+      })
+      .sort((a, b) => a.name?.localeCompare(b?.name));
+  }, [patients, patientList]);
+
+  return (
+    <ul className={styles.patientList}>
+      {sortedPatientList?.map((patient) => (
+        <PatientRow
+          patient={patient}
+          removePatient={removePatient}
+          key={patient?.uuid}
+        />
+      ))}
+    </ul>
+  );
+};
+
 const NewGroupForm = (props) => {
   const {
     name,
@@ -106,15 +164,10 @@ const NewGroupForm = (props) => {
         </p>
       )}
       {!errors?.patientList && (
-        <ul className={styles.patientList}>
-          {patientList?.map((patient, index) => (
-            <PatientRow
-              patient={patient}
-              removePatient={removePatient}
-              key={index}
-            />
-          ))}
-        </ul>
+        <SortedPatientList
+          patientList={patientList}
+          removePatient={removePatient}
+        />
       )}
 
       <FormLabel>
@@ -125,7 +178,7 @@ const NewGroupForm = (props) => {
       </FormLabel>
       <div className={styles.searchBar}>
         <MemExtension
-          extensionSlotName="patient-search-bar-slot"
+          name="patient-search-bar-slot"
           state={{
             selectPatientAction: updatePatientList,
             buttonProps: {
@@ -144,7 +197,7 @@ const AddGroupModal = ({
   groupName = "",
   cohortUuid = undefined,
   isOpen,
-  handleCancel,
+  onPostCancel,
   onPostSubmit,
 }) => {
   const { setGroup } = useContext(GroupFormWorkflowContext);
@@ -217,6 +270,13 @@ const AddGroupModal = ({
     }
   };
 
+  const handleCancel = () => {
+    setPatientList(patients || []);
+    if (onPostCancel) {
+      onPostCancel();
+    }
+  };
+
   useEffect(() => {
     if (result) {
       setGroup({

src/context/GroupFormWorkflowReducer.ts

@@ -80,6 +80,9 @@ const reducer = (state, action) => {
     }
 
     case "SET_GROUP": {
+      action.group.cohortMembers.sort((a, b) =>
+        a.display?.localeCompare(b?.display)
+      );
       const newState = {
         ...state,
         forms: {

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>

src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -16,12 +16,17 @@ import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
 import AddGroupModal from "../../add-group-modal/AddGroupModal";
 
+const getPatientName = (patient) =>
+  patient.display ||
+  patient.displayName ||
+  `${(patient.name?.[0]?.given || []).join(" ")} ${
+    patient.name?.[0]?.family || ""
+  }`;
+
 const PatientRow = ({ patient }) => {
   const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
     GroupFormWorkflowContext
   );
-  const givenName = patient?.name?.[0]?.given?.[0];
-  const familyName = patient?.name?.[0]?.family;
   const identifier = patient?.identifier?.[0]?.value;
 
   const handleOnChange = (e, { checked }) => {
@@ -50,11 +55,7 @@ const PatientRow = ({ patient }) => {
 
   return (
     <TableRow>
-      <TableCell>
-        {patient.display ||
-          patient.displayName ||
-          [givenName, familyName].join(" ")}
-      </TableCell>
+      <TableCell>{getPatientName(patient)}</TableCell>
       <TableCell>{identifier}</TableCell>
       <TableCell>
         <Checkbox
@@ -83,7 +84,7 @@ const AttendanceTable = ({ patients }) => {
     t("patientIsPresent", "Patient is present"),
   ];
 
-  const handleCancel = useCallback(() => {
+  const onPostCancel = useCallback(() => {
     setOpen(false);
   }, []);
 
@@ -116,7 +117,7 @@ const AttendanceTable = ({ patients }) => {
           isCreate: false,
           groupName: activeGroupName,
           isOpen: isOpen,
-          handleCancel: handleCancel,
+          onPostCancel: onPostCancel,
           onPostSubmit: onPostSubmit,
         }}
       />
@@ -129,12 +130,15 @@ const AttendanceTable = ({ patients }) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {activeGroupMembers.map((patientUuid, index) => {
-            const patient = patients.find(
-              (patient) => patient.id === patientUuid
-            );
-            return <PatientRow patient={patient} key={index} />;
-          })}
+          {activeGroupMembers
+            .map((patientUuid) =>
+              patients.find((patient) => patient.id === patientUuid)
+            )
+            .filter(Boolean)
+            .sort((a, b) => getPatientName(a).localeCompare(getPatientName(b)))
+            .map((patient, index) => (
+              <PatientRow patient={patient} key={index} />
+            ))}
         </TableBody>
       </Table>
     </div>

src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx

@@ -50,7 +50,7 @@ const GroupSearchHeader = () => {
           {...{
             isCreate: true,
             isOpen: isOpen,
-            handleCancel: handleCancel,
+            onPostCancel: handleCancel,
             onPostSubmit: onPostSubmit,
           }}
         />