From c1ef5fc1a068361448905f9b998d3b5126f88e25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Sun, 26 Feb 2023 01:10:24 +0100
Subject: [PATCH] mise en place des langues (part.1)
---
package-lock.json | 14 +++++++-------
package.json | 2 +-
src/assets/locales/en/common.json | 16 ++++++++++++++--
src/assets/locales/fr/common.json | 16 ++++++++++++++--
src/views/AddPostView.tsx | 27 ++++++++++++++++----------
src/views/Profile.tsx | 32 +++++++++++++++++++++++++++++++
6 files changed, 85 insertions(+), 22 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 345aa03..2b444aa 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 5ca02d9..91d1ae9 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 abef38a..d0ff8e8 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 745b9eb..a2b1e9b 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 1d21ae2..328beec 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 86b52e4..5ca144f 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>
+
+
</>;
};
--
GitLab