mise en place du discover

src/components/DiscoverPost.tsx

+import { Instalike } from '@jmetterrothan/instalike';
+import { Media } from '@jmetterrothan/instalike/dist/types/Instalike';
+
 // ICONS
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHeart, faCommentDots } from '@fortawesome/free-solid-svg-icons';
 
-const DiscoverPost = () => {
+
+type DiscoverPostProps = {
+    img: Media;
+    likes: number;
+    comments: number;
+};
+
+
+const DiscoverPost = ({ img, likes, comments }: DiscoverPostProps) => {
+
 return <>
     {/* A DISCOVER POST */}
-    <div className="flex justify-center items-center rounded-2xl overflow-hidden relative">
-        <img src="https://cdn4.vectorstock.com/i/1000x1000/82/53/white-letter-a-logo-on-red-background-vector-26888253.jpg"
-            alt="" />
+    <div className="flex justify-center items-center rounded-2xl relative w-[315px] h-[315px] overflow-hidden">
+        <img className="objet-cover w-full h-full" src={img.src} alt="" />
         <div className="flex justify-center items-center bg-gray-900/50 absolute_card inset-0 gap-4">
-            <button className="px-2 flex items-center gap-2 text-white">
-            <FontAwesomeIcon className="text-[20px]" icon={faHeart} />
-            <span className="mt-1">0</span>
-            </button>
-            <button className="px-2 flex items-center gap-2 text-white">
-            <FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
-            <span className="mt-1">0</span>
-            </button>
+            <div className="px-2 flex items-center gap-2 text-white">
+                <FontAwesomeIcon className="text-[20px]" icon={faHeart} />
+                <span className="mt-1">{likes}</span>
+            </div>
+            <div className="px-2 flex items-center gap-2 text-white">
+                <FontAwesomeIcon className="text-[20px]" icon={faCommentDots} />
+                <span className="mt-1">{comments}</span>
+            </div>
         </div>
     </div>
+
 </>;
 };
 

src/views/DiscoverView.tsx

+import { useEffect } from 'react';
+import { Instalike } from '@jmetterrothan/instalike';
+
 // COMPOSANTS
 import Navbar from '../components/Navbar';
 import DiscoverPost from '../components/DiscoverPost';
 
+// AUTRES FICHIERS
+import useAppDispatch from '../hooks/useAppDispatch';
+import useFeedItems from '../hooks/useFeedItems';
+import { fetchFeedUserAsync } from '../redux/feed/thunks';
+import { Link } from 'react-router-dom';
+
 
 const DiscoverView = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(fetchFeedUserAsync());
+  }, []);
+
+  const feedItems = useFeedItems();
+
 
 return <>
     {/* HEADER */}
@@ -11,13 +27,20 @@ return <>
     {/* ALL DISCOVER POSTS */}
     <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
       {/* A DISCOVER POST */}
-      <DiscoverPost />
-      {/* A DISCOVER POST */}
-      <DiscoverPost />
-      {/* A DISCOVER POST */}
-      <DiscoverPost />
-      {/* A DISCOVER POST */}
-      <DiscoverPost />
+      {feedItems &&
+            feedItems.map((post: Instalike.Post) => {
+            console.log(post)
+
+          return (
+            <Link key={post.id} to={`/post/${post.id}`}>
+              <DiscoverPost key={post.id}
+                img={post.resources[0]}
+                likes={post.likesCount}
+                comments={post.commentsCount}
+              ></DiscoverPost>
+            </Link>
+          );
+        })}
     </div>
   </>;
 };