@wger-project/react-components 25.10.16 → 25.11.17

package/src/components/Nutrition/widgets/charts/NutritionDiaryChart.tsx

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { generateChartColors } from "utils/colors";
 import { numberLocale } from "utils/numbers";
 
@@ -50,46 +50,47 @@ export const NutritionDiaryChart = ({ showPlanned, planned, today, avg7Days }: N
     ];
 
     return (
-        <ResponsiveContainer width={"100%"} height={300}>
-            <BarChart
-                data={data}
-                margin={{
-                    top: 20,
-                    right: 30,
-                    left: 20,
-                    bottom: 5,
-                }}
-            >
-                <CartesianGrid strokeDasharray="3 4" />
-                <XAxis dataKey="name" />
-                <YAxis
-                    type="number"
-                    orientation="left"
-                    unit={t('nutrition.gramShort')}
-                />
-                <Tooltip formatter={(value: number) => numberLocale(value, i18n.language)} />
-                <Legend />
-                {showPlanned &&
-                    <Bar
-                        dataKey="planned"
-                        unit={t('nutrition.gramShort')}
-                        name={t('nutrition.planned')}
-                        fill={colorGenerator.next().value!}
-                    />
-                }
-                <Bar
-                    dataKey="today"
-                    unit={t('nutrition.gramShort')}
-                    name={t('nutrition.today')}
-                    fill={colorGenerator.next().value!}
-                />
+        <BarChart
+            data={data}
+            margin={{
+                top: 20,
+                right: 30,
+                left: 20,
+                bottom: 5,
+            }}
+            responsive
+            width={"100%"}
+            height={300}
+        >
+            <CartesianGrid strokeDasharray="3 4" />
+            <XAxis dataKey="name" />
+            <YAxis
+                type="number"
+                orientation="left"
+                unit={t('nutrition.gramShort')}
+            />
+            <Tooltip formatter={(value: number) => numberLocale(value, i18n.language)} />
+            <Legend />
+            {showPlanned &&
                 <Bar
-                    dataKey="avg7Days"
+                    dataKey="planned"
                     unit={t('nutrition.gramShort')}
-                    name={t('nutrition.7dayAvg')}
+                    name={t('nutrition.planned')}
                     fill={colorGenerator.next().value!}
                 />
-            </BarChart>
-        </ResponsiveContainer>
+            }
+            <Bar
+                dataKey="today"
+                unit={t('nutrition.gramShort')}
+                name={t('nutrition.today')}
+                fill={colorGenerator.next().value!}
+            />
+            <Bar
+                dataKey="avg7Days"
+                unit={t('nutrition.gramShort')}
+                name={t('nutrition.7dayAvg')}
+                fill={colorGenerator.next().value!}
+            />
+        </BarChart>
     );
 };

package/src/components/Nutrition/widgets/charts/NutritionalValuesDashboardChart.tsx

@@ -3,7 +3,7 @@ import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValue
 import { LinearPlannedLoggedChart } from "components/Nutrition/widgets/charts/LinearPlannedLoggedChart";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Cell, Pie, PieChart } from 'recharts';
 import { numberLocale } from "utils/numbers";
 
 
@@ -32,34 +32,32 @@ export const NutritionalValuesDashboardChart = (props: {
 
 
     return <Stack direction={'row'}>
-        <ResponsiveContainer width={'50%'} height={140}>
-            <PieChart>
-                <Pie
-                    // cx={0}
-                    // cy={'10'}
-                    height={100}
-                    data={data}
-                    startAngle={200}
-                    endAngle={-20}
-                    innerRadius={60}
-                    outerRadius={70}
-                    paddingAngle={2}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-                <g>
-                    <text x={'50%'} y={'45%'} fontSize="1.25em" textAnchor="middle">{/*fill="#333"*/}
-                        {t('nutrition.valueEnergyKcal', { value: numberLocale(energyDiff, i18n.language) })}
-                    </text>
-                    <text x={'50%'} y={'60%'} fontSize="1em" textAnchor="middle">
-                        {props.planned.energy > 0 && t(energyPercentage < 100 ? 'nutrition.valueRemaining' : 'nutrition.valueTooMany')}
-                    </text>
-                </g>
-            </PieChart>
-        </ResponsiveContainer>
+        <PieChart responsive width={'50%'} height={140}>
+            <Pie
+                // cx={0}
+                // cy={'10'}
+                height={100}
+                data={data}
+                startAngle={200}
+                endAngle={-20}
+                innerRadius={60}
+                outerRadius={70}
+                paddingAngle={2}
+                dataKey="value"
+            >
+                {data.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+            </Pie>
+            <g>
+                <text x={'50%'} y={'45%'} fontSize="1.25em" textAnchor="middle">{/*fill="#333"*/}
+                    {t('nutrition.valueEnergyKcal', { value: numberLocale(energyDiff, i18n.language) })}
+                </text>
+                <text x={'50%'} y={'60%'} fontSize="1em" textAnchor="middle">
+                    {props.planned.energy > 0 && t(energyPercentage < 100 ? 'nutrition.valueRemaining' : 'nutrition.valueTooMany')}
+                </text>
+            </g>
+        </PieChart>
         <Stack width={'50%'} spacing={1}>
             <LinearPlannedLoggedChart
                 title={t('nutrition.protein')}

package/src/components/Nutrition/widgets/charts/NutritionalValuesPlannedLoggedChart.tsx

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 import { generateChartColors } from "utils/colors";
 
 
@@ -32,23 +32,24 @@ export const NutritionalValuesPlannedLoggedChart = (props: {
 
 
     return (
-        <ResponsiveContainer width={"100%"} height={150}>
-            <BarChart
-                data={data}
-                layout="vertical"
-                margin={{
-                    left: 60,
-                }}
-            >
-                <CartesianGrid strokeDasharray="3 4" />
-                <XAxis type={'number'} unit={'%'} />
-                <YAxis type={'category'} dataKey={'name'} />
-                <Bar
-                    dataKey="value"
-                    unit={'%'}
-                    fill={colorGenerator.next().value!}
-                />
-            </BarChart>
-        </ResponsiveContainer>
+        <BarChart
+            data={data}
+            layout="vertical"
+            margin={{
+                left: 60,
+            }}
+            responsive
+            width={"100%"}
+            height={150}
+        >
+            <CartesianGrid strokeDasharray="3 4" />
+            <XAxis type={'number'} unit={'%'} />
+            <YAxis type={'category'} dataKey={'name'} />
+            <Bar
+                dataKey="value"
+                unit={'%'}
+                fill={colorGenerator.next().value!}
+            />
+        </BarChart>
     );
 };

package/src/components/Nutrition/widgets/forms/NutritionDiaryEntryForm.tsx

@@ -39,6 +39,8 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
             .min(1, t('forms.minValue', { value: '1' })),
         ingredient: yup
             .number()
+            .nullable()
+            .moreThan(0, t('forms.fieldRequired'))
             .required(t('forms.fieldRequired')),
         datetime: yup
             .date()
@@ -51,7 +53,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
             initialValues={{
                 datetime: new Date(),
                 amount: 0,
-                ingredient: 0,
+                ingredient: null,
             }}
             validationSchema={validationSchema}
             onSubmit={async (values) => {
@@ -66,7 +68,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                         planId: planId,
                         amount: newAmount,
                         datetime: values.datetime,
-                        ingredientId: values.ingredient
+                        ingredientId: values.ingredient!
                     });
                     editDiaryQuery.mutate(newDiaryEntry);
                 } else {
@@ -75,7 +77,7 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                         planId: planId,
                         amount: newAmount,
                         datetime: values.datetime,
-                        ingredientId: values.ingredient,
+                        ingredientId: values.ingredient!,
                         mealId: selectedMeal,
                     }));
                 }
@@ -90,7 +92,16 @@ export const NutritionDiaryEntryForm = ({ planId, entry, mealId, meals, closeFn
                 <Form>
                     <Stack spacing={2}>
                         <IngredientAutocompleter
-                            callback={(value: Ingredient | null) => formik.setFieldValue('ingredient', value?.id)} />
+                            callback={(value: Ingredient | null) => {
+                                formik.setFieldTouched('ingredient', true);
+                                formik.setFieldValue('ingredient', value?.id ?? null);
+                            }}
+                            />
+                            {formik.touched.ingredient && formik.errors.ingredient && (
+                            <div style={{ color: 'crimson', fontSize: '0.7rem', marginLeft: '12px' }}>
+                                {formik.errors.ingredient}
+                            </div>
+                            )}
                         <TextField
                             fullWidth
                             id="amount"

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

@@ -212,7 +212,7 @@ export const RoutineTable = (props: {
                 borderBottomWidth: showLogs ? 0 : null
             }}>{slotEntry.exercise?.getTranslation(language).name}</TableCell>
             {iterations.map((iteration) => {
-                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+                const setConfig = props.routine.getSetConfigData(day.id!, iteration, slotEntry.id!);
 
                 return <React.Fragment key={iteration}>
                     <TableCell align={'center'} sx={sx}>
@@ -268,7 +268,7 @@ export const RoutineTable = (props: {
                 <small>{t('nutrition.logged')}</small>
             </TableCell>
             {iterations.map((iteration) => {
-                const setConfig = props.routine.getSetConfigData(day.id, iteration, slotEntry.id);
+                const setConfig = props.routine.getSetConfigData(day.id!, iteration, slotEntry.id!);
                 const iterationLogs = groupedLogs[iteration] ?? [];
 
                 const logs = iterationLogs.filter((log) => log.slotEntryId === slotEntry.id);
@@ -330,7 +330,7 @@ export const RoutineTable = (props: {
                             sx={{ backgroundColor: theme.palette.action.hover }}
                             className={classes.stickyColumn}
                         >
-                            <b>{day.getDisplayName()}</b>
+                            <b>{day.displayName}</b>
                         </TableCell>
                         <TableCell sx={{ backgroundColor: theme.palette.action.hover }} colSpan={5 * iterations.length}>
                         </TableCell>

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

@@ -209,25 +209,23 @@ export const WorkoutStats = () => {
 
                 <Grid size={12}>
                     <Box width="100%" height={400}>
-                        <ResponsiveContainer width="100%" height="100%">
-                            <LineChart width={500} height={300}>
-                                <CartesianGrid strokeDasharray="3 3" />
-                                <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
-                                <YAxis dataKey="value" />
-                                <Tooltip
-                                    formatter={(value: number) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)} />
-                                <Legend
-                                    layout={"vertical"}
-                                    verticalAlign="middle"
-                                    align="right"
-                                    wrapperStyle={{ paddingLeft: "20px" }}
-                                />
-                                {chartData.map((s) => (
-                                    <Line dataKey="value" data={s.data} name={s.name} key={s.name}
-                                          stroke={colorGenerator.next()!.value!} />
-                                ))}
-                            </LineChart>
-                        </ResponsiveContainer>
+                        <LineChart width="100%" height="100%" responsive>
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
+                            <YAxis dataKey="value" />
+                            <Tooltip
+                                formatter={(value: number) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)} />
+                            <Legend
+                                layout={"vertical"}
+                                verticalAlign="middle"
+                                align="right"
+                                wrapperStyle={{ paddingLeft: "20px" }}
+                            />
+                            {chartData.map((s) => (
+                                <Line dataKey="value" data={s.data} name={s.name} key={s.name}
+                                      stroke={colorGenerator.next()!.value!} />
+                            ))}
+                        </LineChart>
                     </Box>
                 </Grid>
 

package/src/components/WorkoutRoutines/models/Day.ts

@@ -4,6 +4,8 @@ import { Slot } from "components/WorkoutRoutines/models/Slot";
 import i18n from 'i18next';
 import { Adapter } from "utils/Adapter";
 
+export type DayType = 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+
 interface DayConstructorParams {
     id?: number;
     routineId: number | null;
@@ -12,7 +14,7 @@ interface DayConstructorParams {
     description?: string;
     isRest?: boolean;
     needLogsToAdvance?: boolean;
-    type?: 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+    type?: DayType;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     config?: any | null;
     slots?: Slot[];
@@ -30,7 +32,7 @@ export class Day {
     description: string;
     isRest: boolean;
     needLogsToAdvance: boolean;
-    type: 'custom' | 'enom' | 'amrap' | 'hiit' | 'tabata' | 'edt' | 'rft' | 'afap';
+    type: DayType;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     config: any | null;
 
@@ -53,6 +55,14 @@ export class Day {
         return this.type !== 'custom';
     }
 
+    public get displayNameWithType(): string {
+        return this.isSpecialType ? `${this.type.toUpperCase()} - ${this.displayName}` : this.displayName;
+    }
+
+    public get displayName(): string {
+        return this.isRest ? i18n.t('routines.restDay') : this.name;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     static fromJson(json: any): Day {
         return adapter.fromJson(json);
@@ -73,9 +83,6 @@ export class Day {
         });
     }
 
-    public getDisplayName(): string {
-        return this.isRest ? i18n.t('routines.restDay') : this.name;
-    }
 
     toJson() {
         return adapter.toJson(this);
@@ -83,7 +90,10 @@ export class Day {
 
 }
 
-export const getDayName = (day: Day | null): string => day === null || day.isRest ? i18n.t('routines.restDay') : day.getDisplayName();
+/*
+ * Returns the display name of the day, or "Rest day" if it's a rest day or null
+ */
+export const getDayName = (day: Day | null): string => day === null || day.isRest ? i18n.t('routines.restDay') : day.displayNameWithType;
 
 
 class DayAdapter implements Adapter<Day> {

package/src/components/WorkoutRoutines/models/SlotEntry.ts

@@ -133,11 +133,16 @@ export class SlotEntry {
             order: overrides?.order ?? other.order,
             comment: overrides?.comment ?? other.comment,
 
-            repetitionUnit: overrides?.repetitionUnit ?? (other.repetitionUnit ?? undefined),
+            // NOTE: temporarily commented out to avoid issues. The constructor will see the
+            // unit objects and set the ids accordingly, ignoring the explicit IDs. This is
+            // probably OK since we always load the whole routine again after an edit, but
+            // it is a bit ugly.
+
+            // repetitionUnit: overrides?.repetitionUnit ?? (other.repetitionUnit ?? undefined),
             repetitionUnitId: overrides?.repetitionUnitId ?? other.repetitionUnitId,
             repetitionRounding: overrides?.repetitionRounding ?? other.repetitionRounding,
 
-            weightUnit: overrides?.weightUnit ?? (other.weightUnit ?? undefined),
+            // weightUnit: overrides?.weightUnit ?? (other.weightUnit ?? undefined),
             weightUnitId: overrides?.weightUnitId ?? other.weightUnitId,
             weightRounding: overrides?.weightRounding ?? other.weightRounding,
         });

package/src/components/WorkoutRoutines/widgets/DayDetails.tsx

@@ -24,6 +24,7 @@ import {
 import Grid from '@mui/material/Grid';
 import { LoadingPlaceholder, LoadingProgressIcon } from "components/Core/LoadingWidget/LoadingWidget";
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Exercise } from "components/Exercises/models/exercise";
 import { useProfileQuery } from "components/User/queries/profile";
 import { Day } from "components/WorkoutRoutines/models/Day";
 import { Slot } from "components/WorkoutRoutines/models/Slot";
@@ -43,7 +44,6 @@ import { SlotDetails } from "components/WorkoutRoutines/widgets/SlotDetails";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { ExerciseSearchResponse } from "services/responseType";
 import { SNACKBAR_AUTO_HIDE_DURATION, WEIGHT_UNIT_KG, WEIGHT_UNIT_LB } from "utils/consts";
 import { makeLink, WgerLink } from "utils/url";
 
@@ -135,7 +135,7 @@ export const DayDragAndDropGrid = (props: {
                                                         provided.draggableProps.style ?? {}
                                                     )}
 
-                                                    label={day.getDisplayName()}
+                                                    label={day.displayName}
                                                     value={day.id}
                                                     icon={<DragIndicatorIcon />}
                                                     iconPosition="start"
@@ -381,13 +381,13 @@ export const DayDetails = (props: {
                                             && <Grid size={12}>
                                                 <Box height={20} />
                                                 <NameAutocompleter
-                                                    callback={(exercise: ExerciseSearchResponse | null) => {
+                                                    callback={(exercise: Exercise | null) => {
                                                         if (exercise === null) {
                                                             return;
                                                         }
                                                         addSlotEntryQuery.mutate(new SlotEntry({
                                                             slotId: slot.id!,
-                                                            exerciseId: exercise.data.base_id,
+                                                            exerciseId: exercise.id!,
                                                             type: 'normal',
                                                             order: slot.entries.length + 1,
                                                             weightUnitId: userProfileQuery.data!.useMetric ? WEIGHT_UNIT_KG : WEIGHT_UNIT_LB,

package/src/components/WorkoutRoutines/widgets/LogWidgets.tsx

@@ -27,7 +27,6 @@ import { useTranslation } from "react-i18next";
 import {
     CartesianGrid,
     Legend,
-    ResponsiveContainer,
     Scatter,
     ScatterChart,
     Tooltip,
@@ -292,43 +291,41 @@ export const TimeSeriesChart = (props: { data: WorkoutLog[] }) => {
 
     return (
         <Box>
-            <ResponsiveContainer width={"100%"} height={250}>
-                <ScatterChart>
-                    <XAxis
-                        dataKey="time"
-                        domain={["auto", "auto"]}
-                        name="Time"
-                        tickFormatter={unixTime => luxonDateTimeToLocale(DateTime.fromMillis(unixTime))}
-                        type="number"
-                    />
-                    <YAxis
-                        domain={["auto", "auto"]}
-                        dataKey="value"
-                        name="Value"
-                        unit="kg"
-                    />
-
-                    {Array.from(result).map(([key, value]) => {
-                            const color = colorGenerator.next().value!;
-                            const formattedData = formatData(value);
-
-                            return <Scatter
-                                key={key}
-                                data={formattedData}
-                                fill={color}
-                                line={{ stroke: color }}
-                                lineType="joint"
-                                lineJointType="monotoneX"
-                                name={key?.toString()}
-                            />;
-                        }
-                    )}
-
-                    <Tooltip content={<ExerciseLogTooltip />} />
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <Legend />
-                </ScatterChart>
-            </ResponsiveContainer>
+            <ScatterChart responsive width={"100%"} height={250}>
+                <XAxis
+                    dataKey="time"
+                    domain={["auto", "auto"]}
+                    name="Time"
+                    tickFormatter={unixTime => luxonDateTimeToLocale(DateTime.fromMillis(unixTime))}
+                    type="number"
+                />
+                <YAxis
+                    domain={["auto", "auto"]}
+                    dataKey="value"
+                    name="Value"
+                    unit="kg"
+                />
+
+                {Array.from(result).map(([key, value]) => {
+                        const color = colorGenerator.next().value!;
+                        const formattedData = formatData(value);
+
+                        return <Scatter
+                            key={key}
+                            data={formattedData}
+                            fill={color}
+                            line={{ stroke: color }}
+                            lineType="joint"
+                            lineJointType="monotoneX"
+                            name={key?.toString()}
+                        />;
+                    }
+                )}
+
+                <Tooltip content={<ExerciseLogTooltip />} />
+                <CartesianGrid strokeDasharray="3 3" />
+                <Legend />
+            </ScatterChart>
         </Box>
     );
 };

package/src/components/WorkoutRoutines/widgets/RoutineDetailsCard.tsx

@@ -111,10 +111,7 @@ export function SetConfigDataDetails(props: {
 }
 
 
-function SlotDataList(props: {
-    slotData: SlotData,
-    index: number,
-}) {
+function SlotDataList(props: { slotData: SlotData }) {
     return (
         <Grid
             container
@@ -163,6 +160,9 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
     const theme = useTheme();
     const [t, i18n] = useTranslation();
 
+    const isToday = isSameDay(props.dayData.date, new Date());
+    const subheader = <Typography sx={{ whiteSpace: 'pre-line' }}>{props.dayData.day?.description}</Typography>;
+
     return (
         <Card sx={{ minWidth: 275 }}>
             <CardHeader
@@ -178,19 +178,16 @@ export const DayDetailsCard = (props: { dayData: RoutineDayData, routineId: numb
                             <Addchart />
                         </IconButton>
                     </Tooltip>}
-                title={getDayName(props.dayData.day)}
-                avatar={isSameDay(props.dayData.date, new Date()) ? <TodayIcon /> : undefined}
-                subheader={<Typography sx={{ whiteSpace: 'pre-line' }}>{props.dayData.day?.description}</Typography>}
+                title={<Typography variant={"h5"}>{getDayName(props.dayData.day)}</Typography>}
+                avatar={isToday ? <TodayIcon /> : null}
+                subheader={subheader}
             />
             {props.dayData.slots.length > 0 && <CardContent sx={{ padding: 0, marginBottom: 0 }}>
                 <Stack>
                     {props.dayData.slots.map((slotData, index) => (
                         <div key={index}>
                             <Box padding={1}>
-                                <SlotDataList
-                                    slotData={slotData}
-                                    index={index}
-                                />
+                                <SlotDataList slotData={slotData} />
                             </Box>
                             <Divider />
                         </div>

package/src/components/WorkoutRoutines/widgets/SlotDetails.tsx

@@ -4,6 +4,7 @@ import EditOffIcon from '@mui/icons-material/EditOff';
 import { Alert, AlertTitle, IconButton, Typography } from "@mui/material";
 import Grid from '@mui/material/Grid';
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Exercise } from "components/Exercises/models/exercise";
 import { useLanguageQuery } from "components/Exercises/queries";
 import { BaseConfig } from "components/WorkoutRoutines/models/BaseConfig";
 import { Slot } from "components/WorkoutRoutines/models/Slot";
@@ -21,7 +22,6 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { getLanguageByShortName } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
 
 /*
  * Converts a number to an alphabetic string, useful for counting
@@ -95,12 +95,12 @@ export const SlotEntryDetails = (props: {
 
     const isPending = editSlotEntryQuery.isPending || deleteSlotEntryQuery.isPending;
 
-    const handleExerciseChange = (searchResponse: ExerciseSearchResponse | null) => {
-        if (searchResponse === null) {
+    const handleExerciseChange = (exercise: Exercise | null) => {
+        if (exercise === null) {
             return;
         }
 
-        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { exerciseId: searchResponse.data.base_id }));
+        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { exerciseId: exercise.id! }));
         setEditExercise(false);
     };