From 13d3367adb0ef540752369effcb440186fbdef2f Mon Sep 17 00:00:00 2001
From: Alejandro Guzman <alejandroguzmanrequena@gmail.com>
Date: Thu, 14 Dec 2023 22:11:15 +0100
Subject: [PATCH] Some changes requested by po

---
 src/components/UserFeed.jsx    |  78 +++++++++++++++++------
 src/components/UserProfile.jsx | 110 +++++++++++++++++----------------
 2 files changed, 115 insertions(+), 73 deletions(-)

diff --git a/src/components/UserFeed.jsx b/src/components/UserFeed.jsx
index ef8f739..859df4f 100644
--- a/src/components/UserFeed.jsx
+++ b/src/components/UserFeed.jsx
@@ -13,6 +13,8 @@ function UserFeed() {
   const [loading, setLoading] = useState(true);
   const [feedType, setFeedType] = useState(localStorage.getItem('feedType') || 'foryou');
   const [showLoginRedirectModal, setShowLoginRedirectModal] = useState(false);
+  const [myFollowing, setMyFollowing] = useState(0);
+  const hasFollowings = myFollowing.length > 0;
 
   const loggedOutFilters = {
     sortBy: "average_rating",
@@ -29,14 +31,35 @@ function UserFeed() {
       setPage(0);
       setFilters(loggedOutFilters);
       setRecipeName(null);
+      console.error("hola")
       getRecipes(loggedOutFilters, null, 0, 9, true, feedType);
     }
+    fetchMyUserData()
   }, [isLogged]);
 
   useEffect(() => {
     getRecipes(filters, recipeName, page, numRecipes, true, feedType);
   }, [feedType]);
 
+  const fetchMyUserData = async () => {
+    try {
+      const response = await fetch(process.env.REACT_APP_API_URL + '/user/me', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch user data');
+      }
+      const data = await response.json();
+      setMyFollowing(data.following)
+    } catch (error) {
+      console.error('Error fetching user data:', error);
+    }
+  };
+
   const getRecipes = async (filters, recipeName, page, numRecipes, reset, feedType) => {
     setLoading(true);
     let url = buildRequestUrl(filters, recipeName, page, numRecipes, feedType);
@@ -139,30 +162,47 @@ function UserFeed() {
         }}/>
       )}
 
-      {loading && recipes.length === 0 ? (
-        <Container className="d-flex justify-content-center align-items-center min-vh-100">
-          <Spinner animation="border" variant="secondary"/>
-        </Container>
-      ) : (
-        <RecipeList
-          recipes={recipes}
-          onRequestLoadMore={() => {
-            setPage(page + 1);
-            if (feedType === "foryou") {
-              getRecipes(filters, recipeName, page+1, numRecipes, false, 'foryou');
-            } else {
-              getRecipes(filters, recipeName, page+1, numRecipes, false, 'following');
-            }
-          }}
-          finished={finished}
-        />
+      {
+        feedType === 'foryou' || (feedType === "following" && hasFollowings) ? (
+          loading && recipes.length === 0 ? (
+            <Container className="d-flex justify-content-center align-items-center min-vh-100">
+              <Spinner animation="border" variant="secondary"/>
+            </Container>
+          ) : (
+            isLogged && (
+              <RecipeList
+                recipes={recipes}
+                onRequestLoadMore={() => {
+                  setPage(page + 1);
+                  if (feedType === "foryou") {
+                    getRecipes(filters, recipeName, page+1, numRecipes, false, 'foryou');
+                  } else {
+                    getRecipes(filters, recipeName, page+1, numRecipes, false, 'following');
+                  }
+                }}
+                finished={finished}
+              />
+            )
+          )
+        ) : (
+          <div className="alert alert-warning" role="alert">
+            You still don't follow anyone!
+          </div>
+        )
+      }
+
+      {!isLogged() && (
+        <div className="alert alert-warning b-4" role="alert">
+            This is as far as you can go. Please, <a href="/login">login</a> or <a href="/signup">register</a> to see more recipes.
+        </div>
       )}
 
+
       <Modal show={showLoginRedirectModal} onHide={() => setShowLoginRedirectModal(false)}>
-        <Modal.Header closeButton>
+        <Modal.Header closeButton className="bg-normal">
           <Modal.Title>Required log in</Modal.Title>
         </Modal.Header>
-        <Modal.Body>You need to log in to view the recipes of the people you follow.</Modal.Body>
+        <Modal.Body className="bg-lightest">You need to log in to view the recipes of the people you follow.</Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={() => setShowLoginRedirectModal(false)}>
             Cancel
diff --git a/src/components/UserProfile.jsx b/src/components/UserProfile.jsx
index 5c26ce4..0644aac 100644
--- a/src/components/UserProfile.jsx
+++ b/src/components/UserProfile.jsx
@@ -754,10 +754,10 @@ const UserProfile = () => {
         </Container>
 
       <Modal show={showRemoveRecipeModal} size="sm" onHide={() => setShowRemoveRecipeModal(false)}>
-        <Modal.Header closeButton>
+        <Modal.Header closeButton className="bg-normal">
           <Modal.Title>Remove recipe</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body className="bg-lightest">
           <Row>
             <Col className="text-center mb-4">
               <ExclamationTriangleFill className="text-warning" size={100} />
@@ -780,10 +780,10 @@ const UserProfile = () => {
         show={showConfirmation}
         onHide={handleConfirmationClose}
       >
-        <Modal.Header closeButton>
+        <Modal.Header closeButton className="bg-normal">
           <Modal.Title>Profile Update</Modal.Title>
         </Modal.Header>
-        <Modal.Body>{confirmationMessage}</Modal.Body>
+        <Modal.Body className="bg-lightest">{confirmationMessage}</Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={handleConfirmationClose}>
             Close
@@ -848,10 +848,10 @@ const UserProfile = () => {
       </Modal>
 
       <Modal show={showConfirmation} onHide={handleConfirmationClose}>
-        <Modal.Header closeButton>
+        <Modal.Header closeButton className="bg-normal">
             <Modal.Title>{operationSuccess ? 'Success' : 'Error'}</Modal.Title>
         </Modal.Header>
-        <Modal.Body>{confirmationMessage}</Modal.Body>
+        <Modal.Body className="bg-lightest">{confirmationMessage}</Modal.Body>
         <Modal.Footer>
             <Button variant="secondary" onClick={handleConfirmationClose}>
                 Close
@@ -860,12 +860,12 @@ const UserProfile = () => {
     </Modal>
 
     <Modal show={showFollowersModal} onHide={handleCloseFollowersModal}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className="bg-normal">
         <Modal.Title>
           Followers
         </Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body className="bg-lightest">
         {followerDetails.length > 0 ? (
           followerDetails.map((follower, index) => (
             <CSSTransition in={true} timeout={500} classNames="slideUp" appear key={index}>
@@ -883,17 +883,18 @@ const UserProfile = () => {
                       <Card.Title style={{ cursor: 'pointer' }}>{follower.username}</Card.Title>
                     </Col>
                     <Col sm={2}>
-                    {follower.username !== myUserName && !token==null && (
-                    <Button
-                      variant={isFollowed(follower) ? 'info' : 'primary'}
-                      onClick={(e) => {
-                        handleFollowUnfollow(follower.username, isFollowed(follower));
-                        e.stopPropagation();
-                      }}
-                    >
-                      {isFollowed(follower) ? 'Following' : 'Follow'}
-                    </Button>
-                  )}
+                    {(token !== null) && (follower.username !== myUserName) && (
+                      <Button
+                        variant={isFollowed(follower) ? 'info' : 'primary'}
+                        onClick={(e) => {
+                          handleFollowUnfollow(follower.username, isFollowed(follower));
+                          e.stopPropagation();
+                        }}
+                      >
+                        {isFollowed(follower) ? 'Following' : 'Follow'}
+                      </Button>
+                    )}
+
                     </Col>
                   </Row>
                 </Card.Body>
@@ -908,10 +909,10 @@ const UserProfile = () => {
 
 
     <Modal show={showFollowingModal} onHide={handleCloseFollowingModal}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className="bg-normal">
         <Modal.Title>Following</Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body className="bg-lightest">
         {userFollowing.length > 0 ? (
         followingDetails.map((following, index) => (
           <CSSTransition in={true} timeout={500} classNames="slideUp" appear key={index}>
@@ -929,17 +930,17 @@ const UserProfile = () => {
                       <Card.Title style={{ cursor: 'pointer' }}>{following.username}</Card.Title>
                     </Col>
                     <Col sm={2}>
-                    {following.username !== myUserName && !token==null && (
-                    <Button
-                      variant={isFollowed(following) ? 'info' : 'primary'}
-                      onClick={(e) => {
-                        handleFollowUnfollow(following.username, isFollowed(following));
-                        e.stopPropagation();
-                      }}
-                    >
-                      {isFollowed(following) ? 'Following' : 'Follow'}
-                    </Button>
-                  )}
+                    {(token !== null) && (following.username !== myUserName) && (
+                      <Button
+                        variant={isFollowed(following) ? 'info' : 'primary'}
+                        onClick={(e) => {
+                          handleFollowUnfollow(following.username, isFollowed(following));
+                          e.stopPropagation();
+                        }}
+                      >
+                        {isFollowed(following) ? 'Following' : 'Follow'}
+                      </Button>
+                    )}
                     </Col>
                   </Row>
                 </Card.Body>
@@ -951,29 +952,30 @@ const UserProfile = () => {
           <>
             <p>You're not following anyone. Discover creators that match your taste!</p>
             {suggestedUsers.length > 0 ? (
-              suggestedUsers.map((user, index) => (
-              <CSSTransition in={true} timeout={500} classNames="slideUp" appear key={index}>
-              <Card className="mb-0 shadow" id="followers-list" style={{ cursor: 'pointer' }} onClick={() => handleNavigate(user._id)}>
-                <Card.Body>
-                  <Row>
-                    <Col sm={2}>
-                      <Image 
-                        src={user.profile_picture ? user.profile_picture : defaultProfile} 
-                        roundedCircle 
-                        style={{ width: '30px', marginRight: '10px' }} 
-                      />
-                    </Col>
-                    <Col>
-                      <Card.Title style={{ cursor: 'pointer' }}>{user.username}</Card.Title>
-                    </Col>
-                  </Row>
-                </Card.Body>
-              </Card>
-            </CSSTransition>
+              suggestedUsers.slice(0, 5).map((user, index) => (
+                <CSSTransition in={true} timeout={500} classNames="slideUp" appear key={index}>
+                  <Card className="mb-0 shadow" id="followers-list" style={{ cursor: 'pointer' }} onClick={() => handleNavigate(user._id)}>
+                    <Card.Body>
+                      <Row>
+                        <Col sm={2}>
+                          <Image 
+                            src={user.profile_picture ? user.profile_picture : defaultProfile} 
+                            roundedCircle 
+                            style={{ width: '30px', marginRight: '10px' }} 
+                          />
+                        </Col>
+                        <Col>
+                          <Card.Title style={{ cursor: 'pointer' }}>{user.username}</Card.Title>
+                        </Col>
+                      </Row>
+                    </Card.Body>
+                  </Card>
+                </CSSTransition>
               ))
             ) : (
               <p>Loading...</p> 
             )}
+
           </>
         ) : (
           <p>You are not following anyone yet.</p>
@@ -983,11 +985,11 @@ const UserProfile = () => {
     </Modal>
 
     <Modal show={showUnfollowModal} onHide={() => setShowUnfollowModal(false)}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className="fw-bold bg-normal">
         <Modal.Title>Unfollow User</Modal.Title>
       </Modal.Header>
-      <Modal.Body>Do you want to unfollow this user?</Modal.Body>
-      <Modal.Footer>
+      <Modal.Body className="bg-lightest">Do you want to unfollow this user?</Modal.Body>
+      <Modal.Footer className="bg-lightest">
         <Button variant="secondary" onClick={() => setShowUnfollowModal(false)}>
           Cancel
         </Button>