From 731264c607581c0d2742ad101c8d5bfd63ae4e9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Tue, 28 Feb 2023 22:17:19 +0100
Subject: [PATCH] quelques modifications
---
src/components/Comment.tsx | 8 ++++---
src/components/Post.tsx | 2 ++
src/redux/feed/thunks.ts | 24 ++++++++++++++-----
src/redux/post/thunks.ts | 32 ++++++++++++++++++--------
src/views/AddPostView.tsx | 4 ++--
src/views/DiscoverView.tsx | 47 ++++++++++++++++++++++++++------------
src/views/FeedView.tsx | 10 +++++---
src/views/LoginView.tsx | 7 +++---
src/views/Profile.tsx | 6 ++---
9 files changed, 95 insertions(+), 45 deletions(-)
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
index 3e0968f..8d57ab2 100644
--- a/src/components/Comment.tsx
+++ b/src/components/Comment.tsx
@@ -24,9 +24,11 @@ const Comment = ({ tab_comments }: CommentProps) => {
const displayComment = (comment: Instalike.Comment) => {
return (
<div className="flex justify-between">
- <div className="flex items-center gap-4">
- <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-8 h-8">
- <p className="uppercase text-white text-xs">{comment.owner.userName.charAt(0)}</p>
+ <div className="flex items-start gap-4">
+ <div>
+ <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-8 h-8 mt-[5px]">
+ <p className="uppercase text-white text-xs">{comment.owner.userName.charAt(0)}</p>
+ </div>
</div>
<div>
{/* <p><span className="font-bold mr-1">{comment.owner.userName}</span>{limitCommentText(comment.text)}</p> */}
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index f2d1d0b..a7ee780 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -56,10 +56,12 @@ return <>
{/* HEADER POST */}
<div className="flex justify-between p-4 items-center">
<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>
</div>
+ </div>
<div>
<p className="font-bold">{username}</p>
{location &&
diff --git a/src/redux/feed/thunks.ts b/src/redux/feed/thunks.ts
index 03817ed..93fa162 100644
--- a/src/redux/feed/thunks.ts
+++ b/src/redux/feed/thunks.ts
@@ -17,24 +17,36 @@ export const fetchFeedUserAsync = (): AppThunkAction<Promise<void>> => {
// Like post
export const likepostAsync = (postId: number): AppThunkAction<Promise<void>> => {
return async (dispatch, getState, api) => {
- await api.posts.find(postId).like();
- dispatch(likePostFeedAction(postId));
+ try { //laisser le try/catch wrapper sinon bug
+ await api.posts.find(postId).like();
+ dispatch(likePostFeedAction(postId));
+ } catch (e) {
+ throw e;
+ }
};
};
// Unlike post
export const unlikePostAsync = (postId: number): AppThunkAction<Promise<void>> => {
return async (dispatch, getState, api) => {
- await api.posts.find(postId).unlike();
- dispatch(unlikePostFeedAction(postId));
+ try {
+ await api.posts.find(postId).unlike();
+ dispatch(unlikePostFeedAction(postId));
+ } catch (e) {
+ throw e;
+ }
};
};
// Delete its own comment
export const deleteCommentFeedAsync = (postId: number, commentId: number): AppThunkAction<Promise<void>> => {
return async (dispatch, getState, api) => {
- await api.posts.find(postId).comments.find(commentId).delete();
- dispatch(deleteCommentFeedAction(commentId));
+ try {
+ await api.posts.find(postId).comments.find(commentId).delete();
+ dispatch(deleteCommentFeedAction(commentId));
+ } catch (e) {
+ throw e;
+ }
};
};
diff --git a/src/redux/post/thunks.ts b/src/redux/post/thunks.ts
index ffb05e4..7bb8125 100644
--- a/src/redux/post/thunks.ts
+++ b/src/redux/post/thunks.ts
@@ -50,27 +50,39 @@ export const fetchPost = (postid: number): AppThunkAction<Promise<void>> => {
// Ajouter un post
export const addPost = (resources: File[], location: string, caption: string): AppThunkAction<Promise<void>> => { //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
return async (dispatch, getState, api) => {
- const { data } = await api.posts.create({
- resources: resources,
- location: location,
- caption: caption,
- });
- dispatch(setPost(data));
+ try { //laisser le try/catch wrapper sinon bug
+ const { data } = await api.posts.create({
+ resources: resources,
+ location: location,
+ caption: caption,
+ });
+ dispatch(setPost(data));
+ } catch (fff) {
+ throw fff;
+ }
};
};
// Follow someone
export const followUserPostAsync = (userId: number): AppThunkAction<Promise<void>> => {
return async (dispatch, getState, api) => {
- await api.users.me.followers.follow(userId);
- dispatch(followUserPostAction());
+ try {
+ await api.users.me.followers.follow(userId);
+ dispatch(followUserPostAction());
+ } catch (e) {
+ throw e;
+ }
};
};
// Unfollow someone
export const unfollowUserPostAsync = (userId: number): AppThunkAction<Promise<void>> => {
return async (dispatch, getState, api) => {
- await api.users.me.followers.unfollow(userId);
- dispatch(unfollowUserPostAction());
+ try {
+ await api.users.me.followers.unfollow(userId);
+ dispatch(unfollowUserPostAction());
+ } catch (e) {
+ throw e;
+ }
};
};
diff --git a/src/views/AddPostView.tsx b/src/views/AddPostView.tsx
index daf49c3..902d3eb 100644
--- a/src/views/AddPostView.tsx
+++ b/src/views/AddPostView.tsx
@@ -58,13 +58,13 @@ const AddPostView = () => {
{/* 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" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" 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">{t('addpost.caption')} :</label>
- <input className="h-10 p-2 rounded-sm border" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
setCaption(e.target.value)} />
</div>
{/* BTNS */}
diff --git a/src/views/DiscoverView.tsx b/src/views/DiscoverView.tsx
index 197744c..de7c808 100644
--- a/src/views/DiscoverView.tsx
+++ b/src/views/DiscoverView.tsx
@@ -13,6 +13,10 @@ import useFeedItems from '../hooks/useFeedItems';
import { fetchFeedUserAsync } from '../redux/feed/thunks';
import { Link } from 'react-router-dom';
+// ICONS
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCompass } from '@fortawesome/free-regular-svg-icons';
+
const DiscoverView = () => {
const dispatch = useAppDispatch();
@@ -34,22 +38,35 @@ return <>
{/* HEADER */}
<Navbar />
{/* ALL DISCOVER POSTS */}
- <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 flex flex-col items-center sm:grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 ">
+ <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 flex flex-col items-center">
{/* A DISCOVER POST */}
- {feedItems &&
- feedItems.map((post: Instalike.Post) => {
- console.log(post)
-
- return (
- <Link key={post.id} to={`/post/${post.id}`} className="flex justify-center">
- <DiscoverPost key={post.id}
- img={post.resources[0]}
- likes={post.likesCount}
- comments={post.commentsCount}
- ></DiscoverPost>
- </Link>
- );
- })}
+ {feedItems && feedItems.length > 0 ? (
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
+ {feedItems &&
+ feedItems.map((post: Instalike.Post) => {
+ console.log(post)
+
+ return (
+ <Link key={post.id} to={`/post/${post.id}`} className="flex justify-center">
+ <DiscoverPost key={post.id}
+ img={post.resources[0]}
+ likes={post.likesCount}
+ comments={post.commentsCount}
+ ></DiscoverPost>
+ </Link>
+ );
+ })}
+ </div>
+ ) : (
+ <div className="flex flex-col items-center gap-4 mt-20">
+ <FontAwesomeIcon className="text-[96px]" icon={faCompass} />
+ <p className="font-bold text-xl">Votre discover est vide...</p>
+ <p className="text-center">Ajouter un post pour remplir votre discover !</p>
+ <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4">
+ <Link to="/addpost">Ajouter un post</Link>
+ </button>
+ </div>
+ )}
</div>
</>;
};
diff --git a/src/views/FeedView.tsx b/src/views/FeedView.tsx
index 72b1101..ffd83b9 100644
--- a/src/views/FeedView.tsx
+++ b/src/views/FeedView.tsx
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { Instalike } from '@jmetterrothan/instalike';
import instalikeApi from '../instalikeApi';
+import { Link } from 'react-router-dom';
// ICONS
@@ -85,13 +86,16 @@ return <>
></Post>
);
})}
- <p className="font-bold text-center">Vous avez tout vu ! / You are all caught up !</p>
+ <p className="font-bold text-center">Vous avez tout vu ! / You are all caught up !</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">Votre feed est vide</p>
- <p>Vous devriez suivre des utilisateurs pour remplir votre feed...</p>
+ <p className="font-bold text-xl">Votre feed est vide...</p>
+ <p>Vous devriez suivre des utilisateurs pour remplir votre feed !</p>
+ <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4">
+ <Link to="/discover">Découvrir des posts</Link>
+ </button>
</div>
)}
diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx
index fa37b8c..da4af34 100644
--- a/src/views/LoginView.tsx
+++ b/src/views/LoginView.tsx
@@ -21,20 +21,21 @@ 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>
+ {/* <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 back <span className="font-bold">Chloé</span> !</p>
+ <p className="text-lg">Welcom !</p>
+ {/* <p className="text-lg">Welcom back <span className="font-bold">Chloé</span> !</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>
+ {/* <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={() => {
diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx
index 6cabcae..2f3f777 100644
--- a/src/views/Profile.tsx
+++ b/src/views/Profile.tsx
@@ -24,7 +24,7 @@ return <>
<div className="max-w-[640px] mx-auto py-16 px-4">
<div className="flex flex-col items-center justify-center">
{/* HEADER PROFILEVIEW */}
- <div className="flex w-full gap-[30px] pb-8 border-b-2">
+ <div className="flex flex-col sm:flex-row items-center w-full gap-[30px] pb-8 border-b-2">
{/* ZONE PROFILE PIC */}
<div className="w-[292px] flex justify-center">
<div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-[150px] h-[150px]">
@@ -32,8 +32,8 @@ return <>
</div>
</div>
{/* INFOS COMPTE */}
- <div className="flex flex-col gap-4">
- <div className="flex gap-5 items-center">
+ <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>
<button className="bg-red-500 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
dispatch(logoutAsync());
--
GitLab