Skip to content

Commit

Permalink
Some changes requested by po
Browse files Browse the repository at this point in the history
  • Loading branch information
@guzmanalejandro
guzmanalejandro committed Dec 14, 2023
1 parent cbcd666 commit 13d3367
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 73 deletions.
78 changes: 59 additions & 19 deletions src/components/UserFeed.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand Down
110 changes: 56 additions & 54 deletions src/components/UserProfile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 13d3367

Please sign in to comment.