own posts profile view

src/redux/feed/thunks.ts

@@ -72,4 +72,12 @@ export const fetchDiscoverAsync = (): AppThunkAction<Promise<void>> => {
     const { data } = await api.posts.fetch({ cursor: null, amount: 20 });
     dispatch(setUserFeed(data.items));
   }
+};
+
+// Own posts for profile
+export const fetchProfileAsync = (): AppThunkAction<Promise<void>> => {
+  return async (dispatch, getState, api) => {
+    const { data } = await api.users.me.posts.fetch({ cursor: null, amount: 20 });
+    dispatch(setUserFeed(data.items));
+  }
 };
\ No newline at end of file

src/views/Profile.tsx

-import { useNavigate } from 'react-router-dom';
-import Navbar from '../components/Navbar';
-import useAppDispatch from '../hooks/useAppDispatch';
+import { Link, useNavigate } from 'react-router-dom';
 import { logoutAsync } from '../redux/auth/thunks';
 
 // LANGUAGE
@@ -8,7 +6,19 @@ import i18n from 'i18next';
 import {useTranslation} from "react-i18next";
 import Language from '../assets/enums/Language';
 
+// COMPOSANTS
+import Navbar from '../components/Navbar';
+import DiscoverPost from '../components/DiscoverPost';
+
+// AUTRES FICHIERS
+import useAppDispatch from '../hooks/useAppDispatch';
+import useFeedItems from '../hooks/useFeedItems';
+import { fetchProfileAsync } from '../redux/feed/thunks';
 
+// ICONS
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCompass } from '@fortawesome/free-regular-svg-icons';
+import { useEffect } from 'react';
 
 
 const Profile = () => {
@@ -16,6 +26,12 @@ const Profile = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
+    useEffect(() => {
+        dispatch(fetchProfileAsync());
+    }, []);
+
+    const feedItems = useFeedItems();
+
 
 return <>
     {/* HEADER */}
@@ -75,6 +91,37 @@ return <>
                 </button>
             </div>
             <p className="mt-8 text-center">{t('languages.actual')}</p>
+            {/* ALL DISCOVER POSTS */}
+            <div className="max-w-[995px] mx-auto mt-8 mb-16 px-4 flex flex-col items-center">
+                {/* A DISCOVER POST */}
+                {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 text-center">Votre discover est vide...</p>
+                        <p className="text-center">Ajouter un post pour remplir votre discover&nbsp;!</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>
+                        </button>
+                    </div>
+                )}
+            </div>
         </div>
     </div>