Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughA new Next.js page is added at Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 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. 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: 2
🧹 Nitpick comments (2)
apps/site/src/app/oss-friends/page.tsx (2)
53-82: No empty state when no friends are returned.If the API fails or returns an empty array, users see a blank section with no feedback. A simple empty state message improves the user experience and aids debugging.
💡 Proposed improvement
<section className="px-4 pb-16 md:pb-20"> <div className="mx-auto max-w-[1024px] grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> + {friends.length === 0 && ( + <p className="col-span-full text-center text-foreground-neutral-weak"> + No friends to display at the moment. + </p> + )} {friends.map((friend) => (🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/oss-friends/page.tsx` around lines 53 - 82, The page currently renders nothing when the friends array is empty or undefined (the friends.map block inside the section), so add an explicit empty-state render path: check friends (or friends.length) before mapping and when empty render a styled fallback (e.g., a Card or div with a brief message like "No friends found" and optional retry/link) in place of the grid; update the JSX around the friends.map usage in page.tsx to conditionally render either the grid of friend anchor Cards or the empty-state element so users get feedback when the API returns no items.
55-80: Consider using a stable key instead of array index.Using
idxas a key works here since the list is fetched once and doesn't reorder, butfriend.hreforfriend.namewould be more semantically meaningful and resilient if the data ever changes shape or order. This also aligns with React's recommendation to use stable, unique identifiers when available.♻️ Proposed improvement
- {friends.map((friend, idx) => ( + {friends.map((friend) => ( <a - key={idx} + key={friend.href} href={friend.href}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/oss-friends/page.tsx` around lines 55 - 80, Replace the unstable array index key used in the friends.map render with a stable unique identifier from each friend object; instead of key={idx} in the map inside friends.map(...) (the <a ...> element wrapping Card), use a stable prop such as friend.href or friend.name (prefer friend.href if it is unique) so React can track list items reliably when the data changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/oss-friends/page.tsx`:
- Line 2: Remove the unused import symbol Button from the import statement that
currently reads "import { Button, Card } from \"@prisma/eclipse\""; keep only
the used Card export to eliminate the lint warning and unused-symbol noise
(i.e., update the import to import Card only).
- Around line 20-31: Update getOSSFriends to explicitly check the fetch response
status: after awaiting fetch (variable res in getOSSFriends), verify res.ok and
if false either throw or return [] (and optionally log the status/body) before
calling res.json(); only parse JSON and derive list (raw -> raw.data ??
raw.friends) when res.ok is true so error responses (4xx/5xx) don't get treated
as normal data.
---
Nitpick comments:
In `@apps/site/src/app/oss-friends/page.tsx`:
- Around line 53-82: The page currently renders nothing when the friends array
is empty or undefined (the friends.map block inside the section), so add an
explicit empty-state render path: check friends (or friends.length) before
mapping and when empty render a styled fallback (e.g., a Card or div with a
brief message like "No friends found" and optional retry/link) in place of the
grid; update the JSX around the friends.map usage in page.tsx to conditionally
render either the grid of friend anchor Cards or the empty-state element so
users get feedback when the API returns no items.
- Around line 55-80: Replace the unstable array index key used in the
friends.map render with a stable unique identifier from each friend object;
instead of key={idx} in the map inside friends.map(...) (the <a ...> element
wrapping Card), use a stable prop such as friend.href or friend.name (prefer
friend.href if it is unique) so React can track list items reliably when the
data changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 05ba53b0-086c-4d97-9969-1a3550fafd3a
📒 Files selected for processing (1)
apps/site/src/app/oss-friends/page.tsx
| @@ -0,0 +1,85 @@ | |||
| import type { Metadata } from "next"; | |||
| import { Button, Card } from "@prisma/eclipse"; | |||
There was a problem hiding this comment.
Unused import: Button is imported but never used.
This will likely trigger linting warnings. Remove it to keep imports clean.
🧹 Proposed fix
-import { Button, Card } from "@prisma/eclipse";
+import { Card } from "@prisma/eclipse";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { Button, Card } from "@prisma/eclipse"; | |
| import { Card } from "@prisma/eclipse"; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/oss-friends/page.tsx` at line 2, Remove the unused import
symbol Button from the import statement that currently reads "import { Button,
Card } from \"@prisma/eclipse\""; keep only the used Card export to eliminate
the lint warning and unused-symbol noise (i.e., update the import to import Card
only).
| async function getOSSFriends(): Promise<OSSFriend[]> { | ||
| try { | ||
| const res = await fetch("https://formbricks.com/api/oss-friends", { | ||
| next: { revalidate: 3600 }, | ||
| }); | ||
| const raw = await res.json(); | ||
| const list = Array.isArray(raw) ? raw : (raw.data ?? raw.friends ?? []); | ||
| return list as OSSFriend[]; | ||
| } catch { | ||
| return []; | ||
| } | ||
| } |
There was a problem hiding this comment.
Missing res.ok check before parsing JSON response.
If the external API returns a 4xx or 5xx status, the code still attempts to parse the body as JSON. While the outer catch handles parse failures, a non-OK response might return valid JSON with an error structure (e.g., { "error": "rate limited" }) that would pass through silently, potentially yielding unexpected data shapes or an empty grid with no indication of failure.
Checking res.ok makes the failure mode explicit and ensures you only process successful responses.
🛡️ Proposed fix
async function getOSSFriends(): Promise<OSSFriend[]> {
try {
const res = await fetch("https://formbricks.com/api/oss-friends", {
next: { revalidate: 3600 },
});
+ if (!res.ok) {
+ console.error(`Failed to fetch OSS friends: ${res.status}`);
+ return [];
+ }
const raw = await res.json();
const list = Array.isArray(raw) ? raw : (raw.data ?? raw.friends ?? []);
return list as OSSFriend[];
} catch {
return [];
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function getOSSFriends(): Promise<OSSFriend[]> { | |
| try { | |
| const res = await fetch("https://formbricks.com/api/oss-friends", { | |
| next: { revalidate: 3600 }, | |
| }); | |
| const raw = await res.json(); | |
| const list = Array.isArray(raw) ? raw : (raw.data ?? raw.friends ?? []); | |
| return list as OSSFriend[]; | |
| } catch { | |
| return []; | |
| } | |
| } | |
| async function getOSSFriends(): Promise<OSSFriend[]> { | |
| try { | |
| const res = await fetch("https://formbricks.com/api/oss-friends", { | |
| next: { revalidate: 3600 }, | |
| }); | |
| if (!res.ok) { | |
| console.error(`Failed to fetch OSS friends: ${res.status}`); | |
| return []; | |
| } | |
| const raw = await res.json(); | |
| const list = Array.isArray(raw) ? raw : (raw.data ?? raw.friends ?? []); | |
| return list as OSSFriend[]; | |
| } catch { | |
| return []; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/oss-friends/page.tsx` around lines 20 - 31, Update
getOSSFriends to explicitly check the fetch response status: after awaiting
fetch (variable res in getOSSFriends), verify res.ok and if false either throw
or return [] (and optionally log the status/body) before calling res.json();
only parse JSON and derive list (raw -> raw.data ?? raw.friends) when res.ok is
true so error responses (4xx/5xx) don't get treated as normal data.
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
| const res = await fetch("https://formbricks.com/api/oss-friends", { | ||
| next: { revalidate: 3600 }, |
There was a problem hiding this comment.
Should we remove Prisma from the list in formbricks ?
just a nit
2 participants
Summary by CodeRabbit
Release Notes