@wger-project/react-components 25.12.5 → 26.2.26

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/GoalCard.tsx

@@ -1,71 +0,0 @@
-import TrendingUpIcon from "@mui/icons-material/TrendingUp";
-import { Button, IconButton, List, ListItem, ListItemText, Typography } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import { DashboardCard } from "components/Dashboard/DashboardCard";
-import React from "react";
-// import { useTranslation } from "react-i18next";
-
-/**
- * Example of a new widget using DashboardCard
- *
- * This demonstrates how simple it is to create a new dashboard widget.
- * All the responsive layout logic is handled by DashboardCard!
- */
-export const GoalsCard = () => {
-    // const { t } = useTranslation();
-
-    // Your data fetching logic here
-    const goals = [
-        { id: 1, title: "Lose 5kg", progress: 60 },
-        { id: 2, title: "Run 5km", progress: 80 },
-        { id: 3, title: "Bench 100kg", progress: 45 },
-    ];
-
-    return (
-        <DashboardCard
-            title="My Goals"
-            subheader="Track your fitness goals"
-            // Optional header action (top-right icon)
-            headerAction={
-                <Tooltip title="View trends">
-                    <IconButton>
-                        <TrendingUpIcon />
-                    </IconButton>
-                </Tooltip>
-            }
-            // Actions at the bottom of the card
-            actions={
-                <>
-                    <Button size="small">See All Goals</Button>
-                    <Button size="small" variant="contained">
-                        Add Goal
-                    </Button>
-                </>
-            }
-        >
-            {/* Your card content goes here */}
-            <List>
-                {goals.map((goal) => (
-                    <ListItem key={goal.id}>
-                        <ListItemText
-                            primary={goal.title}
-                            secondary={
-                                <Typography variant="body2" color="text.secondary">
-                                    Progress: {goal.progress}%
-                                </Typography>
-                            }
-                        />
-                    </ListItem>
-                ))}
-            </List>
-        </DashboardCard>
-    );
-};
-
-// To add this widget to the dashboard, just add it to AVAILABLE_WIDGETS in ConfigurableDashboard.tsx:
-// {
-//   id: 'goals',
-//   type: 'goals',
-//   component: GoalsCard,
-//   defaultLayout: { w: 4, h: 6, x: 0, y: 6, minW: 3, minH: 4 },
-// }