added tolgee-localisation

.tolgee/migration-status.json

@@ -0,0 +1,159 @@
+{
+  "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"
+      }
+    ]
+  }
+}
+{
+  "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"
+      }
+    ]
+  }
+}

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",

src/Components/Favourite.js

@@ -11,14 +11,17 @@ import {
   CardActionArea,
   CardActions,
 } from "@mui/material";
+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));
@@ -63,7 +66,10 @@ const Favourite = () => {
                         handleClick(value.id);
                       }}
                     >
-                      Remove From Favourite
+
+<T keyName="remove-from-favourite-button" />
+
+<T keyName="remove-from-favourite-button" />
                     </Button>
                   </CardActions>
                 </Card>
@@ -73,7 +79,8 @@ const Favourite = () => {
         ) : (
           <Container maxWidth="sm">
             <Typography variant="h4" align="center" color="textSecondary">
-              Your favourite list is empty!
+
+<T keyName="empty-favourite-list-message" />
             </Typography>
           </Container>
         )}

src/Components/Home.js

@@ -18,13 +18,15 @@ 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();
   const allRecipes = useSelector((state) => state.allRecipeData);
   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
+
+<T keyName="add-favorite-button" />
                       </Button>
                       <Alert open={showalert} setOpen={setShowAlert} />
                     </CardActions>
@@ -95,7 +98,8 @@ const Home = () => {
           ) : (
             <Container maxWidth="sm">
               <Typography variant="h4" align="center" color="textSecondary">
-                Nothing to show, please search something!
+
+<T keyName="nothing-to-show-message" />
               </Typography>
               <SearchListAlert />
             </Container>

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
+
+<T keyName="recipe-finder-title" />
             </Typography>
             <SearchDiv onSubmit={handleSubmit}>
               <SearchIconWrapper onClick={handleSubmit}>
                 <Search />
               </SearchIconWrapper>
               <StyledInputBase
-                placeholder="Search…"
+                placeholder={
+t('search-placeholder')}
                 inputProps={{ "aria-label": "search" }}
                 value={recipeName}
                 onChange={(e) => {

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",
             }}
           >
-            <img className="displayImage" src={image_url} alt="Recipe" />
+            <img className="displayImage" src={image_url} alt={
+t('recipe-image-alt')} />
           </Paper>
           <div className="displayCard">
             <Typography variant="h2">{title}</Typography>
@@ -87,7 +90,8 @@ const RecipeInstruction = () => {
               >
                 <Person />
                 <Typography noWrap variant="h6">
-                  Serving size:{servings}
+
+<T keyName="serving-size-label"/>: {servings}
                 </Typography>
               </Toolbar>
               <Toolbar
@@ -98,7 +102,8 @@ const RecipeInstruction = () => {
               >
                 <AccessTime />
                 <Typography noWrap variant="h6">
-                  Cooking time:{cooking_time}mins
+
+<T keyName="cooking-time-label" />: {cooking_time}mins
                 </Typography>
               </Toolbar>
             </div>
@@ -110,10 +115,12 @@ const RecipeInstruction = () => {
               >
                 {" "}
                 <Button variant="outlined" href={source_url} target="_blank">
-                  Detail Recipe
+
+<T keyName="detail-recipe-button" />
                 </Button>
                 <Button variant="outlined" onClick={handleAddClick}>
-                  Add to Favourite
+
+<T keyName="add-to-favourite-button" />
                 </Button>
                 <Alert open={showalert} setOpen={setShowAlert} />
               </Stack>
@@ -127,7 +134,8 @@ const RecipeInstruction = () => {
           }}
         >
           <Typography variant="h3" align="center">
-            Ingredients
+
+<T keyName="ingredients-title" />
           </Typography>
           <hr />
           <ul>

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 = () => {
       <ThemeProvider theme={theme}>
         <Box sx={{ flexGrow: 1, mt: 2 }}>
           <Typography align="center" color="textSecondary" variant="h3" mb={4}>
-            Available search queries
+
+<T keyName="search-list-available-queries" />
           </Typography>
           <Grid container align="center" spacing={2}>
             {searchList.map((value) => (