@wger-project/react-components 25.10.16

package/src/components/Nutrition/components/BmiCalculator.tsx

@@ -0,0 +1,203 @@
+import { Box, Stack, TextField, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import { useBodyWeightQuery } from "components/BodyWeight/queries";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { useProfileQuery } from "components/User/queries/profile";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Area, AreaChart, CartesianGrid, ReferenceDot, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+
+const bmiRanges = [
+    { range: "obese", color: "#FF5733", min: 30, max: 100 },
+    { range: "overweight", color: "#FFC107", min: 25, max: 30 },
+    { range: "normal", color: "#90EE90", min: 18.5, max: 25 },
+    { range: "underweight", color: "#FFC300", min: 0, max: 18.5 },
+];
+
+const getRangeColor = (name: string) => {
+    const range = bmiRanges.find((bmiRange) => bmiRange.range === name);
+    return range ? range.color : 'gray';
+};
+
+export const BmiCalculator = () => {
+    const [t] = useTranslation();
+
+    const weightQuery = useBodyWeightQuery();
+    const profileQuery = useProfileQuery();
+
+    const [height, setHeight] = useState<number | null>();
+    const [weight, setWeight] = useState<number | null>();
+
+    // Set default weight from last weight entry
+    useEffect(() => {
+        if (weightQuery.data && weightQuery.data.length > 0) {
+            const lastWeightEntry = weightQuery.data[0];
+            const weightInKg = profileQuery.data?.useMetric
+                ? lastWeightEntry.weight
+                : lastWeightEntry.weight * 0.453592; // Convert lb to kg
+            setWeight(weightInKg);
+        }
+    }, [weightQuery.data, profileQuery.data]);
+
+    useEffect(() => {
+        if (profileQuery.data?.height) {
+            setHeight(profileQuery.data.height);
+        }
+    }, [profileQuery.data]);
+
+
+    const calculateBMI = () => {
+        if (height && weight) {
+            const heightInMeters = height / 100;
+            return weight / (heightInMeters * heightInMeters);
+        }
+        return null;
+    };
+
+    const bmi = calculateBMI();
+
+    if (weightQuery.isLoading || profileQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+
+    // Generate chart data with BMI values for different heights
+    const chartData: { height: number; [key: string]: number }[] = [];
+    for (let h = 140; h <= 220; h += 10) {
+        const heightInMeters = h / 100;
+        const dataPoint: { height: number; [key: string]: number } = { height: h };
+        let cumulativeWeight = 0;
+
+        bmiRanges.forEach((range, index) => {
+            const bmiValue = range.max > 100 ? 100 : range.max;
+            let weightForRange =
+                bmiValue * heightInMeters * heightInMeters - cumulativeWeight;
+
+            // Cap the weightForRange at 150kg
+            weightForRange = Math.min(weightForRange, 150 - cumulativeWeight);
+
+            // Correctly set the data point for the stacked area chart
+            if (index === 0) {
+                dataPoint[range.range] = weightForRange;
+            } else {
+                dataPoint[range.range] =
+                    dataPoint[bmiRanges[index - 1].range] + weightForRange;
+            }
+
+            cumulativeWeight = Math.min(bmiValue * heightInMeters * heightInMeters, 150); // Cap cumulative weight as well
+        });
+        chartData.push(dataPoint);
+    }
+
+
+    return (
+        <WgerContainerRightSidebar
+            title={t('bmi.calculator')}
+            mainContent={<>
+                <Stack spacing={2}>
+                    <Grid container spacing={2}>
+                        <Grid size={{ xs: 12, sm: 6 }}>
+                            <TextField
+                                label={t('height')}
+                                fullWidth
+                                slotProps={{
+                                    input: { endAdornment: <Typography>{t('cm')}</Typography> }
+                                }}
+                                type="number"
+                                value={height ?? ""}
+                                onChange={(e) => setHeight(parseFloat(e.target.value))}
+                            />
+                        </Grid>
+                        <Grid size={{ xs: 12, sm: 6 }}>
+                            <TextField
+                                label={t('weight')}
+                                slotProps={{
+                                    input: { endAdornment: <Typography>{t('server.kg')}</Typography> }
+                                }}
+                                fullWidth
+                                type="number"
+                                value={weight ?? ""}
+                                onChange={(e) => setWeight(parseFloat(e.target.value))}
+                            />
+                        </Grid>
+                    </Grid>
+
+
+                    {bmi !== null && <Typography variant="h6">
+                        {t('bmi.result', { value: bmi.toFixed(1) })}
+                    </Typography>
+                    }
+                    <ResponsiveContainer width="100%" height={400}>
+                        <AreaChart data={chartData}>
+                            <XAxis
+                                dataKey="height"
+                                type="number"
+                                domain={[140, 220]}
+                                unit="cm"
+                            />
+                            <YAxis
+                                domain={[40, 150]}
+                                tickFormatter={(value) => Math.round(value).toString()} // Format as integers
+                                unit="kg"
+                            />
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <Tooltip
+                                // @ts-ignore
+                                formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
+                            />
+
+                            {bmiRanges.map((range) => (
+                                <Area
+                                    key={range.range}
+                                    type="monotone"
+                                    dataKey={range.range}
+                                    stroke={"black"}
+                                    // stroke={range.color}
+                                    fill={range.color}
+                                    fillOpacity={0.8}
+                                />
+                            ))}
+
+                            {bmi !== null &&
+                                <ReferenceDot
+                                    x={height!}
+                                    y={weight!}
+                                    r={8}
+                                    fill="black"
+                                    stroke="none"
+                                />}
+
+                        </AreaChart>
+                    </ResponsiveContainer>
+                    <Stack direction={"row"} justifyContent="center">
+                        <Box
+                            height={20}
+                            width={20}
+                            sx={{ backgroundColor: getRangeColor('obese') }} />
+                        {t('bmi.obese')}
+
+                        <Box
+                            height={20}
+                            width={20}
+                            sx={{ backgroundColor: getRangeColor('overweight'), marginLeft: 2 }} />
+                        {t('bmi.overweight')}
+
+                        <Box
+                            height={20}
+                            width={20}
+                            sx={{ backgroundColor: getRangeColor('normal'), marginLeft: 2 }} />
+                        {t('bmi.normal')}
+
+                        <Box
+                            height={20}
+                            width={20}
+                            sx={{ backgroundColor: getRangeColor('underweight'), marginLeft: 2 }} />
+                        {t('bmi.underweight')}
+                    </Stack>
+
+                </Stack>
+            </>}
+        />
+    );
+};

package/src/components/Nutrition/components/IngredientSearch.tsx

@@ -0,0 +1,24 @@
+import { Ingredient } from "components/Nutrition/models/Ingredient";
+import { IngredientAutocompleter } from "components/Nutrition/widgets/IngredientAutcompleter";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { makeLink, WgerLink } from "utils/url";
+
+
+/*
+ * Ingredient autocompleter used to navigate the user to the ingredient
+ * detail page from the overview
+ */
+export const IngredientSearch = () => {
+    const { i18n } = useTranslation();
+
+    const navigateToIngredient = (value: Ingredient | null) => {
+        if (value !== null) {
+            window.location.href = makeLink(WgerLink.INGREDIENT_DETAIL, i18n.language, { id: value.id });
+        }
+    };
+
+    return <IngredientAutocompleter
+        callback={navigateToIngredient}
+    />;
+};

package/src/components/Nutrition/components/NutritionDiaryOverview.test.tsx

@@ -0,0 +1,51 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { NutritionDiaryOverview } from "components/Nutrition/components/NutritionDiaryOverview";
+import { useFetchNutritionalPlanDateQuery } from "components/Nutrition/queries";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { TEST_NUTRITIONAL_PLAN_1 } from "tests/nutritionTestdata";
+
+jest.mock("components/Nutrition/queries");
+const queryClient = new QueryClient();
+describe("Test the NutritionDiaryOverview component", () => {
+
+    beforeEach(() => {
+        (useFetchNutritionalPlanDateQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: TEST_NUTRITIONAL_PLAN_1
+        }));
+    });
+
+    test('renders the current nutritional plan correctly', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/nutrition/101/2023-07-01']}>
+                    <Routes>
+                        <Route path="nutrition/:planId/:date" element={<NutritionDiaryOverview />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+
+        // Note that we currently can't check for other values as they are output with
+        // a translation tag (nutrition.valueUnitG) and that is the only thing that is
+        // shown in the tests
+
+        expect(useFetchNutritionalPlanDateQuery).toHaveBeenCalled();
+        expect(screen.getByText('07/01/23')).toBeInTheDocument();
+
+        expect(screen.getByRole('cell', { name: /0% fat Greek style yogurt/i })).toBeInTheDocument();
+        expect(screen.getByText(/120g/i)).toBeInTheDocument();
+
+        expect(screen.getByRole('cell', { name: /1001 nacht haferbrei/i })).toBeInTheDocument();
+        expect(screen.getByText(/50g/)).toBeInTheDocument();
+
+        expect(screen.getByRole('cell', { name: /100% boosted juice smoothie/i })).toBeInTheDocument();
+        expect(screen.getByText(/200g/)).toBeInTheDocument();
+    });
+});

package/src/components/Nutrition/components/NutritionDiaryOverview.tsx

@@ -0,0 +1,47 @@
+import { Stack, Typography } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { useFetchNutritionalPlanDateQuery } from "components/Nutrition/queries";
+import { IngredientDetailTable } from "components/Nutrition/widgets/IngredientDetailTable";
+import { LoggedPlannedNutritionalValuesTable } from "components/Nutrition/widgets/LoggedPlannedNutritionalValuesTable";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { dateToLocale } from "utils/date";
+
+
+export const NutritionDiaryOverview = () => {
+    const [t] = useTranslation();
+    const params = useParams<{ planId: string, date: string }>();
+
+    const planId = parseInt(params.planId!);
+    if (Number.isNaN(planId)) {
+        return <p>Please pass an integer as the nutritional plan id.</p>;
+    }
+
+    const date = new Date(params.date!);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const planQuery = useFetchNutritionalPlanDateQuery(planId, params.date!);
+
+    return planQuery.isLoading
+        ? <LoadingPlaceholder />
+        : <WgerContainerRightSidebar
+            title={t('nutrition.nutritionalDiary')}
+            mainContent={<>
+                <Stack spacing={2}>
+                    <Typography gutterBottom variant="h4">
+                        {dateToLocale(date)}
+                    </Typography>
+                    <LoggedPlannedNutritionalValuesTable
+                        logged={planQuery.data!.loggedNutritionalValuesDate(date)}
+                        planned={planQuery.data!.plannedNutritionalValues}
+                    />
+                    <IngredientDetailTable
+                        values={planQuery.data!.loggedNutritionalValuesDate(date)}
+                        items={planQuery.data!.loggedEntriesDate(date)}
+                        showSum={true} />
+
+                </Stack>
+            </>}
+        />;
+};

package/src/components/Nutrition/components/PlanDetail.test.tsx

@@ -0,0 +1,58 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { PlanDetail } from "components/Nutrition/components/PlanDetail";
+import { useFetchNutritionalPlanQuery } from "components/Nutrition/queries";
+import { MemoryRouter, Route, Routes } from "react-router";
+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 PlanDetail component", () => {
+
+    beforeEach(() => {
+        (useFetchNutritionalPlanQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: TEST_NUTRITIONAL_PLAN_1
+        }));
+
+        // @ts-expect-error
+        delete window.ResizeObserver;
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn()
+        }));
+
+        jest.setSystemTime(new Date('2023-07-01'));
+    });
+
+    afterEach(() => {
+        window.ResizeObserver = ResizeObserver;
+        jest.restoreAllMocks();
+        jest.useRealTimers();
+    });
+
+    test('renders the current nutritional plan correctly', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/nutrition/101/view']}>
+                    <Routes>
+                        <Route path="nutrition/:planId/view" element={<PlanDetail />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(useFetchNutritionalPlanQuery).toHaveBeenCalled();
+        expect(screen.getByText('Second breakfast')).toBeInTheDocument();
+        expect(screen.getByText('evening snack')).toBeInTheDocument();
+        expect(screen.getByText('breakfast')).toBeInTheDocument();
+    });
+});

package/src/components/Nutrition/components/PlanDetail.tsx

@@ -0,0 +1,100 @@
+import { Add } from "@mui/icons-material";
+import { Collapse, IconButton, Stack, Typography } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { useFetchNutritionalPlanQuery } from "components/Nutrition/queries";
+import { MacrosPieChart } from "components/Nutrition/widgets/charts/MacrosPieChart";
+import { NutritionDiaryChart } from "components/Nutrition/widgets/charts/NutritionDiaryChart";
+import { DiaryOverview } from "components/Nutrition/widgets/DiaryOverview";
+import { AddNutritionDiaryEntryFab } from "components/Nutrition/widgets/Fab";
+import { MealForm } from "components/Nutrition/widgets/forms/MealForm";
+import { MealDetail } from "components/Nutrition/widgets/MealDetail";
+import { NutritionalValuesTable } from "components/Nutrition/widgets/NutritionalValuesTable";
+import { PlanDetailDropdown } from "components/Nutrition/widgets/PlanDetailDropdown";
+import { PlanSidebar } from "components/Nutrition/widgets/PlanSidebar";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+
+export const PlanDetail = () => {
+    const [t] = useTranslation();
+    const params = useParams<{ planId: string }>();
+    const planId = parseInt(params.planId ?? '');
+    if (Number.isNaN(planId)) {
+        return <p>Please pass an integer as the nutritional plan id.</p>;
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const planQuery = useFetchNutritionalPlanQuery(planId);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [expandedForm, setExpandedForm] = useState(false);
+    const handleToggleExpandedForm = () => setExpandedForm(!expandedForm);
+
+    const plan = planQuery.data!;
+
+    if (planQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerRightSidebar
+        title={plan.description}
+        optionsMenu={<PlanDetailDropdown plan={plan} />}
+        mainContent={<>
+            <Stack spacing={2}>
+                {/*<Typography gutterBottom variant="h4">*/}
+                {/*    {t('nutrition.planned')}*/}
+                {/*</Typography>*/}
+                {plan.meals.map(meal => <MealDetail
+                    meal={meal}
+                    planId={plan.id!}
+                    key={meal.id}
+                    onlyLogging={plan.onlyLogging} />)}
+                <MealDetail
+                    meal={planQuery.data!.pseudoMealOthers(t('nutrition.pseudoMealTitle'))}
+                    planId={plan.id!}
+                    key={-1}
+                    onlyLogging={true}
+                />
+
+                {!plan.onlyLogging && <>
+                    <Tooltip title={t('nutrition.addMeal')}>
+                        <IconButton onClick={handleToggleExpandedForm}>
+                            <Add />
+                        </IconButton>
+                    </Tooltip>
+                    <Collapse in={expandedForm} timeout="auto" unmountOnExit>
+                        <p><b>{t('nutrition.addMeal')}</b></p>
+                        <MealForm planId={plan.id!} closeFn={handleToggleExpandedForm} />
+                    </Collapse>
+                </>}
+
+                <NutritionalValuesTable values={plan.plannedNutritionalValues} />
+
+                {plan.hasAnyPlanned &&
+                    <MacrosPieChart data={plan.plannedNutritionalValues} />
+                }
+                <Typography gutterBottom variant="h4">
+                    {t('nutrition.logged')}
+                </Typography>
+                <NutritionDiaryChart
+                    showPlanned={plan.hasAnyPlanned}
+                    planned={plan.plannedNutritionalValues}
+                    today={plan.loggedNutritionalValuesToday}
+                    avg7Days={plan.loggedNutritionalValues7DayAvg}
+                />
+                <NutritionalValuesTable
+                    values={plan.loggedNutritionalValuesToday}
+                />
+                <DiaryOverview
+                    planId={plan.id!}
+                    logged={plan.groupDiaryEntries}
+                    planned={plan.plannedNutritionalValues}
+                />
+            </Stack>
+        </>}
+        sideBar={<PlanSidebar plan={plan} />}
+        fab={<AddNutritionDiaryEntryFab plan={plan} />}
+    />;
+};

package/src/components/Nutrition/components/PlanOverview.test.tsx

@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { PlansOverview } from "components/Nutrition/components/PlansOverview";
+import { useFetchNutritionalPlansQuery } from "components/Nutrition/queries";
+import { TEST_NUTRITIONAL_PLAN_1, TEST_NUTRITIONAL_PLAN_2 } from "tests/nutritionTestdata";
+
+jest.mock("components/Nutrition/queries");
+
+const queryClient = new QueryClient();
+
+describe("Test the PlansOverview component", () => {
+
+    beforeEach(() => {
+        (useFetchNutritionalPlansQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: [TEST_NUTRITIONAL_PLAN_1, TEST_NUTRITIONAL_PLAN_2]
+        }));
+
+    });
+
+    test('renders all plans correctly', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <PlansOverview />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(useFetchNutritionalPlansQuery).toHaveBeenCalled();
+        expect(screen.getByText('nutrition.plans')).toBeInTheDocument();
+        expect(screen.getByText('Summer body!!!')).toBeInTheDocument();
+        expect(screen.getByText('Bulking till we puke')).toBeInTheDocument();
+    });
+});

package/src/components/Nutrition/components/PlansOverview.tsx

@@ -0,0 +1,62 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Divider, List, ListItem, ListItemButton, ListItemText, Paper, Stack } from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import { useFetchNutritionalPlansQuery } from "components/Nutrition/queries";
+import { AddNutritionalPlanFab } from "components/Nutrition/widgets/Fab";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { dateToLocale } from "utils/date";
+import { makeLink, WgerLink } from "utils/url";
+
+export const PlansOverview = () => {
+    const plansQuery = useFetchNutritionalPlansQuery();
+    const [t] = useTranslation();
+
+
+    return plansQuery.isLoading
+        ? <LoadingPlaceholder />
+        : <WgerContainerRightSidebar
+            title={t("nutrition.plans")}
+            mainContent={<Stack spacing={2}>
+                {plansQuery.data?.length === 0 && <OverviewEmpty />}
+                <PlanList plans={plansQuery.data!} />
+            </Stack>
+            }
+            fab={<AddNutritionalPlanFab />}
+        />;
+};
+
+
+const PlanListItem = (props: { plan: NutritionalPlan }) => {
+    const [t, i18n] = useTranslation();
+    const detailUrl = makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! });
+
+    return <>
+        <ListItem sx={{ p: 0 }}>
+            <ListItemButton component="a" href={detailUrl}>
+                <ListItemText
+                    primary={props.plan.description !== '' ? props.plan.description : t('routines.routine')}
+                    secondary={
+                        props.plan.end
+                            ? `${dateToLocale(props.plan.start)} – ${dateToLocale(props.plan.end)}`
+                            : `${dateToLocale(props.plan.start)}`
+                    }
+                />
+                <ChevronRightIcon />
+            </ListItemButton>
+        </ListItem>
+        <Divider component="li" />
+    </>;
+};
+
+const PlanList = (props: { plans: NutritionalPlan[] }) => {
+
+    return <Paper>
+        <List sx={{ py: 0 }} key={'abc'}>
+            {props.plans.map((plan) => <PlanListItem plan={plan} key={plan.id} />)}
+        </List>
+    </Paper>;
+};