You're an engineer on the CoderX social team. Your teammate opened a PR adding a Tweet component to the home feed widget, but QA has filed two tickets against it:
- The like button doesn't work. Clicking "Like" does nothing — the count stays put and the button never shows an active state.
- Un-retweeting sends the count off a cliff. Retweeting then un-retweeting a post ends with a retweet count that keeps shrinking — QA watched the counter keep going down as they toggled it on and off.
Your job: dig through the codebase, implement the missing like logic, and fix the retweet counting bug so the widget behaves correctly.
The module layout mirrors a real feature repo — open everything before you change anything:
src/data/mockTweet.js — the in-memory tweet data (no API or backend; it's all local).src/hooks/useLike.js — owns the liked / likeCount state. toggleLike is an unimplemented stub — this is the main piece you need to write.src/hooks/useRetweet.js — owns the retweeted / retweetCount state. Contains the retweet counting bug QA found — read it and fix it.src/components/TweetActions.jsx — renders the Reply / Retweet / Like buttons with their counts and active-state styling. Already wired to the hook callbacks.src/components/Tweet.jsx — the tweet card: author, handle, content, and the actions row.src/App.jsx — renders the feed page shell.
When everything is fixed, the component must behave like this:
- The card renders the author name, handle, and content, plus the initial reply / retweet / like counts from the mock data.
- Clicking Like increments the like count by 1 and marks the button as liked (
aria-pressed="true" + is-active class).
- Clicking Like again un-likes the tweet: the count decrements back by 1 (never below 0), and the active/liked state clears.
- Clicking Retweet increments the retweet count by 1 and marks the button as retweeted; clicking it again un-retweets and decrements back by exactly 1 — never 2, and never below 0.
- Counts must never go below 0, no matter how many times an action is toggled on and off.
- The buttons'
aria-pressed / is-active state always matches the current liked / retweeted status.
All six behaviors are exercised by the hidden test suite — make them all pass.
Notes
- Don't rename files, exported functions,
data-testids (tweet-author-name, tweet-author-handle, tweet-content, reply-count, retweet-count, like-count, like-button, retweet-button), the is-active class, or aria-pressed — the tests locate everything through them.
TweetActions.jsx, Tweet.jsx, and mockTweet.js are correct — the defect lives in the hooks. Trace the like click from the button through Tweet.jsx into useLike.js, and double-check the retweet arithmetic in useRetweet.js.- Styling is intentionally minimal; only behavior matters for passing the tests.