From 75ec0eef8db9a452ae50c63f83b0e188b237558a Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Thu, 29 Jun 2023 10:00:00 +0000
Subject: [PATCH] #51 Add users posts to profile

---
 src/pages/travelers/TravelerPage.js | 33 ++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/pages/travelers/TravelerPage.js b/src/pages/travelers/TravelerPage.js
index 06d6810..65f6da2 100644
--- a/src/pages/travelers/TravelerPage.js
+++ b/src/pages/travelers/TravelerPage.js
@@ -20,6 +20,10 @@ import {
   useTravelerData,
 } from "../../contexts/TravelerDataContext";
 import { Button } from "react-bootstrap";
+import InfiniteScroll from "react-infinite-scroll-component";
+import Post from "../posts/Post";
+import { fetchMoreData } from "../../utils/utils";
+import NoResult from "../../assets/no-results.png";
 
 function TravelerPage() {
   const [hasLoaded, setHasLoaded] = useState(false);
@@ -30,18 +34,21 @@ function TravelerPage() {
   const [traveler] = pageTraveler.results;
   const is_owner = currentUser?.username === traveler?.owner;
 
-  const [travelerPosts, setTravelerPost] = useState({ results: [] });
+  const [travelerPosts, setTravelerPosts] = useState({ results: [] });
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [{ data: pageTraveler }] = await Promise.all([
-          axiosReq.get(`/travelers/${id}/`),
-        ]);
+        const [{ data: pageTraveler }, { data: travelerPosts }] =
+          await Promise.all([
+            axiosReq.get(`/travelers/${id}/`),
+            axiosReq.get(`/posts/?owner__traveler=${id}`),
+          ]);
         setTravelerData((prevState) => ({
           ...prevState,
           pageTraveler: { results: [pageTraveler] },
         }));
+        setTravelerPosts(travelerPosts);
         setHasLoaded(true);
       } catch (err) {
         console.log(err);
@@ -110,8 +117,24 @@ function TravelerPage() {
   const mainTravelerPosts = (
     <>
       <hr />
-      <p className="text-center">Traveler owner's posts</p>
+      <p className="text-center">{traveler?.owner}'s posts</p>
       <hr />
+      {travelerPosts.results.length ? (
+        <InfiniteScroll
+          children={travelerPosts.results.map((post) => (
+            <Post key={post.id} {...post} setPosts={setTravelerPosts} />
+          ))}
+          dataLength={travelerPosts.results.length}
+          loader={<Asset spinner />}
+          hasMore={!!travelerPosts.next}
+          next={() => fetchMoreData(travelerPosts, setTravelerPosts)}
+        />
+      ) : (
+        <Asset
+          src={NoResult}
+          message={`No results found, ${traveler?.owner} hasn't posted anything yet.`}
+        />
+      )}
     </>
   );