@wger-project/react-components 25.10.16

package/src/components/Exercises/Filter/EquipmentFilter.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 { Equipment } from "components/Exercises/models/equipment";
+import React, { useContext } from 'react';
+import { useTranslation } from "react-i18next";
+import { LoadingPlaceholder } from '../../Core/LoadingWidget/LoadingWidget';
+import { useEquipmentQuery } from '../queries';
+import { ExerciseFiltersContext } from './ExerciseFiltersContext';
+
+const EquipmentFilterList = () => {
+
+    const { data: equipment, isLoading } = useEquipmentQuery();
+    const { selectedEquipment, setSelectedEquipment } = useContext(ExerciseFiltersContext);
+
+    const handleToggle = (value: Equipment) => () => {
+        const currentIndex = selectedEquipment.indexOf(value);
+        const newChecked = [...selectedEquipment];
+
+        if (currentIndex === -1) {
+            newChecked.push(value);
+        } else {
+            newChecked.splice(currentIndex, 1);
+        }
+
+        setSelectedEquipment(newChecked);
+    };
+
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return (
+        <List sx={{ maxHeight: "500px", overflowY: "auto" }}>
+            {equipment!.map((equipment) => {
+                const labelId = `checkbox-list-label-${equipment.id}`;
+
+                return (
+                    <ListItem
+                        key={equipment.id}
+                        disablePadding
+                    >
+                        <ListItemButton role={undefined} onClick={handleToggle(equipment)} dense>
+                            <ListItemIcon>
+                                <Switch
+                                    key={`muscle-${equipment.id}`}
+                                    edge="start"
+                                    checked={selectedEquipment.indexOf(equipment) !== -1}
+                                    tabIndex={-1}
+                                    disableRipple
+                                    inputProps={{ 'aria-labelledby': labelId }}
+                                />
+                            </ListItemIcon>
+                            <ListItemText
+                                id={labelId}
+                                primary={equipment.translatedName}
+                            />
+                        </ListItemButton>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export const EquipmentFilterDropdown = () => {
+    const [t] = useTranslation();
+
+    return (
+        <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                {t('exercises.equipment')}
+            </AccordionSummary>
+            <AccordionDetails>
+                <EquipmentFilterList />
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export const EquipmentFilter = () => {
+    const [t] = useTranslation();
+
+    return (
+        <div data-testid={"equipment"}>
+            <Paper sx={{ mt: 2 }}>
+                <Typography gutterBottom variant="h6" m={2}>
+                    {t('exercises.equipment')}
+                </Typography>
+                <EquipmentFilterList />
+            </Paper>
+        </div>
+    );
+};

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

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { Equipment } from '../models/equipment';
+import { Muscle } from '../models/muscle';
+import { Category } from '../models/category';
+
+
+type ExerciseContext = {
+    selectedEquipment: Equipment[];
+    setSelectedEquipment: (equipment: Equipment[]) => void;
+    selectedMuscles: Muscle[];
+    setSelectedMuscles: (muscles: Muscle[]) => void;
+    selectedCategories: Category[];
+    setSelectedCategories: (exercises: Category[]) => void;
+}
+
+export const ExerciseFiltersContext = createContext<ExerciseContext>({} as unknown as ExerciseContext);

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

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Divider, Drawer, Stack, Typography } from '@mui/material';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTranslation } from 'react-i18next';
+
+type FilterDrawerProps = {
+    children: React.ReactNode;
+}
+
+export const FilterDrawer = ({ children }: FilterDrawerProps) => {
+    const [t] = useTranslation();
+    const [open, setOpen] = useState(false);
+
+    const toggleDrawer = (newOpen: boolean) => () => {
+        setOpen(newOpen);
+    };
+
+    return (
+        <>
+            <Button onClick={toggleDrawer(true)}>
+                <FilterAltIcon />
+            </Button>
+            <Drawer open={open} onClose={toggleDrawer(false)} anchor="right">
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography gutterBottom variant="h6" m={2}>
+                        {t('filters')}
+                    </Typography>
+                    <Button onClick={toggleDrawer(false)}>
+                        <CloseIcon />
+                    </Button>
+                </Stack>
+                <Divider />
+                {children}
+            </Drawer>
+        </>
+    );
+};

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

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { MuscleFilter } from "components/Exercises/Filter/MuscleFilter";
+import { Muscle } from "components/Exercises/models/muscle";
+import { useMusclesQuery } from "components/Exercises/queries";
+import React from 'react';
+import { ExerciseFiltersContext } from './ExerciseFiltersContext';
+
+jest.mock("components/Exercises/queries");
+const mockedMuscleQuery = useMusclesQuery as jest.Mock;
+
+describe("Test the CategoryFilter component", () => {
+    beforeEach(() => {
+        mockedMuscleQuery.mockImplementation(() => (
+            {
+                isLoading: false,
+                data: [
+                    new Muscle(2, "Anterior deltoid", "Shoulders", true),
+                    new Muscle(1, "Biceps brachii", "Biceps", false),
+                ]
+            }
+        ));
+    });
+
+    test('renders without crashing', async () => {
+
+        // Arrange
+        const noop = () => void 0;
+
+        // Act
+        render(
+            <ExerciseFiltersContext.Provider value={{
+                selectedEquipment: [],
+                setSelectedEquipment: noop,
+                selectedMuscles: [],
+                setSelectedMuscles: noop,
+                selectedCategories: [],
+                setSelectedCategories: noop
+            }}>
+                <MuscleFilter />
+            </ExerciseFiltersContext.Provider>
+        );
+
+        // Assert
+        const cat1Element = await screen.findByText("Anterior deltoid");
+        expect(cat1Element).toBeInTheDocument();
+
+        const cat2Element = await screen.findByText("Biceps brachii");
+        expect(cat2Element).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,130 @@
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    IconButton,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Paper,
+    Switch,
+    Typography
+} from "@mui/material";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { LightTooltip } from "components/Core/Tooltips/LightToolTip";
+import { Muscle } from "components/Exercises/models/muscle";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import React, { useContext } from 'react';
+import { useTranslation } from "react-i18next";
+import { useMusclesQuery } from '../queries';
+import { ExerciseFiltersContext } from './ExerciseFiltersContext';
+
+const MuscleFilterList = () => {
+
+    const { data: muscles, isLoading } = useMusclesQuery();
+    const { selectedMuscles, setSelectedMuscles } = useContext(ExerciseFiltersContext);
+
+    const handleToggle = (value: Muscle) => () => {
+        const currentIndex = selectedMuscles.indexOf(value);
+        const newChecked = [...selectedMuscles];
+
+        if (currentIndex === -1) {
+            newChecked.push(value);
+        } else {
+            newChecked.splice(currentIndex, 1);
+        }
+
+        setSelectedMuscles(newChecked);
+    };
+
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return (
+        <List sx={{ maxHeight: "500px", overflowY: "auto" }}>
+            {muscles!.map((m) => {
+                const labelId = `checkbox-list-label-${m.id}`;
+
+                return (
+                    <ListItem
+                        key={m.id}
+                        disablePadding
+                        secondaryAction={
+                            <LightTooltip
+                                title={
+                                    <MuscleOverview
+                                        primaryMuscles={[m]}
+                                        secondaryMuscles={[]}
+                                        isFront={m.isFront}
+                                    />
+                                }
+                                placement="right"
+                                arrow>
+                                <IconButton edge="end" aria-label="comments">
+                                    <InfoOutlinedIcon />
+                                </IconButton>
+                            </LightTooltip>
+                        }
+                    >
+                        <ListItemButton role={undefined} onClick={handleToggle(m)} dense>
+                            <ListItemIcon>
+                                <Switch
+                                    key={`muscle-${m.id}`}
+                                    edge="start"
+                                    checked={selectedMuscles.indexOf(m) !== -1}
+                                    tabIndex={-1}
+                                    disableRipple
+                                    inputProps={{ 'aria-labelledby': labelId }}
+                                />
+                            </ListItemIcon>
+
+                            <ListItemText
+                                id={labelId}
+                                primary={m.name}
+                                secondary={m.nameEn !== '' ? m.translatedName : ''}
+                            />
+
+                        </ListItemButton>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export const MuscleFilterDropdown = () => {
+
+    const [t] = useTranslation();
+
+    return (
+        <Accordion>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                {t('exercises.muscles')}
+            </AccordionSummary>
+            <AccordionDetails>
+                <MuscleFilterList />
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export const MuscleFilter = () => {
+
+    const [t] = useTranslation();
+
+    return (
+        <div data-testid={"muscles"}>
+            <Paper sx={{ mt: 2 }}>
+                <Typography gutterBottom variant="h6" m={2}>
+                    {t('exercises.muscles')}
+                </Typography>
+                <MuscleFilterList />
+            </Paper>
+        </div>
+    );
+};

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

@@ -0,0 +1,146 @@
+import PhotoIcon from "@mui/icons-material/Photo";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+    Autocomplete,
+    Avatar,
+    FormControlLabel,
+    FormGroup,
+    InputAdornment,
+    ListItem,
+    ListItemIcon,
+    ListItemText,
+    Switch,
+    TextField,
+} from "@mui/material";
+import { SERVER_URL } from "config";
+import debounce from "lodash/debounce";
+import * as React from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getExercise, searchExerciseTranslations } from "services";
+import { ExerciseSearchResponse } from "services/responseType";
+import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
+
+type NameAutocompleterProps = {
+    callback: (exerciseResponse: ExerciseSearchResponse | null) => void;
+    loadExercise?: boolean;
+};
+
+export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterProps) {
+    const [value, setValue] = React.useState<ExerciseSearchResponse | null>(null);
+    const [inputValue, setInputValue] = React.useState("");
+    const [searchEnglish, setSearchEnglish] = useState<boolean>(true);
+    const [options, setOptions] = React.useState<readonly ExerciseSearchResponse[]>([]);
+    const [t, i18n] = useTranslation();
+
+    loadExercise = loadExercise === undefined ? false : loadExercise;
+
+    const fetchName = React.useMemo(
+        () =>
+            debounce(
+                (request: string) =>
+                    searchExerciseTranslations(request, i18n.language, searchEnglish).then((res) => setOptions(res)),
+                200
+            ),
+        [i18n.language, searchEnglish]
+    );
+
+    React.useEffect(() => {
+        if (inputValue === "") {
+            setOptions(value ? [value] : []);
+            return undefined;
+        }
+
+        fetchName(inputValue);
+
+        return () => {
+        };
+    }, [value, inputValue, fetchName]);
+
+    return (
+        <>
+            <Autocomplete
+                id="exercise-name-autocomplete"
+                getOptionLabel={(option) => option.value}
+                data-testid="autocomplete"
+                filterOptions={(x) => x}
+                options={options}
+                autoComplete
+                includeInputInList
+                filterSelectedOptions
+                value={value}
+                noOptionsText={t("noResults")}
+                isOptionEqualToValue={(option, value) => option.value === value.value}
+                onChange={async (event: React.SyntheticEvent, newValue: ExerciseSearchResponse | null) => {
+                    setOptions(newValue ? [newValue, ...options] : options);
+                    setValue(newValue);
+                    if (loadExercise && newValue !== null) {
+                        newValue.exercise = await getExercise(newValue.data.base_id);
+                    }
+                    callback(newValue);
+                }}
+                onInputChange={(event, newInputValue) => {
+                    setInputValue(newInputValue);
+                }}
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        label={t("exercises.searchExerciseName")}
+                        fullWidth
+                        slotProps={{
+                            input: {
+                                ...params.InputProps,
+                                startAdornment: (
+                                    <>
+                                        <InputAdornment position="start">
+                                            <SearchIcon />
+                                        </InputAdornment>
+                                        {params.InputProps.startAdornment}
+                                    </>
+                                ),
+                            },
+                        }}
+                    />
+                )}
+                renderOption={(props, option, state) => (
+                    <li
+                        {...props}
+                        key={`exercise-${state.index}-${option.data.id}`}
+                        data-testid={`autocompleter-result-${option.data.base_id}`}
+                    >
+                        <ListItem disablePadding component="div">
+                            <ListItemIcon>
+                                {option.data.image ? (
+                                    <Avatar alt="" src={`${SERVER_URL}${option.data.image}`} variant="rounded" />
+                                ) : (
+                                    <PhotoIcon fontSize="large" />
+                                )}
+                            </ListItemIcon>
+                            <ListItemText
+                                primary={option.value}
+                                slotProps={{
+                                    primary: {
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                    },
+                                }}
+                                secondary={option.data.category}
+                            />
+                        </ListItem>
+                    </li>
+                )}
+            />
+            {i18n.language !== LANGUAGE_SHORT_ENGLISH && (
+                <FormGroup>
+                    <FormControlLabel
+                        control={
+                            <Switch checked={searchEnglish} onChange={(event, checked) => setSearchEnglish(checked)} />
+                        }
+                        label={t("alsoSearchEnglish")}
+                    />
+                </FormGroup>
+            )}
+        </>
+    );
+}

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

@@ -0,0 +1,76 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import React from 'react';
+import { searchExerciseTranslations } from "services";
+import { searchResponse } from "tests/exercises/searchResponse";
+
+jest.mock("services");
+const mockCallback = jest.fn();
+
+describe("Test the NameAutocompleter component", () => {
+
+    // Arrange
+    beforeEach(() => {
+        (searchExerciseTranslations as jest.Mock).mockImplementation(() => Promise.resolve(searchResponse));
+    });
+
+    test('renders correct results', async () => {
+
+        // Act
+        render(<NameAutocompleter callback={mockCallback} />);
+        const autocomplete = screen.getByTestId('autocomplete');
+        const input = within(autocomplete).getByRole('combobox');
+        await act(() => {
+            autocomplete.focus();
+            autocomplete.click();
+        });
+
+        // Assert
+        expect(searchExerciseTranslations).not.toHaveBeenCalled();
+        fireEvent.input(input, { target: { value: 'Cru' } });
+
+        expect(screen.getByLabelText("exercises.searchExerciseName")).toBeInTheDocument();
+        expect(screen.getByText("noResults")).toBeInTheDocument();
+        expect(screen.queryByText("Crunches an Negativbank")).not.toBeInTheDocument();
+        expect(screen.queryByText("Bauch")).not.toBeInTheDocument();
+        expect(screen.queryByText("Crunches am Seil")).not.toBeInTheDocument();
+        expect(screen.queryByText("Brust")).not.toBeInTheDocument();
+
+        // There's a bounce period of 200ms between the input and the search
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 250));
+        });
+        expect(searchExerciseTranslations).toHaveBeenCalled();
+        expect(screen.getByText("Crunches an Negativbank")).toBeInTheDocument();
+        expect(screen.getByText("Bauch")).toBeInTheDocument();
+        expect(screen.getByText("Crunches am Seil")).toBeInTheDocument();
+        expect(screen.getByText("Brust")).toBeInTheDocument();
+    });
+
+    test('callback was correctly called', async () => {
+
+        // Act
+        render(<NameAutocompleter callback={mockCallback} />);
+        const autocomplete = screen.getByTestId('autocomplete');
+        const input = within(autocomplete).getByRole('combobox');
+        await act(() => {
+            autocomplete.focus();
+            autocomplete.click();
+        });
+        fireEvent.input(input, { target: { value: 'Cru' } });
+
+        // There's a bounce period of 200ms between the input and the search
+        await act(async () => {
+            await new Promise((r) => setTimeout(r, 250));
+        });
+
+        // Select first result
+        fireEvent.keyDown(autocomplete, { key: 'ArrowDown' });
+        await waitFor(() => {
+            fireEvent.keyDown(autocomplete, { key: 'Enter' });
+        });
+
+        // Assert
+        expect(mockCallback).toHaveBeenLastCalledWith(searchResponse[0]);
+    });
+});

package/src/components/Exercises/Overview/ExerciseGrid.tsx

@@ -0,0 +1,44 @@
+import Grid from '@mui/material/Grid';
+import { OverviewCard } from "components/Exercises/Detail/OverviewCard";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import { useLanguageQuery } from "components/Exercises/queries";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { getLanguageByShortName } from "services";
+
+type ExerciseGridProps = {
+    exercises: Exercise[];
+};
+
+export const ExerciseGrid = ({ exercises }: ExerciseGridProps) => {
+
+    const languageQuery = useLanguageQuery();
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [t, i18n] = useTranslation();
+
+    let currentUserLanguage: Language | undefined;
+    if (languageQuery.isSuccess) {
+        currentUserLanguage = getLanguageByShortName(
+            i18n.language,
+            languageQuery.data
+        );
+    }
+
+    return (
+        (<Grid container spacing={1}>
+            {exercises.map(b => (
+                <Grid
+                    key={b.id}
+                    sx={{ display: "flex" }}
+                    size={{
+                        xs: 6,
+                        md: 4
+                    }}>
+                    <OverviewCard exercise={b} language={currentUserLanguage} />
+                </Grid>
+            ))}
+        </Grid>)
+    );
+};

package/src/components/Exercises/Overview/ExerciseGridLoadingSkeleton.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { ExerciseGridSkeleton } from "components/Exercises/Overview/ExerciseGridLoadingSkeleton";
+
+test('Renders without crashing', async () => {
+
+    // Act
+    render(<ExerciseGridSkeleton />);
+
+});

package/src/components/Exercises/Overview/ExerciseGridLoadingSkeleton.tsx

@@ -0,0 +1,26 @@
+import { Box, Card, CardContent, CardMedia, Skeleton, } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import React from "react";
+
+export const ExerciseGridSkeleton = () => {
+
+    return (
+        (<Grid container spacing={1}>
+            {[...Array(21)].map((skeletonBase, idx) => (
+                <Grid key={idx} sx={{ display: "flex" }} size={4}>
+                    <Card>
+                        <CardMedia>
+                            <Skeleton variant="rectangular" width={250} height={150} />
+                        </CardMedia>
+                        <CardContent>
+                            <Box sx={{ pt: 0.5 }}>
+                                <Skeleton width="60%" />
+                                <Skeleton />
+                            </Box>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            ))}
+        </Grid>)
+    );
+};