@wger-project/react-components 25.11.22 → 26.1.18

package/src/components/Dashboard/WeightCard.test.tsx

@@ -6,7 +6,6 @@ import { testQueryClient } from "tests/queryClient";
 import { testWeightEntries } from "tests/weight/testData";
 
 jest.mock("components/BodyWeight/queries");
-const { ResizeObserver } = window;
 
 describe("test the WeightCard component", () => {
 
@@ -17,18 +16,9 @@ describe("test the WeightCard component", () => {
                 isLoading: false,
                 data: testWeightEntries
             }));
-
-            // @ts-ignore
-            delete window.ResizeObserver;
-            window.ResizeObserver = jest.fn().mockImplementation(() => ({
-                observe: jest.fn(),
-                unobserve: jest.fn(),
-                disconnect: jest.fn()
-            }));
         });
 
         afterEach(() => {
-            window.ResizeObserver = ResizeObserver;
             jest.restoreAllMocks();
             jest.useRealTimers();
         });

package/src/components/Dashboard/WeightCard.tsx

@@ -1,5 +1,5 @@
 import AddIcon from "@mui/icons-material/Add";
-import { Box, Button, Card, CardActions, CardContent, CardHeader, IconButton, } from '@mui/material';
+import { Box, Button, IconButton } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { WeightForm } from "components/BodyWeight/Form/WeightForm";
 import { WeightEntry } from "components/BodyWeight/model";
@@ -9,64 +9,58 @@ import { WeightChart } from "components/BodyWeight/WeightChart";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { WgerModal } from "components/Core/Modals/WgerModal";
 import { EmptyCard } from "components/Dashboard/EmptyCard";
-import React from 'react';
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { makeLink, WgerLink } from "utils/url";
+import { DashboardCard } from "./DashboardCard";
 
 export const WeightCard = () => {
-
     const [t] = useTranslation();
-    const weightyQuery = useBodyWeightQuery('lastYear');
+    const weightyQuery = useBodyWeightQuery("lastYear");
 
     if (weightyQuery.isLoading) {
         return <LoadingPlaceholder />;
     }
 
-    return weightyQuery.data?.length !== undefined && weightyQuery.data?.length > 0
-        ? <WeightCardContent entries={weightyQuery.data} />
-        : <EmptyCard
-            title={t('weight')}
-            modalContent={<WeightForm />}
-        />;
+    return weightyQuery.data?.length !== undefined && weightyQuery.data?.length > 0 ? (
+        <WeightCardContent entries={weightyQuery.data} />
+    ) : (
+        <EmptyCard title={t("weight")} modalContent={<WeightForm />} />
+    );
 };
 export const WeightCardContent = (props: { entries: WeightEntry[] }) => {
-
     const [openModal, setOpenModal] = React.useState(false);
     const handleOpenModal = () => setOpenModal(true);
     const handleCloseModal = () => setOpenModal(false);
     const [t, i18n] = useTranslation();
 
-    return (<>
-        <Card>
-            <CardHeader
-                title={t('weight')}
-                subheader={'.'}
-            />
-            <CardContent sx={{ height: '500px', overflow: 'auto' }}>
+    return (
+        <>
+            <DashboardCard
+                title={t("weight")}
+                subheader={"."}
+                actions={
+                    <>
+                        <Button size="small" href={makeLink(WgerLink.WEIGHT_OVERVIEW, i18n.language)}>
+                            {t("seeDetails")}
+                        </Button>
+                        <Tooltip title={t("addEntry")}>
+                            <IconButton onClick={handleOpenModal}>
+                                <AddIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                }
+            >
                 <WeightChart weights={props.entries} height={200} />
-                <Box sx={{ mt: 2, }}>
+                <Box sx={{ mt: 2 }}>
                     <WeightTableDashboard weights={props.entries} />
                 </Box>
-            </CardContent>
-            <CardActions sx={{
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-            }}>
-                <Button
-                    size="small"
-                    href={makeLink(WgerLink.WEIGHT_OVERVIEW, i18n.language)}
-                >
-                    {t('seeDetails')}
-                </Button>
-                <Tooltip title={t('addEntry')}>
-                    <IconButton onClick={handleOpenModal}>
-                        <AddIcon />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-        </Card>
-        <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
-            <WeightForm closeFn={handleCloseModal} />
-        </WgerModal>
-    </>);
-};
+            </DashboardCard>
+
+            <WgerModal title={t("add")} isOpen={openModal} closeFn={handleCloseModal}>
+                <WeightForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </>
+    );
+};

package/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx

@@ -65,7 +65,7 @@ export function ExerciseDeleteDialog(props: {
             try {
                 const exercise = await getExercise(id);
                 setReplacementExercise(exercise);
-            } catch (e) {
+            } catch {
                 setReplacementExercise(null);
             }
         }

package/src/components/Measurements/Screens/MeasurementCategoryOverview.tsx

@@ -15,7 +15,7 @@ import { EntryForm } from "components/Measurements/widgets/EntryForm";
 import { WgerModal } from "components/Core/Modals/WgerModal";
 
 
-const CategoryList = (props: { category: MeasurementCategory }) => {
+export const CategoryList = (props: { category: MeasurementCategory }) => {
 
     const [t, i18n] = useTranslation();
     const [openModal, setOpenModal] = React.useState(false);

package/src/components/Measurements/models/Category.ts

@@ -15,10 +15,19 @@ export class MeasurementCategory {
             this.entries = entries;
         }
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any): MeasurementCategory {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
 }
 
 
-export class MeasurementCategoryAdapter implements Adapter<MeasurementCategory> {
+class MeasurementCategoryAdapter implements Adapter<MeasurementCategory> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fromJson(item: any) {
         return new MeasurementCategory(
@@ -35,4 +44,6 @@ export class MeasurementCategoryAdapter implements Adapter<MeasurementCategory>
             unit: item.unit,
         };
     }
-}
+}
+
+const adapter = new MeasurementCategoryAdapter();

package/src/components/Measurements/models/Entry.ts

@@ -10,10 +10,19 @@ export class MeasurementEntry {
         public notes: string
     ) {
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any): MeasurementEntry {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
 }
 
 
-export class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
+class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fromJson(item: any) {
         return new MeasurementEntry(
@@ -34,4 +43,6 @@ export class MeasurementEntryAdapter implements Adapter<MeasurementEntry> {
             notes: item.notes
         };
     }
-}
+}
+
+const adapter = new MeasurementEntryAdapter();

package/src/components/Trophies/components/TrophiesDetail.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { testUserProgressionTrophies } from "tests/trophies/trophiesTestData";
+import { TrophiesDetail } from './TrophiesDetail';
+
+
+// Mock the trophies query hook
+jest.mock('components/Trophies/queries/trophies', () => ({
+    useUserTrophyProgressionQuery: () => ({
+        isLoading: false,
+        data: testUserProgressionTrophies(),
+    }),
+}));
+
+describe('TrophiesDetail', () => {
+    test('renders trophy names and progression values', () => {
+
+        // Act
+        render(<TrophiesDetail />);
+
+        // Assert
+        expect(screen.getByText('Beginner')).toBeInTheDocument();
+        expect(screen.getByText('Unstoppable')).toBeInTheDocument();
+        expect(screen.getByText('Complete your first workout')).toBeInTheDocument();
+        expect(screen.getByText('Maintain a 30-day workout streak')).toBeInTheDocument();
+
+        // Progression value for the progressive trophy should be shown
+        expect(screen.getByText('4/30')).toBeInTheDocument();
+
+        // There should be at least one progressbar in the document
+        expect(screen.getAllByRole('progressbar').length).toBeGreaterThanOrEqual(1);
+    });
+});

package/src/components/Trophies/components/TrophiesDetail.tsx

@@ -0,0 +1,88 @@
+import { Card, CardContent, CardMedia, LinearProgress, LinearProgressProps, Typography } from "@mui/material";
+import Box from "@mui/system/Box";
+import Grid from "@mui/system/Grid";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { UserTrophyProgression } from "components/Trophies/models/userTrophyProgression";
+import { useUserTrophyProgressionQuery } from "components/Trophies/queries/trophies";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+
+export const TrophiesDetail = () => {
+    const [t] = useTranslation();
+
+    const planQuery = useUserTrophyProgressionQuery();
+
+    if (planQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerFullWidth title={t('trophies.trophies')}>
+        <Grid container spacing={2}>
+            {planQuery.data!.map((trophyProgression) => (
+                <Grid size={{ xs: 12, sm: 4, md: 3, lg: 3, xl: 2 }} key={trophyProgression.trophy.uuid}>
+                    <TrophyProgressCard key={trophyProgression.trophy.uuid} trophyProgression={trophyProgression} />
+                </Grid>
+            ))}
+        </Grid>
+    </WgerContainerFullWidth>;
+};
+
+
+function TrophyProgressCard(props: { trophyProgression: UserTrophyProgression }) {
+    return <Card sx={{ height: "100%" }}>
+        <CardMedia
+            sx={{
+                opacity: props.trophyProgression.isEarned ? 1 : 0.3,
+                p: 1,
+                width: 'auto',
+                mx: 'auto',
+                maxHeight: 130,
+            }}
+            component="img"
+            image={props.trophyProgression.trophy.image}
+            title={props.trophyProgression.trophy.name}
+        />
+        <CardContent sx={{ opacity: props.trophyProgression.isEarned ? 1 : 0.6 }}>
+
+            <Typography gutterBottom variant="h6" component="div" textAlign="center">
+                {props.trophyProgression.trophy.name}
+            </Typography>
+
+            <Box sx={{ mb: 2, mt: 0 }}>
+                {(props.trophyProgression.trophy.isProgressive && !props.trophyProgression.isEarned) &&
+                    <LinearProgressWithLabel value={props.trophyProgression.progress} />
+                }
+                <Typography variant="body2" sx={{ color: "text.secondary", textAlign: 'center' }}>
+                    {props.trophyProgression.progressDisplay}
+                </Typography>
+
+            </Box>
+
+            <Typography variant="body2" sx={{ color: "text.secondary" }}>
+                {props.trophyProgression.trophy.description}
+            </Typography>
+
+        </CardContent>
+    </Card>;
+}
+
+
+const LinearProgressWithLabel = (props: LinearProgressProps & { value: number, progressLabel?: string | null }) => {
+    // Extract custom prop so it doesn't get passed to the progress bar via the spread operator
+    const { progressLabel, ...linearProps } = props;
+
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ width: '100%', mr: 1 }}>
+                <LinearProgress variant="determinate" {...linearProps} />
+            </Box>
+            <Box sx={{ minWidth: 35 }}>
+                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                    {progressLabel ?? `${Math.round(props.value)}%`}
+                </Typography>
+            </Box>
+        </Box>
+    );
+};

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

@@ -0,0 +1,33 @@
+import { Trophy } from "components/Trophies/models/trophy";
+
+
+describe('Test the trophy model', () => {
+
+    test('correctly creates an object from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            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",
+            "is_hidden": false,
+            "is_progressive": false,
+            order: 1
+        };
+
+        // Act
+        const trophy = Trophy.fromJson(apiResponse);
+
+        // Assert
+        expect(trophy.id).toBe(1);
+        expect(trophy.uuid).toBe("5362e55b-eaf1-4e34-9ef8-661538a3bdd9");
+        expect(trophy.name).toBe("Beginner");
+        expect(trophy.description).toBe("Complete your first workout");
+        expect(trophy.image).toBe("http://localhost:8000/static/trophies/count/5362e55b-eaf1-4e34-9ef8-661538a3bdd9.png");
+        expect(trophy.type).toBe("count");
+        expect(trophy.isHidden).toBe(false);
+        expect(trophy.isProgressive).toBe(false);
+    });
+});

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

@@ -0,0 +1,75 @@
+import { Adapter } from "utils/Adapter";
+
+export type trophyType = 'time' | 'volume' | 'count' | 'sequence' | 'date' | 'pr' | 'other';
+
+export interface ApiTrophyType {
+    id: number,
+    uuid: string,
+    name: string,
+    description: string,
+    image: string,
+    "trophy_type": trophyType,
+    "is_hidden": boolean,
+    "is_progressive": boolean,
+}
+
+export type TrophyConstructorParams = {
+    id: number;
+    uuid: string;
+    name: string;
+    description: string;
+    image: string;
+    type: trophyType;
+    isHidden: boolean;
+    isProgressive: boolean;
+};
+
+export class Trophy {
+
+    public id: number;
+    public uuid: string;
+    public name: string;
+    public description: string;
+    public image: string;
+    public type: string;
+    public isHidden: boolean;
+    public isProgressive: boolean;
+
+
+    constructor(params: TrophyConstructorParams) {
+        this.id = params.id;
+        this.uuid = params.uuid;
+        this.name = params.name;
+        this.description = params.description;
+        this.image = params.image;
+        this.type = params.type;
+        this.isHidden = params.isHidden;
+        this.isProgressive = params.isProgressive;
+    }
+
+    static fromJson(json: ApiTrophyType): Trophy {
+        return adapter.fromJson(json);
+    }
+}
+
+class TrophyAdapter implements Adapter<Trophy> {
+    fromJson(item: ApiTrophyType) {
+        return new Trophy({
+            id: item.id,
+            uuid: item.uuid,
+            name: item.name,
+            description: item.description,
+            image: item.image,
+            type: item.trophy_type,
+            isHidden: item.is_hidden,
+            isProgressive: item.is_progressive,
+        });
+    }
+
+    toJson(_: Trophy) {
+        return {};
+    }
+}
+
+
+const adapter = new TrophyAdapter();

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

@@ -0,0 +1,38 @@
+import { UserTrophy } from "components/Trophies/models/userTrophy";
+
+
+describe('Test the user UserTrophy model', () => {
+
+    test('correctly creates an object from the API response', () => {
+        // Arrange
+        const apiResponse = {
+            id: 4,
+            trophy: {
+                id: 9,
+                uuid: "32bb12da-b25f-4e18-81e4-b695eb65283e",
+                name: "Phoenix",
+                description: "Return to training after being inactive for 30 days",
+                image: "http://localhost:8000/static/trophies/other/32bb12da-b25f-4e18-81e4-b695eb65283e.png",
+                "trophy_type": "other",
+                "is_hidden": true,
+                "is_progressive": false,
+                order: 9
+            },
+            "earned_at": "2025-12-19T13:48:07.519497+01:00",
+            progress: 100.0,
+            "is_notified": false
+        };
+
+        // Act
+        const userTrophy = UserTrophy.fromJson(apiResponse);
+
+        // Assert
+        expect(userTrophy.id).toBe(4);
+        expect(userTrophy.earnedAt).toStrictEqual(new Date("2025-12-19T13:48:07.519497+01:00"));
+        expect(userTrophy.progress).toBe(100.0);
+        expect(userTrophy.isNotified).toBe(false);
+
+        expect(userTrophy.trophy.uuid).toBe("32bb12da-b25f-4e18-81e4-b695eb65283e");
+
+    });
+});

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();