feat(comments): add realtime discussions to feedback and shelf space - #1099
janburzinski wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
React Doctor found 7 new issues in 4 files · 2 errors & 5 warnings · score 84 / 100 (Needs work) · 2 fixed · vs Errors
5 warnings
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| <m.div | ||
| initial={false} | ||
| animate={{ | ||
| height: comment.reactions.length ? "auto" : 0, |
There was a problem hiding this comment.
React Doctor · react-doctor/no-layout-property-animation (error)
This stutters because animating "height" makes the browser redo page layout every frame, so animate transform or scale instead, or use the layout prop
Fix → Use transform: translateX() or scale() instead. They animate smoothly without making the browser redo layout or repaint
| aria-hidden="true" | ||
| className="relative grid h-4 min-w-[1ch] items-center overflow-hidden tabular-nums" | ||
| > | ||
| <AnimatePresence initial={false} mode="popLayout"> |
There was a problem hiding this comment.
React Doctor · react-doctor/motion-animate-presence-must-outlive-child (warning)
This AnimatePresence boundary is removed by the same condition as its child, so it cannot observe the child leaving or run its exit animation. Keep the boundary mounted and conditionally render the child inside it.
Fix → Keep AnimatePresence mounted and place the condition around its child so Motion can observe and animate the child leaving.
| import type { CommentItemProps } from "@/types/comments"; | ||
| import { formatRelative } from "@/utils/format-relative"; | ||
|
|
||
| export function CommentItem(props: CommentItemProps) { |
There was a problem hiding this comment.
React Doctor · react-doctor/no-high-complexity-react-function (warning)
CommentItem has cyclomatic complexity 24, cognitive complexity 32, and maximum nesting depth 3, so its React logic is hard to understand and change. Extract independent branches into components or hooks.
Fix → Extract independent render branches and state logic into focused components or hooks until the control flow is easy to follow.
| </time> | ||
| </TooltipTrigger> | ||
| <TooltipContent> | ||
| {new Date(comment.createdAt).toLocaleString(undefined, { |
There was a problem hiding this comment.
React Doctor · react-doctor/no-locale-format-in-render (warning)
This can cause a hydration mismatch because toLocaleString() formats with the server's locale and timezone during server rendering but the user's in the browser. Format it in a post-mount useEffect, or pass an explicit locale and timeZone.
Fix → Format locale/timezone-dependent values in a post-mount useEffect + state, or pass an explicit locale and timeZone so the server and the browser render the same text. Only runs on SSR-capable projects.
| import type { CommentTarget, DiscussionComment } from "@/types/comments"; | ||
| import { commentChannel } from "@/utils/comment-channel"; | ||
|
|
||
| export function Discussion(target: CommentTarget) { |
There was a problem hiding this comment.
React Doctor · react-doctor/no-giant-component (warning)
Component "Discussion" is over 300 lines long, which is hard to read & change. Split it into a few smaller components.
Fix → Pull each section into its own component so the parent is easier to read, test, and change.
| client.setQueryData(options.queryKey, (data) => | ||
| data ? { ...data, items: optimistic(data.items) } : data | ||
| ); | ||
| try { |
There was a problem hiding this comment.
React Doctor · react-hooks-js/todo (error)
This component misses React Compiler's automatic memoization & re-renders more than it should. Rewrite the flagged code so the compiler can optimize it.
Fix → Todo: (BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause
1 participant
Description
Adds persistent, realtime discussions to Feedback and Shelf Space so teammates can comment, reply, and react without refreshing the page.
0093_discussion_commentsfor discussion comments and reactions; the original SQL was applied successfully to the development database before renumbering. Existing development databases with the former0092_cute_the_fallenalready applied need migration-history reconciliation before running the new chain; other environments must run the migration before using the feature.Validation: dashboard typecheck, four comment tests, ten Shelf Space tests, a live Upstash publish/subscribe round-trip, and pre-commit formatting/lint/Knip checks passed. Browser verification across two signed-in sessions and a production build remain outstanding. React Doctor reports 84/100 with an animated-height error and warnings about nested exit animation, locale formatting, and component complexity/size; retained as draft for follow-up. Lint also reports shared-component styling/theme-resolution warnings.
Implementation was AI-assisted. The unrelated local Workflow dependency update is excluded.
Screenshot/Recording (if applicable)
No recording attached; final visual and multi-session verification remains outstanding.
Checklist
Summary by cubic
Adds realtime comments and reactions to Feedback and Shelf Space detail views, so teammates can discuss without refreshing. Comments sync across open sessions via Upstash with optimistic updates, and the drawers now share an inset sheet with a retained detail during exit animations.
Migration
0093_discussion_commentsbefore deploying; it createsdiscussion_commentsanddiscussion_reactions.Refactors
Written for commit 64b0dcf. Summary will update on new commits.