@wger-project/react-components 25.10.16

package/src/components/Core/Modals/DeleteConfirmationModal.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { DeleteConfirmationModal, DeleteConfirmationModalProps } from "components/Core/Modals/DeleteConfirmationModal";
+import userEvent from "@testing-library/user-event";
+
+describe("Test the DeleteConfirmationModal component", () => {
+
+    let props: DeleteConfirmationModalProps;
+
+    beforeEach(() => {
+        props = {
+            title: "Do you want to delete XYZ?",
+            subtitle: "the subtitle",
+            message: "deleting this will also delete this other thing",
+            isOpen: true,
+            closeFn: jest.fn(),
+            deleteFn: jest.fn()
+        };
+    });
+
+    test('Renders title and subtitle when openFn is true', () => {
+
+        // Act
+        render(<DeleteConfirmationModal {...props} />);
+
+        // Assert
+        expect(screen.getByText('Do you want to delete XYZ?')).toBeInTheDocument();
+        expect(screen.getByText('the subtitle')).toBeInTheDocument();
+        expect(screen.getByText('deleting this will also delete this other thing')).toBeInTheDocument();
+    });
+
+    test('Doesnt render anything when isOpen is false', () => {
+
+        // Arrange
+        props.isOpen = false;
+
+        // Act
+        render(<DeleteConfirmationModal {...props} />);
+
+        // Assert
+        expect(screen.queryByText('Do you want to delete XYZ?')).toBeNull();
+        expect(screen.queryByText('the subtitle')).toBeNull();
+        expect(screen.queryByText('deleting this will also delete this other thing')).toBeNull();
+    });
+
+    test('Correctly fires the delete function when the delete button is clicked', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(<DeleteConfirmationModal {...props} />);
+        await user.click(screen.getByText('delete'));
+
+        // Assert
+        expect(props.deleteFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/Core/Modals/DeleteConfirmationModal.tsx

@@ -0,0 +1,74 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Button, Card, CardActions, CardContent, CardHeader, Modal, Typography } from "@mui/material";
+import { FunctionComponent } from 'react';
+import { useTranslation } from "react-i18next";
+
+export interface DeleteConfirmationModalProps {
+    title: string,
+    subtitle?: string,
+    message?: string,
+    isOpen: boolean,
+    closeFn: () => void,
+    deleteFn: () => void
+}
+
+export const DeleteConfirmationModal: FunctionComponent<DeleteConfirmationModalProps> = (
+    {
+        title,
+        subtitle,
+        isOpen,
+        message,
+        deleteFn,
+        closeFn
+    }) => {
+
+    const [t] = useTranslation();
+
+    const style = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        // width: 500,
+        bgcolor: 'background.paper',
+        borderWidth: 0,
+        boxShadow: 24,
+        p: 2,
+    };
+
+    const handleDelete = () => {
+        deleteFn();
+        closeFn();
+    };
+
+    return (
+        <Modal
+            open={isOpen}
+            onClose={closeFn}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+        >
+            <Card sx={style}>
+                <CardHeader
+                    title={title}
+                    titleTypographyProps={{ variant: 'h6' }}
+                    subheader={subtitle}
+                    action={<CloseIcon onClick={closeFn} />}
+                />
+                <CardContent>
+                    <Typography variant="body1">
+                        {message}
+                    </Typography>
+                </CardContent>
+                <CardActions>
+                    <Button color="error" variant="contained" onClick={handleDelete}>
+                        {t('delete')}
+                    </Button>
+                    <Button color="primary" onClick={closeFn}>
+                        {t('close')}
+                    </Button>
+                </CardActions>
+            </Card>
+        </Modal>
+    );
+};

package/src/components/Core/Modals/WgerModal.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { WgerModal, WgerModalProps } from "components/Core/Modals/WgerModal";
+
+describe("Test WgerModal component", () => {
+    test('Renders title and subtitle when openFn is true', () => {
+
+        // Arrange
+        const props: WgerModalProps = {
+            title: "Test title",
+            subtitle: "Test subtitle",
+            closeFn: jest.fn(),
+            isOpen: true,
+            children: null
+        };
+
+        // Act
+        render(<WgerModal {...props} ><p>This is some content</p></WgerModal>);
+
+        // Assert
+        expect(screen.getByText('This is some content')).toBeInTheDocument();
+        expect(screen.getByText('Test title')).toBeInTheDocument();
+        expect(screen.getByText('Test subtitle')).toBeInTheDocument();
+    });
+
+    test('Doesnt render anything when isOpen is false', () => {
+
+        // Arrange
+        const props: WgerModalProps = {
+            title: "Test title",
+            subtitle: "Test subtitle",
+            closeFn: jest.fn(),
+            isOpen: false,
+            children: null
+        };
+
+        // Act
+        render(<WgerModal {...props} ><p>This is some content</p></WgerModal>);
+
+        // Assert
+        expect(screen.queryByText('This is some content')).toBeNull();
+        expect(screen.queryByText('Test title')).toBeNull();
+        expect(screen.queryByText('Test subtitle')).toBeNull();
+    });
+});

package/src/components/Core/Modals/WgerModal.tsx

@@ -0,0 +1,46 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Card, CardActions, CardContent, CardHeader, Modal } from "@mui/material";
+import React, { FunctionComponent } from 'react';
+
+export interface WgerModalProps {
+    title: string,
+    subtitle?: string,
+    isOpen: boolean,
+    closeFn: () => void,
+    children: React.ReactNode
+}
+
+export const WgerModal: FunctionComponent<WgerModalProps> = ({ title, subtitle, isOpen, closeFn, children }) => {
+
+    const style = {
+        position: 'absolute' as const,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        p: 2,
+        minWidth: '400px'
+    };
+
+    return (
+        <Modal
+            open={isOpen}
+            onClose={closeFn}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+        >
+            <Card sx={style}>
+                <CardHeader
+                    title={title}
+                    subheader={subtitle}
+                    action={<CloseIcon onClick={closeFn} />}
+                />
+                <CardContent>
+                    {children}
+                </CardContent>
+                <CardActions>
+                </CardActions>
+            </Card>
+        </Modal>
+
+    );
+};

package/src/components/Core/Notifications/index.tsx

@@ -0,0 +1,57 @@
+import { Alert, AlertTitle, Button } from '@mui/material';
+import React from 'react';
+import { setNotification, useWeightStateValue } from 'state';
+import styles from './notifications.module.css';
+
+export const Notifications = () => {
+    const [state, dispatch] = useWeightStateValue();
+
+    const closeNotification = () => {
+        dispatch(setNotification({ notify: false, message: "", severity: undefined, title: "", type: undefined }));
+    };
+
+    const undoDelete = () => {
+        dispatch(setNotification({
+            notify: false,
+            message: "",
+            severity: undefined,
+            title: "",
+            type: undefined,
+            undo: true
+        }));
+    };
+
+    if (!state.notification.notify) {
+        return null;
+    }
+
+    if (state.notification.type === "delete") {
+        return (
+            <Alert
+                className={styles.notification}
+                severity={state.notification.severity}
+                action={
+                    <Button color="inherit" size="small" onClick={undoDelete}>
+                        UNDO
+                    </Button>
+                }
+                variant="filled"
+            >
+                <AlertTitle>{state.notification.title}</AlertTitle>
+                <strong>{state.notification.message}</strong>
+            </Alert>
+        );
+    }
+
+    return (
+        <Alert
+            className={styles.notification}
+            severity={state.notification.severity}
+            onClose={() => closeNotification()}
+            variant="filled"
+        >
+            <AlertTitle>{state.notification.title}</AlertTitle>
+            <strong>{state.notification.message}</strong>
+        </Alert>
+    );
+};

package/src/components/Core/Notifications/notifications.module.css

@@ -0,0 +1,8 @@
+.notification {
+  position: fixed;
+  top: 5%;
+  right: 5%;
+  width: 20%;
+}
+
+/*# sourceMappingURL=notifications.module.css.map */

package/src/components/Core/Notifications/notifications.module.css.map

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

package/src/components/Core/Notifications/notifications.module.scss

@@ -0,0 +1,6 @@
+.notification {
+    position: fixed;
+    top: 5%;
+    right: 5%;
+    width: 20%;
+}

package/src/components/Core/Tooltips/LightToolTip.tsx

@@ -0,0 +1,14 @@
+import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import React from "react";
+
+export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: 'rgb(245, 245, 245)',
+        color: 'rgba(0, 0, 0, 0.87)',
+        boxShadow: theme.shadows[1],
+        fontSize: 11,
+    },
+}));

package/src/components/Core/Widgets/Container.tsx

@@ -0,0 +1,98 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { Breakpoint, Button, Container, Stack, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import React, { ReactElement, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+type WgerTemplateContainerRightSidebarProps = {
+    title?: string | ReactElement;
+    subTitle?: string | ReactElement;
+    mainContent: ReactElement | null;
+    sideBar?: ReactElement;
+    optionsMenu?: ReactElement;
+    backToTitle?: string;
+    backToUrl?: string;
+    fab?: ReactElement;
+};
+
+function BackButton(props: { href: string | undefined, backToTitle: string | undefined }) {
+    const { t } = useTranslation();
+
+    return <Button
+        size="small"
+        component="a"
+        href={props.href}>
+        <ChevronLeftIcon fontSize="inherit" />
+        {props.backToTitle ?? t('goBack')}
+    </Button>;
+}
+
+export const WgerContainerRightSidebar = (props: WgerTemplateContainerRightSidebarProps) => {
+    const backTo = <BackButton href={props.backToUrl} backToTitle={props.backToTitle} />;
+
+    return (
+        <Container maxWidth="lg">
+            <Grid container spacing={2}>
+                <Grid sx={{ mb: 2 }} size={8}>
+                    <Stack direction="row" justifyContent="space-between" alignItems="center">
+                        <Stack alignItems="start">
+                            <Typography variant="h3">
+                                {props.title}
+                            </Typography>
+                            {props.subTitle && <Typography variant="h6">
+                                {props.subTitle}
+                            </Typography>}
+                            {props.backToUrl && backTo}
+                        </Stack>
+                        {props.optionsMenu}
+                    </Stack>
+                </Grid>
+
+                <Grid size={{ xs: 12, sm: 8 }}>
+                    {props.mainContent}
+                </Grid>
+                <Grid size={{ xs: 12, sm: 4 }}>
+                    {props.sideBar}
+                </Grid>
+            </Grid>
+            {props.fab}
+        </Container>
+    );
+};
+
+type WgerTemplateContainerFullWidthProps = {
+    title?: string;
+    children: ReactNode;
+    backToTitle?: string;
+    backToUrl?: string;
+    optionsMenu?: ReactElement;
+    maxWidth?: false | Breakpoint | undefined
+};
+
+export const WgerContainerFullWidth = (props: WgerTemplateContainerFullWidthProps) => {
+    const backTo = <BackButton href={props.backToUrl} backToTitle={props.backToTitle} />;
+
+    return (
+        <Container maxWidth={props.maxWidth}>
+            <Grid container spacing={2}>
+                <Grid sx={{ mb: 2 }} size={12}>
+                    <Stack direction="row" justifyContent="space-between" alignItems="center">
+
+                        <Stack alignItems="start">
+                            <Typography variant="h3">
+                                {props.title}
+                            </Typography>
+                            {props.backToUrl && backTo}
+                        </Stack>
+
+                        {props.optionsMenu}
+                    </Stack>
+                </Grid>
+
+                <Grid size={12}>
+                    {props.children}
+                </Grid>
+            </Grid>
+        </Container>
+    );
+};

package/src/components/Core/Widgets/FormError.tsx

@@ -0,0 +1,64 @@
+import { Alert, AlertTitle, Box, Collapse, Snackbar } from "@mui/material";
+import { useState } from 'react';
+import { SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
+import { collectValidationErrors } from "utils/forms";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FormQueryErrors = (props: { mutationQuery: any }) => {
+    const [openAlert, setOpenAlert] = useState(true);
+
+    // const handleCloseAlert = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    //     if (reason === 'clickaway') {
+    //         return;
+    //     }
+    //     setOpenAlert(false);
+    // };
+
+    if (!props.mutationQuery?.isError) {
+        return null;
+    }
+
+    return <>
+        <Box sx={{ width: '100%' }}>
+            <Collapse in={openAlert}>
+                <Alert severity="error" sx={{ mb: 1 }} /*onClose={handleCloseAlert}*/>
+                    <AlertTitle>{props.mutationQuery.error?.message}</AlertTitle>
+                    <ul>
+                        {collectValidationErrors(props.mutationQuery.error.response?.data).map((error, index) =>
+                            <li key={index}>{error}</li>
+                        )}
+                    </ul>
+                </Alert>
+            </Collapse>
+        </Box>
+    </>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FormQueryErrorsSnackbar = (props: { mutationQuery: any }) => {
+    const [openSnackbar, setOpenSnackbar] = useState(true);
+
+    if (!props.mutationQuery?.isError) {
+        return null;
+    }
+
+    const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setOpenSnackbar(false);
+    };
+
+    return <>
+        <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} /* onClose={handleCloseSnackbar}*/>
+            <Alert /* onClose={handleCloseSnackbar} */ severity="error" sx={{ width: '100%' }}>
+                <AlertTitle>{props.mutationQuery.error?.message}</AlertTitle>
+                <ul>
+                    {collectValidationErrors(props.mutationQuery.error.response?.data).map((error, index) =>
+                        <li key={index}>{error}</li>
+                    )}
+                </ul>
+            </Alert>
+        </Snackbar>
+    </>;
+};

package/src/components/Core/Widgets/OverviewEmpty.tsx

@@ -0,0 +1,26 @@
+import { Box, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+export const OverviewEmpty = (props: { height?: string }) => {
+    const [t] = useTranslation();
+
+    const height = props.height ? props.height : "50vh";
+
+    return <>
+        <Box sx={{
+            height: height,
+            display: "flex",
+
+            alignItems: "center",
+            flexDirection: "column",
+            justifyContent: "center",
+        }}>
+            <Typography variant="h6" mr={3}>
+                {t('nothingHereYet')}
+            </Typography>
+            <Typography mr={3}>
+                {t('nothingHereYetAction')}
+            </Typography>
+        </Box>
+    </>;
+};

package/src/components/Core/Widgets/RenderLoadingQuery.tsx

@@ -0,0 +1,28 @@
+import { Alert, Box, Stack } from "@mui/material";
+
+import { UseQueryResult } from "@tanstack/react-query";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import React, { JSX } from "react";
+
+
+export const RenderLoadingQuery = (props: { query: UseQueryResult, child: JSX.Element | boolean }) => {
+
+    if (props.query.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (props.query.isError) {
+        return <Box
+            sx={{ height: 200, alignItems: "center", mt: 2 }}
+            component={Stack}
+            direction="column"
+            justifyContent="center">
+            {/*// @ts-ignore */}
+            <Alert severity="error">Error while fetching data: {props.query.error!.message}</Alert>
+        </Box>;
+    }
+
+    if (props.query.isSuccess) {
+        return props.child;
+    }
+};

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

@@ -0,0 +1,2 @@
+export { useLanguageCheckQuery } from "./languageCheck" ;
+

package/src/components/Core/queries/languageCheck.ts

@@ -0,0 +1,31 @@
+import { useMutation } from "@tanstack/react-query";
+import axios, { AxiosError } from "axios";
+import { checkLanguage } from "services";
+import { LanguageCheckInput } from "services/languageCheck";
+
+
+/*
+ * Custom hook to check if an input string is in a particular language.
+ * Either languageId or languageCode must be provided in the input.
+ */
+export function useLanguageCheckQuery() {
+    return useMutation({
+        mutationFn: async (data: LanguageCheckInput) => {
+            try {
+                const result = await checkLanguage(data);
+                return { success: true, data: result };
+            } catch (error) {
+                if (axios.isAxiosError(error)) {
+                    const axiosError = error as AxiosError;
+                    // Bei 400 Fehler, geben wir die Fehlerdaten zurück anstatt den Fehler zu werfen
+                    if (axiosError.response?.status === 400) {
+                        return axiosError.response.data;
+                    }
+                }
+                // Bei anderen Fehlern werfen wir den Fehler erneut
+                throw error;
+            }
+        },
+    });
+}
+

package/src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,22 @@
+import Grid from '@mui/material/Grid';
+import { NutritionCard } from "components/Dashboard/NutritionCard";
+import { RoutineCard } from "components/Dashboard/RoutineCard";
+import { WeightCard } from "components/Dashboard/WeightCard";
+import React from 'react';
+
+export const Dashboard = () => {
+
+    return (
+        <Grid container spacing={2}>
+            <Grid size={{ xs: 12, sm: 4 }}>
+                <RoutineCard />
+            </Grid>
+            <Grid size={{ xs: 12, sm: 4 }}>
+                <NutritionCard />
+            </Grid>
+            <Grid size={{ xs: 12, sm: 4 }}>
+                <WeightCard />
+            </Grid>
+        </Grid>
+    );
+};

package/src/components/Dashboard/EmptyCard.tsx

@@ -0,0 +1,56 @@
+import { Button, Card, CardActions, CardContent, CardHeader } from "@mui/material";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
+import React, { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+
+export const EmptyCard = (props: {
+    title: string,
+    link?: string,
+    modalTitle?: string,
+    modalContent?: ReactElement
+}) => {
+
+    const [t] = useTranslation();
+
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+
+    const button = props.link !== undefined
+        ? <Button size="small"
+                  variant="contained"
+                  href={props.link}>
+            {t('add')}
+        </Button>
+        : <Button
+            size="small"
+            variant="contained"
+            onClick={handleOpenModal}>
+            {t('add')}
+        </Button>;
+
+    return (<>
+        <Card>
+            <CardHeader
+                title={props.title}
+                subheader={'.'}
+                sx={{ paddingBottom: 0 }} />
+
+            <CardContent sx={{ paddingTop: 0, height: "500px", }}>
+                <OverviewEmpty />
+            </CardContent>
+
+            <CardActions>
+                {button}
+            </CardActions>
+        </Card>
+        <WgerModal
+            title={t('add')}
+            isOpen={openModal}
+            closeFn={handleCloseModal}>
+            {props.modalContent!}
+        </WgerModal>
+    </>);
+};