From 83f71586c0de338cb902641f18e52d1e81ff5ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Mon, 27 Mar 2023 01:20:01 +0200
Subject: [PATCH] mise en place des traductions
---
src/assets/locales/en/common.json | 49 ++++++++++++++++++++++++++++---
src/assets/locales/fr/common.json | 49 ++++++++++++++++++++++++++++---
src/components/AddComment.tsx | 11 +++++--
src/components/Navbar.tsx | 8 ++---
src/components/Post.tsx | 32 ++++++++++++--------
src/redux/post/thunks.ts | 2 +-
src/views/AddPostView.tsx | 24 +++++++--------
src/views/DiscoverView.tsx | 11 +++++--
src/views/FeedView.tsx | 13 +++++---
src/views/LoginView.tsx | 11 +------
src/views/Profile.tsx | 17 ++++++-----
11 files changed, 162 insertions(+), 65 deletions(-)
diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json
index a7b177c..e265515 100644
--- a/src/assets/locales/en/common.json
+++ b/src/assets/locales/en/common.json
@@ -4,15 +4,56 @@
"french": "french",
"english": "english"
},
+ "menu": {
+ "home": "Home",
+ "discover": "Discover",
+ "add_post": "Add a post",
+ "my_profile": "My profile"
+ },
"actions": {
- "follow": "follow",
+ "follow": "Follow",
+ "unfollow": "Unfollow",
"send": "send",
- "cancel": "cancel"
+ "cancel": "cancel",
+ "delete": "Delete",
+ "publish": "Publish",
+ "logout": "Log out",
+ "see_post": "See the post",
+ "copy_link": "Copy link"
+ },
+ "feed_view": {
+ "text1": "You are all caught up\u00A0!",
+ "text2": "Your feed is empty...",
+ "text3": "You should follow users to fill your feed\u00A0!",
+ "text_btn1": "Discover posts"
+ },
+ "discover_view": {
+ "text1": "Your discover is empty...",
+ "text2": "Add a post to complete your discover\u00A0!",
+ "text_btn1": "Add a post"
},
- "addpost": {
+ "profile_view": {
+ "my_account": "My account",
+ "posts": "posts",
+ "followers": "followers",
+ "follows": "follows",
+ "text1": "You haven't posted any photos yet...",
+ "text2": "Add a post to complete your profile\u00A0!",
+ "text_btn1": "Add a post"
+ },
+ "post_view": {
+ "text1": "It is not possible to comment under this post..."
+ },
+ "addpost_view": {
"title": "Create a post",
"image": "Add an image",
"place": "Place",
- "caption": "Caption"
+ "caption": "Caption",
+ "place_placeholder": "Place",
+ "caption_placeholder": "Caption",
+ "text1": "Disable comments"
+ },
+ "addcomment_view": {
+ "add_comment": "Add a comment"
}
}
\ No newline at end of file
diff --git a/src/assets/locales/fr/common.json b/src/assets/locales/fr/common.json
index 72cb8dc..856946d 100644
--- a/src/assets/locales/fr/common.json
+++ b/src/assets/locales/fr/common.json
@@ -4,15 +4,56 @@
"french": "français",
"english": "anglais"
},
+ "menu": {
+ "home": "Accueil",
+ "discover": "Discover",
+ "add_post": "Ajouter un post",
+ "my_profile": "Mon profil"
+ },
"actions": {
- "follow": "suivre",
+ "follow": "Suivre",
+ "unfollow": "Ne plus suivre",
"send": "envoyer",
- "cancel": "annuler"
+ "cancel": "annuler",
+ "delete": "Supprimer",
+ "publish": "Publier",
+ "logout": "Se déconnecter",
+ "see_post": "Voir la publication",
+ "copy_link": "Copier le lien"
+ },
+ "feed_view": {
+ "text1": "Vous avez tout vu\u00A0!",
+ "text2": "Votre feed est vide...",
+ "text3": "Vous devriez suivre des utilisateurs pour remplir votre feed\u00A0!",
+ "text_btn1": "Découvrir des posts"
+ },
+ "discover_view": {
+ "text1": "Votre discover est vide...",
+ "text2": "Ajouter un post pour remplir votre discover\u00A0!",
+ "text_btn1": "Ajouter un post"
},
- "addpost": {
+ "profile_view": {
+ "my_account": "Mon compte",
+ "posts": "posts",
+ "followers": "followers",
+ "follows": "follows",
+ "text1": "Vous n'avez pas encore publié de photos...",
+ "text2": "Ajouter un post pour remplir votre profil\u00A0!",
+ "text_btn1": "Ajouter un post"
+ },
+ "post_view": {
+ "text1": "Il n'est pas possible de commenter sous ce post..."
+ },
+ "addpost_view": {
"title": "Créer un post",
"image": "Ajouter une image",
"place": "Lieu",
- "caption": "Description"
+ "caption": "Description",
+ "place_placeholder": "Lieu",
+ "caption_placeholder": "Description",
+ "text1": "Désactiver les commentaires"
+ },
+ "addcomment_view": {
+ "add_comment": "Ajouter un commentaire"
}
}
\ No newline at end of file
diff --git a/src/components/AddComment.tsx b/src/components/AddComment.tsx
index 475fa10..ec46bd9 100644
--- a/src/components/AddComment.tsx
+++ b/src/components/AddComment.tsx
@@ -1,5 +1,11 @@
import { useState } from 'react';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
+
+// AUTRES FICHIERS
import useAppDispatch from '../hooks/useAppDispatch';
import { postNewCommentAsync } from '../redux/post/thunks';
@@ -8,6 +14,7 @@ type commentProps = {
};
const AddComment = ({ idPost }: commentProps) => {
+ const { t,i18n } = useTranslation();
const [isPickerVisible, setPickerVisible] = useState(false);
const dispatch = useAppDispatch();
const [comment, setComment] = useState('');
@@ -27,7 +34,7 @@ const AddComment = ({ idPost }: commentProps) => {
}
}}
className="border border-gray-400 p-2 rounded-md w-full"
- placeholder="Ajouter un commentaire"
+ placeholder={t('addcomment_view.add_comment')}
></input>
<button
onClick={() => {
@@ -35,7 +42,7 @@ const AddComment = ({ idPost }: commentProps) => {
setComment('');
}}
>
- <div className="bg-gray-500 text-white font-bold h-10 rounded-md flex items-center px-4">Publier</div>
+ <div className="bg-gray-500 text-white font-bold h-10 rounded-md flex items-center px-4">{t('actions.publish')}</div>
</button>
</div>
</>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fadedad..ac666ee 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -64,22 +64,22 @@ const Navbar = () => {
{/* HOME */}
<Link to="/feed" onClick={handleMenuToggle} className="flex items-center gap-3">
<FontAwesomeIcon className="text-[24px]" icon={faHome} />
- <p className="text-start">Home</p>
+ <p className="text-start">{t('menu.home')}</p>
</Link>
{/* DISCOVER */}
<Link to="/discover" onClick={handleMenuToggle} className="flex items-center gap-3">
<FontAwesomeIcon className="text-[24px]" icon={faCompass} />
- <p className="text-start">Discover</p>
+ <p className="text-start">{t('menu.discover')}</p>
</Link>
{/* ADD PICS */}
<Link to="/addpost" onClick={handleMenuToggle} className="flex items-center gap-3">
<FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} />
- <p className="text-start">Ajouter un post</p>
+ <p className="text-start">{t('menu.add_post')}</p>
</Link>
{/* PROFIL */}
<Link to="/profile" onClick={handleMenuToggle} className="flex items-center gap-3">
<FontAwesomeIcon className="text-[24px]" icon={faCircleUser} />
- <p className="text-start">Mon profile</p>
+ <p className="text-start">{t('menu.my_profile')}</p>
</Link>
{/* LIGHT/DARK MODE TOGGLE */}
<button onClick={handleDarkModeToggle} className="flex items-center gap-3">
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 8da70e0..b06339b 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -3,6 +3,11 @@ import { Link } from 'react-router-dom';
import { Instalike } from '@jmetterrothan/instalike';
import { Media } from '@jmetterrothan/instalike/dist/types/Instalike';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
+
// ICONS
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLocationDot, faHeart, faCommentDots, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
@@ -39,6 +44,7 @@ type PostProps = {
const Post = ({ post, postid, username, location, time_post, img, caption, isLiked, likes, comments, comment_post, inFeed, comment_able }: PostProps) => {
+ const { t,i18n } = useTranslation();
const dispatch = useAppDispatch();
const [dropdownOpen, setDropdownOpen] = useState(false);
const [navigateToPost, setnavigateToPost] = useState(false);
@@ -61,17 +67,17 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
<div className="flex items-center gap-4">
<div>
<div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-12 h-12">
- {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
- <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
+ {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
+ <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
</div>
</div>
<div>
<p className="font-bold">{username}</p>
{location &&
- <div className="flex items-center gap-1">
- <FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
- <p className="text-sm mt-[2px]">{location}, {time_post}</p>
- </div>
+ <div className="flex items-center gap-1">
+ <FontAwesomeIcon className="text-[14px]" icon={faLocationDot} />
+ <p className="text-sm mt-[2px]">{location}, {time_post}</p>
+ </div>
}
</div>
{/* btn follow */}
@@ -82,7 +88,7 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
} else {
dispatch(followUserPostAsync(post.owner.id));
}
- }}>follow</button>
+ }}>{t('actions.follow')}</button>
)}
</div>
<div className="relative">
@@ -101,7 +107,7 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
window.history.go(-1); return false;
}}
>
- Supprimer
+ {t('actions.delete')}
</button>
)}
{/* FOLLOW / UNFOLLOW */}
@@ -115,7 +121,7 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
}
}}
>
- Unfollow
+ {t('actions.unfollow')}
</button>
) : (
<button className="hover:bg-gray-200 p-2 dark:hover:bg-gray-700 font-bold text-blue-500 w-full text-left"
@@ -127,20 +133,20 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
}
}}
>
- Follow
+ {t('actions.follow')}
</button>
))}
{/* SEE PUBLICATION */}
{inFeed &&
<button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left">
- <Link to={`/post/${postid}`}>Voir la publication</Link>
+ <Link to={`/post/${postid}`}>{t('actions.see_post')}</Link>
</button>
}
{/* COPY LINK */}
<button className="hover:bg-gray-200 dark:hover:bg-gray-700 p-2 w-full text-left" onClick={() => {
copyLink(window.location.origin.toString() + '/post/' + postid);
}}
- >Copier le lien</button>
+ >{t('actions.copy_link')}</button>
</div>
</div>
@@ -182,7 +188,7 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
{/* ADD COMMENT */}
{comment_able ? (
<div className="p-4">
- <p className="italic text-center text-sm">Il n'est pas possible de commenter sous ce post...</p>
+ <p className="italic text-center text-sm">{t('post_view.text1')}</p>
</div>
) : (
<div>
diff --git a/src/redux/post/thunks.ts b/src/redux/post/thunks.ts
index 4748e74..153ef1a 100644
--- a/src/redux/post/thunks.ts
+++ b/src/redux/post/thunks.ts
@@ -21,7 +21,7 @@ export const calculateTime = (createdAt: string): string => {
} else if (diffMinutes < 60) {
return diffMinutes === 1 ? `${diffMinutes} minute ago` : `${diffMinutes} minutes ago`;
} else if (diffHours < 24) {
- return diffHours === 1 ? `${diffHours} heure ago` : `${diffHours} heures ago`;
+ return diffHours === 1 ? `${diffHours} heure ago` : `${diffHours} hours ago`;
} else {
return diffDays === 1 ? `${diffDays} day ago` : `${diffDays} days ago`;
}
diff --git a/src/views/AddPostView.tsx b/src/views/AddPostView.tsx
index 805db69..c43d1cc 100644
--- a/src/views/AddPostView.tsx
+++ b/src/views/AddPostView.tsx
@@ -1,6 +1,11 @@
import { useEffect, useState } from 'react';
import { Navigate, Link } from 'react-router-dom';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
+
// COMPOSANTS
import Navbar from '../components/Navbar';
@@ -9,11 +14,6 @@ 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 { t,i18n } = useTranslation();
@@ -42,14 +42,14 @@ const AddPostView = () => {
{/* MODAL */}
<div className="max-w-[640px] px-4 mx-auto">
<div className="p-6 border rounded-xl mt-10 flex flex-col">
- <p className="text-center font-bold text-2xl">{t('addpost.title')}</p>
+ <p className="text-center font-bold text-2xl">{t('addpost_view.title')}</p>
<form className="flex flex-col gap-4 mt-6" onSubmit={(event)=> {
event.preventDefault();
dispatch(addPost(selectedImg, location, caption, hasCommentsDisabled)); //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
}}>
{/* IMAGE */}
<div className="flex flex-col gap-1">
- <label htmlFor="image-upload" className="font-bold">{t('addpost.image')} :</label>
+ <label htmlFor="image-upload" className="font-bold">{t('addpost_view.image')} :</label>
<input type="file" accept="image/*" id="image-upload" onChange={(test)=> {
if (test.target.files) {
setSelectedImg(selectedImg.concat(test.target.files[0]));
@@ -59,19 +59,19 @@ const AddPostView = () => {
</div>
{/* LOCATION */}
<div className="flex flex-col gap-1">
- <label htmlFor="location-input" className="font-bold">{t('addpost.place')} :</label>
- <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
+ <label htmlFor="location-input" className="font-bold">{t('addpost_view.place')} :</label>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="location-input" placeholder={t('addpost_view.place_placeholder')} value={location} onChange={(e)=>
setLocation(e.target.value)} />
</div>
{/* DESCRIPTION */}
<div className="flex flex-col gap-1">
- <label htmlFor="caption-input" className="font-bold">{t('addpost.caption')} :</label>
- <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
+ <label htmlFor="caption-input" className="font-bold">{t('addpost_view.caption')} :</label>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="caption-input" placeholder={t('addpost_view.caption_placeholder')} value={caption} onChange={(e)=>
setCaption(e.target.value)} />
</div>
{/* POSSIBILITE DE COMMENTER */}
<div className="flex items-center gap-2">
- <label htmlFor="comment-checkbox" className="font-bold">Désactiver les commentaires :</label>
+ <label htmlFor="comment-checkbox" className="font-bold">{t('addpost_view.text1')} :</label>
<input className="w-4 h-4" type="checkbox" id="comment-checkbox" checked={hasCommentsDisabled} onChange={(e) => setComment(e.target.checked)} />
</div>
{/* BTNS */}
diff --git a/src/views/DiscoverView.tsx b/src/views/DiscoverView.tsx
index ac02afe..ff368da 100644
--- a/src/views/DiscoverView.tsx
+++ b/src/views/DiscoverView.tsx
@@ -2,6 +2,10 @@ import { useEffect } from 'react';
import { Instalike } from '@jmetterrothan/instalike';
import instalikeApi from '../instalikeApi';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
// COMPOSANTS
import Navbar from '../components/Navbar';
@@ -19,6 +23,7 @@ import { faCompass } from '@fortawesome/free-regular-svg-icons';
const DiscoverView = () => {
+ const { t,i18n } = useTranslation();
const dispatch = useAppDispatch();
// useEffect(() => {
@@ -60,10 +65,10 @@ return <>
) : (
<div className="flex flex-col items-center gap-4 mt-20">
<FontAwesomeIcon className="text-[96px]" icon={faCompass} />
- <p className="font-bold text-xl text-center">Votre discover est vide...</p>
- <p className="text-center">Ajouter un post pour remplir votre discover !</p>
+ <p className="font-bold text-xl text-center">{t('discover_view.text1')}</p>
+ <p className="text-center">{t('discover_view.text2')}</p>
<button className="bg-gray-400 hover:bg-gray-600 text-white font-bold h-10 rounded-md py-2 px-4">
- <Link to="/addpost">Ajouter un post</Link>
+ <Link to="/addpost">{t('discover_view.text_btn1')}</Link>
</button>
</div>
)}
diff --git a/src/views/FeedView.tsx b/src/views/FeedView.tsx
index 80c4c04..1521926 100644
--- a/src/views/FeedView.tsx
+++ b/src/views/FeedView.tsx
@@ -3,6 +3,10 @@ import { Instalike } from '@jmetterrothan/instalike';
import instalikeApi from '../instalikeApi';
import { Link } from 'react-router-dom';
+// LANGUAGE
+import i18n from 'i18next';
+import {useTranslation} from "react-i18next";
+import Language from '../assets/enums/Language';
// ICONS
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -24,6 +28,7 @@ import { fetchSuggestionAsync } from '../redux/suggestion/thunks';
const FeedView = () => {
+ const { t,i18n } = useTranslation();
const dispatch = useAppDispatch();
// useEffect(() => {
@@ -86,15 +91,15 @@ return <>
></Post>
);
})}
- <p className="font-bold text-center">Vous avez tout vu ! / You are all caught up !</p>
+ <p className="font-bold text-center">{t('feed_view.text1')}</p>
</div>
) : (
<div className="flex flex-col items-center gap-4 mt-20">
<FontAwesomeIcon className="text-[96px]" icon={faHouse} />
- <p className="font-bold text-xl text-center">Votre feed est vide...</p>
- <p className="text-center">Vous devriez suivre des utilisateurs pour remplir votre feed !</p>
+ <p className="font-bold text-xl text-center">{t('feed_view.text2')}</p>
+ <p className="text-center">{t('feed_view.text3')}</p>
<button className="bg-gray-400 hover:bg-gray-600 text-white font-bold h-10 rounded-md py-2 px-4">
- <Link to="/discover">Découvrir des posts</Link>
+ <Link to="/discover">{t('feed_view.text_btn1')}</Link>
</button>
</div>
)}
diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx
index da4af34..e699adb 100644
--- a/src/views/LoginView.tsx
+++ b/src/views/LoginView.tsx
@@ -21,28 +21,19 @@ const LoginView = () => {
return <>
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="instalike_title text-[64px] leading-[76px]">Instalike</h1>
- {/* <p className="text-red-500">Faire afficher un message d'erreur ici si les id/mdp ne sont pas bon</p> */}
<form action="" className="flex flex-col gap-4 w-[348px] mt-4" onSubmit={function(e) {
e.preventDefault();
dispatch(loginAsync(email, password))
.catch((e) => setMessage(e.response.data.message));
}}>
- <p className="text-lg">Welcom !</p>
- {/* <p className="text-lg">Welcom back <span className="font-bold">Chloé</span> !</p> */}
+ <p className="text-lg">Welcome !</p>
<input id="email" className="px-4 bg-gray-200 h-12 rounded-md" type="email" name="email" placeholder="Adresse mail" required onChange={(e) => {
setEmail(e.target.value);
}}></input>
<input id="password" className="px-4 bg-gray-200 h-12 rounded-md" type="password" name="password" placeholder="Mot de passe" required onChange={(e) => {
setPassword(e.target.value);
}}></input>
- {/* <p className="text-sm">Not Chloé ? <a className="font-bold text-blue-400" href="#">Change account</a></p> */}
<button type="submit" className="bg-blue-400 text-white font-bold h-10 rounded-md mt-2">Login</button>
- {/* <button type="button" className="bg-red-400 text-white font-bold h-10 rounded-md mt-2"
- onClick={() => {
- dispatch(loginAsync('chloe.jacob4@etu.unistra.fr', 'DWEB2023'));
- }}
- >Login</button> */}
-
</form>
</div>
</>;
diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx
index c42bfda..aa413b4 100644
--- a/src/views/Profile.tsx
+++ b/src/views/Profile.tsx
@@ -55,23 +55,23 @@ return <>
{/* INFOS COMPTE */}
<div className="flex flex-col gap-[30px] sm:gap-4">
<div className="flex gap-5 justify-center items-center">
- <p className="text-xl">Chloé</p>
+ <p className="text-xl">{t('profile_view.my_account')}</p>
<button className="bg-red-600 hover:bg-red-800 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
dispatch(logoutAsync());
- }}>Se déconnecter</button>
+ }}>{t('actions.logout')}</button>
</div>
<div className="flex gap-10">
<div className="flex flex-col items-center">
<p>XX</p>
- <p>posts</p>
+ <p>{t('profile_view.posts')}</p>
</div>
<div className="flex flex-col items-center">
<p>XX</p>
- <p>followers</p>
+ <p>{t('profile_view.followers')}</p>
</div>
<div className="flex flex-col items-center">
<p>XX</p>
- <p>follow</p>
+ <p>{t('profile_view.follows')}</p>
</div>
</div>
</div>
@@ -116,13 +116,14 @@ return <>
);
})}
</div>
+
) : (
<div className="flex flex-col items-center gap-4 mt-20">
<FontAwesomeIcon className="text-[96px]" icon={faCompass} />
- <p className="font-bold text-xl text-center">Votre discover est vide...</p>
- <p className="text-center">Ajouter un post pour remplir votre discover !</p>
+ <p className="font-bold text-xl text-center">{t('profile_view.text1')}</p>
+ <p className="text-center">{t('profile_view.text2')}</p>
<button className="bg-gray-400 hover:bg-gray-600 text-white font-bold h-10 rounded-md py-2 px-4">
- <Link to="/addpost">Ajouter un post</Link>
+ <Link to="/addpost">{t('profile_view.text_btn1')}</Link>
</button>
</div>
)}
--
GitLab