Skip to content

Commit eaba4fc

Browse files
rolandgeiderrolandgeider
committed
Translate the exercises
1 parent 4c91d2f commit eaba4fc

File tree

3 files changed

+46
-7
lines changed

3 files changed

+46
-7
lines changed

‎src/components/WorkoutRoutines/Detail/RoutineDetailsCard.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ import {
1515
import { uuid4 } from "components/Core/Misc/uuid";
1616
import { RenderLoadingQuery } from "components/Core/Widgets/RenderLoadingQuery";
1717
import { ExerciseImageAvatar } from "components/Exercises/Detail/ExerciseImageAvatar";
18+
import { useLanguageQuery } from "components/Exercises/queries";
1819
import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
1920
import { SetConfigData } from "components/WorkoutRoutines/models/SetConfigData";
2021
import { SlotData } from "components/WorkoutRoutines/models/SlotData";
2122
import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
2223
import React from "react";
2324
import { useTranslation } from "react-i18next";
2425
import { useParams } from "react-router-dom";
26+
import { getLanguageByShortName } from "services";
2527
import { makeLink, WgerLink } from "utils/url";
2628

2729

@@ -40,7 +42,7 @@ export const RoutineDetailsCard = () => {
4042
</Typography>
4143
<Stack spacing={2} sx={{ mt: 2 }}>
4244
{routineQuery.data!.dayDataCurrentIteration.map((dayData) =>
43-
<DayDetails dayData={dayData} key={`dayDetails-${dayData.day?.id}`} />
45+
<DayDetailsCard dayData={dayData} key={`dayDetails-${dayData.day?.id}`} />
4446
)}
4547
</Stack>
4648
</>}
@@ -55,6 +57,17 @@ export function SetConfigDataDetails(props: {
5557
showExercise: boolean,
5658
}) {
5759

60+
const { i18n } = useTranslation();
61+
const languageQuery = useLanguageQuery();
62+
63+
let language = undefined;
64+
if (languageQuery.isSuccess) {
65+
language = getLanguageByShortName(
66+
i18n.language,
67+
languageQuery.data!
68+
);
69+
}
70+
5871
// @ts-ignore
5972
return <Grid container
6073
alignItems="center"
@@ -63,7 +76,7 @@ export function SetConfigDataDetails(props: {
6376
<Grid item xs={12}>
6477
<Stack spacing={0}>
6578
<Typography variant={"h6"}>
66-
{props.showExercise ? props.setConfigData.exercise?.getTranslation().name : ''}
79+
{props.showExercise ? props.setConfigData.exercise?.getTranslation(language).name : ''}
6780
</Typography>
6881
<Typography>
6982
{props.setConfigData.textRepr}
@@ -122,7 +135,7 @@ function SlotDataList(props: {
122135
</Grid>;
123136
}
124137

125-
const DayDetails = (props: { dayData: RoutineDayData }) => {
138+
const DayDetailsCard = (props: { dayData: RoutineDayData }) => {
126139
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
127140
const open = Boolean(anchorEl);
128141
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import {
1212
useTheme
1313
} from "@mui/material";
1414
import { RenderLoadingQuery } from "components/Core/Widgets/RenderLoadingQuery";
15+
import { useLanguageQuery } from "components/Exercises/queries";
1516
import { RoutineDayData } from "components/WorkoutRoutines/models/RoutineDayData";
1617
import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
1718
import React from "react";
1819
import { useTranslation } from "react-i18next";
1920
import { useParams } from "react-router-dom";
21+
import { getLanguageByShortName } from "services";
2022

2123

2224
export const RoutineDetailsTable = () => {
@@ -25,7 +27,6 @@ export const RoutineDetailsTable = () => {
2527
const routineId = params.routineId ? parseInt(params.routineId) : 0;
2628
const routineQuery = useRoutineDetailQuery(routineId);
2729

28-
2930
return <Container maxWidth={false} sx={{ overflowX: 'scroll', display: 'flex', }}>
3031
<RenderLoadingQuery
3132
query={routineQuery}
@@ -51,9 +52,19 @@ export const RoutineDetailsTable = () => {
5152
};
5253

5354
const DayTableExercises = (props: { dayData: RoutineDayData[], iteration: number }) => {
54-
const [t] = useTranslation();
55+
const [t, i18n] = useTranslation();
5556
const theme = useTheme();
5657

58+
const languageQuery = useLanguageQuery();
59+
60+
let language = undefined;
61+
if (languageQuery.isSuccess) {
62+
language = getLanguageByShortName(
63+
i18n.language,
64+
languageQuery.data!
65+
);
66+
}
67+
5768
return <TableContainer component={Paper} sx={{ minWidth: 200, position: 'sticky', left: 0 }}>
5869
<Table size="small">
5970
<TableHead>
@@ -90,7 +101,7 @@ const DayTableExercises = (props: { dayData: RoutineDayData[], iteration: number
90101
<TableCell
91102
key={`tableCell-exercise-${index}`}
92103
sx={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
93-
{showExercise ? setConfig.exercise?.getTranslation().name : '.'}
104+
{showExercise ? setConfig.exercise?.getTranslation(language).name : '.'}
94105
</TableCell>
95106
</TableRow>;
96107
}

‎src/components/WorkoutRoutines/Detail/SlotProgressionEdit.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Container, Grid, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
22
import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
3+
import { useLanguageQuery } from "components/Exercises/queries";
34
import { Slot } from "components/WorkoutRoutines/models/Slot";
45
import { SlotConfig } from "components/WorkoutRoutines/models/SlotConfig";
56
import { useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
@@ -11,7 +12,9 @@ import {
1112
DeleteConfigDetailsButton
1213
} from "components/WorkoutRoutines/widgets/forms/BaseConfigForm";
1314
import React from "react";
15+
import { useTranslation } from "react-i18next";
1416
import { useParams } from "react-router-dom";
17+
import { getLanguageByShortName } from "services";
1518

1619
export const ProgressionEdit = (props: {
1720
objectKey: string,
@@ -92,17 +95,28 @@ export const ProgressionEdit = (props: {
9295

9396
export const SlotProgressionEdit = () => {
9497

98+
const { i18n } = useTranslation();
9599
const params = useParams<{ routineId: string, slotId: string }>();
96100
const routineId = params.routineId ? parseInt(params.routineId) : -1;
97101
const slotId = params.slotId ? parseInt(params.slotId) : -1;
98102
const routineQuery = useRoutineDetailQuery(routineId);
103+
const languageQuery = useLanguageQuery();
99104

100105
if (routineQuery.isLoading) {
101106
return <LoadingPlaceholder />;
102107
}
103108

104109
const routine = routineQuery.data!;
105110

111+
let language = undefined;
112+
if (languageQuery.isSuccess) {
113+
language = getLanguageByShortName(
114+
i18n.language,
115+
languageQuery.data!
116+
);
117+
}
118+
119+
106120
let slot: Slot | null = null;
107121
for (const day of routine.days) {
108122
const foundSlot = day.slots.find((s) => s.id === slotId);
@@ -118,6 +132,7 @@ export const SlotProgressionEdit = () => {
118132

119133
const iterations = Object.keys(routine.groupedDayDataByIteration).map(Number);
120134

135+
121136
return <>
122137
<Container maxWidth="lg"> {/*maxWidth={false}*/}
123138
<Typography variant={"h4"}>
@@ -127,7 +142,7 @@ export const SlotProgressionEdit = () => {
127142

128143
{slot.configs.map((config) => <React.Fragment key={config.id}>
129144
<Typography variant="h5" gutterBottom>
130-
{config.exercise?.getTranslation().name}
145+
{config.exercise?.getTranslation(language).name}
131146
</Typography>
132147
<Grid container spacing={2}>
133148
<ProgressionEdit

0 commit comments

Comments
 (0)