Consistently Sort Sessions by Date

web_registry/src/components/PatientDetail/BAChecklist.tsx

@@ -12,7 +12,6 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import { compareAsc } from "date-fns";
 import { observer } from "mobx-react";
 import {
   BehavioralActivationChecklistItem,
@@ -31,9 +30,7 @@ export const BAChecklist: FunctionComponent = observer(() => {
   const currentPatient = usePatient();
 
   const baCompletion: { [key: string]: Date | undefined } = {};
-  currentPatient?.sessions
-    .slice()
-    .sort((a, b) => compareAsc(a.date, b.date))
+  currentPatient?.sessionsSortedByDate
     .map((s) => s as ISession)
     .forEach((s) => {
       Object.keys(s.behavioralActivationChecklist).forEach((key) => {

web_registry/src/components/PatientDetail/PatientCardExtended.tsx

@@ -36,15 +36,14 @@ export const PatientCardExtended: FunctionComponent = observer((_) => {
     state.open = false;
   });
 
-  const sessionCount = patient.sessions.length;
-  const firstSession =
+  const sessionCount = patient.sessionsSortedByDate.length;
+  const firstSessionDate =
     sessionCount > 0
-      ? formatDateOnly(patient.sessions[0].date, "MM/dd/yyyy")
-      : "--";
-  const lastSession =
-    sessionCount > 0
-      ? formatDateOnly(patient.sessions[sessionCount - 1].date, "MM/dd/yyyy")
+      ? formatDateOnly(patient.sessionsSortedByDate[0].date, "MM/dd/yyyy")
       : "--";
+  const lastSessionDate = patient.latestSession
+    ? formatDateOnly(patient.latestSession.date, "MM/dd/yyyy")
+    : "--";
 
   const flaggedForDiscussion =
     !!profile.discussionFlag?.["Flag for discussion"];
@@ -55,8 +54,8 @@ export const PatientCardExtended: FunctionComponent = observer((_) => {
       {sessionCount > 0 ? (
         <div>
           <LabeledField label="Session #" value={sessionCount} />
-          <LabeledField label="First Session" value={firstSession} />
-          <LabeledField label="Last Session" value={lastSession} />
+          <LabeledField label="First Session" value={firstSessionDate} />
+          <LabeledField label="Last Session" value={lastSessionDate} />
           <br />
         </div>
       ) : null}

web_registry/src/components/PatientDetail/SessionInfo.tsx

@@ -430,9 +430,7 @@ export const SessionInfo: FunctionComponent = observer(() => {
   });
 
   const handleEditSession = action((sessionId: string) => {
-    const session = currentPatient.sessions.find(
-      (s) => s.sessionId == sessionId,
-    );
+    const session = currentPatient.getSessionById(sessionId);
 
     state.session = { ...getDefaultSession(), ...session };
     state.open = true;
@@ -546,7 +544,7 @@ export const SessionInfo: FunctionComponent = observer(() => {
         log.totalScore || getAssessmentScoreFromPointValues(log.pointValues),
     }));
 
-  const sessionDates = currentPatient.sessions
+  const sessionDates = currentPatient.sessionsSortedByDate
     .filter((s) => !!s.sessionId)
     .map((s) => ({
       date: s.date,

web_registry/src/components/PatientDetail/TreatmentInfo.tsx

@@ -47,7 +47,7 @@ export const TreatmentInfo: FunctionComponent = observer(() => {
     Other: false,
   };
 
-  currentPatient.sessions.forEach((s) => {
+  currentPatient.sessionsSortedByDate.forEach((s) => {
     Object.keys(s.behavioralStrategyChecklist).forEach((k) => {
       if (
         !!s.behavioralStrategyChecklist[k as BehavioralStrategyChecklistItem]

web_registry/src/components/caseload/CaseloadTable.tsx

@@ -519,11 +519,10 @@ export const CaseloadTable: FunctionComponent<ICaseloadTableProps> = observer(
     const data = patients
       .map((p) => {
         const initialSessionDate =
-          p.sessions?.length > 0 ? p.sessions[0].date : undefined;
-        const recentSessionDate =
-          p.sessions?.length > 0
-            ? p.sessions[p.sessions.length - 1].date
+          p.sessionsSortedByDate?.length > 0
+            ? p.sessionsSortedByDate[0].date
             : undefined;
+        const recentSessionDate = p.latestSession?.date;
         const recentReviewDate =
           p.caseReviews?.length > 0
             ? p.caseReviews[p.caseReviews.length - 1].date
@@ -537,7 +536,9 @@ export const CaseloadTable: FunctionComponent<ICaseloadTableProps> = observer(
             : undefined;
 
         const totalSessionsCount =
-          p.sessions && p.sessions.length > 0 ? p.sessions.length : undefined;
+          p.sessionsSortedByDate && p.sessionsSortedByDate.length > 0
+            ? p.sessionsSortedByDate.length
+            : undefined;
         const treatmentWeeksCount =
           initialSessionDate && recentSessionDate
             ? differenceInWeeks(recentSessionDate, initialSessionDate) + 1

web_registry/src/stores/PatientStore.ts

@@ -13,6 +13,7 @@ import {
   IPatientService,
 } from "shared/patientService";
 import { IPromiseQueryState, PromiseQuery } from "shared/promiseQuery";
+import { sortSessionsByDate } from "shared/sorting";
 import {
   getLoadAndLogQuery,
   onArrayConflict,
@@ -64,10 +65,14 @@ export interface IPatientStore extends IPatient {
   readonly loadValuesState: IPromiseQueryState;
   readonly loadValuesInventoryState: IPromiseQueryState;
 
+  // Sorted properties
+  readonly sessionsSortedByDate: ISession[];
+
   // Helpers
   getActivitiesByLifeAreaId: (lifeAreaId: string) => IActivity[];
   getActivitiesByValueId: (valueId: string) => IActivity[];
   getActivitiesWithoutValueId: () => IActivity[];
+  getSessionById: (sessionId: string) => ISession | undefined;
   getValueById: (valueId: string) => IValue | undefined;
 
   // Data load/save
@@ -285,8 +290,8 @@ export class PatientStore implements IPatientStore {
   }
 
   @computed get latestSession() {
-    if (this.sessions.length > 0) {
-      return this.sessions[this.sessions.length - 1];
+    if (this.sessionsSortedByDate.length > 0) {
+      return this.sessionsSortedByDate[this.sessionsSortedByDate.length - 1];
     }
 
     return undefined;
@@ -321,6 +326,10 @@ export class PatientStore implements IPatientStore {
     return this.loadSessionsQuery.value || [];
   }
 
+  @computed get sessionsSortedByDate() {
+    return sortSessionsByDate(this.sessions.slice());
+  }
+
   @computed public get values() {
     return this.loadValuesQuery.value || [];
   }
@@ -399,7 +408,6 @@ export class PatientStore implements IPatientStore {
   }
 
   // Helpers
-  @action.bound
   public getActivitiesByLifeAreaId(lifeAreaId: string) {
     return this.activities.filter((a) => {
       if (!a.valueId) {
@@ -415,7 +423,6 @@ export class PatientStore implements IPatientStore {
     });
   }
 
-  @action.bound
   public getActivitiesByValueId(valueId: string) {
     return this.activities.filter((a) => {
       if (!a.valueId) {
@@ -426,14 +433,17 @@ export class PatientStore implements IPatientStore {
     });
   }
 
-  @action.bound
   public getActivitiesWithoutValueId() {
     return this.activities.filter((a) => {
       return !a.valueId;
     });
   }
 
-  @action.bound getValueById(valueId: string) {
+  public getSessionById(sessionId: string) {
+    return this.sessions.find((v) => v.sessionId == sessionId);
+  }
+
+  public getValueById(valueId: string) {
     return this.values.find((v) => v.valueId == valueId);
   }
 
@@ -826,9 +836,9 @@ export class PatientStore implements IPatientStore {
         ),
       })
       .then((updatedSession) => {
-        const existing = this.sessions.find(
-          (s) => s.sessionId == updatedSession.sessionId,
-        );
+        const existing = !!updatedSession.sessionId
+          ? this.getSessionById(updatedSession.sessionId)
+          : undefined;
         logger.assert(!!existing, "Session not found when expected");
 
         if (!!existing) {

web_shared/sorting.ts

@@ -1,6 +1,6 @@
 import { compareAsc } from "date-fns";
 import { toLocalDateTime } from "shared/time";
-import { IActivity, IActivitySchedule } from "shared/types";
+import { IActivity, IActivitySchedule, ISession } from "shared/types";
 
 export const compareActivityByName: (
   compareA: IActivity,
@@ -22,6 +22,13 @@ export const compareActivityScheduleByDateAndTime: (
   return compareAsc(compareDateA, compareDateB);
 };
 
+export const compareSessionsByDate: (
+  compareA: ISession,
+  compareB: ISession,
+) => number = function (compareA: ISession, compareB: ISession): number {
+  return compareAsc(compareA.date, compareB.date);
+};
+
 export const compareStringCaseInsensitive: (
   compareA: string,
   compareB: string,
@@ -45,6 +52,11 @@ export const sortActivitySchedulesByDateAndTime: (
   return activitySchedules.slice().sort(compareActivityScheduleByDateAndTime);
 };
 
+export const sortSessionsByDate: (sessions: ISession[]) => ISession[] =
+  function (sessions: ISession[]): ISession[] {
+    return sessions.slice().sort(compareSessionsByDate);
+  };
+
 export const sortStringsCaseInsensitive: (strings: string[]) => string[] =
   function (strings: string[]): string[] {
     return strings.slice().sort(compareStringCaseInsensitive);