user follow feed - #37
Open
dinesh-2047 wants to merge 1 commit into
Open
Conversation
|
@dinesh-2047 is attempting to deploy a commit to the sohaib's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR introduces a "Following Feed" feature allowing authenticated users to view personalized content from followed creators. Changes include routing setup, API integration, navigation UI updates, and a new page component with filtering, pagination, and empty-state handling. Changes
Sequence DiagramsequenceDiagram
participant User
participant App as App Router
participant FollowingPage as FollowingFeedPage
participant API
participant Backend as Backend API
User->>App: Navigate to /following
App->>FollowingPage: Render component (mount)
FollowingPage->>API: getFollowingFeed({page: 1, limit: 12})
API->>Backend: GET /subscriptions/feed?page=1&limit=12
Backend->>API: Return feed items, channels, totals
API->>FollowingPage: Resolve with feed data
FollowingPage->>FollowingPage: Set state (items, channels, pagination)
FollowingPage->>User: Render feed with header, filters, content grid
User->>FollowingPage: Click "Load More"
FollowingPage->>API: getFollowingFeed({page: 2, limit: 12})
API->>Backend: GET /subscriptions/feed?page=2&limit=12
Backend->>API: Return next page items
API->>FollowingPage: Resolve with additional items
FollowingPage->>FollowingPage: Append items to state
FollowingPage->>User: Update feed display
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
frontend/src/pages/FollowingFeedPage.jsx (3)
27-47: Consider adding user-facing error feedback.When the API call fails, the error is only logged to console. Users won't know why the feed is empty or if something went wrong. Consider setting an error state and displaying an error message.
♻️ Proposed fix to add error state
const [loading, setLoading] = useState(true); const [loadingMore, setLoadingMore] = useState(false); const [message, setMessage] = useState(""); + const [error, setError] = useState(null); useEffect(() => { const fetchFeed = async () => { try { setLoading(true); + setError(null); const response = await getFollowingFeed({ page: 1, limit: 12 }); const data = response.data?.data || {}; setFeedItems(data.items || []); setChannels(data.channels || []); setHasMore(Boolean(data.hasMore)); setTotalItems(data.totalItems || 0); setPage(1); } catch (error) { console.error("Failed to fetch following feed:", error); + setError("Failed to load your feed. Please try again later."); } finally { setLoading(false); } }; fetchFeed(); }, []);Then render the error state before the empty state check around Line 192.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/FollowingFeedPage.jsx` around lines 27 - 47, Add a user-facing error state and show it when fetching fails: create a state like error and setError via useState in the FollowingFeedPage component, update the catch block inside fetchFeed (which calls getFollowingFeed) to setError(error || "Failed to load feed") in addition to console.error, and ensure loading state (setLoading) is still cleared in finally; then render the error message in the component UI (place it before the empty-state rendering) so users see the failure instead of just an empty feed.
75-92: Consider showing error feedback when loading more fails.Similar to the initial fetch,
handleLoadMoreonly logs errors to console. Users won't know if loading more items failed.♻️ Proposed improvement
} catch (error) { console.error("Failed to load more following activity:", error); + setMessage("Failed to load more items. Please try again."); } finally {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/FollowingFeedPage.jsx` around lines 75 - 92, handleLoadMore currently only logs failures to console so users get no feedback; update it to set a UI-visible error state and/or trigger the existing app notification mechanism when an error occurs. In the catch block of handleLoadMore, call the same user-facing error handler used elsewhere in this component (e.g., setError or showToast/snackbar) with a concise message like "Failed to load more items" and include the error details for debugging, and ensure the component renders that error state or the notification so users see the failure; keep the existing setLoadingMore(false) in finally and do not change page state on failure.
250-261: Pagination is disabled when filters are applied.The "Load more" button only appears when
filter === "all". Since filtering is client-side, users viewing only videos or tweets cannot load additional pages. Consider either:
- Allowing pagination with filters (though new items may not match the current filter)
- Adding a note explaining why "Load more" isn't available when filtered
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/FollowingFeedPage.jsx` around lines 250 - 261, The Load more button is currently gated by filter === "all", preventing pagination when a client-side filter is applied; remove that conditional so the button renders whenever hasMore is true (i.e., change the JSX condition from hasMore && filter === "all" to just hasMore) so handleLoadMore and loadingMore continue to work as before, and optionally add a short explanatory note near the button that newly fetched items may not match the active filter if you want to inform users.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/pages/FollowingFeedPage.jsx`:
- Around line 224-230: The map rendering in filteredItems.map uses item.data
directly for the key and tweet prop which can throw if item.data is undefined;
update the map in FollowingFeedPage.jsx (the filteredItems.map -> TweetCard
usage) to defensively access item.data (use optional chaining and a fallback id
like item.data?._id ?? 'unknown' for the key) and only pass a safe value to the
tweet prop (e.g., item.data ?? null) or conditionally render the TweetCard only
when item.data exists; apply the same defensive pattern to the other similar
block that renders TweetCard in this file.
---
Nitpick comments:
In `@frontend/src/pages/FollowingFeedPage.jsx`:
- Around line 27-47: Add a user-facing error state and show it when fetching
fails: create a state like error and setError via useState in the
FollowingFeedPage component, update the catch block inside fetchFeed (which
calls getFollowingFeed) to setError(error || "Failed to load feed") in addition
to console.error, and ensure loading state (setLoading) is still cleared in
finally; then render the error message in the component UI (place it before the
empty-state rendering) so users see the failure instead of just an empty feed.
- Around line 75-92: handleLoadMore currently only logs failures to console so
users get no feedback; update it to set a UI-visible error state and/or trigger
the existing app notification mechanism when an error occurs. In the catch block
of handleLoadMore, call the same user-facing error handler used elsewhere in
this component (e.g., setError or showToast/snackbar) with a concise message
like "Failed to load more items" and include the error details for debugging,
and ensure the component renders that error state or the notification so users
see the failure; keep the existing setLoadingMore(false) in finally and do not
change page state on failure.
- Around line 250-261: The Load more button is currently gated by filter ===
"all", preventing pagination when a client-side filter is applied; remove that
conditional so the button renders whenever hasMore is true (i.e., change the JSX
condition from hasMore && filter === "all" to just hasMore) so handleLoadMore
and loadingMore continue to work as before, and optionally add a short
explanatory note near the button that newly fetched items may not match the
active filter if you want to inform users.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fb21b378-e730-4605-80cc-46f3d408b722
📒 Files selected for processing (4)
frontend/src/App.jsxfrontend/src/api/index.jsfrontend/src/compunents/Navbar.jsxfrontend/src/pages/FollowingFeedPage.jsx
Comment on lines
+224
to
+230
| {filteredItems.map((item) => ( | ||
| <TweetCard | ||
| key={`${item.type}-${item.data._id}`} | ||
| tweet={item.data} | ||
| onMessage={setMessage} | ||
| /> | ||
| ))} |
There was a problem hiding this comment.
Add defensive access for item.data in keys and rendering.
The key generation item.data._id will throw a TypeError if item.data is undefined. Consider using optional chaining or providing a fallback.
🛡️ Proposed fix for safer key generation
- <TweetCard
- key={`${item.type}-${item.data._id}`}
+ <TweetCard
+ key={`${item.type}-${item.data?._id ?? item._id}`}- <div key={`${item.type}-${item.data._id}`} className="space-y-3">
+ <div key={`${item.type}-${item.data?._id ?? item._id}`} className="space-y-3">Also applies to: 234-246
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/pages/FollowingFeedPage.jsx` around lines 224 - 230, The map
rendering in filteredItems.map uses item.data directly for the key and tweet
prop which can throw if item.data is undefined; update the map in
FollowingFeedPage.jsx (the filteredItems.map -> TweetCard usage) to defensively
access item.data (use optional chaining and a fallback id like item.data?._id ??
'unknown' for the key) and only pass a safe value to the tweet prop (e.g.,
item.data ?? null) or conditionally render the TweetCard only when item.data
exists; apply the same defensive pattern to the other similar block that renders
TweetCard in this file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#20 solved
Summary by CodeRabbit
Release Notes
New Features