diff --git a/package-lock.json b/package-lock.json
index 345aa038b6b88bfde96ef89fb5392cb8e3319efe..2b444aa63564c027334632e77a24e57d7e60354c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
"@fortawesome/react-fontawesome": "^0.2.0",
"@jmetterrothan/instalike": "1.3.7",
"axios": "0.27.2",
- "i18next": "^22.4.9",
+ "i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -3371,9 +3371,9 @@
}
},
"node_modules/i18next": {
- "version": "22.4.9",
- "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz",
- "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==",
+ "version": "22.4.10",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.10.tgz",
+ "integrity": "sha512-3EqgGK6fAJRjnGgfkNSStl4mYLCjUoJID338yVyLMj5APT67HUtWoqSayZewiiC5elzMUB1VEUwcmSCoeQcNEA==",
"funding": [
{
"type": "individual",
@@ -7843,9 +7843,9 @@
}
},
"i18next": {
- "version": "22.4.9",
- "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz",
- "integrity": "sha512-8gWMmUz460KJDQp/ob3MNUX84cVuDRY9PLFPnV8d+Qezz/6dkjxwOaH70xjrCNDO+JrUL25iXfAIN9wUkInNZw==",
+ "version": "22.4.10",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.10.tgz",
+ "integrity": "sha512-3EqgGK6fAJRjnGgfkNSStl4mYLCjUoJID338yVyLMj5APT67HUtWoqSayZewiiC5elzMUB1VEUwcmSCoeQcNEA==",
"requires": {
"@babel/runtime": "^7.20.6"
}
diff --git a/package.json b/package.json
index 5ca02d90b33eef0a83f5992bfcbc7583dbb37733..91d1ae9953516e6cc8139baf160bb7e2f6869b84 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"@fortawesome/react-fontawesome": "^0.2.0",
"@jmetterrothan/instalike": "1.3.7",
"axios": "0.27.2",
- "i18next": "^22.4.9",
+ "i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json
index abef38a2eb7bcdf12cd9198c86d932adb1577bee..d0ff8e8e55373143c4442dddb9052e5f12e8803c 100644
--- a/src/assets/locales/en/common.json
+++ b/src/assets/locales/en/common.json
@@ -1,6 +1,18 @@
{
- "followers": "followers {{ count }}",
+ "languages": {
+ "aaa": "EN",
+ "french": "french",
+ "english": "english"
+ },
"actions": {
- "follow": "follow"
+ "follow": "follow",
+ "send": "send",
+ "cancel": "cancel"
+ },
+ "addpost": {
+ "title": "Create a post",
+ "image": "Add an image",
+ "place": "Place",
+ "caption": "Caption"
}
}
\ No newline at end of file
diff --git a/src/assets/locales/fr/common.json b/src/assets/locales/fr/common.json
index 745b9eb04a614c08d39f2cde7f7cb4dbc0e17ac0..a2b1e9baa5bdad19b9b1d5bb1d5542de52b4c005 100644
--- a/src/assets/locales/fr/common.json
+++ b/src/assets/locales/fr/common.json
@@ -1,6 +1,18 @@
{
- "followers": "Abonnés {{ count }}",
+ "languages": {
+ "aaa": "FR",
+ "french": "français",
+ "english": "anglais"
+ },
"actions": {
- "follow": "suivre"
+ "follow": "suivre",
+ "send": "envoyer",
+ "cancel": "annuler"
+ },
+ "addpost": {
+ "title": "Créer un post",
+ "image": "Ajouter une image",
+ "place": "Lieu",
+ "caption": "Description"
}
}
\ No newline at end of file
diff --git a/src/views/AddPostView.tsx b/src/views/AddPostView.tsx
index 1d21ae2dac196c644c983098a6af4788a23f60eb..328beec201c00e37cb700e388083ed08460fadb8 100644
--- a/src/views/AddPostView.tsx
+++ b/src/views/AddPostView.tsx
@@ -9,9 +9,16 @@ import useAppDispatch from '../hooks/useAppDispatch';
import usePost from '../hooks/usePostItems';
import { addPost } from '../redux/post/thunks';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
+
+
const AddPostView = () => {
-const dispatch = useAppDispatch();
-const [selectedImg, setSelectedImg] = useState<File[]>([]);
+ const { t,i18n } = useTranslation();
+ const dispatch = useAppDispatch();
+ const [selectedImg, setSelectedImg] = useState<File[]>([]);
const [location, setLocation] = useState("");
const [caption, setCaption] = useState("");
const [redirect, setRedirect] = useState(false);
@@ -33,11 +40,11 @@ const [selectedImg, setSelectedImg] = useState<File[]>([]);
<Navbar />
{/* MODAL */}
<div className="max-w-[640px] mx-auto p-6 border rounded-xl mt-10 bg-white flex flex-col">
- <p className="text-center font-bold text-2xl">Créer un post</p>
+ <p className="text-center font-bold text-2xl">{t('addpost.title')}</p>
<form className="flex flex-col gap-4 mt-6">
{/* IMAGE */}
<div className="flex flex-col gap-1">
- <label htmlFor="image-upload" className="font-bold">Ajouter une image :</label>
+ <label htmlFor="image-upload" className="font-bold">{t('addpost.image')} :</label>
<input type="file" accept="image/*" id="image-upload" onChange={(test)=> {
if (test.target.files) {
setSelectedImg(selectedImg.concat(test.target.files[0]));
@@ -47,13 +54,13 @@ const [selectedImg, setSelectedImg] = useState<File[]>([]);
</div>
{/* LOCATION */}
<div className="flex flex-col gap-1">
- <label htmlFor="location-input" className="font-bold">Lieu :</label>
+ <label htmlFor="location-input" className="font-bold">{t('addpost.place')} :</label>
<input className="h-10 p-2 rounded-sm border" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
setLocation(e.target.value)} />
</div>
{/* DESCRIPTION */}
<div className="flex flex-col gap-1">
- <label htmlFor="caption-input" className="font-bold">Description :</label>
+ <label htmlFor="caption-input" className="font-bold">{t('addpost.caption')} :</label>
<input className="h-10 p-2 rounded-sm border" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
setCaption(e.target.value)} />
</div>
@@ -62,7 +69,7 @@ const [selectedImg, setSelectedImg] = useState<File[]>([]);
{/* CANCEL BTN */}
<Link to="/feed">
<button
- className="bg-red-600 text-white font-bold h-10 rounded-md mt-2 uppercase w-full">Annuler</button>
+ className="bg-red-600 text-white font-bold h-10 rounded-md mt-2 uppercase w-full">{t('actions.cancel')}</button>
</Link>
{/* SUBMIT BTN */}
<button className="bg-green-700 text-white font-bold h-10 rounded-md mt-2 uppercase w-full"
@@ -70,7 +77,7 @@ const [selectedImg, setSelectedImg] = useState<File[]>([]);
dispatch(addPost(selectedImg, location, caption)); //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
}}
>
- Envoyer
+ {t('actions.send')}
</button>
</div>
</form>
@@ -81,6 +88,6 @@ const [selectedImg, setSelectedImg] = useState<File[]>([]);
</>
);
- };
+};
- export default AddPostView;
\ No newline at end of file
+export default AddPostView;
\ No newline at end of file
diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx
index 86b52e4588d1da29d1f91486f7f735122837de4e..5ca144f5ff0dd9cecc65ab5e26130799c6709279 100644
--- a/src/views/Profile.tsx
+++ b/src/views/Profile.tsx
@@ -3,10 +3,20 @@ import Navbar from '../components/Navbar';
import useAppDispatch from '../hooks/useAppDispatch';
import { logoutAsync } from '../redux/auth/thunks';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
+
+
+
+
const Profile = () => {
+ const { t,i18n } = useTranslation();
const dispatch = useAppDispatch();
const navigate = useNavigate();
+
return <>
{/* HEADER */}
<Navbar />
@@ -16,7 +26,29 @@ return <>
<button className="bg-red-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4" onClick={() => {
dispatch(logoutAsync());
}}>Se déconnecter</button>
+ {/* CHANGEMENT DE LANGUE */}
+ <div className="flex gap-10 mt-10">
+ <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4"
+ type="button"
+ onClick={() => {
+ i18n.changeLanguage(Language.EN);
+ }}
+ >
+ {t('languages.english')}
+ </button>
+ <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4"
+ type="button"
+ onClick={() => {
+ i18n.changeLanguage(Language.FR);
+ }}
+ >
+ {t('languages.french')}
+ </button>
+ </div>
+ <p>{t('languages.aaa')}</p>
</div>
+
+
</>;
};