Manually order the days and improve keys used when mapping

See wger-project/wger/issues#1980

Author: rolandgeider

src/components/Dashboard/RoutineCard.tsx

@@ -53,8 +53,8 @@ const RoutineCardContent = (props: { routine: Routine }) => {
         {/* Note: not 500 like the other cards, but a bit more since we don't have an action icon... */}
         <CardContent sx={{ height: "510px", overflow: "auto" }}>
             <List>
-                {props.routine.dayDataCurrentIteration.filter(dayData => dayData.day !== null).map((dayData, index) =>
-                    <DayListItem dayData={dayData} key={index} />)}
+                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) =>
+                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />)}
             </List>
         </CardContent>
 

src/components/WorkoutRoutines/Detail/RoutineDetail.tsx

@@ -50,11 +50,13 @@ export const RoutineDetail = () => {
                             href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: routineId })}
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>}
-
-                        {routine!.dayDataCurrentIteration.filter((dayData) => dayData.day !== null).map((dayData, index) =>
-                            // {routine!.dayDataCurrentIteration.map((dayData, index) =>
-                            <DayDetailsCard routineId={routineId} dayData={dayData} key={index}
-                                            readOnly={routine!.isTemplate} />
+                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                            <DayDetailsCard
+                                routineId={routineId}
+                                dayData={dayData}
+                                key={`dayDetails-${dayData.date.toISOString()}`}
+                                readOnly={routine!.isTemplate}
+                            />
                         )}
                     </Stack>
                 }

src/components/WorkoutRoutines/Detail/TemplateDetail.tsx

@@ -47,12 +47,12 @@ export const TemplateDetail = () => {
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>
 
-                        {routine!.dayDataCurrentIteration.filter((dayData) => dayData.day !== null).map((dayData, index) =>
+                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
                             <DayDetailsCard
                                 dayData={dayData}
                                 routineId={routineId}
                                 readOnly={true}
-                                key={`dayDetails-${index}`}
+                                key={`dayDetails-${dayData.date.toISOString()}`}
                             />
                         )}
                     </Stack>

src/components/WorkoutRoutines/models/Routine.ts

@@ -62,10 +62,18 @@ export class Routine {
 
     get dayDataCurrentIteration() {
         const iteration = this.getIteration() ?? 1;
-
         return this.dayData.filter(dayData => dayData.iteration === iteration);
     }
 
+    /*
+     * Filter out dayData entries with null days
+     */
+    get dayDataCurrentIterationNoNulls() {
+        return this.dayDataCurrentIteration
+            .filter((dayData) => dayData.day !== null)
+            .sort((a, b) => a.day!.order - b.day!.order);
+    }
+
     get groupedDayDataByIteration() {
         const groupedDayData: { [key: number]: RoutineDayData[] } = {};
         for (const dayData of this.dayData) {

src/components/WorkoutRoutines/models/RoutineDayData.ts

@@ -15,15 +15,22 @@ export class RoutineDayData {
     ) {
         this.slots = slots ?? [];
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any) {
+        return adapter.fromJson(json);
+    }
 }
 
 
-export class RoutineDayDataAdapter implements Adapter<RoutineDayData> {
+class RoutineDayDataAdapter implements Adapter<RoutineDayData> {
     fromJson = (item: any) => new RoutineDayData(
         item.iteration,
         new Date(item.date),
         item.label,
         item.day != null ? Day.fromJson(item.day) : null,
         item.slots.map((slot: any) => new SlotDataAdapter().fromJson(slot))
     );
-}
+}
+
+const adapter = new RoutineDayDataAdapter();

src/components/WorkoutRoutines/widgets/RoutineDetailsCard.tsx

@@ -173,7 +173,7 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
                         <IconButton
                             href={makeLink(WgerLink.ROUTINE_ADD_LOG, i18n.language, {
                                 id: props.routineId,
-                                id2: props.dayData.day!.id
+                                id2: props.dayData.day!.id!
                             })}>
                             <Addchart />
                         </IconButton>

src/services/routine.ts

@@ -3,7 +3,7 @@ import { Exercise } from "components/Exercises/models/exercise";
 import { Day } from "components/WorkoutRoutines/models/Day";
 import { RoutineStatsData, RoutineStatsDataAdapter } from "components/WorkoutRoutines/models/LogStats";
 import { Routine } from "components/WorkoutRoutines/models/Routine";
-import { RoutineDayData, RoutineDayDataAdapter } from "components/WorkoutRoutines/models/RoutineDayData";
+import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
 import { RoutineLogData, RoutineLogDataAdapter } from "components/WorkoutRoutines/models/RoutineLogData";
 import { getExercise } from "services/exercise";
 import { getRoutineRepUnits, getRoutineWeightUnits } from "services/workoutUnits";
@@ -215,9 +215,8 @@ export const getRoutineDayDataAllIterations = async (routineId: number): Promise
         { headers: makeHeader() }
     );
 
-    const adapter = new RoutineDayDataAdapter();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return response.data.map((data: any) => adapter.fromJson(data));
+    return response.data.map((data: any) => RoutineDayData.fromJson(data));
 };
 
 export const getRoutineStructure = async (routineId: number): Promise<Day[]> => {