From 1572543c2e0e2ad826e4c2243de2273dec9c2115 Mon Sep 17 00:00:00 2001 From: Laura Dolibois Date: Fri, 23 May 2025 18:09:21 +0200 Subject: [PATCH] Implemented i18n and translated RatingCard --- 01-frontend/package-lock.json | 61 +++++++++++++++++++ 01-frontend/package.json | 1 + .../public/locales/de/translation.json | 3 + .../public/locales/en/translation.json | 3 + 01-frontend/src/components/i18n/i18n.ts | 17 ++++-- .../src/helper/productpage/RatingCard.tsx | 5 +- 01-frontend/src/main.tsx | 1 + 7 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 01-frontend/public/locales/de/translation.json create mode 100644 01-frontend/public/locales/en/translation.json diff --git a/01-frontend/package-lock.json b/01-frontend/package-lock.json index b161354..9deb6a7 100644 --- a/01-frontend/package-lock.json +++ b/01-frontend/package-lock.json @@ -14,6 +14,7 @@ "@mui/material": "^7.0.2", "i18next": "^25.2.0", "i18next-browser-languagedetector": "^8.1.0", + "i18next-http-backend": "^3.0.2", "mui": "^0.0.1", "react": "^19.0.0", "react-dom": "^19.1.0", @@ -2336,6 +2337,15 @@ "node": ">= 6" } }, + "node_modules/cross-fetch": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz", + "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==", + "license": "MIT", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2932,6 +2942,15 @@ "@babel/runtime": "^7.23.2" } }, + "node_modules/i18next-http-backend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz", + "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==", + "license": "MIT", + "dependencies": { + "cross-fetch": "4.0.0" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3250,6 +3269,26 @@ "dev": true, "license": "MIT" }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.19", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", @@ -3875,6 +3914,12 @@ "node": ">=8.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, "node_modules/ts-api-utils": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz", @@ -4097,6 +4142,22 @@ "node": ">=0.10.0" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/01-frontend/package.json b/01-frontend/package.json index dc92e22..a97d500 100644 --- a/01-frontend/package.json +++ b/01-frontend/package.json @@ -17,6 +17,7 @@ "@mui/material": "^7.0.2", "i18next": "^25.2.0", "i18next-browser-languagedetector": "^8.1.0", + "i18next-http-backend": "^3.0.2", "mui": "^0.0.1", "react": "^19.0.0", "react-dom": "^19.1.0", diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json new file mode 100644 index 0000000..db9639d --- /dev/null +++ b/01-frontend/public/locales/de/translation.json @@ -0,0 +1,3 @@ +{ + "ratingFrom": "Bewertung vom" +} diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json new file mode 100644 index 0000000..e1370b3 --- /dev/null +++ b/01-frontend/public/locales/en/translation.json @@ -0,0 +1,3 @@ +{ + "ratingFrom": "Rating from" +} diff --git a/01-frontend/src/components/i18n/i18n.ts b/01-frontend/src/components/i18n/i18n.ts index b4fc478..d4021bf 100644 --- a/01-frontend/src/components/i18n/i18n.ts +++ b/01-frontend/src/components/i18n/i18n.ts @@ -1,10 +1,19 @@ import i18next from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from "i18next-browser-languagedetector"; +import HttpBackend from "i18next-http-backend"; i18next - .use(initReactI18next) // Passes i18n down to react-i18next - .use(LanguageDetector) // Detects user language + .use(HttpBackend) + .use(LanguageDetector) + .use(initReactI18next) .init({ - fallbackLng: "en" - }) \ No newline at end of file + fallbackLng: "en", + debug: true, + interpolation: { + escapeValue: false, + }, + backend: { + loadPath: "/locales/{{lng}}/translation.json", + } + }); diff --git a/01-frontend/src/helper/productpage/RatingCard.tsx b/01-frontend/src/helper/productpage/RatingCard.tsx index 307141d..76cb921 100644 --- a/01-frontend/src/helper/productpage/RatingCard.tsx +++ b/01-frontend/src/helper/productpage/RatingCard.tsx @@ -1,8 +1,11 @@ import { Card, CardActionArea, CardContent, Paper, Rating, Typography } from "@mui/material"; import RatingType from "../../components/Rating"; +import { useTranslation } from 'react-i18next'; export default function RatingCard(ratingType: RatingType) { + const { t } = useTranslation(); + const handleClick = () => { console.log(`Clicked on rating with id: ${ratingType.id}`); } @@ -13,7 +16,7 @@ export default function RatingCard(ratingType: RatingType) { - Rating vom: {ratingType.date} + {t('ratingFrom')} {ratingType.date} diff --git a/01-frontend/src/main.tsx b/01-frontend/src/main.tsx index bef5202..851ceeb 100644 --- a/01-frontend/src/main.tsx +++ b/01-frontend/src/main.tsx @@ -1,3 +1,4 @@ +import './components/i18n/i18n'; import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css'