diff --git a/src/redux/feed/thunks.ts b/src/redux/feed/thunks.ts index bdce4f82070356b09402940ae98f497e3fd135a8..48802121131a034fd361474e3b8cacded9e20bba 100644 --- a/src/redux/feed/thunks.ts +++ b/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 diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx index 8c0d8312c4e3024b984ce523ce285189f779e1f4..02fd1a8055a0ae23be8f978f715ee76fcf05151c 100644 --- a/src/views/Profile.tsx +++ b/src/views/Profile.tsx @@ -1,6 +1,4 @@ -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 !</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>