Skip to content

Commit

Permalink
Merge pull request #80 from the-collab-lab/ce-addi18n
Browse files Browse the repository at this point in the history
Add In18 for translation to the project
  • Loading branch information
ocsiddisco authored Jun 5, 2024
2 parents 186763d + 15eeccc commit a6227fd
Show file tree
Hide file tree
Showing 16 changed files with 448 additions and 70 deletions.
74 changes: 71 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
8 changes: 6 additions & 2 deletions src/components/Confirm.jsx
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -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}
Expand All @@ -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>
</>
Expand Down
6 changes: 3 additions & 3 deletions src/components/ContainerItems.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
Expand All @@ -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}
Expand Down
25 changes: 21 additions & 4 deletions src/components/DeleteItem.jsx
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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>
</>
);
Expand Down
41 changes: 36 additions & 5 deletions src/components/DeleteList.jsx
Original file line number Diff line number Diff line change
@@ -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);

Expand All @@ -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>
</>
);
Expand Down
7 changes: 5 additions & 2 deletions src/components/ListButtons.jsx
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit a6227fd

Please sign in to comment.