feat: connect backend via trpc, homepage group search#123
Conversation
|
Warning Review limit reached
More reviews will be available in 55 minutes and 30 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThis PR integrates tRPC for backend group search functionality. It adds environment variables, type definitions, a typed tRPC client, a server query function, a debounced group search component with dropdown results, a reusable spinner component, and wires the search into the Hero component. ChangestRPC Group Search Feature
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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: 3
🧹 Nitpick comments (2)
src/queries/groups.ts (1)
5-8: ⚡ Quick winValidate/clamp Server Action inputs.
"use server"exposessearchGroupsas a public endpoint, soqueryandlimitarrive directly from the client and are forwarded unchecked. The UI passes20, but a direct caller can supply anylimit, potentially triggering heavy backend queries. Consider validating with Zod (already a dependency) and clampinglimit, unless the backend strictly enforces these bounds.🛡️ Example validation
"use server" import { trpc } from "`@/lib/backend`" +import { z } from "zod" + +const schema = z.object({ + query: z.string().max(200), + limit: z.number().int().min(1).max(50), +}) -export async function searchGroups(query: string, limit: number = 6) { - const res = await trpc.tg.groups.search.query({ query, limit }) - return res +export async function searchGroups(query: string, limit: number = 6) { + const input = schema.parse({ query, limit }) + return await trpc.tg.groups.search.query(input) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/queries/groups.ts` around lines 5 - 8, searchGroups is exposed as a server action and forwards unvalidated client inputs directly to trpc.tg.groups.search.query; validate and clamp inputs before calling the backend: use Zod to parse/validate the incoming query (trim, ensure non-empty string) and parse limit as an integer with a min (e.g. 1) and a sensible max (e.g. 50), then pass the validated/clamped values to trpc.tg.groups.search.query (reference: function searchGroups and the downstream call trpc.tg.groups.search.query).package.json (1)
27-27: 💤 Low valueRemove unused
@trpc/nextdependency (if not needed)
@trpc/nextis only present inpackage.jsonand there are no repo references to@trpc/next/createTRPCNext.src/lib/backend.tsusescreateTRPCClient+httpBatchLinkfrom@trpc/client, so@trpc/next(React Query/createTRPCNext) doesn’t appear to be used—drop it unless something else depends on it indirectly.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@package.json` at line 27, Dependency `@trpc/next` appears unused—search the repo for any imports/usages of "`@trpc/next`" or createTRPCNext (and confirm src/lib/backend.ts only uses createTRPCClient and httpBatchLink from `@trpc/client`); if there are no references, remove the "`@trpc/next`" entry from package.json, run package manager install to update lockfile, and run tests/lint to ensure nothing else depended on it indirectly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/home/group-search.tsx`:
- Line 57: The Link element rendering group links (the one using
key={g.telegramId} href={g.link!} target="_blank"}) lacks rel attributes for
safety; update that Link (in the group-search component) to include
rel="noopener noreferrer" when target="_blank" is present so external links use
rel="noopener noreferrer" to prevent reverse-tabnabbing and referrer leakage.
- Around line 53-72: The branch currently checks results.count > 0 but then
filters groups by g.link, which can produce an empty render; update GroupSearch
to first compute a filteredGroups array (e.g., const filteredGroups =
results?.groups.filter(g => g.link) ?? []) and use filteredGroups.length > 0 for
the conditional render, map over filteredGroups (using g.telegramId, g.link,
g.title), and keep the existing debouncedSearch.state.isLoading fallback so the
spinner or "No group found" message shows when filteredGroups is empty.
In `@src/lib/backend.ts`:
- Around line 11-14: The httpBatchLink configuration in backend.ts currently
omits a fetch option, leaving requests unbounded; update the httpBatchLink call
(the object that currently has url and transformer: SuperJSON) to pass a fetch
ponyfill that uses AbortController and setTimeout to enforce a timeout: create a
fetch wrapper that creates an AbortController, starts a timer (clear on
success), calls the real fetch with signal, and rejects/aborts when the timer
fires, then supply that wrapper as the fetch property to httpBatchLink so
backend requests time out safely.
---
Nitpick comments:
In `@package.json`:
- Line 27: Dependency `@trpc/next` appears unused—search the repo for any
imports/usages of "`@trpc/next`" or createTRPCNext (and confirm src/lib/backend.ts
only uses createTRPCClient and httpBatchLink from `@trpc/client`); if there are no
references, remove the "`@trpc/next`" entry from package.json, run package manager
install to update lockfile, and run tests/lint to ensure nothing else depended
on it indirectly.
In `@src/queries/groups.ts`:
- Around line 5-8: searchGroups is exposed as a server action and forwards
unvalidated client inputs directly to trpc.tg.groups.search.query; validate and
clamp inputs before calling the backend: use Zod to parse/validate the incoming
query (trim, ensure non-empty string) and parse limit as an integer with a min
(e.g. 1) and a sensible max (e.g. 50), then pass the validated/clamped values to
trpc.tg.groups.search.query (reference: function searchGroups and the downstream
call trpc.tg.groups.search.query).
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d7a5d4fc-29f6-4e62-9de1-e29d5963de91
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/assets/icons/telegram-fill.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
.env.examplepackage.jsonsrc/components/home/group-search.tsxsrc/components/home/hero.tsxsrc/components/spinner.tsxsrc/env.jssrc/lib/backend.tssrc/queries/groups.tssrc/types.ts
BIA3IA
left a comment
BIA3IA
left a comment
There was a problem hiding this comment.
LGTM :) Magari poi pensiamo anche a come mostrare meglio eventuali errori all’utente, tipo con un toast o qualcosa del genere
| {results && results.count > 0 ? ( | ||
| results?.groups | ||
| .filter((g): g is typeof g & { link: string } => !!g.link) |
There was a problem hiding this comment.
Se in results ci fossero gruppi senza link (non so se puó succedere), poi verrebbero filtrati qui senza entrare nell'else e non si vedrebbe né il risultato né il messaggio
There was a problem hiding this comment.
Lo avevo detto il coniglio, non avevo visto :)
Comunque, quando i designers faranno il design dovremo comunque cambiarlo
2 participants
No description provided.