From 6cc2444c605554f5f2565be457971db47c4bcf4f 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 17:45:12 +0100
Subject: [PATCH] =?UTF-8?q?int=C3=A9gration=20de=20la=20page=20'feed'=20(q?=
=?UTF-8?q?nd=20le=20feed=20est=20vide)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/FeedView.tsx | 54 ++++++++++++++++++++++++++----------------
1 file changed, 33 insertions(+), 21 deletions(-)
diff --git a/src/views/FeedView.tsx b/src/views/FeedView.tsx
index 063c3be..74ab7b3 100644
--- a/src/views/FeedView.tsx
+++ b/src/views/FeedView.tsx
@@ -1,6 +1,10 @@
import { useEffect } from 'react';
import { Instalike } from '@jmetterrothan/instalike';
+// ICONS
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
// COMPOSANTS
import Navbar from '../components/Navbar';
import Suggestion from '../components/Suggestion';
@@ -49,28 +53,36 @@ return <>
})
}
</ul>
- <div className="flex flex-col gap-10 mt-10">
- {/* POSTS */}
- {feedItems &&
- feedItems.map((post: Instalike.Post) => {
- console.log(post)
+ {feedItems && feedItems.length > 0 ? (
+ <div className="flex flex-col gap-10 mt-10">
+ {/* POSTS */}
+ {feedItems.map((post: Instalike.Post) => {
+ console.log(post)
+
+ return (
+ <Post key={post.id}
+ postid={post.id}
+ username={post.owner.userName}
+ location={post.location}
+ time_post={calculateTime(post.createdAt)}
+ img={post.resources[0]}
+ caption={post.caption}
+ isLiked={post.viewerHasLiked}
+ likes={post.likesCount}
+ comments={post.commentsCount}
+ comment_post={post.previewComments}
+ ></Post>
+ );
+ })}
+ </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>
+ </div>
+ )}
- return (
- <Post key={post.id}
- postid={post.id}
- username={post.owner.userName}
- location={post.location}
- time_post={calculateTime(post.createdAt)}
- img={post.resources[0]}
- caption={post.caption}
- isLiked={post.viewerHasLiked}
- likes={post.likesCount}
- comments={post.commentsCount}
- comment_post={post.previewComments}
- ></Post>
- );
- })}
- </div>
</div>
</>;
--
GitLab