@wger-project/react-components 25.10.16

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

@@ -0,0 +1,89 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { NutritionCard } from "components/Dashboard/NutritionCard";
+import { useFetchLastNutritionalPlanQuery } from "components/Nutrition/queries";
+import { TEST_NUTRITIONAL_PLAN_1 } from "tests/nutritionTestdata";
+
+jest.mock("components/Nutrition/queries");
+jest.useFakeTimers();
+
+const { ResizeObserver } = window;
+const queryClient = new QueryClient();
+
+describe("test the NutritionCard component", () => {
+
+    describe("Plans available", () => {
+
+        beforeEach(() => {
+            (useFetchLastNutritionalPlanQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: TEST_NUTRITIONAL_PLAN_1
+            }));
+
+
+            jest.setSystemTime(new Date('2023-09-01'));
+
+            // @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();
+        });
+
+        test('renders the current nutritional plan correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <NutritionCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useFetchLastNutritionalPlanQuery).toHaveBeenCalled();
+            expect(screen.getByText('Second breakfast')).toBeInTheDocument();
+            expect(screen.getByText('evening snack')).toBeInTheDocument();
+            expect(screen.getByText('breakfast')).toBeInTheDocument();
+        });
+    });
+
+
+    describe("No plans available", () => {
+
+        beforeEach(() => {
+            (useFetchLastNutritionalPlanQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('renders the current nutritional plan correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={queryClient}>
+                    <NutritionCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useFetchLastNutritionalPlanQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.getByText('nothingHereYetAction')).toBeInTheDocument();
+            expect(screen.getByText('add')).toBeInTheDocument();
+        });
+    });
+
+});
+
+

package/src/components/Dashboard/NutritionCard.tsx

@@ -0,0 +1,178 @@
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
+import PhotoIcon from "@mui/icons-material/Photo";
+import {
+    Alert,
+    Avatar,
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Collapse,
+    IconButton,
+    List,
+    ListItem,
+    ListItemAvatar,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Snackbar,
+} from '@mui/material';
+import Tooltip from "@mui/material/Tooltip";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { EmptyCard } from "components/Dashboard/EmptyCard";
+import { Meal } from "components/Nutrition/models/meal";
+import { MealItem } from "components/Nutrition/models/mealItem";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import { useAddDiaryEntryQuery, useFetchLastNutritionalPlanQuery } from "components/Nutrition/queries";
+import { NutritionalValuesDashboardChart } from "components/Nutrition/widgets/charts/NutritionalValuesDashboardChart";
+import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
+import { PlanForm } from "components/Nutrition/widgets/forms/PlanForm";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
+import { dateTimeToLocaleHHMM } from "utils/date";
+import { numberGramLocale } from "utils/numbers";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export const NutritionCard = () => {
+
+    const [t] = useTranslation();
+    const planQuery = useFetchLastNutritionalPlanQuery();
+
+    if (planQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return planQuery.data !== null
+        ? <NutritionCardContent plan={planQuery.data!} />
+        : <EmptyCard
+            title={t('nutritionalPlan')}
+            modalContent={<PlanForm />}
+            modalTitle={t('add')}
+        />;
+};
+
+function NutritionCardContent(props: { plan: NutritionalPlan }) {
+    const [t, i18n] = useTranslation();
+
+    const [openLogModal, setOpenLogModal] = React.useState(false);
+    const handleOpenLogModal = () => setOpenLogModal(true);
+    const handleCloseLogModal = () => setOpenLogModal(false);
+
+
+    return <>
+        <Card>
+            <CardHeader
+                title={t('nutritionalPlan')}
+                subheader={props.plan.description}
+            />
+            <CardContent sx={{ height: "500px", overflow: "auto" }}>
+                <NutritionalValuesDashboardChart
+                    percentage={props.plan.percentageValuesLoggedToday}
+                    planned={props.plan.plannedNutritionalValues}
+                    logged={props.plan.loggedNutritionalValuesToday}
+                />
+                <List>
+                    {props.plan.meals.map(meal =>
+                        <MealListItem meal={meal} planId={props.plan.id!} key={meal.id} />
+                    )}
+                </List>
+            </CardContent>
+            <CardActions sx={{
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+            }}>
+                <Button size="small"
+                        href={makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! })}>
+                    {t('seeDetails')}
+                </Button>
+                <Tooltip title={t('nutrition.logThisMealItem')}>
+                    <IconButton onClick={handleOpenLogModal}>
+                        <HistoryEduIcon />
+                    </IconButton>
+                </Tooltip>
+            </CardActions>
+        </Card>
+        <WgerModal title={t('nutrition.addNutritionalDiary')}
+                   isOpen={openLogModal}
+                   closeFn={handleCloseLogModal}>
+            <NutritionDiaryEntryForm
+                closeFn={handleCloseLogModal}
+                planId={props.plan.id!}
+                meals={props.plan.meals}
+            />
+        </WgerModal>
+    </>;
+}
+
+const MealListItem = (props: { meal: Meal, planId: number }) => {
+    const [t, i18n] = useTranslation();
+    const addDiaryEntryQuery = useAddDiaryEntryQuery(props.planId);
+
+    const [expandView, setExpandView] = useState(false);
+    const [openSnackbar, setOpenSnackbar] = React.useState(false);
+
+    const handleToggleExpand = () => setExpandView(!expandView);
+
+    const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setOpenSnackbar(false);
+    };
+
+    const handleAddDiaryEntry = (item: MealItem) => {
+        addDiaryEntryQuery.mutate(item.diaryEntry(props.planId));
+        setOpenSnackbar(true);
+    };
+
+    const primaryHeader = props.meal.name ? props.meal.name : dateTimeToLocaleHHMM(props.meal.time);
+    const secondaryHeader = props.meal.name ? dateTimeToLocaleHHMM(props.meal.time) : null;
+
+    return <>
+        <ListItemButton onClick={handleToggleExpand} selected={expandView}>
+            <ListItemIcon>
+                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </ListItemIcon>
+            <ListItemText primary={primaryHeader} secondary={secondaryHeader} />
+
+        </ListItemButton>
+        <Collapse in={expandView} timeout="auto" unmountOnExit>
+            <List>
+                {props.meal.items.map((item) =>
+                    <ListItem key={item.id} secondaryAction={
+                        <Tooltip title={t('nutrition.logThisMealItem')}>
+                            <IconButton edge="end" onClick={() => handleAddDiaryEntry(item)}>
+                                <HistoryEduIcon />
+                            </IconButton>
+                        </Tooltip>
+                    }>
+                        <ListItemAvatar>
+                            <Avatar
+                                alt={item.ingredient?.name}
+                                src={item.ingredient?.image?.url}
+                                sx={{ width: 45, height: 45 }}
+                            >
+                                <PhotoIcon />
+                            </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText
+                            primary={item.ingredient?.name}
+                            secondary={numberGramLocale(item.amount, i18n.language)}
+                        />
+                    </ListItem>
+                )}
+            </List>
+        </Collapse>
+        <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
+            <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: '100%' }}>
+                {t('nutrition.diaryEntrySaved')}
+            </Alert>
+        </Snackbar>
+    </>;
+};

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

@@ -0,0 +1,66 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { RoutineCard } from "components/Dashboard/RoutineCard";
+import { useActiveRoutineQuery } from "components/WorkoutRoutines/queries";
+import { testQueryClient } from "tests/queryClient";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+jest.mock("components/WorkoutRoutines/queries");
+jest.useFakeTimers();
+
+describe("test the RoutineCard component", () => {
+
+    describe("Routines are available", () => {
+        beforeEach(() => {
+            (useActiveRoutineQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: testRoutine1
+            }));
+        });
+
+        test('renders the current routine correctly', async () => {
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <RoutineCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useActiveRoutineQuery).toHaveBeenCalled();
+            expect(screen.getByText('Test routine 1')).toBeInTheDocument();
+            expect(screen.getByText('Every day is leg day 🦵🏻')).toBeInTheDocument();
+        });
+    });
+
+
+    describe("No routines available", () => {
+
+        beforeEach(() => {
+            (useActiveRoutineQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('renders the call to action correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <RoutineCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useActiveRoutineQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.getByText('nothingHereYetAction')).toBeInTheDocument();
+            expect(screen.getByText('add')).toBeInTheDocument();
+        });
+    });
+});
+
+

package/src/components/Dashboard/RoutineCard.tsx

@@ -0,0 +1,107 @@
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import TodayIcon from "@mui/icons-material/Today";
+import {
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Collapse,
+    List,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+} from '@mui/material';
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { EmptyCard } from "components/Dashboard/EmptyCard";
+import { getDayName } from "components/WorkoutRoutines/models/Day";
+import { Routine } from "components/WorkoutRoutines/models/Routine";
+import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
+import { useActiveRoutineQuery } from "components/WorkoutRoutines/queries";
+import { SetConfigDataDetails } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { isSameDay } from "utils/date";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export const RoutineCard = () => {
+    const [t, i18n] = useTranslation();
+    const routineQuery = useActiveRoutineQuery();
+
+    if (routineQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return routineQuery.data !== null
+        ? <RoutineCardContent routine={routineQuery.data!} />
+        : <EmptyCard
+            title={t('routines.routine')}
+            link={makeLink(WgerLink.ROUTINE_ADD, i18n.language)}
+        />;
+};
+
+const RoutineCardContent = (props: { routine: Routine }) => {
+    const [t, i18n] = useTranslation();
+
+    return <Card>
+        <CardHeader
+            title={t('routines.routine')}
+            subheader={props.routine.name ?? "."}
+        />
+        {/* Note: not 500 like the other cards, but a bit more since we don't have an action icon... */}
+        <CardContent sx={{ height: "510px", overflow: "auto" }}>
+            <List>
+                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) =>
+                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />)}
+            </List>
+        </CardContent>
+
+        <CardActions>
+            <Button size="small"
+                    href={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: props.routine.id! })}>
+                {t('seeDetails')}
+            </Button>
+        </CardActions>
+    </Card>;
+};
+
+const DayListItem = (props: { dayData: RoutineDayData }) => {
+    const [expandView, setExpandView] = useState(false);
+
+    const handleToggleExpand = () => setExpandView(!expandView);
+
+    return (<>
+        <ListItemButton
+            onClick={handleToggleExpand}
+            selected={expandView}
+            disabled={props.dayData.day === null || props.dayData.day?.isRest}
+        >
+            <ListItemIcon>
+                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </ListItemIcon>
+            <ListItemText
+                primary={getDayName(props.dayData.day)}
+                slotProps={{ secondary: { noWrap: true, style: { overflow: 'hidden', textOverflow: 'ellipsis' } } }}
+                secondary={props.dayData.day?.description}
+            />
+            <ListItemIcon>
+                {isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}
+            </ListItemIcon>
+        </ListItemButton>
+
+        <Collapse in={expandView} timeout="auto" unmountOnExit>
+            {props.dayData.slots.map((slotData, index) => (<div key={index}>
+                {slotData.setConfigs.map((setConfigData, index) =>
+                    <SetConfigDataDetails
+                        setConfigData={setConfigData}
+                        key={index}
+                        rowHeight={'70px'}
+                        showExercise={true}
+                    />
+                )}
+            </div>))}
+        </Collapse>
+    </>);
+};

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

@@ -0,0 +1,81 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { useBodyWeightQuery } from "components/BodyWeight/queries";
+import { WeightCard } from "components/Dashboard/WeightCard";
+import { testQueryClient } from "tests/queryClient";
+import { testWeightEntries } from "tests/weight/testData";
+
+jest.mock("components/BodyWeight/queries");
+const { ResizeObserver } = window;
+
+describe("test the WeightCard component", () => {
+
+    describe("Weights are available", () => {
+        beforeEach(() => {
+            (useBodyWeightQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                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();
+        });
+
+        test('renders the weights correctly', async () => {
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <WeightCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useBodyWeightQuery).toHaveBeenCalled();
+            expect(screen.getByText('100')).toBeInTheDocument();
+            expect(screen.getByText('90')).toBeInTheDocument();
+            expect(screen.getByText('110')).toBeInTheDocument();
+        });
+    });
+
+
+    describe("No weight entries available", () => {
+
+        beforeEach(() => {
+            (useBodyWeightQuery as jest.Mock).mockImplementation(() => ({
+                isSuccess: true,
+                isLoading: false,
+                data: null
+            }));
+        });
+
+        test('renders the call to action correctly', async () => {
+
+            // Act
+            render(
+                <QueryClientProvider client={testQueryClient}>
+                    <WeightCard />
+                </QueryClientProvider>
+            );
+
+            // Assert
+            expect(useBodyWeightQuery).toHaveBeenCalled();
+            expect(screen.getByText('nothingHereYet')).toBeInTheDocument();
+            expect(screen.getByText('nothingHereYetAction')).toBeInTheDocument();
+            expect(screen.getByText('add')).toBeInTheDocument();
+        });
+    });
+});
+
+

package/src/components/Dashboard/WeightCard.tsx

@@ -0,0 +1,72 @@
+import AddIcon from "@mui/icons-material/Add";
+import { Box, Button, Card, CardActions, CardContent, CardHeader, IconButton, } from '@mui/material';
+import Tooltip from "@mui/material/Tooltip";
+import { WeightForm } from "components/BodyWeight/Form/WeightForm";
+import { WeightEntry } from "components/BodyWeight/model";
+import { useBodyWeightQuery } from "components/BodyWeight/queries";
+import { WeightTableDashboard } from "components/BodyWeight/TableDashboard/TableDashboard";
+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 { useTranslation } from "react-i18next";
+import { makeLink, WgerLink } from "utils/url";
+
+export const WeightCard = () => {
+
+    const [t] = useTranslation();
+    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 />}
+        />;
+};
+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' }}>
+                <WeightChart weights={props.entries} height={200} />
+                <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>
+    </>);
+};

package/src/components/Exercises/Add/AddExerciseStepper.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AddExerciseStepper } from "components/Exercises/Add/AddExerciseStepper";
+
+describe("Test the add-exercise stepper component", () => {
+
+
+    test("Renders without crashing", () => {
+        // Act
+        const queryClient = new QueryClient();
+        render(
+            <QueryClientProvider client={queryClient}>
+                <AddExerciseStepper />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByText("exercises.step1HeaderBasics")).toBeInTheDocument();
+        expect(screen.getByText("exercises.variations")).toBeInTheDocument();
+        expect(screen.getByText("description")).toBeInTheDocument();
+        expect(screen.getByText("translation")).toBeInTheDocument();
+        expect(screen.getByText("images")).toBeInTheDocument();
+        expect(screen.getByText("overview")).toBeInTheDocument();
+    });
+});