@wger-project/react-components 25.10.16

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

@@ -0,0 +1,145 @@
+import { Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { Language } from "components/Exercises/models/language";
+import { useLanguageQuery } from "components/Exercises/queries";
+import { Slot } from "components/WorkoutRoutines/models/Slot";
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { ProgressionForm } from "components/WorkoutRoutines/widgets/forms/ProgressionForm";
+import { SlotEntryRoundingField } from "components/WorkoutRoutines/widgets/forms/SlotEntryForm";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { getLanguageByShortName } from "services";
+import { makeLink, WgerLink } from "utils/url";
+
+export const SlotProgressionEdit = () => {
+
+    const { t, i18n } = useTranslation();
+    const params = useParams<{ routineId: string, slotId: string }>();
+    const routineId = params.routineId ? parseInt(params.routineId) : -1;
+    const slotId = params.slotId ? parseInt(params.slotId) : -1;
+    const routineQuery = useRoutineDetailQuery(routineId);
+    const languageQuery = useLanguageQuery();
+
+    if (routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const routine = routineQuery.data!;
+
+    let language: Language | undefined = undefined;
+    if (languageQuery.isSuccess) {
+        language = getLanguageByShortName(
+            i18n.language,
+            languageQuery.data!
+        );
+    }
+
+
+    let slot: Slot | null = null;
+    for (const day of routine.days) {
+        const foundSlot = day.slots.find((s) => s.id === slotId);
+        if (foundSlot) {
+            slot = foundSlot;
+            break;
+        }
+    }
+
+    if (slot === null) {
+        return <p>Slot not found!</p>;
+    }
+
+    const iterations = Object.keys(routine.groupedDayDataByIteration).map(Number);
+
+    return <>
+        <WgerContainerFullWidth
+            title={t('routines.editProgression')}
+            backToUrl={makeLink(WgerLink.ROUTINE_EDIT, i18n.language, { id: routineId })}
+        >
+            {slot.entries.map((slotEntry) =>
+                <React.Fragment key={slotEntry.id}>
+                    <Typography variant="h5" gutterBottom>
+                        {slotEntry.exercise?.getTranslation(language).name}
+                    </Typography>
+                    <Grid container spacing={1}>
+                        <Grid size={2} display="flex" alignItems="end">
+                            <Typography variant={"body2"}>
+                                {t('routines.rounding')}
+                            </Typography>
+                        </Grid>
+
+                        <Grid size={5}>
+                            <SlotEntryRoundingField
+                                routineId={routineId}
+                                slotEntry={slotEntry}
+                                initialValue={slotEntry.weightRounding}
+                                rounding="weight"
+                                editProfile={false}
+                            />
+                        </Grid>
+                        <Grid size={5}>
+                            <SlotEntryRoundingField
+                                routineId={routineId}
+                                slotEntry={slotEntry}
+                                initialValue={slotEntry.repetitionRounding}
+                                rounding="reps"
+                                editProfile={false}
+                            />
+                        </Grid>
+
+                        <ProgressionForm
+                            type="sets"
+                            configs={slotEntry.nrOfSetsConfigs}
+                            configsMax={slotEntry.maxNrOfSetsConfigs}
+                            slotEntryId={slotEntry.id!}
+                            routineId={routineId}
+                            iterations={iterations}
+                            forceInteger={true}
+                            cycleLength={routine.cycleLength}
+                        />
+                        <ProgressionForm
+                            type="weight"
+                            configs={slotEntry.weightConfigs}
+                            configsMax={slotEntry.maxWeightConfigs}
+                            slotEntryId={slotEntry.id!}
+                            routineId={routineId}
+                            iterations={iterations}
+                            cycleLength={routine.cycleLength}
+                        />
+                        <ProgressionForm
+                            type="reps"
+                            configs={slotEntry.repetitionsConfigs}
+                            configsMax={slotEntry.maxRepetitionsConfigs}
+                            slotEntryId={slotEntry.id!}
+                            routineId={routineId}
+                            iterations={iterations}
+                            cycleLength={routine.cycleLength}
+                        />
+                        <ProgressionForm
+                            type="rir"
+                            configs={slotEntry.rirConfigs}
+                            configsMax={slotEntry.maxRirConfigs}
+                            slotEntryId={slotEntry.id!}
+                            routineId={routineId}
+                            iterations={iterations}
+                            cycleLength={routine.cycleLength}
+                        />
+                        <ProgressionForm
+                            type="rest"
+                            configs={slotEntry.restTimeConfigs}
+                            configsMax={slotEntry.maxRestTimeConfigs}
+                            slotEntryId={slotEntry.id!}
+                            routineId={routineId}
+                            iterations={iterations}
+                            cycleLength={routine.cycleLength}
+                        />
+                    </Grid>
+                </React.Fragment>
+            )}
+        </WgerContainerFullWidth>
+    </>;
+};
+
+

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

@@ -0,0 +1,44 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { TemplateDetail } from "components/WorkoutRoutines/Detail/TemplateDetail";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getRoutine } from "services";
+import { testLanguages } from "tests/exerciseTestdata";
+import { getTestQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+describe("Smoke tests the TemplateDetail component", () => {
+
+    beforeEach(() => {
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+    });
+
+    test('renders all public templates', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={getTestQueryClient()}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<TemplateDetail />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutine).toHaveBeenCalledTimes(1);
+        });
+        await waitFor(() => {
+            expect(screen.getByText('Test routine 1')).toBeInTheDocument();
+        });
+        expect(screen.getByText('Full body routine')).toBeInTheDocument();
+        expect(screen.getByText('routines.template')).toBeInTheDocument();
+        expect(screen.getByText('routines.copyAndUseTemplate')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,84 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { RenderLoadingQuery } from "components/Core/Widgets/RenderLoadingQuery";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { DayDetailsCard } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { dateToLocale } from "utils/date";
+import { makeLink, WgerLink } from "utils/url";
+
+export const TemplateDetail = () => {
+    const { t, i18n } = useTranslation();
+
+    const params = useParams<{ routineId: string }>();
+    const routineId = parseInt(params.routineId ?? '');
+    if (Number.isNaN(routineId)) {
+        return <p>Please pass an integer as the routine id.</p>;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const routineQuery = useRoutineDetailQuery(routineId);
+
+    const routine = routineQuery.data;
+
+    return <RenderLoadingQuery
+        query={routineQuery}
+        child={routineQuery.isSuccess
+            && <WgerContainerRightSidebar
+                title={routine?.isPublic ? t('routines.publicTemplate') : t('routines.template')}
+                subTitle={routine!.name}
+                mainContent={
+                    <Stack spacing={2}>
+                        <Typography variant={"subtitle1"}>
+                            {dateToLocale(routine!.start)} - {dateToLocale(routine!.end)} ({routine!.durationText})
+                        </Typography>
+
+                        {routine!.description !== ''
+                            && <Typography variant={"body2"} sx={{ whiteSpace: 'pre-line' }}>
+                                {routine?.description}
+                            </Typography>}
+
+                        <Button
+                            component="a"
+                            href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: routineId })}
+                            variant={"contained"}
+                        >{t('routines.copyAndUseTemplate')}</Button>
+
+                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                            <DayDetailsCard
+                                dayData={dayData}
+                                routineId={routineId}
+                                readOnly={true}
+                                key={`dayDetails-${dayData.date.toISOString()}`}
+                            />
+                        )}
+                    </Stack>
+                }
+                sideBar={
+                    <Stack>
+                        <Box height={40} />
+                        <Grid container>
+                            <Grid size={6}>
+                                <MuscleOverview
+                                    primaryMuscles={routine!.mainMuscles.filter(m => m.isFront)}
+                                    secondaryMuscles={routine!.secondaryMuscles.filter(m => m.isFront)}
+                                    isFront={true}
+                                />
+                            </Grid>
+                            <Grid size={6}>
+                                <MuscleOverview
+                                    primaryMuscles={routine!.mainMuscles.filter(m => !m.isFront)}
+                                    secondaryMuscles={routine!.secondaryMuscles.filter(m => !m.isFront)}
+                                    isFront={false}
+                                />
+                            </Grid>
+                        </Grid>
+                    </Stack>
+                }
+            />}
+    />;
+};

package/src/components/WorkoutRoutines/Detail/WorkoutLogs.test.tsx

@@ -0,0 +1,64 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { WorkoutLogs } from "components/WorkoutRoutines/Detail/WorkoutLogs";
+import { useRoutineDetailQuery, useRoutineLogData } from "components/WorkoutRoutines/queries";
+import React from 'react';
+import { MemoryRouter, Route, Routes } from "react-router";
+import { testRoutine1, testRoutineLogData } from "tests/workoutRoutinesTestData";
+
+jest.mock("components/WorkoutRoutines/queries");
+
+const { ResizeObserver } = window;
+
+const queryClient = new QueryClient();
+
+describe("Test the RoutineLogs component", () => {
+
+    beforeEach(() => {
+        // @ts-ignore
+        delete window.ResizeObserver;
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn()
+        }));
+
+        (useRoutineLogData as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: testRoutineLogData
+        }));
+
+        (useRoutineDetailQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: testRoutine1
+        }));
+    });
+
+    afterEach(() => {
+        window.ResizeObserver = ResizeObserver;
+        jest.restoreAllMocks();
+    });
+
+    test('renders the log page for a routine', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/log/101']}>
+                    <Routes>
+                        <Route path="log/:routineId" element={<WorkoutLogs />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(useRoutineDetailQuery).toHaveBeenCalledWith(101);
+        expect(useRoutineLogData).toHaveBeenCalledWith(101);
+        expect(screen.getByText('Every day is leg day 🦵🏻')).toBeInTheDocument();
+        expect(screen.getByText('routines.addLogToDay')).toBeInTheDocument();
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,98 @@
+import BarChartIcon from "@mui/icons-material/BarChart";
+import { Button, IconButton, Stack, Tooltip as MuiTooltip, Typography } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerFullWidth } from "components/Core/Widgets/Container";
+import { WorkoutLog } from "components/WorkoutRoutines/models/WorkoutLog";
+import { useRoutineDetailQuery, useRoutineLogData } from "components/WorkoutRoutines/queries";
+import { ExerciseLog } from "components/WorkoutRoutines/widgets/LogWidgets";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export const WorkoutLogs = () => {
+
+    const params = useParams<{ routineId: string }>();
+    const routineId = params.routineId ? parseInt(params.routineId) : 0;
+    const [t, i18n] = useTranslation();
+    const routineLogDataQuery = useRoutineLogData(routineId);
+    const routineQuery = useRoutineDetailQuery(routineId);
+
+    if (routineLogDataQuery.isLoading || routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    // Group by exercise
+    let groupedWorkoutLogs: Map<number, WorkoutLog[]> = new Map();
+
+    groupedWorkoutLogs = routineLogDataQuery.data!.reduce((r, routineLogData) => {
+        routineLogData.logs.forEach(log => {
+            const exerciseId = log.exerciseId;
+            r.set(exerciseId, r.get(exerciseId) || []);
+            r.get(exerciseId)!.push(log);
+        });
+        return r;
+    }, groupedWorkoutLogs);
+
+
+    return (
+        <WgerContainerFullWidth
+            title={t("routines.logsHeader")}
+            backToUrl={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: routineId })}
+            optionsMenu={
+                <MuiTooltip title={t('routines.statsOverview')}>
+                    <IconButton
+                        component="a"
+                        href={makeLink(WgerLink.ROUTINE_STATS_OVERVIEW, i18n.language, { id: routineId })}>
+                        <BarChartIcon />
+                    </IconButton>
+                </MuiTooltip>
+            }
+        >
+
+            <Typography variant={"body1"}>
+                {t('routines.logsFilterNote')}
+            </Typography>
+
+            {routineQuery.data!.dayDataCurrentIteration.filter((dayData) => dayData.day !== null && !dayData.day.isRest).map((dayData, index) =>
+                <React.Fragment key={index}>
+                    <Stack
+                        direction={{ xs: 'column', sm: 'row' }}
+                        justifyContent="space-between"
+                        alignItems="center"
+                        sx={{ mt: 4 }}
+                    >
+                        <Typography variant={"h4"}>
+                            {dayData.day!.name}
+                        </Typography>
+                        <Button
+                            component={Link}
+                            to={makeLink(
+                                WgerLink.ROUTINE_ADD_LOG,
+                                i18n.language,
+                                { id: routineId, id2: dayData.day!.id! }
+                            )}
+                            variant="contained"
+                        >
+                            {t('routines.addLogToDay')}
+                        </Button>
+                    </Stack>
+
+                    {dayData.slots.map(slot =>
+                        slot.exercises.map(exercise =>
+                            <ExerciseLog
+                                key={exercise.id}
+                                routineId={routineId}
+                                exercise={exercise}
+                                logEntries={groupedWorkoutLogs.get(exercise.id!)!}
+                            />)
+                    )}
+                </React.Fragment>
+            )}
+
+        </WgerContainerFullWidth>
+    );
+};
+
+

package/src/components/WorkoutRoutines/Detail/WorkoutStats.test.tsx

@@ -0,0 +1,65 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from '@testing-library/react';
+import { WorkoutStats } from "components/WorkoutRoutines/Detail/WorkoutStats";
+import { RoutineStatsData } from "components/WorkoutRoutines/models/LogStats";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getLanguages, getMuscles, getRoutine, getRoutineStatisticsData } from "services";
+import { testLanguages, testMuscles } from "tests/exerciseTestdata";
+import { getTestQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("services");
+
+const { ResizeObserver } = window;
+
+describe("Smoke tests the WorkoutStats component", () => {
+
+    beforeEach(() => {
+        (getRoutineStatisticsData as jest.Mock).mockResolvedValue(new RoutineStatsData());
+        (getRoutine as jest.Mock).mockResolvedValue(testRoutine1);
+        (getLanguages as jest.Mock).mockResolvedValue(testLanguages);
+        (getMuscles as jest.Mock).mockResolvedValue(testMuscles);
+
+        // @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();
+    });
+
+    test('renders the statistics page', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={getTestQueryClient()}>
+                <MemoryRouter initialEntries={['/test/101']}>
+                    <Routes>
+                        <Route path="/test/:routineId" element={<WorkoutStats />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        await waitFor(() => {
+            expect(getRoutineStatisticsData).toHaveBeenCalledTimes(1);
+            expect(getRoutine).toHaveBeenCalledTimes(1);
+            expect(getLanguages).toHaveBeenCalledTimes(1);
+            expect(getMuscles).toHaveBeenCalledTimes(1);
+        });
+        await waitFor(() => {
+            expect(screen.getByText('routines.statsOverview - Test routine 1')).toBeInTheDocument();
+        });
+        expect(screen.getByText('routines.volume')).toBeInTheDocument();
+        expect(screen.getByText('routines.daily')).toBeInTheDocument();
+        expect(screen.getByText('exercises.exercises')).toBeInTheDocument();
+    });
+});