@wger-project/react-components 25.11.22 → 26.1.18

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"}

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

@@ -1,46 +0,0 @@
-.carousel {
-    overflow: hidden;
-    margin: 2rem 0;
-
-    @media screen and (min-width: 700px) {
-        display: none;
-    }
-
-    .inner {
-        white-space: nowrap;
-        transition: transform 0.3s;
-      }
-  }
-    
-  .carousel_item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    background-color: rgb(119, 149, 189);
-    color: #fff;
-    border-radius: 10px;
-    
-    img {
-       
-    }
-  }
-  
-  .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;
-  }  

package/src/components/Carousel/index.tsx

@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styles from './carousel.module.css';
-
-export interface CarouselItemProps {
-    children: React.ReactNode;
-}
-
-export const CarouselItem = ({ children }: CarouselItemProps) => {
-    return (
-        <div className={styles.carousel_item}>
-            {children}
-        </div>
-    );
-};
-
-export interface CarouselProps {
-    children: React.ReactNode | React.ReactNode[];
-}
-
-export const Carousel: React.FC<CarouselProps> = ({ children }: CarouselProps) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    const updateIndex = (newIndex: number) => {
-        if (newIndex < 0) {
-            newIndex = React.Children.count(children) - 1;
-
-        } else if (newIndex >= React.Children.count(children)) {
-            newIndex = 0;
-        }
-
-        setActiveIndex(newIndex);
-    };
-
-    useEffect(() => {
-
-    });
-
-    return (
-        <div className={styles.carousel}>
-            <div
-                className={styles.inner}
-                style={{ transform: `translateX(-${activeIndex * 100}%)` }}
-            >
-                {React.Children.map(children, (child) => {
-                    if (React.isValidElement(child)) {
-                        return React.cloneElement(child);
-                    }
-                })}
-            </div>
-            <div className={styles.indicators}>
-                {React.Children.map(children, (child, index) => {
-                    return (
-                        <button
-                            className={`${index === activeIndex ? "active" : ""}`}
-                            onClick={() => {
-                                updateIndex(index);
-                            }}
-                        >
-                            {index + 1}
-                        </button>
-                    );
-                })}
-            </div>
-        </div>
-    );
-};

package/src/components/Dashboard/Dashboard.tsx

@@ -1,22 +0,0 @@
-import Grid from '@mui/material/Grid';
-import { NutritionCard } from "components/Dashboard/NutritionCard";
-import { RoutineCard } from "components/Dashboard/RoutineCard";
-import { WeightCard } from "components/Dashboard/WeightCard";
-import React from 'react';
-
-export const Dashboard = () => {
-
-    return (
-        <Grid container spacing={2}>
-            <Grid size={{ xs: 12, sm: 4 }}>
-                <RoutineCard />
-            </Grid>
-            <Grid size={{ xs: 12, sm: 4 }}>
-                <NutritionCard />
-            </Grid>
-            <Grid size={{ xs: 12, sm: 4 }}>
-                <WeightCard />
-            </Grid>
-        </Grid>
-    );
-};