@wger-project/react-components 25.12.5 → 26.1.18

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/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',
 }
 
 

package/src/utils/url.test.ts

@@ -1,4 +1,5 @@
-import { makeHeader, makeLink, makeUrl, WgerLink } from "utils/url";
+import i18n from "i18n";
+import { getAcceptLanguage, makeHeader, makeLink, makeUrl, WgerLink } from "utils/url";
 
 describe("test url utility", () => {
 
@@ -67,6 +68,7 @@ describe("test the header utility", () => {
     test('generate header', () => {
         const result = makeHeader('123');
         expect(result).toStrictEqual({
+            'Accept-Language': 'en',
             'Authorization': `Token 123`,
             'Content-Type': 'application/json',
         });
@@ -75,6 +77,7 @@ describe("test the header utility", () => {
     test('generate header - token from config', () => {
         const result = makeHeader();
         expect(result).toStrictEqual({
+            'Accept-Language': 'en',
             'Authorization': `Token 122333444455555666666`,
             'Content-Type': 'application/json',
         });
@@ -123,5 +126,33 @@ describe("test the makeLink helper", () => {
         const result = makeLink(WgerLink.WEIGHT_OVERVIEW, 'de',);
         expect(result).toEqual('/de/weight/overview');
     });
+});
+
+describe("test the getAcceptLanguage helper", () => {
+
+    beforeEach(() => {
+        // @ts-expect-error - test helper assignment
+        i18n.languages = undefined;
+    });
+
+    test("returns default when languages is undefined", () => {
+        // @ts-expect-error - test helper assignment
+        i18n.languages = undefined;
+        expect(getAcceptLanguage()).toBe("en");
+    });
 
+    test("returns default when languages is an empty array", () => {
+        i18n.languages = [];
+        expect(getAcceptLanguage()).toBe("en");
+    });
+
+    test("returns single language code", () => {
+        i18n.languages = ["de"];
+        expect(getAcceptLanguage()).toBe("de");
+    });
+
+    test("joins multiple language codes with comma", () => {
+        i18n.languages = ["de-DE", "fr-FR"];
+        expect(getAcceptLanguage()).toBe("de-DE, fr-FR");
+    });
 });

package/src/utils/url.ts

@@ -1,5 +1,6 @@
 import { AxiosRequestConfig } from "axios";
 import { IS_PROD, VITE_API_KEY, VITE_API_SERVER } from "config";
+import i18n from "i18n";
 import slug from "slug";
 
 interface makeUrlInterface {
@@ -50,8 +51,10 @@ export function makeUrl(path: string, params?: makeUrlInterface) {
 
 
 export enum WgerLink {
+    // Dashboard
     DASHBOARD,
 
+    // Routines
     ROUTINE_OVERVIEW,
     ROUTINE_DETAIL,
     ROUTINE_EDIT,
@@ -70,16 +73,20 @@ export enum WgerLink {
     PRIVATE_TEMPLATE_OVERVIEW,
     PUBLIC_TEMPLATE_OVERVIEW,
 
+    // Exercises
     EXERCISE_DETAIL,
     EXERCISE_OVERVIEW,
     EXERCISE_CONTRIBUTE,
 
+    // Body weight
     WEIGHT_OVERVIEW,
     WEIGHT_ADD,
 
+    // Measurements
     MEASUREMENT_OVERVIEW,
     MEASUREMENT_DETAIL,
 
+    // Nutrition
     NUTRITION_OVERVIEW,
     NUTRITION_DETAIL,
     NUTRITION_PLAN_PDF,
@@ -88,7 +95,9 @@ export enum WgerLink {
 
     INGREDIENT_DETAIL,
 
-    CALENDAR
+    // Other
+    CALENDAR,
+    TROPHIES,
 }
 
 type UrlParams = { id: number, id2?: number, slug?: string, date?: string };
@@ -182,6 +191,9 @@ export function makeLink(link: WgerLink, language?: string, params?: UrlParams):
         case WgerLink.INGREDIENT_DETAIL:
             return `/${language}/nutrition/ingredient/${params!.id}/view`;
 
+        case WgerLink.TROPHIES:
+            return `/${language}/trophies`;
+
         // Dashboard
         case WgerLink.DASHBOARD:
         default:
@@ -222,7 +234,7 @@ export function makeHeader(token?: string) {
 
     const out: AxiosRequestConfig['headers'] = {};
     out['Content-Type'] = 'application/json';
-
+    out['Accept-Language'] = getAcceptLanguage();
     if (token) {
         out['Authorization'] = `Token ${token}`;
     }
@@ -231,7 +243,16 @@ export function makeHeader(token?: string) {
     if (IS_PROD && csrfCookie != undefined) {
         out['X-CSRFToken'] = csrfCookie;
     }
-
     return out;
 }
 
+export function getAcceptLanguage(): string {
+    const languages = i18n.languages || [];
+    if (languages.length === 0) {
+        return 'en';
+    }
+
+    return languages.map((language) => {
+        return language;
+    }).join(', ');
+}

package/src/components/Carousel/carousel.module.css

@@ -1,43 +0,0 @@
-.carousel {
-  overflow: hidden;
-  margin: 2rem 0;
-}
-@media screen and (min-width: 700px) {
-  .carousel {
-    display: none;
-  }
-}
-.carousel .inner {
-  white-space: nowrap;
-  transition: transform 0.3s;
-}
-
-.carousel_item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  background-color: #7795bd;
-  color: #fff;
-  border-radius: 10px;
-}
-.indicators {
-  display: flex;
-  justify-content: center;
-}
-
-.indicators > button {
-  margin: 5px;
-  border: none;
-  background-color: #2a4c7d;
-  color: #fff;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.indicators > button.active {
-  background-color: green;
-  color: #fff;
-}
-
-/*# sourceMappingURL=carousel.module.css.map */

package/src/components/Carousel/carousel.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["carousel.module.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;EACA;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAOF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"carousel.module.css"}