Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis change introduces a new "Content" tab for feed pages, displaying RSS feed items with filtering, sorting, and virtualization. It includes new components for feed cards, filter controls, and badges, as well as a hook to fetch and parse RSS data. The route tree and tab navigation are updated accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FeedContentRoute
participant useRssFeed
participant RSSService
participant UIComponents
User->>FeedContentRoute: Navigates to /feed/$feedId/content
FeedContentRoute->>useRssFeed: Calls useRssFeed(feedId)
useRssFeed->>RSSService: Fetch RSS XML for feedId
RSSService-->>useRssFeed: Returns RSS XML
useRssFeed->>useRssFeed: Parse and map RSS items
useRssFeed-->>FeedContentRoute: Return parsed RSS data
FeedContentRoute->>UIComponents: Render filter controls, badges, and virtualized feed list
User->>UIComponents: Interacts with filters/sorting
UIComponents->>FeedContentRoute: Update filter/sort state
FeedContentRoute->>UIComponents: Rerender filtered/sorted feed items
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
apps/app/src/components/feed/FeedCard.tsx (1)
4-13: Interface duplication detected.The
RssFeedIteminterface is duplicated across multiple files. This should be extracted to a shared types file to maintain consistency.This is the same interface duplication issue identified in
RssFeedItem.tsx.
🧹 Nitpick comments (4)
apps/app/src/hooks/use-rss-feed.ts (1)
22-96: Good RSS parsing implementation with minor suggestions.The
fetchRssFeedfunction handles RSS parsing comprehensively, including image extraction from multiple sources and platform detection. Consider these improvements:
- Error handling: Add validation for malformed XML parsing
- Platform detection: The hardcoded platform list is reasonable but could be made configurable
- Image extraction: The multiple fallback sources for images is well-implemented
Consider adding more robust error handling for edge cases:
const xmlDoc = parser.parseFromString(xmlText, "text/xml"); + +// Check for parsing errors +const parseError = xmlDoc.querySelector("parsererror"); +if (parseError) { + throw new Error("Invalid XML format"); +}apps/app/src/components/rss-feed/RssFeedItem.tsx (1)
44-56: Remove unnecessary Fragment wrapper.The Fragment wrapper around the category badges is unnecessary and flagged by static analysis.
Apply this diff to remove the Fragment:
- {item.categories && item.categories.length > 0 && ( - <> - {item.categories.map((category, idx) => ( - <Badge - key={idx} - variant="outline" - className="cursor-pointer hover:bg-blue-50 transition-colors" - onClick={() => onCategoryClick(category)} - title={`Filter by ${category}`} - > - {category} - </Badge> - ))} - </> - )} + {item.categories && item.categories.length > 0 && + item.categories.map((category, idx) => ( + <Badge + key={idx} + variant="outline" + className="cursor-pointer hover:bg-blue-50 transition-colors" + onClick={() => onCategoryClick(category)} + title={`Filter by ${category}`} + > + {category} + </Badge> + )) + }apps/app/src/routes/_layout/feed/$feedId/_tabs/content.tsx (1)
38-40: Use optional chaining for safer property access.The static analysis tool correctly identifies that optional chaining should be used for safer property access.
Apply this diff to use optional chaining:
- (item) => item.categories && item.categories.includes(categoryFilter), + (item) => item.categories?.includes(categoryFilter),apps/app/src/components/rss-feed/FilterControls.tsx (1)
62-67: Consider making platform options configurable.The platform options are currently hardcoded. Consider making them configurable via props to improve reusability and maintainability.
You could add a
availablePlatformsprop similar toavailableCategories:interface FilterControlsProps { // ... existing props + availablePlatforms?: string[]; // ... rest of props }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/app/package.json(1 hunks)apps/app/src/components/feed/FeedCard.tsx(1 hunks)apps/app/src/components/feed/RecentContent.tsx(1 hunks)apps/app/src/components/rss-feed/FilterBadges.tsx(1 hunks)apps/app/src/components/rss-feed/FilterControls.tsx(1 hunks)apps/app/src/components/rss-feed/RssFeedItem.tsx(1 hunks)apps/app/src/hooks/use-rss-feed.ts(1 hunks)apps/app/src/routeTree.gen.ts(11 hunks)apps/app/src/routes/_layout/feed/$feedId.tsx(2 hunks)apps/app/src/routes/_layout/feed/$feedId/_tabs.tsx(3 hunks)apps/app/src/routes/_layout/feed/$feedId/_tabs/content.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/app/src/components/feed/RecentContent.tsx (2)
apps/app/src/hooks/use-rss-feed.ts (1)
useRssFeed(98-137)apps/app/src/components/feed/FeedCard.tsx (1)
FeedCard(22-84)
apps/app/src/hooks/use-rss-feed.ts (2)
apps/app/src/components/rss-feed/RssFeedItem.tsx (1)
RssFeedItem(20-89)apps/app/src/lib/api/feeds.ts (1)
useFeed(26-35)
🪛 Biome (1.9.4)
apps/app/src/components/rss-feed/RssFeedItem.tsx
[error] 44-56: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
apps/app/src/hooks/use-rss-feed.ts
[error] 102-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
apps/app/src/routes/_layout/feed/$feedId/_tabs/content.tsx
[error] 39-39: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (26)
apps/app/package.json (1)
37-37: LGTM! Dependency addition is appropriate.The
@tanstack/react-virtualdependency is properly added to support the virtualization features in the new RSS feed content components.apps/app/src/hooks/use-rss-feed.ts (2)
4-21: LGTM! Well-defined interfaces.The
RssFeedItemandRssFeedDatainterfaces are comprehensive and properly typed, covering all necessary RSS feed properties including optional fields likeimage,platform, andcategories.
110-121: LGTM! Proper React Query configuration.The
useQuerysetup is well-configured with appropriate caching (5-minute stale time), retry logic, and proper query key structure for cache invalidation.apps/app/src/routes/_layout/feed/$feedId.tsx (2)
7-7: LGTM! Clean import addition.The
RecentContentcomponent is properly imported and aligned with the new RSS feed functionality.
153-159: LGTM! Well-integrated component addition.The
RecentContentcomponent is properly integrated with appropriate props:
feedIdfor data fetchingfeedNamewith sensible fallbackfeedImagefrom feed configuration- Proper spacing with
mb-6classapps/app/src/routes/_layout/feed/$feedId/_tabs.tsx (4)
6-9: LGTM! Proper imports for new functionality.The added imports support the new Content tab (
Newspapericon) and improved tab component structure (Tabscomponents anduseLocationfor active state detection).
18-22: LGTM! Well-defined Content tab.The new Content tab is properly defined with:
- Correct route path pattern
- Appropriate
Newspapericon- Consistent structure with other tabs
66-72: LGTM! Smart active tab detection.The logic to find the current active tab by matching the pathname against tab routes is well-implemented with proper fallback to the first tab.
77-92: LGTM! Improved tab component structure.The refactoring to use the
Tabscomponent provides better state management and styling consistency compared to the previous custom implementation.apps/app/src/components/rss-feed/FilterBadges.tsx (2)
5-15: LGTM! Well-defined interfaces.The
FilterBadgeandFilterBadgesPropsinterfaces are properly structured with clear, descriptive property names and appropriate types.
17-53: LGTM! Excellent component implementation.The
FilterBadgescomponent is well-implemented with:
- Early return for empty state (good performance)
- Proper key usage in the map function
- Individual remove buttons for each filter
- "Clear all" button that appears only when multiple filters are active
- Appropriate styling and hover states
- Clean component structure
apps/app/src/components/rss-feed/RssFeedItem.tsx (1)
20-89: LGTM! Well-structured RSS feed item component.The component implementation is solid with proper error handling, security attributes for external links, and good user experience features like hover effects and accessibility attributes.
apps/app/src/components/feed/RecentContent.tsx (3)
22-39: Excellent use of useMemo for performance optimization.The memoization of recent items with sorting and pagination logic is well-implemented. The date sorting and array slicing operations are efficient.
43-49: Clean pagination logic with wrap-around functionality.The pagination handlers correctly implement wrap-around behavior, providing a smooth user experience for navigating through recent content.
91-99: Proper key generation with fallback.The key prop uses
item.guidwith a fallback to${currentPage}-${index}, which ensures uniqueness and React rendering stability.apps/app/src/components/feed/FeedCard.tsx (1)
22-84: LGTM! Well-implemented feed card component.The component provides a clean, clickable card interface with proper error handling, security attributes, and responsive design. The flexbox layout ensures consistent card heights.
apps/app/src/routes/_layout/feed/$feedId/_tabs/content.tsx (3)
28-56: Excellent filtering and sorting implementation.The memoized filtering and sorting logic is well-structured and efficient. The combination of platform filtering, category filtering, and date-based sorting provides comprehensive content management.
127-132: Proper virtualization setup for performance.The window virtualizer configuration with appropriate overscan and scroll margin settings ensures smooth scrolling performance for large RSS feed lists.
213-235: Well-implemented virtualized item rendering.The virtualization implementation correctly handles positioning, measurement, and styling for optimal performance with large datasets.
apps/app/src/components/rss-feed/FilterControls.tsx (1)
24-99: LGTM! Well-structured filter controls component.The component provides a clean, intuitive interface for filtering and sorting with proper responsive design and controlled inputs.
apps/app/src/routeTree.gen.ts (6)
43-43: Import statement follows the correct pattern.The import statement for
LayoutFeedFeedIdTabsContentRouteis correctly placed in alphabetical order and follows the established naming convention.
214-219: Route definition is properly configured.The route definition follows the correct pattern with:
- Proper ID:
/content- Correct path:
/content- Appropriate parent route:
LayoutFeedFeedIdTabsRouteThe configuration matches the existing feed tab routes structure.
269-269: Interface mappings are consistently updated.The new content route has been properly added to all necessary type interfaces:
FileRoutesByFullPathwith full path/feed/$feedId/contentFileRoutesByTowith navigation path/feed/$feedId/contentFileRoutesByIdwith layout ID/_layout/feed/$feedId/_tabs/content- Type unions for
fullPaths,to, andidAll entries maintain consistency with the existing route patterns.
Also applies to: 301-301, 337-337, 374-374, 406-406, 441-441
675-681: Module augmentation correctly includes the new route.The TanStack Router module augmentation has been properly updated with the content route configuration including:
- Correct ID and path mapping
- Proper full path resolution
- Appropriate preLoaderRoute reference
- Correct parent route assignment
The structure matches the existing feed tab route patterns.
805-805: Route children configuration is properly updated.The content route has been correctly added to both the
LayoutFeedFeedIdTabsRouteChildreninterface and its corresponding object implementation. The placement maintains alphabetical ordering and follows the established pattern for feed tab routes.Also applies to: 818-818
1-881: Auto-generated route tree is comprehensive and consistent.The auto-generated route tree file has been properly updated to include the new content route. All necessary interfaces, type definitions, and route compositions have been consistently updated following the established patterns. The changes integrate seamlessly with the existing route structure and maintain the expected TanStack Router configuration format.
| interface RssFeedItem { | ||
| title: string; | ||
| link: string; | ||
| description: string; | ||
| pubDate: string; | ||
| guid: string; | ||
| image?: string; | ||
| platform?: string; | ||
| categories?: string[]; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Consider extracting the RssFeedItem interface to avoid duplication.
The RssFeedItem interface is defined in multiple files. Consider extracting it to a shared types file to maintain consistency and avoid duplication.
Let me verify if this interface is duplicated across files:
🏁 Script executed:
#!/bin/bash
# Search for RssFeedItem interface definitions across the codebase
rg -n "interface RssFeedItem" --type ts --type tsxLength of output: 80
🏁 Script executed:
#!/bin/bash
# Search for RssFeedItem interface definitions across the entire codebase
rg -n "interface RssFeedItem"Length of output: 316
Extract duplicated RssFeedItem into a shared type
We’ve identified three separate interface RssFeedItem definitions:
apps/app/src/hooks/use-rss-feed.ts(line 4)apps/app/src/components/rss-feed/RssFeedItem.tsx(line 4)apps/app/src/components/feed/FeedCard.tsx(line 4)
To eliminate drift and duplication, please:
- Create a single
RssFeedIteminterface in a shared file (e.g.src/types/rss.ts). - Update each of the above files to import this shared type instead of redefining it locally.
- Remove the duplicate interface declarations from those files.
This will keep our RSS item shape consistent and easier to maintain.
🤖 Prompt for AI Agents
In apps/app/src/components/rss-feed/RssFeedItem.tsx lines 4 to 13, the
RssFeedItem interface is duplicated across multiple files. To fix this, create a
shared type definition for RssFeedItem in a new file like src/types/rss.ts, then
remove the local interface declaration from this file and import the shared
RssFeedItem type instead. Repeat the import update and removal of local
definitions in apps/app/src/hooks/use-rss-feed.ts and
apps/app/src/components/feed/FeedCard.tsx to centralize and unify the type.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt * append --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* add feed conflicts and lowercase id * Adds "my feeds" on profile (#204) * feat: update my feeds tab on profile page * feat: update tabs to be routes * fix: double scrollbar * comment unused files in overview tab * fix: revert rsbuild * fmt * fix: add routegen to prettier ignore * clean up, server side --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * Resolve shot's comments (#205) * feat: add name and tag validation to create * feat: add no activity data in activity tab * add coming soon sections for profile page * feat: clicking on leaderboard feed hashtag will redirect to that feed * fix: keeps name on start when disable feed names collapse * fix: rsbuild * fix: add routegen to prettier ignore * fix: add ability to navigate to collapsed feeds in leaderboard * add ability to expand or collapse all * fix: rsbuild * adjustments * nitpicks --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * feat: new feed edit (#198) * feat: update the feed editor * feat: improve performance, and fix bugs * feat: revert local development change * add routegen to pretttier ignore * fix: resolve code rabbit comments * fix some nitpick comments * fix prettier and build config * formats * merge --------- Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * debounce * nitpicks * adds processing step plan * fix auth * Feat: recent content (#208) * Feat: add recent feeds * feat: add recent content to the main feed page * fmt * Update apps/app/src/hooks/use-rss-feed.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * nitpicks --------- Co-authored-by: Elliot Braem <elliot@everything.dev> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Elliot Braem <elliot@ejlbraem.com> * atuh flow * delete old requests * feat: Distributor badges link to relevant source (#210) * add _tabs * init with a rss feed * xml * fmt * append * add service url * adjustments * fix --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
Resolved #207
Summary by CodeRabbit
New Features
Improvements