@wger-project/react-components 25.10.16

package/src/components/Exercises/ExerciseOverview.test.tsx

@@ -0,0 +1,183 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { ExerciseOverview } from "components/Exercises/ExerciseOverview";
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { getCategories, getEquipment, getExercises, getLanguages, getMuscles } from "services";
+import {
+    testCategories,
+    testEquipment,
+    testExerciseBenchPress,
+    testExerciseCrunches,
+    testExerciseCurls,
+    testExerciseSkullCrusher,
+    testExerciseSquats,
+    testLanguages,
+    testMuscles
+} from "tests/exerciseTestdata";
+
+jest.mock("services");
+
+const queryClient = new QueryClient();
+
+describe("Test the ExerciseOverview component", () => {
+
+
+    beforeEach(() => {
+        (getLanguages as jest.Mock).mockImplementation(() => Promise.resolve(testLanguages));
+        (getCategories as jest.Mock).mockImplementation(() => Promise.resolve(testCategories));
+        (getMuscles as jest.Mock).mockImplementation(() => Promise.resolve(testMuscles));
+        (getEquipment as jest.Mock).mockImplementation(() => Promise.resolve(testEquipment));
+        (getExercises as jest.Mock).mockImplementation(() => Promise.resolve([
+            testExerciseSquats,
+            testExerciseBenchPress,
+            testExerciseCurls,
+            testExerciseCrunches,
+            testExerciseSkullCrusher
+        ]));
+    });
+
+
+    test('renders all exercises', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 20));
+        });
+
+        // Assert
+        expect(getCategories).toHaveBeenCalledTimes(1);
+        expect(getMuscles).toHaveBeenCalledTimes(1);
+        expect(getEquipment).toHaveBeenCalledTimes(1);
+        expect(getExercises).toHaveBeenCalledTimes(1);
+
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.getByText('Curls')).toBeInTheDocument();
+        expect(screen.getByText('Crunches')).toBeInTheDocument();
+        expect(screen.getByText('Skull crusher')).toBeInTheDocument();
+    });
+
+    test('filter one category', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(() => Promise.resolve());
+        const { getByText: categoriesComponent } = within(screen.getByTestId('categories'));
+        fireEvent.click(categoriesComponent("Arms"));
+
+        // Assert
+        expect(screen.queryByText('Benchpress')).not.toBeInTheDocument();
+        expect(screen.queryByText('Squats')).not.toBeInTheDocument();
+        expect(screen.getByText('Curls')).toBeInTheDocument();
+        expect(screen.queryByText('Crunches')).not.toBeInTheDocument();
+        expect(screen.getByText('Skull crusher')).toBeInTheDocument();
+    });
+
+    test('filter two categories', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(() => Promise.resolve());
+        const { getByText: categoriesComponent } = within(screen.getByTestId('categories'));
+        fireEvent.click(categoriesComponent("Arms"));
+        fireEvent.click(categoriesComponent("Legs"));
+
+        // Assert
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+        expect(screen.getByText('Curls')).toBeInTheDocument();
+        expect(screen.queryByText('Crunches')).not.toBeInTheDocument();
+        expect(screen.getByText('Skull crusher')).toBeInTheDocument();
+    });
+
+    test('filter equipment', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(() => Promise.resolve());
+        const { getByText: equipmentComponent } = within(screen.getByTestId('equipment'));
+        fireEvent.click(equipmentComponent("Barbell"));
+
+        // Assert
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+        expect(screen.queryByText('Curls')).not.toBeInTheDocument();
+        expect(screen.queryByText('Crunches')).not.toBeInTheDocument();
+        expect(screen.getByText('Skull crusher')).toBeInTheDocument();
+    });
+
+    test('filter muscles', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(() => Promise.resolve());
+        const { getByText: musclesComponent } = within(screen.getByTestId('muscles'));
+        fireEvent.click(musclesComponent("Biggus musculus"));
+
+        // Assert
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.queryByText('Benchpress')).not.toBeInTheDocument();
+        expect(screen.getByText('Curls')).toBeInTheDocument();
+        expect(screen.queryByText('Crunches')).not.toBeInTheDocument();
+        expect(screen.queryByText('Skull crusher')).not.toBeInTheDocument();
+    });
+
+    test('filter equipment and category', async () => {
+
+        // Act
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={queryClient}>
+                    <ExerciseOverview />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+        await act(() => Promise.resolve());
+
+        const { getByText: categoryComponent } = within(screen.getByTestId('categories'));
+        fireEvent.click(categoryComponent('Legs'));
+
+        const { getByText: equipmentComponent } = within(screen.getByTestId('equipment'));
+        fireEvent.click(equipmentComponent('Rocks'));
+
+        // Assert
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+        expect(screen.getByText('Benchpress')).toBeInTheDocument();
+        expect(screen.queryByText('Curls')).not.toBeInTheDocument();
+        expect(screen.queryByText('Crunches')).not.toBeInTheDocument();
+        expect(screen.queryByText('Skull crusher')).not.toBeInTheDocument();
+    });
+
+});

package/src/components/Exercises/ExerciseOverview.tsx

@@ -0,0 +1,293 @@
+import AddIcon from '@mui/icons-material/Add';
+import { Box, Button, Container, Pagination, Stack, Typography, useMediaQuery } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { CategoryFilter, CategoryFilterDropdown } from "components/Exercises/Filter/CategoryFilter";
+import { EquipmentFilter, EquipmentFilterDropdown } from "components/Exercises/Filter/EquipmentFilter";
+import { MuscleFilter, MuscleFilterDropdown } from "components/Exercises/Filter/MuscleFilter";
+import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Category } from "components/Exercises/models/category";
+import { Equipment } from "components/Exercises/models/equipment";
+import { Muscle } from "components/Exercises/models/muscle";
+import { ExerciseGrid } from "components/Exercises/Overview/ExerciseGrid";
+import { ExerciseGridSkeleton } from "components/Exercises/Overview/ExerciseGridLoadingSkeleton";
+
+import { useExercisesQuery } from "components/Exercises/queries";
+import React, { useContext, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import { ExerciseSearchResponse } from "services/responseType";
+import { makeLink, WgerLink } from "utils/url";
+import { ExerciseFiltersContext } from './Filter/ExerciseFiltersContext';
+import { FilterDrawer } from './Filter/FilterDrawer';
+
+const ContributeExerciseBanner = () => {
+    const [t, i18n] = useTranslation();
+
+    return (
+        <Box
+            marginTop={4}
+            padding={4}
+            sx={{
+                width: "100%",
+                backgroundColor: "#ebebeb",
+                textAlign: "center",
+            }}
+        >
+            <Typography gutterBottom variant="h4" component="div">
+                {t("exercises.missingExercise")}
+            </Typography>
+
+            <Typography gutterBottom variant="body1" component="div">
+                {t("exercises.missingExerciseDescription")}
+            </Typography>
+
+            <Link to={makeLink(WgerLink.EXERCISE_CONTRIBUTE, i18n.language)}>
+                {t("exercises.contributeExercise")}
+            </Link>
+        </Box>
+    );
+};
+
+const NoResultsBanner = () => {
+    const [t] = useTranslation();
+
+    return (
+        <Box
+            marginTop={4}
+            padding={4}
+            sx={{
+                width: "100%",
+                backgroundColor: "#ebebeb",
+                textAlign: "center",
+            }}
+        >
+            <Typography gutterBottom variant="h4" component="div">
+                {t("noResults")}
+            </Typography>
+
+            <Typography gutterBottom variant="body1" component="div">
+                {t("noResultsDescription")}
+            </Typography>
+        </Box>
+    );
+};
+
+export const ExerciseOverviewList = () => {
+    const basesQuery = useExercisesQuery();
+    const [t, i18n] = useTranslation();
+    const navigate = useNavigate();
+    const { selectedCategories, selectedEquipment, selectedMuscles } = useContext(ExerciseFiltersContext);
+    const isMobile = useMediaQuery('(max-width:600px)');
+
+    const [page, setPage] = React.useState(1);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handlePageChange = (event: any, value: number) => {
+        setPage(value);
+
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+
+    const filteredExercises = useMemo(() => {
+        let filteredExercises = basesQuery.data || [];
+
+        // Filter exercise bases by categories
+        if (selectedCategories.length > 0) {
+            filteredExercises = filteredExercises!.filter(exercise => {
+                return selectedCategories.some(
+                    category => exercise.category.id === category.id
+                );
+            });
+        }
+
+        // Filter exercises that have one of the selected equipment
+        if (selectedEquipment.length > 0) {
+            filteredExercises = filteredExercises!.filter(exercise => {
+                return exercise.equipment.some(equipment =>
+                    selectedEquipment.some(
+                        selectedEquipment => selectedEquipment.id === equipment.id
+                    )
+                );
+            });
+        }
+
+        // Filter exercises that have one of the selected muscles
+        if (selectedMuscles.length > 0) {
+            filteredExercises = filteredExercises!.filter(exercise => {
+                return exercise.muscles.some(muscle =>
+                    selectedMuscles.some(selectedMuscle => selectedMuscle.id === muscle.id)
+                );
+            });
+        }
+
+        return filteredExercises;
+    }, [basesQuery.data, selectedCategories, selectedEquipment, selectedMuscles]);
+
+    // Should be a multiple of three, since there are three columns in the grid
+    const ITEMS_PER_PAGE = 21;
+
+    // Pagination calculations
+    const pageCount = Math.ceil(filteredExercises!.length / ITEMS_PER_PAGE);
+    const paginatedExercises = filteredExercises!.slice(
+        (page - 1) * ITEMS_PER_PAGE,
+        page * ITEMS_PER_PAGE
+    );
+
+    const exerciseAdded = (exerciseResponse: ExerciseSearchResponse | null) => {
+        if (!exerciseResponse) {
+            return;
+        }
+
+        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exerciseResponse.data.base_id }));
+    };
+
+    return (
+        (<Container maxWidth="lg">
+            <Grid container spacing={2} mt={2}>
+                <Grid
+                    size={{
+                        xs: 10,
+                        sm: 6
+                    }}>
+                    <Typography gutterBottom variant="h3" component="div">
+                        {t("exercises.exercises")}
+                    </Typography>
+                </Grid>
+                {isMobile ? (
+                    <>
+                        <Grid
+                            size={{
+                                xs: 2,
+                                sm: 6
+                            }}>
+                            <Button
+                                variant="contained"
+                                onClick={() => navigate(makeLink(WgerLink.EXERCISE_CONTRIBUTE, i18n.language))}
+                            >
+                                <AddIcon />
+                            </Button>
+                        </Grid>
+                        <Grid
+                            flexGrow={1}
+                            size={{
+                                sm: 6
+                            }}>
+                            <NameAutocompleter callback={exerciseAdded} />
+                        </Grid>
+                        <Grid
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                            size={{
+                                xs: 2,
+                                sm: 6
+                            }}>
+                            <FilterDrawer>
+                                <CategoryFilterDropdown />
+                                <EquipmentFilterDropdown />
+                                <MuscleFilterDropdown />
+                            </FilterDrawer>
+                        </Grid>
+                    </>
+                ) : (
+                    <>
+                        <Grid
+                            size={{
+                                xs: 12,
+                                sm: 3
+                            }}>
+                            <NameAutocompleter callback={exerciseAdded} />
+                        </Grid>
+                        <Grid
+                            size={{
+                                xs: 12,
+                                sm: 3
+                            }}>
+                            <Button
+                                variant="contained"
+                                startIcon={<AddIcon />}
+                                onClick={() => navigate(makeLink(WgerLink.EXERCISE_CONTRIBUTE, i18n.language))}
+                            >
+                                {t('exercises.contributeExercise')}
+                            </Button>
+                        </Grid>
+                    </>
+                )}
+
+                {!isMobile && (
+                    <Grid
+                        size={{
+                            xs: 12,
+                            sm: 3
+                        }}>
+                        <Grid container spacing={1}>
+                            <Grid
+                                size={{
+                                    xs: 6,
+                                    sm: 12
+                                }}>
+                                <CategoryFilter />
+                            </Grid>
+
+                            <Grid
+                                size={{
+                                    xs: 6,
+                                    sm: 12
+                                }}>
+                                <EquipmentFilter />
+                            </Grid>
+
+                            <Grid size={12}>
+                                <MuscleFilter />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                )}
+
+                <Grid
+                    size={{
+                        xs: 12,
+                        sm: 9
+                    }}>
+                    {basesQuery.isLoading
+                        ? <ExerciseGridSkeleton />
+                        : <>
+                            <ExerciseGrid exercises={paginatedExercises} />
+                            <Stack spacing={2} alignItems="center" sx={{ mt: 2 }}>
+                                <Pagination
+                                    count={pageCount}
+                                    color="primary"
+                                    page={page}
+                                    onChange={handlePageChange}
+                                />
+                            </Stack>
+                        </>
+                    }
+
+                    <ContributeExerciseBanner />
+                </Grid>
+            </Grid>
+        </Container>)
+    );
+};
+
+export const ExerciseOverview = () => {
+    const [selectedEquipment, setSelectedEquipment] = useState<Equipment[]>([]);
+    const [selectedMuscles, setSelectedMuscles] = useState<Muscle[]>([]);
+    const [selectedCategories, setSelectedCategories] = React.useState<Category[]>([]);
+
+    return (
+        <ExerciseFiltersContext.Provider value={{
+            selectedEquipment,
+            setSelectedEquipment,
+            selectedMuscles,
+            setSelectedMuscles,
+            selectedCategories,
+            setSelectedCategories
+        }}>
+            <ExerciseOverviewList />
+        </ExerciseFiltersContext.Provider>
+    );
+};

package/src/components/Exercises/Filter/CategoryFilter.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { CategoryFilter } from "components/Exercises/Filter/CategoryFilter";
+import { Category } from "components/Exercises/models/category";
+import { useCategoriesQuery } from "components/Exercises/queries";
+import React from 'react';
+import { ExerciseFiltersContext } from './ExerciseFiltersContext';
+
+
+jest.mock("components/Exercises/queries");
+const mockeCategoryQuery = useCategoriesQuery as jest.Mock;
+
+describe("Test the CategoryFilter component", () => {
+
+    beforeEach(() => {
+        mockeCategoryQuery.mockImplementation(() => (
+            {
+                isLoading: false,
+                data: [
+                    new Category(10, "Abs"),
+                    new Category(8, "Arms"),
+                    new Category(12, "Back"),
+                ]
+            }
+        ));
+    });
+
+    test('renders without crashing', async () => {
+
+        // Arrange
+        const noop = () => void 0;
+
+        // Act
+        render(
+            <ExerciseFiltersContext.Provider value={{
+                selectedEquipment: [],
+                setSelectedEquipment: noop,
+                selectedMuscles: [],
+                setSelectedMuscles: noop,
+                selectedCategories: [],
+                setSelectedCategories: noop
+            }}>
+                <CategoryFilter />
+            </ExerciseFiltersContext.Provider>
+        );
+
+        // Assert
+        const cat1Element = await screen.findByText("Abs");
+        expect(cat1Element).toBeInTheDocument();
+
+        const cat2Element = await screen.findByText("Arms");
+        expect(cat2Element).toBeInTheDocument();
+
+        const cat3Element = await screen.findByText("Back");
+        expect(cat3Element).toBeInTheDocument();
+    });
+
+});

package/src/components/Exercises/Filter/CategoryFilter.tsx

@@ -0,0 +1,105 @@
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Paper,
+    Switch,
+    Typography
+} from "@mui/material";
+import { Category } from "components/Exercises/models/category";
+import React, { useContext } from 'react';
+import { useTranslation } from "react-i18next";
+import { LoadingPlaceholder } from '../../Core/LoadingWidget/LoadingWidget';
+import { useCategoriesQuery } from '../queries';
+import { ExerciseFiltersContext } from './ExerciseFiltersContext';
+
+const CategoryFilterList = () => {
+
+    const { data: categories, isLoading } = useCategoriesQuery();
+    const { selectedCategories, setSelectedCategories } = useContext(ExerciseFiltersContext);
+
+    const handleToggle = (value: Category) => () => {
+        const currentIndex = selectedCategories.indexOf(value);
+        const newChecked = [...selectedCategories];
+
+        if (currentIndex === -1) {
+            newChecked.push(value);
+        } else {
+            newChecked.splice(currentIndex, 1);
+        }
+
+        setSelectedCategories(newChecked);
+    };
+
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return (
+        <List>
+            {categories!.map((category) => {
+                const labelId = `checkbox-list-label-${category.id}`;
+
+                return (
+                    <ListItem
+                        key={category.id}
+                        disablePadding
+                    >
+                        <ListItemButton role={undefined} onClick={handleToggle(category)} dense>
+                            <ListItemIcon>
+                                <Switch
+                                    key={`category-${category.id}`}
+                                    edge="start"
+                                    checked={selectedCategories.indexOf(category) !== -1}
+                                    tabIndex={-1}
+                                    disableRipple
+                                    inputProps={{ 'aria-labelledby': labelId }}
+                                />
+                            </ListItemIcon>
+                            <ListItemText
+                                id={labelId}
+                                primary={category.translatedName}
+                            />
+                        </ListItemButton>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export const CategoryFilterDropdown = () => {
+    const [t] = useTranslation();
+
+    return (
+        <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                {t('category')}
+            </AccordionSummary>
+            <AccordionDetails>
+                <CategoryFilterList />
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export const CategoryFilter = () => {
+    const [t] = useTranslation();
+
+    return (
+        <div data-testid={"categories"}>
+            <Paper>
+                <Typography gutterBottom variant="h6" m={2}>
+                    {t('category')}
+                </Typography>
+                <CategoryFilterList />
+            </Paper>
+        </div>
+    );
+};

package/src/components/Exercises/Filter/EquipmentFilter.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { EquipmentFilter } from "components/Exercises/Filter/EquipmentFilter";
+import { Equipment } from "components/Exercises/models/equipment";
+import { useEquipmentQuery } from "components/Exercises/queries";
+import React from 'react';
+import { ExerciseFiltersContext } from "./ExerciseFiltersContext";
+
+
+jest.mock("components/Exercises/queries");
+const mockedEquipmentQuery = useEquipmentQuery as jest.Mock;
+
+describe("Test the CategoryFilter component", () => {
+    beforeEach(() => {
+        mockedEquipmentQuery.mockImplementation(() => (
+            {
+                isLoading: false,
+                data: [
+                    new Equipment(1, "Bench"),
+                    new Equipment(99, "Kettlebell"),
+                    new Equipment(101, "Dumbbell"),
+                ]
+            }
+        ));
+    });
+
+    test('renders without crashing', async () => {
+
+        // Arrange
+        const noop = () => void 0;
+
+        // Act
+        render(
+            <ExerciseFiltersContext.Provider value={{
+                selectedEquipment: [],
+                setSelectedEquipment: noop,
+                selectedMuscles: [],
+                setSelectedMuscles: noop,
+                selectedCategories: [],
+                setSelectedCategories: noop
+            }}>
+                <EquipmentFilter />
+            </ExerciseFiltersContext.Provider>);
+
+        // Assert
+        const cat1Element = await screen.findByText("Bench");
+        expect(cat1Element).toBeInTheDocument();
+
+        const cat2Element = await screen.findByText("Kettlebell");
+        expect(cat2Element).toBeInTheDocument();
+
+        const cat3Element = await screen.findByText("Dumbbell");
+        expect(cat3Element).toBeInTheDocument();
+    });
+
+});