@wger-project/react-components 25.11.22 → 25.12.5

package/src/components/Dashboard/NutritionCard.tsx

@@ -1,15 +1,11 @@
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import HistoryEduIcon from "@mui/icons-material/HistoryEdu";
 import PhotoIcon from "@mui/icons-material/Photo";
 import {
     Alert,
     Avatar,
     Button,
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
     Collapse,
     IconButton,
     List,
@@ -19,7 +15,7 @@ import {
     ListItemIcon,
     ListItemText,
     Snackbar,
-} from '@mui/material';
+} from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { WgerModal } from "components/Core/Modals/WgerModal";
@@ -31,16 +27,15 @@ import { useAddDiaryEntryQuery, useFetchLastNutritionalPlanQuery } from "compone
 import { NutritionalValuesDashboardChart } from "components/Nutrition/widgets/charts/NutritionalValuesDashboardChart";
 import { NutritionDiaryEntryForm } from "components/Nutrition/widgets/forms/NutritionDiaryEntryForm";
 import { PlanForm } from "components/Nutrition/widgets/forms/PlanForm";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
 import { dateTimeToLocaleHHMM } from "utils/date";
 import { numberGramLocale } from "utils/numbers";
 import { makeLink, WgerLink } from "utils/url";
-
+import { DashboardCard } from "./DashboardCard";
 
 export const NutritionCard = () => {
-
     const [t] = useTranslation();
     const planQuery = useFetchLastNutritionalPlanQuery();
 
@@ -48,13 +43,11 @@ export const NutritionCard = () => {
         return <LoadingPlaceholder />;
     }
 
-    return planQuery.data !== null
-        ? <NutritionCardContent plan={planQuery.data!} />
-        : <EmptyCard
-            title={t('nutritionalPlan')}
-            modalContent={<PlanForm />}
-            modalTitle={t('add')}
-        />;
+    return planQuery.data !== null ? (
+        <NutritionCardContent plan={planQuery.data!} />
+    ) : (
+        <EmptyCard title={t("nutritionalPlan")} modalContent={<PlanForm />} modalTitle={t("add")} />
+    );
 };
 
 function NutritionCardContent(props: { plan: NutritionalPlan }) {
@@ -64,53 +57,50 @@ function NutritionCardContent(props: { plan: NutritionalPlan }) {
     const handleOpenLogModal = () => setOpenLogModal(true);
     const handleCloseLogModal = () => setOpenLogModal(false);
 
-
-    return <>
-        <Card>
-            <CardHeader
-                title={t('nutritionalPlan')}
+    return (
+        <>
+            <DashboardCard
+                title={t("nutritionalPlan")}
                 subheader={props.plan.description}
-            />
-            <CardContent sx={{ height: "500px", overflow: "auto" }}>
+                actions={
+                    <>
+                        <Button
+                            size="small"
+                            href={makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! })}
+                        >
+                            {t("seeDetails")}
+                        </Button>
+                        <Tooltip title={t("nutrition.logThisMealItem")}>
+                            <IconButton onClick={handleOpenLogModal}>
+                                <HistoryEduIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                }
+            >
                 <NutritionalValuesDashboardChart
                     percentage={props.plan.percentageValuesLoggedToday}
                     planned={props.plan.plannedNutritionalValues}
                     logged={props.plan.loggedNutritionalValuesToday}
                 />
                 <List>
-                    {props.plan.meals.map(meal =>
+                    {props.plan.meals.map((meal) => (
                         <MealListItem meal={meal} planId={props.plan.id!} key={meal.id} />
-                    )}
+                    ))}
                 </List>
-            </CardContent>
-            <CardActions sx={{
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-            }}>
-                <Button size="small"
-                        href={makeLink(WgerLink.NUTRITION_DETAIL, i18n.language, { id: props.plan.id! })}>
-                    {t('seeDetails')}
-                </Button>
-                <Tooltip title={t('nutrition.logThisMealItem')}>
-                    <IconButton onClick={handleOpenLogModal}>
-                        <HistoryEduIcon />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-        </Card>
-        <WgerModal title={t('nutrition.addNutritionalDiary')}
-                   isOpen={openLogModal}
-                   closeFn={handleCloseLogModal}>
-            <NutritionDiaryEntryForm
-                closeFn={handleCloseLogModal}
-                planId={props.plan.id!}
-                meals={props.plan.meals}
-            />
-        </WgerModal>
-    </>;
+            </DashboardCard>
+            <WgerModal title={t("nutrition.addNutritionalDiary")} isOpen={openLogModal} closeFn={handleCloseLogModal}>
+                <NutritionDiaryEntryForm
+                    closeFn={handleCloseLogModal}
+                    planId={props.plan.id!}
+                    meals={props.plan.meals}
+                />
+            </WgerModal>
+        </>
+    );
 }
 
-const MealListItem = (props: { meal: Meal, planId: number }) => {
+const MealListItem = (props: { meal: Meal; planId: number }) => {
     const [t, i18n] = useTranslation();
     const addDiaryEntryQuery = useAddDiaryEntryQuery(props.planId);
 
@@ -120,7 +110,7 @@ const MealListItem = (props: { meal: Meal, planId: number }) => {
     const handleToggleExpand = () => setExpandView(!expandView);
 
     const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
-        if (reason === 'clickaway') {
+        if (reason === "clickaway") {
             return;
         }
         setOpenSnackbar(false);
@@ -134,45 +124,47 @@ const MealListItem = (props: { meal: Meal, planId: number }) => {
     const primaryHeader = props.meal.name ? props.meal.name : dateTimeToLocaleHHMM(props.meal.time);
     const secondaryHeader = props.meal.name ? dateTimeToLocaleHHMM(props.meal.time) : null;
 
-    return <>
-        <ListItemButton onClick={handleToggleExpand} selected={expandView}>
-            <ListItemIcon>
-                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </ListItemIcon>
-            <ListItemText primary={primaryHeader} secondary={secondaryHeader} />
-
-        </ListItemButton>
-        <Collapse in={expandView} timeout="auto" unmountOnExit>
-            <List>
-                {props.meal.items.map((item) =>
-                    <ListItem key={item.id} secondaryAction={
-                        <Tooltip title={t('nutrition.logThisMealItem')}>
-                            <IconButton edge="end" onClick={() => handleAddDiaryEntry(item)}>
-                                <HistoryEduIcon />
-                            </IconButton>
-                        </Tooltip>
-                    }>
-                        <ListItemAvatar>
-                            <Avatar
-                                alt={item.ingredient?.name}
-                                src={item.ingredient?.image?.url}
-                                sx={{ width: 45, height: 45 }}
-                            >
-                                <PhotoIcon />
-                            </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText
-                            primary={item.ingredient?.name}
-                            secondary={numberGramLocale(item.amount, i18n.language)}
-                        />
-                    </ListItem>
-                )}
-            </List>
-        </Collapse>
-        <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
-            <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: '100%' }}>
-                {t('nutrition.diaryEntrySaved')}
-            </Alert>
-        </Snackbar>
-    </>;
-};
+    return (
+        <>
+            <ListItemButton onClick={handleToggleExpand} selected={expandView}>
+                <ListItemIcon>{expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}</ListItemIcon>
+                <ListItemText primary={primaryHeader} secondary={secondaryHeader} />
+            </ListItemButton>
+            <Collapse in={expandView} timeout="auto" unmountOnExit>
+                <List>
+                    {props.meal.items.map((item) => (
+                        <ListItem
+                            key={item.id}
+                            secondaryAction={
+                                <Tooltip title={t("nutrition.logThisMealItem")}>
+                                    <IconButton edge="end" onClick={() => handleAddDiaryEntry(item)}>
+                                        <HistoryEduIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            }
+                        >
+                            <ListItemAvatar>
+                                <Avatar
+                                    alt={item.ingredient?.name}
+                                    src={item.ingredient?.image?.url}
+                                    sx={{ width: 45, height: 45 }}
+                                >
+                                    <PhotoIcon />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={item.ingredient?.name}
+                                secondary={numberGramLocale(item.amount, i18n.language)}
+                            />
+                        </ListItem>
+                    ))}
+                </List>
+            </Collapse>
+            <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
+                <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: "100%" }}>
+                    {t("nutrition.diaryEntrySaved")}
+                </Alert>
+            </Snackbar>
+        </>
+    );
+};

package/src/components/Dashboard/RoutineCard.tsx

@@ -1,18 +1,7 @@
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import TodayIcon from "@mui/icons-material/Today";
-import {
-    Button,
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    Collapse,
-    List,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-} from '@mui/material';
+import { Button, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { EmptyCard } from "components/Dashboard/EmptyCard";
 import { getDayName } from "components/WorkoutRoutines/models/Day";
@@ -20,11 +9,11 @@ import { Routine } from "components/WorkoutRoutines/models/Routine";
 import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
 import { useActiveRoutineQuery } from "components/WorkoutRoutines/queries";
 import { SetConfigDataDetails } from "components/WorkoutRoutines/widgets/RoutineDetailsCard";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { isSameDay } from "utils/date";
 import { makeLink, WgerLink } from "utils/url";
-
+import { DashboardCard } from "./DashboardCard";
 
 export const RoutineCard = () => {
     const [t, i18n] = useTranslation();
@@ -34,37 +23,33 @@ export const RoutineCard = () => {
         return <LoadingPlaceholder />;
     }
 
-    return routineQuery.data !== null
-        ? <RoutineCardContent routine={routineQuery.data!} />
-        : <EmptyCard
-            title={t('routines.routine')}
-            link={makeLink(WgerLink.ROUTINE_ADD, i18n.language)}
-        />;
+    return routineQuery.data !== null ? (
+        <RoutineCardContent routine={routineQuery.data!} />
+    ) : (
+        <EmptyCard title={t("routines.routine")} link={makeLink(WgerLink.ROUTINE_ADD, i18n.language)} />
+    );
 };
 
 const RoutineCardContent = (props: { routine: Routine }) => {
     const [t, i18n] = useTranslation();
 
-    return <Card>
-        <CardHeader
-            title={t('routines.routine')}
+    return (
+        <DashboardCard
+            title={t("routines.routine")}
             subheader={props.routine.name ?? "."}
-        />
-        {/* Note: not 500 like the other cards, but a bit more since we don't have an action icon... */}
-        <CardContent sx={{ height: "510px", overflow: "auto" }}>
+            actions={
+                <Button size="small" href={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: props.routine.id! })}>
+                    {t("seeDetails")}
+                </Button>
+            }
+        >
             <List>
-                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) =>
-                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />)}
+                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) => (
+                    <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />
+                ))}
             </List>
-        </CardContent>
-
-        <CardActions>
-            <Button size="small"
-                    href={makeLink(WgerLink.ROUTINE_DETAIL, i18n.language, { id: props.routine.id! })}>
-                {t('seeDetails')}
-            </Button>
-        </CardActions>
-    </Card>;
+        </DashboardCard>
+    );
 };
 
 const DayListItem = (props: { dayData: RoutineDayData }) => {
@@ -72,36 +57,36 @@ const DayListItem = (props: { dayData: RoutineDayData }) => {
 
     const handleToggleExpand = () => setExpandView(!expandView);
 
-    return (<>
-        <ListItemButton
-            onClick={handleToggleExpand}
-            selected={expandView}
-            disabled={props.dayData.day === null || props.dayData.day?.isRest}
-        >
-            <ListItemIcon>
-                {expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </ListItemIcon>
-            <ListItemText
-                primary={getDayName(props.dayData.day)}
-                slotProps={{ secondary: { noWrap: true, style: { overflow: 'hidden', textOverflow: 'ellipsis' } } }}
-                secondary={props.dayData.day?.description}
-            />
-            <ListItemIcon>
-                {isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}
-            </ListItemIcon>
-        </ListItemButton>
+    return (
+        <>
+            <ListItemButton
+                onClick={handleToggleExpand}
+                selected={expandView}
+                disabled={props.dayData.day === null || props.dayData.day?.isRest}
+            >
+                <ListItemIcon>{expandView ? <ExpandLessIcon /> : <ExpandMoreIcon />}</ListItemIcon>
+                <ListItemText
+                    primary={getDayName(props.dayData.day)}
+                    slotProps={{ secondary: { noWrap: true, style: { overflow: "hidden", textOverflow: "ellipsis" } } }}
+                    secondary={props.dayData.day?.description}
+                />
+                <ListItemIcon>{isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}</ListItemIcon>
+            </ListItemButton>
 
-        <Collapse in={expandView} timeout="auto" unmountOnExit>
-            {props.dayData.slots.map((slotData, index) => (<div key={index}>
-                {slotData.setConfigs.map((setConfigData, index) =>
-                    <SetConfigDataDetails
-                        setConfigData={setConfigData}
-                        key={index}
-                        rowHeight={'70px'}
-                        showExercise={true}
-                    />
-                )}
-            </div>))}
-        </Collapse>
-    </>);
-};
+            <Collapse in={expandView} timeout="auto" unmountOnExit>
+                {props.dayData.slots.map((slotData, index) => (
+                    <div key={index}>
+                        {slotData.setConfigs.map((setConfigData, index) => (
+                            <SetConfigDataDetails
+                                setConfigData={setConfigData}
+                                key={index}
+                                rowHeight={"70px"}
+                                showExercise={true}
+                            />
+                        ))}
+                    </div>
+                ))}
+            </Collapse>
+        </>
+    );
+};

package/src/components/Dashboard/WeightCard.tsx

@@ -1,5 +1,5 @@
 import AddIcon from "@mui/icons-material/Add";
-import { Box, Button, Card, CardActions, CardContent, CardHeader, IconButton, } from '@mui/material';
+import { Box, Button, IconButton } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { WeightForm } from "components/BodyWeight/Form/WeightForm";
 import { WeightEntry } from "components/BodyWeight/model";
@@ -9,64 +9,58 @@ import { WeightChart } from "components/BodyWeight/WeightChart";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { WgerModal } from "components/Core/Modals/WgerModal";
 import { EmptyCard } from "components/Dashboard/EmptyCard";
-import React from 'react';
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { makeLink, WgerLink } from "utils/url";
+import { DashboardCard } from "./DashboardCard";
 
 export const WeightCard = () => {
-
     const [t] = useTranslation();
-    const weightyQuery = useBodyWeightQuery('lastYear');
+    const weightyQuery = useBodyWeightQuery("lastYear");
 
     if (weightyQuery.isLoading) {
         return <LoadingPlaceholder />;
     }
 
-    return weightyQuery.data?.length !== undefined && weightyQuery.data?.length > 0
-        ? <WeightCardContent entries={weightyQuery.data} />
-        : <EmptyCard
-            title={t('weight')}
-            modalContent={<WeightForm />}
-        />;
+    return weightyQuery.data?.length !== undefined && weightyQuery.data?.length > 0 ? (
+        <WeightCardContent entries={weightyQuery.data} />
+    ) : (
+        <EmptyCard title={t("weight")} modalContent={<WeightForm />} />
+    );
 };
 export const WeightCardContent = (props: { entries: WeightEntry[] }) => {
-
     const [openModal, setOpenModal] = React.useState(false);
     const handleOpenModal = () => setOpenModal(true);
     const handleCloseModal = () => setOpenModal(false);
     const [t, i18n] = useTranslation();
 
-    return (<>
-        <Card>
-            <CardHeader
-                title={t('weight')}
-                subheader={'.'}
-            />
-            <CardContent sx={{ height: '500px', overflow: 'auto' }}>
+    return (
+        <>
+            <DashboardCard
+                title={t("weight")}
+                subheader={"."}
+                actions={
+                    <>
+                        <Button size="small" href={makeLink(WgerLink.WEIGHT_OVERVIEW, i18n.language)}>
+                            {t("seeDetails")}
+                        </Button>
+                        <Tooltip title={t("addEntry")}>
+                            <IconButton onClick={handleOpenModal}>
+                                <AddIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </>
+                }
+            >
                 <WeightChart weights={props.entries} height={200} />
-                <Box sx={{ mt: 2, }}>
+                <Box sx={{ mt: 2 }}>
                     <WeightTableDashboard weights={props.entries} />
                 </Box>
-            </CardContent>
-            <CardActions sx={{
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-            }}>
-                <Button
-                    size="small"
-                    href={makeLink(WgerLink.WEIGHT_OVERVIEW, i18n.language)}
-                >
-                    {t('seeDetails')}
-                </Button>
-                <Tooltip title={t('addEntry')}>
-                    <IconButton onClick={handleOpenModal}>
-                        <AddIcon />
-                    </IconButton>
-                </Tooltip>
-            </CardActions>
-        </Card>
-        <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
-            <WeightForm closeFn={handleCloseModal} />
-        </WgerModal>
-    </>);
-};
+            </DashboardCard>
+
+            <WgerModal title={t("add")} isOpen={openModal} closeFn={handleCloseModal}>
+                <WeightForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </>
+    );
+};

package/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx

@@ -65,7 +65,7 @@ export function ExerciseDeleteDialog(props: {
             try {
                 const exercise = await getExercise(id);
                 setReplacementExercise(exercise);
-            } catch (e) {
+            } catch {
                 setReplacementExercise(null);
             }
         }

package/src/components/WorkoutRoutines/Detail/WorkoutStats.tsx

@@ -30,7 +30,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { getLanguageByShortName } from "services";
 import { generateChartColors } from "utils/colors";
 import { makeLink, WgerLink } from "utils/url";

package/src/components/WorkoutRoutines/widgets/forms/DayTypeSelect.tsx

@@ -10,8 +10,7 @@ interface DayTypeSelectProps {
 
 export const DayTypeSelect = (props: DayTypeSelectProps) => {
     const { t } = useTranslation();
-    const [field, meta] = useField(props.fieldName);
-
+    const [field] = useField(props.fieldName);
     const options = [
         {
             value: 'custom',

package/src/components/WorkoutRoutines/widgets/forms/SlotForm.tsx

@@ -10,10 +10,6 @@ export const SlotForm = (props: { slot: Slot, routineId: number }) => {
     const editSlotQuery = useEditSlotQuery(props.routineId);
     const [slotComment, setSlotComment] = useState<string>(props.slot.comment);
 
-    const handleChange = (value: string) => {
-        setSlotComment(value);
-    };
-
     const handleBlur = () => {
         editSlotQuery.mutate(Slot.clone(props.slot, { comment: slotComment }));
     };

package/src/index.tsx

@@ -4,9 +4,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
-import { NutritionCard } from "components/Dashboard/NutritionCard";
-import { RoutineCard } from "components/Dashboard/RoutineCard";
-import { WeightCard } from "components/Dashboard/WeightCard";
 import { IngredientSearch } from "components/Nutrition/components/IngredientSearch";
 import React, { Suspense } from 'react';
 import { createRoot } from "react-dom/client";
@@ -123,49 +120,6 @@ renderComponentShadowDom('react-page');
 /*
  * Components used in the wger django app, don't change the IDs here
  */
-const weightDashboard = document.getElementById("react-weight-dashboard");
-if (weightDashboard) {
-    const root = createRoot(weightDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <WeightCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const nutritionDashboard = document.getElementById('react-nutrition-dashboard');
-if (nutritionDashboard) {
-    const root = createRoot(nutritionDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <NutritionCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const routineDashboard = document.getElementById('react-routine-dashboard');
-if (routineDashboard) {
-    const root = createRoot(routineDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <RoutineCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-
 const ingredientSearchBox = document.getElementById("react-ingredient-search");
 if (ingredientSearchBox) {
     const root = createRoot(ingredientSearchBox);