@wger-project/react-components 25.12.5 → 26.2.26

package/src/components/Trophies/models/userTrophy.ts

@@ -0,0 +1,67 @@
+import { ApiTrophyType, Trophy } from "components/Trophies/models/trophy";
+import { Adapter } from "utils/Adapter";
+
+export interface ApiUserTrophyType {
+    id: number,
+    trophy: ApiTrophyType,
+    earned_at: string,
+    progress: number,
+    "is_notified": boolean,
+}
+
+export type UserTrophyConstructorParams = {
+    id: number;
+    trophy: Trophy;
+    earnedAt: Date;
+    progress: number;
+    isNotified: boolean;
+};
+
+/*
+ * A list of trophies earned by a user, along with their progress.
+ */
+export class UserTrophy {
+
+    public id: number;
+    public trophy: Trophy;
+    public earnedAt: Date;
+    public progress: number;
+    public isNotified: boolean;
+
+    constructor(params: UserTrophyConstructorParams) {
+        this.id = params.id;
+        this.trophy = params.trophy;
+        this.earnedAt = params.earnedAt;
+        this.progress = params.progress;
+        this.isNotified = params.isNotified;
+    }
+
+    static fromJson(json: ApiUserTrophyType): UserTrophy {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
+}
+
+class UserTrophyAdapter implements Adapter<UserTrophy> {
+    fromJson(item: ApiUserTrophyType) {
+        return new UserTrophy({
+            id: item.id,
+            trophy: Trophy.fromJson(item.trophy),
+            earnedAt: new Date(item.earned_at),
+            progress: item.progress,
+            isNotified: item.is_notified,
+        });
+    }
+
+    toJson(trophy: UserTrophy) {
+        return {
+            id: trophy.id,
+            "is_notified": trophy.isNotified,
+        };
+    }
+}
+
+const adapter = new UserTrophyAdapter();

package/src/components/Trophies/models/userTrophyProgression.test.ts

@@ -0,0 +1,43 @@
+import { trophyType } from "components/Trophies/models/trophy";
+import { UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+
+
+describe('Test the UserTrophyProgression model', () => {
+
+    test('correctly creates an object from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            trophy: {
+                id: 1,
+                uuid: "5362e55b-eaf1-4e34-9ef8-661538a3bdd9",
+                name: "Beginner",
+                description: "Complete your first workout",
+                image: "http://localhost:8000/static/trophies/count/5362e55b-eaf1-4e34-9ef8-661538a3bdd9.png",
+                "trophy_type": "count" as trophyType,
+                "is_hidden": false,
+                "is_progressive": false,
+                order: 1
+            },
+            "is_earned": true,
+            "earned_at": "2025-12-19T13:48:07.513138+01:00",
+            progress: 100.0,
+            "current_value": null,
+            "target_value": null,
+            "progress_display": null
+        };
+
+        // Act
+        const userTrophyProgression = UserTrophyProgression.fromJson(apiResponse);
+
+        // Assert
+        expect(userTrophyProgression.isEarned).toBe(true);
+        expect(userTrophyProgression.earnedAt).toStrictEqual(new Date("2025-12-19T13:48:07.513138+01:00"));
+        expect(userTrophyProgression.progress).toBe(100.0);
+        expect(userTrophyProgression.currentValue).toBe(null);
+        expect(userTrophyProgression.targetValue).toBe(null);
+        expect(userTrophyProgression.progressDisplay).toBe(null);
+
+        expect(userTrophyProgression.trophy.uuid).toBe("5362e55b-eaf1-4e34-9ef8-661538a3bdd9");
+
+    });
+});

package/src/components/Trophies/models/userTrophyProgression.ts

@@ -0,0 +1,68 @@
+import { ApiTrophyType, Trophy } from "components/Trophies/models/trophy";
+import { Adapter } from "utils/Adapter";
+
+export interface ApiUserTrophyType {
+    trophy: ApiTrophyType,
+    is_earned: boolean
+    earned_at: string | null,
+    progress: number,
+    current_value: number | null,
+    target_value: number | null,
+    progress_display: string | null,
+}
+
+export type UserTrophyConstructorParams = {
+    trophy: Trophy;
+    isEarned: boolean;
+    earnedAt: Date | null;
+    progress: number;
+    currentValue: number | null;
+    targetValue: number | null;
+    progressDisplay: string | null;
+};
+
+export class UserTrophyProgression {
+
+    public trophy: Trophy;
+    public earnedAt: Date | null;
+    public isEarned: boolean;
+    public progress: number;
+    public currentValue: number | null;
+    public targetValue: number | null;
+    public progressDisplay: string | null;
+
+    constructor(params: UserTrophyConstructorParams) {
+        this.trophy = params.trophy;
+        this.earnedAt = params.earnedAt;
+        this.isEarned = params.isEarned;
+        this.progress = params.progress;
+        this.currentValue = params.currentValue;
+        this.targetValue = params.targetValue;
+        this.progressDisplay = params.progressDisplay;
+    }
+
+    static fromJson(json: ApiUserTrophyType): UserTrophyProgression {
+        return adapter.fromJson(json);
+    }
+}
+
+class UserTrophyAdapter implements Adapter<UserTrophyProgression> {
+    fromJson(item: ApiUserTrophyType) {
+        return new UserTrophyProgression({
+            trophy: Trophy.fromJson(item.trophy),
+            earnedAt: item.earned_at !== null ? new Date(item.earned_at) : null,
+            isEarned: item.is_earned,
+            progress: item.progress,
+            currentValue: item.current_value,
+            targetValue: item.target_value,
+            progressDisplay: item.progress_display,
+        });
+    }
+
+    toJson(item: UserTrophyProgression) {
+        return {};
+    }
+}
+
+
+const adapter = new UserTrophyAdapter();

package/src/components/Trophies/queries/trophies.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getTrophies } from "components/Trophies/services/trophies";
+import { getUserTrophies, setTrophyAsNotified } from "components/Trophies/services/userTrophies";
+import { getUserTrophyProgression } from "components/Trophies/services/userTrophyProgression";
+import { QueryKey } from "utils/consts";
+
+export const useTrophiesQuery = () => useQuery({
+    queryFn: () => getTrophies(),
+    queryKey: [QueryKey.TROPHIES],
+});
+
+export const useUserTrophiesQuery = () => useQuery({
+    queryFn: () => getUserTrophies(),
+    queryKey: [QueryKey.USER_TROPHIES],
+});
+
+export const useSetTrophyAsNotifiedQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (trophyId: number) => setTrophyAsNotified(trophyId),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.USER_TROPHIES]
+        })
+    });
+};
+
+export const useUserTrophyProgressionQuery = () => useQuery({
+    queryFn: () => getUserTrophyProgression(),
+    queryKey: [QueryKey.USER_TROPHY_PROGRESSION],
+});

package/src/components/Trophies/services/trophies.ts

@@ -0,0 +1,22 @@
+import { Trophy } from "components/Trophies/models/trophy";
+import { API_MAX_PAGE_SIZE, ApiPath } from "utils/consts";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getTrophies = async (): Promise<Trophy[]> => {
+
+    const url = makeUrl(
+        ApiPath.API_TROPHIES_PATH,
+        { query: { limit: API_MAX_PAGE_SIZE } }
+    );
+    const out: Trophy[] = [];
+
+    for await (const page of fetchPaginated(url, makeHeader())) {
+        for (const logData of page) {
+            out.push(Trophy.fromJson(logData));
+        }
+    }
+    return out;
+};
+

package/src/components/Trophies/services/userTrophies.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+import { API_MAX_PAGE_SIZE, ApiPath } from "utils/consts";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getUserTrophies = async (): Promise<UserTrophy[]> => {
+
+    const url = makeUrl(
+        ApiPath.API_USER_TROPHIES_PATH,
+        { query: { limit: API_MAX_PAGE_SIZE } }
+    );
+    const out: UserTrophy[] = [];
+
+    for await (const page of fetchPaginated(url, makeHeader())) {
+        for (const logData of page) {
+            out.push(UserTrophy.fromJson(logData));
+        }
+    }
+    return out;
+};
+
+
+export const setTrophyAsNotified = async (trophyId: number): Promise<void> => {
+
+    await axios.patch(
+        makeUrl(ApiPath.API_USER_TROPHIES_PATH, { id: trophyId }),
+        { id: trophyId, "is_notified": true },
+        { headers: makeHeader() }
+    );
+
+};

package/src/components/Trophies/services/userTrophyProgression.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { ApiUserTrophyType, UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+import { ApiPath } from "utils/consts";
+import { makeHeader, makeUrl } from "utils/url";
+
+
+export const getUserTrophyProgression = async (): Promise<UserTrophyProgression[]> => {
+
+    const { data: trophyData } = await axios.get(
+        makeUrl(ApiPath.API_USER_TROPHY_PROGRESSION_PATH),
+        { headers: makeHeader() }
+    );
+
+    return trophyData.map((item: ApiUserTrophyType) => UserTrophyProgression.fromJson(item));
+};
+

package/src/components/WorkoutRoutines/Detail/RoutineDetail.tsx

@@ -51,7 +51,7 @@ export const RoutineDetail = () => {
                             href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: routineId })}
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>}
-                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                        {routine!.dayDataCurrentIterationFiltered.map((dayData) =>
                             <DayDetailsCard
                                 routineId={routineId}
                                 dayData={dayData}

package/src/components/WorkoutRoutines/Detail/TemplateDetail.tsx

@@ -48,7 +48,7 @@ export const TemplateDetail = () => {
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>
 
-                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                        {routine!.dayDataCurrentIterationFiltered.map((dayData) =>
                             <DayDetailsCard
                                 dayData={dayData}
                                 routineId={routineId}

package/src/components/WorkoutRoutines/models/Routine.test.ts

@@ -110,4 +110,21 @@ describe('Routine model tests', () => {
         // Assert
         expect(routine.dayDataCurrentIteration).toEqual(testRoutineDayData1);
     });
+
+    test('correctly filters out null days', () => {
+
+        // Arrange
+        routine.dayData = [
+            ...testRoutineDayData1,
+            ...testRoutineDayData1,
+            ...testRoutineDayData1,
+        ];
+        routine.dayData[0].date = new Date('2026-01-01');
+        routine.dayData[1].date = new Date('2026-01-02');
+        routine.dayData[2].date = new Date('2026-01-03');
+
+        // Assert
+        expect(routine.dayDataCurrentIteration.length).toEqual(3);
+        expect(routine.dayDataCurrentIterationFiltered).toEqual(testRoutineDayData1);
+    });
 });

package/src/components/WorkoutRoutines/models/Routine.ts

@@ -62,12 +62,29 @@ export class Routine {
     }
 
     /*
-     * Filter out dayData entries with null days
+     * Filter out dayData entries with null days as well as duplicated days from
+     * the "fixed weekly schedule" toggle.
      */
-    get dayDataCurrentIterationNoNulls() {
-        return this.dayDataCurrentIteration
+    get dayDataCurrentIterationFiltered() {
+        const sorted = this.dayDataCurrentIteration
             .filter((dayData) => dayData.day !== null)
             .sort((a, b) => a.day!.order - b.day!.order);
+
+        // Filter out entries where the day is the same as the previous one. This is
+        // necessary because if the user has the "Fixed weekly schedule" option enabled,
+        // there would be multiple entries for the same day.
+        const unique: RoutineDayData[] = [];
+        for (const dd of sorted) {
+            if (unique.length === 0 || unique[unique.length - 1].day!.id !== dd.day!.id) {
+                unique.push(dd);
+            } else {
+                // If the day id is the same as the previous entry, replace it with the current one
+                // so the last occurrence is kept.
+                unique[unique.length - 1] = dd;
+            }
+        }
+
+        return unique;
     }
 
     get groupedDayDataByIteration() {

package/src/components/WorkoutRoutines/widgets/RoutineDetailsCard.tsx

@@ -53,7 +53,7 @@ export const RoutineDetailsCard = () => {
                     </Typography>
                 }
                 <Stack spacing={2} sx={{ mt: 2 }}>
-                    {routineQuery.data!.dayDataCurrentIteration.filter((dayData) => dayData.day !== null).map((dayData, index) =>
+                    {routineQuery.data!.dayDataCurrentIterationFiltered.map((dayData, index) =>
                         <DayDetailsCard routineId={routineId} dayData={dayData} key={`dayDetails-${index}`} />
                     )}
                 </Stack>

package/src/components/index.ts

@@ -1,3 +1 @@
-export { BodyWeight } from './BodyWeight/index';
 export { Header } from './Header';
-export { Carousel, CarouselItem } from './Carousel';

package/src/pages/Calendar/index.tsx

@@ -4,7 +4,7 @@ import CalendarComponent from "../../components/Calendar/Components/CalendarComp
 export const Calendar = () => {
     return (
         <div>
-            <CalendarComponent/>
+            <CalendarComponent />
         </div>
     );
-};
+};

package/src/pages/WeightOverview/index.tsx

@@ -1,5 +1,5 @@
+import { BodyWeight } from "components/BodyWeight";
 import React from 'react';
-import { BodyWeight } from 'components';
 
 export const WeightOverview = () => {
     return <BodyWeight />;

package/src/routes.tsx

@@ -6,6 +6,7 @@ import { BmiCalculator } from "components/Nutrition/components/BmiCalculator";
 import { NutritionDiaryOverview } from "components/Nutrition/components/NutritionDiaryOverview";
 import { PlanDetail } from "components/Nutrition/components/PlanDetail";
 import { PlansOverview } from "components/Nutrition/components/PlansOverview";
+import { TrophiesDetail } from "components/Trophies/components/TrophiesDetail";
 import { RoutineAdd } from "components/WorkoutRoutines/Detail/RoutineAdd";
 import { RoutineDetail } from "components/WorkoutRoutines/Detail/RoutineDetail";
 import { RoutineDetailsTable } from "components/WorkoutRoutines/Detail/RoutineDetailsTable";
@@ -123,10 +124,14 @@ export const WgerRoutes = () => {
                     <Route index element={<ConfigurableDashboard />} />
                     <Route path="" element={<ConfigurableDashboard />} />
                 </Route>
+                <Route path="trophies">
+                    <Route index element={<TrophiesDetail />} />
+                    <Route path="" element={<TrophiesDetail />} />
+                </Route>
             </Route>
             <Route path="/" element={<ConfigurableDashboard />} />
 
-            {/* This route matches when no other route match, so a 404 */}
+            {/* This route matches when no other route matches, so a 404 */}
             <Route
                 path="*"
                 element={

package/src/services/measurements.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import { MeasurementCategory, MeasurementCategoryAdapter } from "components/Measurements/models/Category";
-import { MeasurementEntry, MeasurementEntryAdapter } from "components/Measurements/models/Entry";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { MeasurementEntry } from "components/Measurements/models/Entry";
 import { ApiMeasurementCategoryType } from 'types';
 import { API_MAX_PAGE_SIZE } from "utils/consts";
 import { dateToYYYYMMDD } from "utils/date";
@@ -18,8 +18,6 @@ export type MeasurementQueryOptions = {
 export const getMeasurementCategories = async (options?: MeasurementQueryOptions): Promise<MeasurementCategory[]> => {
     const { filtersetQueryCategories = {}, filtersetQueryEntries = {} } = options || {};
 
-    const adapter = new MeasurementCategoryAdapter();
-    const entryAdapter = new MeasurementEntryAdapter();
     const categories: MeasurementCategory[] = [];
     const categoryUrl = makeUrl(API_MEASUREMENTS_CATEGORY_PATH, {
         query: {
@@ -30,7 +28,7 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
 
     for await (const page of fetchPaginated(categoryUrl, makeHeader())) {
         for (const catData of page) {
-            categories.push(adapter.fromJson(catData));
+            categories.push(MeasurementCategory.fromJson(catData));
         }
     }
 
@@ -48,7 +46,7 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
         // Collect all pages of entries
         for await (const page of fetchPaginated(url, makeHeader())) {
             for (const entries of page) {
-                out.push(entryAdapter.fromJson(entries));
+                out.push(MeasurementEntry.fromJson(entries));
             }
         }
         return out;
@@ -73,15 +71,14 @@ export const getMeasurementCategory = async (id: number): Promise<MeasurementCat
         { headers: makeHeader() },
     );
 
-    const category = new MeasurementCategoryAdapter().fromJson(receivedCategories);
-    const adapter = new MeasurementEntryAdapter();
+    const category = MeasurementCategory.fromJson(receivedCategories);
     const measurements: MeasurementEntry[] = [];
     const url = makeUrl(API_MEASUREMENTS_ENTRY_PATH, { query: { category: category.id } });
 
     // Collect all pages of entries
     for await (const page of fetchPaginated(url, makeHeader())) {
         for (const entries of page) {
-            measurements.push(adapter.fromJson(entries));
+            measurements.push(MeasurementEntry.fromJson(entries));
         }
     }
 
@@ -105,8 +102,7 @@ export const addMeasurementCategory = async (data: AddMeasurementCategoryParams)
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementCategoryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementCategory.fromJson(response.data);
 };
 
 export interface editMeasurementCategoryParams {
@@ -125,8 +121,7 @@ export const editMeasurementCategory = async (data: editMeasurementCategoryParam
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementCategoryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementCategory.fromJson(response.data);
 };
 
 export const deleteMeasurementCategory = async (id: number): Promise<void> => {
@@ -157,8 +152,7 @@ export const editMeasurementEntry = async (data: editMeasurementParams): Promise
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementEntryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementEntry.fromJson(response.data);
 };
 
 export interface AddMeasurementParams {
@@ -181,6 +175,5 @@ export const addMeasurementEntry = async (data: AddMeasurementParams): Promise<M
         { headers: makeHeader() }
     );
 
-    const adapter = new MeasurementEntryAdapter();
-    return adapter.fromJson(response.data);
+    return MeasurementEntry.fromJson(response.data);
 };

package/src/tests/trophies/trophiesTestData.ts

@@ -0,0 +1,80 @@
+import { Trophy } from "components/Trophies/models/trophy";
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+import { UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+
+export const testTrophies = () => {
+    return [
+        new Trophy({
+            id: 123,
+            type: 'other',
+            isHidden: false,
+            uuid: 'trophy-123',
+            name: 'Beginner',
+            description: 'Complete your first workout',
+            image: 'https://example.com/images/beginner.png',
+            isProgressive: false,
+        }),
+        new Trophy({
+            id: 456,
+            type: 'count',
+            isHidden: false,
+            uuid: 'trophy-456',
+            name: 'Unstoppable',
+            description: 'Maintain a 30-day workout streak',
+            image: 'https://example.com/images/unstoppable.png',
+            isProgressive: true,
+        }),
+        new Trophy({
+            id: 789,
+            type: 'other',
+            isHidden: true,
+            uuid: 'trophy-789',
+            name: 'Secret Trophy',
+            description: 'This is a super secret trophy',
+            image: 'https://example.com/images/secret.png',
+            isProgressive: false,
+        })
+    ];
+};
+
+export const testUserProgressionTrophies = () => {
+    return [
+        new UserTrophyProgression({
+            trophy: testTrophies()[0],
+            isEarned: true,
+            earnedAt: new Date('2025-12-19T10:00:00Z'),
+            progress: 100,
+            currentValue: null,
+            targetValue: null,
+            progressDisplay: null,
+        }),
+        new UserTrophyProgression({
+            trophy: testTrophies()[1],
+            isEarned: false,
+            earnedAt: new Date('2025-12-19T10:00:00Z'),
+            progress: 13.333333333333334,
+            currentValue: 4,
+            targetValue: 30,
+            progressDisplay: '4/30',
+        }),
+    ];
+};
+
+export const testUserTrophies = () => {
+    return [
+        new UserTrophy({
+            id: 123,
+            isNotified: true,
+            trophy: testTrophies()[0],
+            earnedAt: new Date('2025-12-19T10:00:00Z'),
+            progress: 100,
+        }),
+        new UserTrophy({
+            id: 456,
+            isNotified: true,
+            trophy: testTrophies()[1],
+            earnedAt: new Date('2025-12-19T10:00:00Z'),
+            progress: 100,
+        }),
+    ];
+};

package/src/utils/consts.ts

@@ -35,6 +35,8 @@ export const QUERY_MEASUREMENTS_CATEGORIES = 'measurements-categories';
  * These don't have any meaning, they just need to be globally unique
  */
 export enum QueryKey {
+
+    // Routines
     ROUTINE_OVERVIEW = 'routine-overview',
     ROUTINE_DETAIL = 'routine-detail',
     SESSION_SEARCH = 'session-search',
@@ -46,20 +48,23 @@ export enum QueryKey {
     ROUTINES_SHALLOW = 'routines-shallow',
     PRIVATE_TEMPLATES = 'private-templates',
     PUBLIC_TEMPLATES = 'public-templates',
+    ROUTINE_WEIGHT_UNITS = 'weight-units',
+    ROUTINE_REP_UNITS = 'rep-units',
 
+    // Nutrition
     NUTRITIONAL_PLANS = 'nutritional-plans',
     NUTRITIONAL_PLAN = 'nutritional-plan',
     NUTRITIONAL_PLAN_DIARY = 'nutritional-plan-diary',
     NUTRITIONAL_PLAN_LAST = 'nutritional-plan-last',
     INGREDIENT = 'ingredient',
 
+    // Body weight
     BODY_WEIGHT = 'body-weight',
 
-    ROUTINE_WEIGHT_UNITS = 'weight-units',
-    ROUTINE_REP_UNITS = 'rep-units',
-
+    // Profile
     QUERY_PROFILE = 'profile',
 
+    // Exercises
     EXERCISES = 'exercises',
     EXERCISE_VARIATIONS = 'variations',
     EXERCISE_DETAIL = 'detail',
@@ -68,6 +73,11 @@ export enum QueryKey {
     EQUIPMENT = 'equipment',
     MUSCLES = 'muscles',
     QUERY_NOTES = 'notes',
+
+    // Trophies
+    TROPHIES = 'trophies',
+    USER_TROPHIES = 'user-trophies',
+    USER_TROPHY_PROGRESSION = 'user-trophy-progression',
 }
 
 /*
@@ -106,6 +116,11 @@ export enum ApiPath {
 
     // Profile
     API_PROFILE_PATH = 'userprofile',
+
+    // Trophies
+    API_TROPHIES_PATH = 'trophy',
+    API_USER_TROPHIES_PATH = 'user-trophy',
+    API_USER_TROPHY_PROGRESSION_PATH = 'trophy/progress',
 }