Merge pull request #80 from the-collab-lab/ce-addi18n

Add In18 for translation to the project

package.json

@@ -9,8 +9,11 @@
 	"dependencies": {
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"firebase": "^10.1.0",
+		"i18next": "^23.11.3",
+		"i18next-browser-languagedetector": "^7.2.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-i18next": "^14.1.1",
 		"react-router-dom": "^6.14.2"
 	},
 	"devDependencies": {

src/components/Confirm.jsx

@@ -1,7 +1,11 @@
 import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import Loading from './Loading';
 
 const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
+	const { t } = useTranslation();
+
 	const confirmRef = useRef(null);
 	const cancelRef = useRef(null);
 
@@ -35,7 +39,7 @@ const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
 								className="flex items-center justify-center cursor-pointer bg-lightPurple hover:bg-hoverPurple transition ease-in-out rounded-md text-base sm:text-lg text-puurWhite px-4 py-2 gap-6 shadow-lg min-w-36 sm:min-w-40"
 							>
 								<i className="fa-solid fa-check"></i>
-								Confirm
+								{t('Confirm')}
 							</button>
 							<button
 								onClick={onClose}
@@ -44,7 +48,7 @@ const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
 								className="flex items-center justify-center cursor-pointer border-2 border-darkPurple hover:border-hoverPurple hover:bg-hoverPurple transition ease-in-out rounded-md text-base sm:text-lg text-darkPurple hover:text-puurWhite px-4 py-2 gap-6 shadow-lg min-w-36 sm:min-w-40"
 							>
 								<i className="fa-solid fa-x"></i>
-								Cancel
+								{t('Cancel')}
 							</button>
 						</div>
 					</>

src/components/ContainerItems.jsx

@@ -13,7 +13,7 @@ export const ContainerItems = ({
 
 	useEffect(() => {
 		const newItemList = newList.filter((item) => {
-			if (item.category === category) {
+			if (item.category === category[0]) {
 				return true;
 			} else return false;
 		});
@@ -23,11 +23,11 @@ export const ContainerItems = ({
 	return filteredItemsList[0] ? (
 		<section className="text-left">
 			<h2 className="font-poppins uppercase font-bold text-darkPurple pt-8 text-lg sm:text-xl">
-				{category}
+				{category[1]}
 			</h2>
 			<ul>
 				{filteredItemsList.map((item, i) => {
-					if (item.category === category) {
+					if (item.category === category[0]) {
 						return (
 							<ListItem
 								key={item.id}

src/components/DeleteItem.jsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 import { deleteItem } from '../api/firebase';
 import Confirm from './Confirm';
 
 const DeleteItem = ({ itemName, listPath, itemId }) => {
+	const { t } = useTranslation();
+
 	const [open, setOpen] = useState(false);
 	const [submitted, setSubmitted] = useState(false);
 
@@ -18,25 +21,39 @@ const DeleteItem = ({ itemName, listPath, itemId }) => {
 	const closeConfirm = () => {
 		setOpen(false);
 	};
+	const itemNameUppercase = itemName.toUpperCase();
+	const titleTranslated = (
+		<Trans i18nKey="ModalDeleteItemTitle" itemNameUppercase={itemNameUppercase}>
+			Delete {{ itemNameUppercase }}
+		</Trans>
+	);
+
+	const textTranslated = (
+		<Trans i18nKey="ModalDeleteItemText" itemNameUppercase={itemNameUppercase}>
+			Do you really want to delete {{ itemNameUppercase }} from this list?{' '}
+		</Trans>
+	);
+
+	const deleteItemName = t('DeleteItemName', { itemName });
 
 	return (
 		<>
 			<button
 				onClick={openConfirm}
-				aria-label={`Delete ${itemName}`}
-				title={`Delete ${itemName}`}
+				aria-label={deleteItemName}
+				title={deleteItemName}
 				className="px-2 text-darkPurple rounded-md transition ease-in-out hover:text-alertRed focus:text-alertRed"
 			>
 				<i className="fa-solid fa-trash"></i>
 			</button>
 			<Confirm
-				title={`Delete ${itemName.toUpperCase()}`}
+				title={titleTranslated}
 				onClose={closeConfirm}
 				onConfirm={() => handleDelete(listPath, itemId)}
 				open={open}
 				loading={submitted}
 			>
-				{`Do you really want to delete ${itemName.toUpperCase()} from this list?`}
+				{textTranslated}
 			</Confirm>
 		</>
 	);

src/components/DeleteList.jsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 import { deleteList } from '../api/firebase';
 import Confirm from './Confirm';
 
 const DeleteList = ({ user, email, listPath, listName, setListPath }) => {
+	const { t } = useTranslation();
+
 	const [open, setOpen] = useState(false);
 	const [submitted, setSubmitted] = useState(false);
 
@@ -27,26 +30,54 @@ const DeleteList = ({ user, email, listPath, listName, setListPath }) => {
 		setOpen(false);
 	};
 
+	const listNameUppercase = listName.toUpperCase();
+
+	const buttonTranslated = t('ButtonDeleteList', { listNameUppercase });
+
+	const titleTranslated = (
+		<Trans i18nKey="ModalDeleteListTitle" listNameUppercase={listNameUppercase}>
+			Delete {{ listNameUppercase }} List
+		</Trans>
+	);
+
+	const textSuppressionTranslated = (
+		<Trans
+			i18nKey="ModalDeleteListConfirmSuppression"
+			listNameUppercase={listNameUppercase}
+		>
+			Do you really want to delete {{ listNameUppercase }} list?
+		</Trans>
+	);
+
+	const textStopUsingTranslated = (
+		<Trans
+			in18Key="ModalDeleteListStopUsing"
+			listNameUppercase={listNameUppercase}
+		>
+			Do you really want to stop using {{ listNameUppercase }} list?{' '}
+		</Trans>
+	);
+
 	return (
 		<>
 			<button
 				onClick={openConfirm}
-				aria-label={`Delete ${listName.toUpperCase()}`}
-				title={`Delete ${listName.toUpperCase()}`}
+				aria-label={buttonTranslated}
+				title={buttonTranslated}
 				className="rounded-md transition ease-in-out hover:text-alertRed focus:text-alertRed px-4 py-2"
 			>
 				<i className="fa-solid fa-trash"></i>
 			</button>
 			<Confirm
-				title={`Delete ${listName.toUpperCase()} List`}
+				title={titleTranslated}
 				onClose={closeConfirm}
 				onConfirm={() => handleDelete(user, email, listPath, listName)}
 				open={open}
 				loading={submitted}
 			>
 				{listPath.includes(user)
-					? `Do you really want to delete ${listName.toUpperCase()} list?`
-					: `Do you really want to stop using ${listName.toUpperCase()} list?`}
+					? textSuppressionTranslated
+					: textStopUsingTranslated}
 			</Confirm>
 		</>
 	);

src/components/ListButtons.jsx

@@ -1,6 +1,9 @@
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
 const ListButtons = (props) => {
 	const navigate = useNavigate();
+	const { t } = useTranslation();
 
 	const buttonVariants = {
 		purple:
@@ -17,15 +20,15 @@ const ListButtons = (props) => {
 			>
 				<i className="fa-solid fa-plus"></i>
 
-				<span>Add item</span>
+				<span>{t('AddItem')}</span>
 			</button>
 			<button
 				className={`sm:col-span-1  gap-6 shadow-lg ${buttonVariants[props.colorShare]}`}
 				onClick={() => navigate('/manage-list')}
 			>
 				<i className="fa-solid fa-share-nodes"></i>
 
-				<span>Share list</span>
+				<span>{t('ShareList')}</span>
 			</button>
 		</div>
 	);