From d11bc1b88a85e6f452ebad8307e809f47581cc04 Mon Sep 17 00:00:00 2001 From: Ayan Nayyer Date: Sat, 28 Jun 2025 02:25:56 +0530 Subject: [PATCH 1/2] added tolgee-localisation --- .tolgee/migration-status.json | 37 +++++++++++++++++++++++++++++++ src/Components/Favourite.js | 7 ++++-- src/Components/SearchListAlert.js | 13 +++++++---- 3 files changed, 51 insertions(+), 6 deletions(-) create mode 100644 .tolgee/migration-status.json diff --git a/.tolgee/migration-status.json b/.tolgee/migration-status.json new file mode 100644 index 0000000..29b8f50 --- /dev/null +++ b/.tolgee/migration-status.json @@ -0,0 +1,37 @@ +{ + "src/Components/Favourite.js": { + "migrated": true, + "keys": [ + { + "name": "remove-from-favourite-button", + "description": "Button text for removing an item from favourites", + "default": "Remove From Favourite" + }, + { + "name": "empty-favourite-list-message", + "description": "Message shown when the favourite list is empty", + "default": "Your favourite list is empty!" + } + ] + }, + "src/Components/SearchListAlert.js": { + "migrated": true, + "keys": [ + { + "name": "list-button", + "description": "Label for the list button in search alert", + "default": "List" + }, + { + "name": "", + "description": "Aria label for the close button", + "default": "close" + }, + { + "name": "", + "description": "Message shown when search terms are limited", + "default": "Search terms are limited.Click here to get complete item list" + } + ] + } +} \ No newline at end of file diff --git a/src/Components/Favourite.js b/src/Components/Favourite.js index 41b6da1..613f940 100644 --- a/src/Components/Favourite.js +++ b/src/Components/Favourite.js @@ -11,6 +11,7 @@ import { CardActionArea, CardActions, } from "@mui/material"; +import { T } from '@tolgee/react'; import { useSelector, useDispatch } from "react-redux"; import { removeFromFavourite } from "../Redux/RecipeActions"; @@ -63,7 +64,8 @@ const Favourite = () => { handleClick(value.id); }} > - Remove From Favourite + + @@ -73,7 +75,8 @@ const Favourite = () => { ) : ( - Your favourite list is empty! + + )} diff --git a/src/Components/SearchListAlert.js b/src/Components/SearchListAlert.js index 50217b3..c0794ed 100644 --- a/src/Components/SearchListAlert.js +++ b/src/Components/SearchListAlert.js @@ -1,9 +1,11 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import { Button, Snackbar, Slide, IconButton } from "@mui/material"; +import { T, useTranslate } from "@tolgee/react"; import { Close } from "@mui/icons-material"; const SearchListAlert = () => { + const { t } = useTranslate(); const [open, setOpen] = useState(true); const handleClose = (event, reason) => { @@ -22,13 +24,15 @@ const SearchListAlert = () => { to="/SearchList" style={{ textDecoration: "none", color: "inherit" }} > - @@ -43,7 +47,8 @@ const SearchListAlert = () => { TransitionComponent={SlideTransition} autoHideDuration={7000} onClose={handleClose} - message="Search terms are limited.Click here to get complete item list" + message={ +t('search-terms-limited-message')} action={action} /> From 635f6ce2e04229b13516e2c76f9ae5379456b1bc Mon Sep 17 00:00:00 2001 From: Ayan Nayyer Date: Sat, 28 Jun 2025 03:41:19 +0530 Subject: [PATCH 2/2] added localisation for all components --- .tolgee/migration-status.json | 122 ++++++++++++++++++++++++++++ src/Components/Alert.js | 6 +- src/Components/Favourite.js | 4 + src/Components/Home.js | 8 +- src/Components/NavBar.js | 8 +- src/Components/RecipeInstruction.js | 20 +++-- src/Components/SearchList.js | 7 +- src/Components/SearchListAlert.js | 13 ++- 8 files changed, 169 insertions(+), 19 deletions(-) diff --git a/.tolgee/migration-status.json b/.tolgee/migration-status.json index 29b8f50..dba9631 100644 --- a/.tolgee/migration-status.json +++ b/.tolgee/migration-status.json @@ -34,4 +34,126 @@ } ] } +} +{ + "src/Components/Alert.js": { + "migrated": true, + "keys": [ + { + "name": "", + "description": "Snackbar message indicating the recipe is already in the favorite list", + "default": "Recipe is already in favorite list" + } + ] + }, + "src/Components/Favourite.js": { + "migrated": true, + "keys": [ + { + "name": "remove-from-favourite-button", + "description": "Button text for removing an item from favourites.", + "default": "Remove From Favourite" + }, + { + "name": "favourite-list-empty-message", + "description": "Message displayed when the favourite list is empty.", + "default": "Your favourite list is empty!" + } + ] + }, + "src/Components/Home.js": { + "migrated": true, + "keys": [ + { + "name": "add-favorite-button", + "description": "Add to favorite button text", + "default": "Add Favorite" + }, + { + "name": "nothing-to-show-message", + "description": "Message displayed when there are no recipes to show", + "default": "Nothing to show, please search something!" + } + ] + }, + "src/Components/NavBar.js": { + "migrated": true, + "keys": [ + { + "name": "recipe-finder-title", + "description": "The title displayed in the navigation bar.", + "default": "Recipe Finder" + }, + { + "name": "", + "description": "Placeholder for the search input field.", + "default": "Search…" + } + ] + }, + "src/Components/RecipeInstruction.js": { + "migrated": true, + "keys": [ + { + "name": "serving-size-label", + "description": "Alt text for the recipe image.", + "default": "Recipe" + }, + { + "name": "cooking-time-label", + "description": "Label for the serving size information.", + "default": "Serving size" + }, + { + "name": "detail-recipe-button", + "description": "Label for the cooking time information.", + "default": "Cooking time" + }, + { + "name": "add-to-favourite-button", + "description": "Text for the button that links to the detailed recipe.", + "default": "Detail Recipe" + }, + { + "name": "ingredients-title", + "description": "Text for the button that adds recipe to favourites.", + "default": "Add to Favourite" + }, + { + "name": "", + "description": "Title for the ingredients section.", + "default": "Ingredients" + } + ] + }, + "src/Components/SearchList.js": { + "migrated": true, + "keys": [ + { + "name": "search-list-available-queries", + "description": "Header for available search queries in the search list component.", + "default": "Available search queries" + } + ] + }, + "src/Components/SearchListAlert.js": { + "migrated": true, + "keys": [ + { + "name": "search-list-alert-list-button", + "description": "Button text to navigate to complete search list", + "default": "List" + }, + { + "name": "", + "description": "Aria label for the close button icon in the search list alert", + "default": "close" + }, + { + "name": "", + "description": "Message displayed in the search list alert snackbar", + "default": "Search terms are limited.Click here to get complete item list" + } + ] + } } \ No newline at end of file diff --git a/src/Components/Alert.js b/src/Components/Alert.js index 0219472..a0f0a72 100644 --- a/src/Components/Alert.js +++ b/src/Components/Alert.js @@ -1,7 +1,10 @@ import React from "react"; import Slide from "@mui/material/Slide"; import Snackbar from "@mui/material/Snackbar"; +import { useTranslate } from '@tolgee/react'; const Alert = ({ open, setOpen }) => { + const { t } = useTranslate(); + const handleClose = (event, reason) => { if (reason === "clickaway") { return; @@ -20,7 +23,8 @@ const Alert = ({ open, setOpen }) => { TransitionComponent={SlideTransition} autoHideDuration={1500} onClose={handleClose} - message="Recipe is already in favorite list" + message={ +t('recipe-already-in-favorite-message')} sx={{ "& .MuiPaper-root": { boxShadow: "none", diff --git a/src/Components/Favourite.js b/src/Components/Favourite.js index 613f940..0a2ccb1 100644 --- a/src/Components/Favourite.js +++ b/src/Components/Favourite.js @@ -16,10 +16,12 @@ import { T } from '@tolgee/react'; import { useSelector, useDispatch } from "react-redux"; import { removeFromFavourite } from "../Redux/RecipeActions"; import { Link } from "react-router-dom"; +import { T, useTranslate } from "@tolgee/react"; const Favourite = () => { const dispatch = useDispatch(); const favouriteRecipe = useSelector((state) => state.favouriteRecipe); + const { t } = useTranslate(); const handleClick = (id) => { dispatch(removeFromFavourite(id)); @@ -65,6 +67,8 @@ const Favourite = () => { }} > + + diff --git a/src/Components/Home.js b/src/Components/Home.js index 0fe80dd..cd2768e 100644 --- a/src/Components/Home.js +++ b/src/Components/Home.js @@ -18,6 +18,7 @@ import { Link } from "react-router-dom"; import Loader from "./Loader"; import Alert from "./Alert"; import SearchListAlert from "./SearchListAlert"; +import { T, useTranslate } from '@tolgee/react'; const Home = () => { const dispatch = useDispatch(); @@ -25,6 +26,7 @@ const Home = () => { const loading = useSelector((state) => state.loading); const favouriteRecipe = useSelector((state) => state.favouriteRecipe); const [showalert, setShowAlert] = useState(false); + const { t } = useTranslate(); const handleAddClick = (recipe) => { const existingItem = favouriteRecipe.find( @@ -84,7 +86,8 @@ const Home = () => { handleAddClick(value); }} > - Add Favorite + + @@ -95,7 +98,8 @@ const Home = () => { ) : ( - Nothing to show, please search something! + + diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js index def9968..a08980f 100644 --- a/src/Components/NavBar.js +++ b/src/Components/NavBar.js @@ -15,6 +15,7 @@ import { Restaurant, Home, Favorite, Search } from "@mui/icons-material"; import { Link } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { fetchRecipe } from "../Redux/RecipeActions"; +import { T, useTranslate } from '@tolgee/react'; const SearchDiv = styled("form")(({ theme }) => ({ position: "relative", @@ -64,6 +65,7 @@ const NavBar = () => { const favouriteRecipe = useSelector((state) => state.favouriteRecipe); const [badgeValue, setBadgeValue] = useState(0); const navigate = useNavigate(); + const { t } = useTranslate(); useEffect(() => { setRecipe(searchItem); @@ -94,14 +96,16 @@ const NavBar = () => { component="div" sx={{ flexGrow: 1, display: { xs: "none", sm: "block" } }} > - Recipe Finder + + { diff --git a/src/Components/RecipeInstruction.js b/src/Components/RecipeInstruction.js index 11d1f29..a4404ac 100644 --- a/src/Components/RecipeInstruction.js +++ b/src/Components/RecipeInstruction.js @@ -14,6 +14,7 @@ import { } from "@mui/material"; import { Person, AccessTime } from "@mui/icons-material"; import { fetchRecipeItem, addToFavourite } from "../Redux/RecipeActions"; +import { T, useTranslate } from '@tolgee/react'; const RecipeInstruction = () => { const { id } = useParams(); @@ -32,6 +33,7 @@ const RecipeInstruction = () => { } = recipeInstruction; const [showalert, setShowAlert] = useState(false); + const { t } = useTranslate(); useEffect(() => { dispatch(fetchRecipeItem(id)); @@ -71,7 +73,8 @@ const RecipeInstruction = () => { objectFit: "cover", }} > - Recipe + {
{title} @@ -87,7 +90,8 @@ const RecipeInstruction = () => { > - Serving size:{servings} + +: {servings} { > - Cooking time:{cooking_time}mins + +: {cooking_time}mins
@@ -110,10 +115,12 @@ const RecipeInstruction = () => { > {" "} @@ -127,7 +134,8 @@ const RecipeInstruction = () => { }} > - Ingredients + +
    diff --git a/src/Components/SearchList.js b/src/Components/SearchList.js index 9582c2f..2eef566 100644 --- a/src/Components/SearchList.js +++ b/src/Components/SearchList.js @@ -4,7 +4,11 @@ import { createTheme, ThemeProvider } from "@mui/material/styles"; import { fetchRecipe, setSearchItem } from "../Redux/RecipeActions"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; +import { T, useTranslate } from '@tolgee/react'; + const SearchList = () => { + const { t } = useTranslate(); + const searchList = [ "carrot", "broccoli", @@ -159,7 +163,8 @@ const SearchList = () => { - Available search queries + + {searchList.map((value) => ( diff --git a/src/Components/SearchListAlert.js b/src/Components/SearchListAlert.js index c0794ed..885b369 100644 --- a/src/Components/SearchListAlert.js +++ b/src/Components/SearchListAlert.js @@ -1,8 +1,7 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import { Button, Snackbar, Slide, IconButton } from "@mui/material"; -import { T, useTranslate } from "@tolgee/react"; - +import { useTranslate, T } from '@tolgee/react'; import { Close } from "@mui/icons-material"; const SearchListAlert = () => { const { t } = useTranslate(); @@ -24,15 +23,15 @@ const SearchListAlert = () => { to="/SearchList" style={{ textDecoration: "none", color: "inherit" }} > - @@ -48,7 +47,7 @@ t('close-button-label')} autoHideDuration={7000} onClose={handleClose} message={ -t('search-terms-limited-message')} +t('search-list-alert-message')} action={action} />