@wger-project/react-components 25.10.16

package/src/components/BodyWeight/Table/index.tsx

@@ -0,0 +1,98 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { WeightEntry } from "components/BodyWeight/model";
+import { ActionButton } from 'components/BodyWeight/Table/ActionButton/ActionButton';
+import { WeightEntryFab } from "components/BodyWeight/Table/Fab/Fab";
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+import { dateTimeToLocale } from "utils/date";
+import { processWeight } from '../utils';
+
+
+const PREFIX = 'WeightTable';
+
+const classes = {
+    table: `${PREFIX}-table`
+};
+
+const Root = styled('div')(() => {
+    return {
+        [`&.${classes.table}`]: {
+            "& .MuiPaper-root": {
+                border: "1px solid #bababa",
+
+            }
+        },
+    };
+});
+
+
+export interface WeightTableProps {
+    weights: WeightEntry[];
+}
+
+export const WeightTable = ({ weights }: WeightTableProps) => {
+
+    const availableResultsPerPage = [10, 50, 100];
+
+    const { t } = useTranslation();
+
+    const processedWeights = processWeight(weights);
+    const [rowsPerPage, setRowsPerPage] = useState(availableResultsPerPage[0]);
+    const [page, setPage] = useState(0);
+
+    const handleChangePage = (event: unknown, newPage: number) => {
+        setPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+
+    return (
+        <Root className={classes.table}>
+            <TableContainer>
+                <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell align="center">{t('date')}</TableCell>
+                            <TableCell align="center">{t('weight')}</TableCell>
+                            <TableCell align="center">{t('difference')}</TableCell>
+                            <TableCell align="center">{t('days')}</TableCell>
+                            <TableCell align="center" />
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {processedWeights.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
+                            <TableRow
+                                key={row.entry.date.toISOString()}
+                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                            >
+                                <TableCell component="th" scope="row" align="center">
+                                    {dateTimeToLocale(row.entry.date)}
+                                </TableCell>
+                                <TableCell align="center">{row.entry.weight}</TableCell>
+                                <TableCell align="center">{+row.change.toFixed(2)}</TableCell>
+                                <TableCell align="center">{row.days.toFixed(1)}</TableCell>
+                                <TableCell align="center">
+                                    <ActionButton weight={row.entry} />
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+                <TablePagination
+                    rowsPerPageOptions={availableResultsPerPage}
+                    component="div"
+                    count={processedWeights.length}
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                />
+            </TableContainer>
+            <WeightEntryFab />
+        </Root>
+    );
+};

package/src/components/BodyWeight/Table/table.module.css

@@ -0,0 +1,5 @@
+.table {
+  overflow-x: visible;
+}
+
+/*# sourceMappingURL=table.module.css.map */

package/src/components/BodyWeight/Table/table.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["table.module.scss"],"names":[],"mappings":"AAAA;EACI","file":"table.module.css"}

package/src/components/BodyWeight/Table/table.mosule.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=table.mosule.css.map */

package/src/components/BodyWeight/Table/table.mosule.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"table.mosule.css"}

package/src/components/BodyWeight/TableDashboard/TableDashboard.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WeightTableDashboard } from 'components/BodyWeight/TableDashboard/TableDashboard';
+import { WeightEntry } from "components/BodyWeight/model";
+
+describe("Body weight test", () => {
+    test('renders without crashing', async () => {
+
+        const weightsData: WeightEntry[] = [
+            new WeightEntry(new Date('2021/12/10'), 80, 1),
+            new WeightEntry(new Date('2021/12/20'), 90, 2),
+        ];
+
+        // since I used context api to provide state, also need it here
+        render(<WeightTableDashboard weights={weightsData} />);
+
+        // Both weights are found in th document
+        const weightRow = await screen.findByText('80');
+        expect(weightRow).toBeInTheDocument();
+
+        const weightRow2 = await screen.findByText("90");
+        expect(weightRow2).toBeInTheDocument();
+    });
+});

package/src/components/BodyWeight/TableDashboard/TableDashboard.tsx

@@ -0,0 +1,62 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { WeightEntry } from "components/BodyWeight/model";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { dateTimeToLocale } from "utils/date";
+
+
+const PREFIX = 'WeightTableDashboard';
+
+const classes = {
+    table: `${PREFIX}-table`
+};
+
+const Root = styled('div')(() => {
+    return {
+        [`&.${classes.table}`]: {
+            "& .MuiPaper-root": {
+                border: "1px solid #bababa",
+
+            }
+        },
+    };
+});
+
+
+export interface WeightTableProps {
+    weights: WeightEntry[];
+}
+
+export const WeightTableDashboard = ({ weights }: WeightTableProps) => {
+    const [t] = useTranslation();
+
+    const WEIGHT_ENTRIES_TO_SHOW = 5;
+
+    const filteredWeight = weights.slice(0, WEIGHT_ENTRIES_TO_SHOW);
+
+    return (
+        <Root className={classes.table}>
+            <TableContainer>
+                <Table size={"small"}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell align="center">{t('date')}</TableCell>
+                            <TableCell align="center">{t('weight')}</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {filteredWeight.map((row) => (
+                            <TableRow key={row.date.toISOString()}>
+                                <TableCell align="center">
+                                    {dateTimeToLocale(row.date)}
+                                </TableCell>
+                                <TableCell align="center">{row.weight}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </Root>
+    );
+};

package/src/components/BodyWeight/WeightChart/index.test.tsx

@@ -0,0 +1,66 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { WeightEntry } from "components/BodyWeight/model";
+import React from 'react';
+import { testQueryClient } from "tests/queryClient";
+import { WeightChart } from "./index";
+
+const { ResizeObserver } = window;
+
+// See https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
+beforeEach(() => {
+    // @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();
+});
+
+
+describe("Test BodyWeight component", () => {
+    test('renders without crashing', async () => {
+
+        // Arrange
+        const weightData = [        
+            new WeightEntry(new Date('2021-12-10'), 80, 1),
+            new WeightEntry(new Date('2021-12-20'), 90, 2),
+        ];
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <WeightChart weights={weightData} />
+            </QueryClientProvider>
+        );
+
+        // Renders without crashing
+    });
+
+    test('errors get handled', () => {
+
+        // Arrange
+        const weightData: WeightEntry[] = [];
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <WeightChart weights={weightData} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        // No weights are found in the document
+        const linkElement = screen.queryByText("80");
+        expect(linkElement).toBeNull();
+
+        const linkElement2 = screen.queryByText("90");
+        expect(linkElement2).toBeNull();
+    });
+});

package/src/components/BodyWeight/WeightChart/index.tsx

@@ -0,0 +1,105 @@
+import { Paper, useTheme } from "@mui/material";
+import { WeightForm } from "components/BodyWeight/Form/WeightForm";
+import { WeightEntry } from "components/BodyWeight/model";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { CartesianGrid, DotProps, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { dateToLocale } from "utils/date";
+
+export interface WeightChartProps {
+    weights: WeightEntry[],
+    height?: number,
+}
+
+export interface TooltipProps {
+    active?: boolean,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any,
+    label?: string,
+}
+
+const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+    const [t] = useTranslation();
+
+    if (active && payload && payload.length) {
+        return (
+            <Paper style={{ padding: 8 }}>
+                <p><strong>{dateToLocale(new Date(label!))}</strong></p>
+                <p>{t('weight')}: {payload[0].value}</p>
+            </Paper>
+        );
+    }
+
+    return null;
+};
+
+export const WeightChart = ({ weights, height }: WeightChartProps) => {
+
+    const NR_OF_WEIGHTS_CHART_DOT = 30;
+    height = height || 300;
+
+    const theme = useTheme();
+    const [t] = useTranslation();
+    const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [currentEntry, setCurrentEntry] = React.useState<WeightEntry>();
+    const handleCloseModal = () => setIsModalOpen(false);
+
+    // map the list of weights to an array of objects with the date and weight
+    const weightData = [...weights].sort((a, b) => a.date.getTime() - b.date.getTime()).map(weight => {
+        return {
+            date: weight.date.getTime(),
+            weight: weight.weight,
+            entry: weight
+        };
+    });
+
+    /*
+     * Edit the currently selected weight
+     */
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function handleClick(e: DotProps, data: any) {
+        setCurrentEntry(data.payload.entry);
+        setIsModalOpen(true);
+    }
+
+    return (
+        <div>
+            {
+                currentEntry &&
+                <WgerModal title={t('edit')} isOpen={isModalOpen} closeFn={handleCloseModal}>
+                    <WeightForm weightEntry={currentEntry} />
+                </WgerModal>
+            }
+            <ResponsiveContainer height={height}>
+
+                <LineChart data={weightData}>
+                    <Line
+                        type="monotone"
+                        dataKey="weight"
+                        stroke={theme.palette.secondary.main}
+                        strokeWidth={2}
+                        dot={weightData.length > NR_OF_WEIGHTS_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
+                        activeDot={{
+                            stroke: 'black',
+                            strokeWidth: 1,
+                            r: 6,
+                            onClick: handleClick
+                        }} />
+                    <CartesianGrid
+                        stroke="#ccc"
+                        strokeDasharray="5 5" />
+                    <XAxis
+                        dataKey="date"
+                        type={'number'}
+                        domain={['dataMin', 'dataMax']}
+                        tickFormatter={timeStr => dateToLocale(new Date(timeStr))}
+                    />
+                    <YAxis domain={['auto', 'auto']} />
+                    <Tooltip content={<CustomTooltip />} />
+                </LineChart>
+            </ResponsiveContainer>
+        </div>
+    );
+};

package/src/components/BodyWeight/body_weight.module.css

@@ -0,0 +1,8 @@
+.root {
+  margin: 2rem;
+}
+.root .chart {
+  margin: 2rem 0;
+}
+
+/*# sourceMappingURL=body_weight.module.css.map */

package/src/components/BodyWeight/body_weight.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["body_weight.module.scss"],"names":[],"mappings":"AAAA;EACI;;AAGA;EACI","file":"body_weight.module.css"}

package/src/components/BodyWeight/body_weight.module.scss

@@ -0,0 +1,8 @@
+.root {
+    margin: 2rem;
+    // width: 60%;
+
+    .chart {
+        margin: 2rem 0;
+    }
+}

package/src/components/BodyWeight/index.test.tsx

@@ -0,0 +1,92 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { WeightEntry } from "components/BodyWeight/model";
+import { getWeights } from "services";
+import { testQueryClient } from "tests/queryClient";
+import { BodyWeight } from "./index";
+import { FilterType } from "./widgets/FilterButtons";
+
+const { ResizeObserver } = window;
+
+jest.mock("services");
+console.log = jest.fn();
+
+
+describe("Test BodyWeight component", () => {
+
+    // See https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
+    beforeEach(() => {
+        // @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();
+    });
+
+    // Arrange
+    const weightData = [
+        new WeightEntry(new Date('2021-12-10'), 80, 1),
+        new WeightEntry(new Date('2021-12-20'), 90, 2),
+    ];
+
+    test('renders without crashing', async () => {
+
+        (getWeights as jest.Mock).mockImplementation(() => Promise.resolve(weightData));
+
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <BodyWeight />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(getWeights).toHaveBeenCalledTimes(1);
+
+        // Both weights are found in the document
+        expect(await screen.findByText("80")).toBeInTheDocument();
+        expect(await screen.findByText("90")).toBeInTheDocument();
+    });
+
+
+    test('changes filter and updates displayed data', async () => {
+
+        // Mock the getWeights response based on the filter
+        (getWeights as jest.Mock).mockImplementation((filter: FilterType) => {
+            if (filter === 'lastYear') {
+                return Promise.resolve(weightData);
+            } else if (filter === 'lastMonth') {
+                return Promise.resolve([]);
+            }
+            return Promise.resolve([]);
+        });
+
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <BodyWeight />
+            </QueryClientProvider>
+        );
+
+        // Initially should display data for last year
+        expect(await screen.findByText("80")).toBeInTheDocument();
+        expect(await screen.findByText("90")).toBeInTheDocument();
+
+        // Change filter to 'lastMonth'
+        const filterButton = screen.getByRole('button', { name: /lastMonth/i });
+        fireEvent.click(filterButton);
+
+        // Expect getWeights to be called with 'lastMonth'
+        expect(getWeights).toHaveBeenCalledWith('lastMonth');
+
+        // Check that entries for last year are no longer in the document
+        expect(screen.queryByText("80")).not.toBeInTheDocument();
+        expect(screen.queryByText("90")).not.toBeInTheDocument();
+    });
+});

package/src/components/BodyWeight/index.tsx

@@ -0,0 +1,40 @@
+import { Box, Stack } from "@mui/material";
+import { useBodyWeightQuery } from "components/BodyWeight/queries";
+import { WeightTable } from "components/BodyWeight/Table";
+import { WeightChart } from "components/BodyWeight/WeightChart";
+import { AddBodyWeightEntryFab } from "components/BodyWeight/widgets/fab";
+import { FilterButtons, FilterType } from "components/BodyWeight/widgets/FilterButtons";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+
+export const BodyWeight = () => {
+    const [t] = useTranslation();
+    const [filter, setFilter] = useState<FilterType>('lastYear');
+    const weightyQuery = useBodyWeightQuery(filter);
+    const handleFilterChange = (newFilter: FilterType) => {
+        setFilter(newFilter);
+    };
+
+    if (weightyQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerRightSidebar
+        title={t("weight")}
+        mainContent={<Stack spacing={2}>
+            <FilterButtons currentFilter={filter} onFilterChange={handleFilterChange} />
+            {weightyQuery.data!.length === 0 && <OverviewEmpty />}
+            {weightyQuery.data!.length !== 0 && <>
+                <WeightChart weights={weightyQuery.data!} />
+                <Box sx={{ mt: 4 }} />
+                <WeightTable weights={weightyQuery.data!} />
+            </>}
+        </Stack>
+        }
+        fab={<AddBodyWeightEntryFab />}
+    />;
+};

package/src/components/BodyWeight/model.ts

@@ -0,0 +1,40 @@
+import { Adapter } from "utils/Adapter";
+
+export class WeightEntry {
+
+    constructor(
+        public date: Date,
+        public weight: number,
+        public id?: number,
+    ) {
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static fromJson(json: any) {
+        return adapter.fromJson(json);
+    }
+
+    toJson() {
+        return adapter.toJson(this);
+    }
+}
+
+class WeightAdapter implements Adapter<WeightEntry> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): WeightEntry {
+        return new WeightEntry(
+            new Date(item.date),
+            parseFloat(item.weight),
+            item.id,
+        );
+    }
+
+    toJson(item: WeightEntry) {
+        return {
+            date: item.date.toISOString(),
+            weight: item.weight,
+        };
+    }
+}
+
+const adapter = new WeightAdapter();

package/src/components/BodyWeight/queries/index.ts

@@ -0,0 +1,49 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { WeightEntry } from "components/BodyWeight/model";
+import { createWeight, deleteWeight, getWeights, updateWeight, } from "services";
+import { QueryKey, } from "utils/consts";
+import { FilterType } from "../widgets/FilterButtons";
+
+
+export function useBodyWeightQuery(filter: FilterType = 'lastWeek') {
+    return useQuery({
+        queryKey: [QueryKey.BODY_WEIGHT, filter],
+        queryFn: () => getWeights(filter),
+    });
+}
+
+export const useDeleteWeightEntryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteWeight(id),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.BODY_WEIGHT]
+        })
+    });
+};
+
+
+export const useAddWeightEntryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (weightEntry: WeightEntry) => createWeight(weightEntry),
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: [QueryKey.BODY_WEIGHT,]
+        })
+    });
+};
+
+export const useEditWeightEntryQuery = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: WeightEntry) => updateWeight(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: [QueryKey.BODY_WEIGHT,]
+            });
+        }
+    });
+};

package/src/components/BodyWeight/utils.test.ts

@@ -0,0 +1,44 @@
+import { processWeight } from "./utils";
+import { WeightEntry } from "components/BodyWeight/model";
+
+describe("process_weight tests", () => {
+    test('process some weight entries', () => {
+
+        // Arrange
+        //
+        const entry1 = new WeightEntry(new Date('2021-12-10'), 80, 1);
+        const entry2 = new WeightEntry(new Date('2021-12-20'), 95, 2);
+        const entry3 = new WeightEntry(new Date('2021-12-25'), 70, 3);
+
+        // Act
+        //
+        const result = processWeight([
+            entry1,
+            entry2,
+            entry3,
+        ]);
+
+        // Assert
+        //
+        expect(result[0]).toStrictEqual({
+            entry: entry1,
+            change: 0,
+            days: 0
+        });
+        expect(result[1]).toStrictEqual({
+            entry: entry2,
+            change: 15,
+            days: 10
+        });
+        expect(result[2]).toStrictEqual({
+            entry: entry3,
+            change: -25,
+            days: 5
+        });
+    });
+
+    test('processing an empty weight entry list doesnt crash', () => {
+        const result = processWeight([]);
+        expect(result).toStrictEqual([]);
+    });
+});