4wswt4ex2: Add like and unlike for post cards

src/components/Feed.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
+import { applyLikeOutcome, LikeError, sendLike } from "@/lib/like-client";
 import { mergePosts, toCardPosts, type CardPost } from "@/lib/feed-model";
 import { FeedView, type FeedStatus } from "./FeedView";
 
@@ -14,6 +15,8 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
   const [loadingMore, setLoadingMore] = useState(false);
   const [loadMoreFailed, setLoadMoreFailed] = useState(false);
   const [pending, setPending] = useState<CardPost[]>([]);
+  const [likeBusy, setLikeBusy] = useState<ReadonlySet<string>>(new Set());
+  const [likeErrors, setLikeErrors] = useState<ReadonlySet<string>>(new Set());
   const sentinel = useRef<HTMLDivElement | null>(null);
   const busy = useRef(false);
   const shown = useRef<Set<string>>(new Set());
@@ -121,6 +124,31 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
     };
   }, [status, fail]);
 
+  const toggleLike = useCallback(
+    async (post: CardPost) => {
+      if (!post.id) return;
+      const wanted = !post.isLiked;
+      const mark = (set: ReadonlySet<string>, on: boolean) => {
+        const next = new Set(set);
+        if (on) next.add(post.key);
+        else next.delete(post.key);
+        return next;
+      };
+      setLikeBusy((s) => mark(s, true));
+      setLikeErrors((s) => mark(s, false));
+      try {
+        const out = await sendLike(post.id, wanted);
+        setPosts((cur) => cur.map((p) => (p.key === post.key ? applyLikeOutcome(p, wanted, out) : p)));
+      } catch (e) {
+        fail(e instanceof LikeError && e.signedOut ? new FeedLoadError(true) : e);
+        setLikeErrors((s) => mark(s, true));
+      } finally {
+        setLikeBusy((s) => mark(s, false));
+      }
+    },
+    [fail],
+  );
+
   function showNew() {
     setPosts((cur) => mergePosts(cur, pending));
     setPending([]);
@@ -136,6 +164,9 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
       newCount={pending.length}
       onRetry={() => (status === "error" ? void loadFirst() : void loadMore())}
       onShowNew={showNew}
+      onToggleLike={(p) => void toggleLike(p)}
+      likeBusy={likeBusy}
+      likeErrors={likeErrors}
       sentinelRef={sentinel}
     />
   );

src/components/FeedView.tsx

@@ -12,6 +12,9 @@ export interface FeedViewProps {
   newCount: number;
   onRetry: () => void;
   onShowNew: () => void;
+  onToggleLike?: (post: CardPost) => void;
+  likeBusy?: ReadonlySet<string>;
+  likeErrors?: ReadonlySet<string>;
   sentinelRef?: Ref<HTMLDivElement>;
   now?: number;
 }
@@ -50,7 +53,14 @@ export function FeedView(p: FeedViewProps) {
       {p.posts.length === 0 ? (
         <p className="feed-message">No posts yet.</p>
       ) : (
-        p.posts.map((post) => <PostCard key={post.key} post={post} now={p.now} />)
+        p.posts.map((post) => <PostCard
+            key={post.key}
+            post={post}
+            now={p.now}
+            onToggleLike={p.onToggleLike}
+            likeBusy={p.likeBusy?.has(post.key)}
+            likeError={p.likeErrors?.has(post.key)}
+          />)
       )}
       {p.loadMoreFailed ? (
         <div className="feed-message" role="alert">

src/components/PostCard.tsx

@@ -1,7 +1,25 @@
 import { VideoPlayer } from "@/components/VideoPlayer";
 import { initials, relativeTime, type CardPost } from "@/lib/feed-model";
 
-export function PostCard({ post, now }: { post: CardPost; now?: number }) {
+export interface PostCardProps {
+  post: CardPost;
+  now?: number;
+  onToggleLike?: (post: CardPost) => void;
+  likeBusy?: boolean;
+  likeError?: boolean;
+}
+
+function Heart({ filled }: { filled: boolean }) {
+  return (
+    <svg className="heart-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"
+      fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2"
+      strokeLinejoin="round">
+      <path d="M12 21s-7.5-4.6-9.6-9.3C.9 8.4 2.7 4.5 6.4 4.5c2.1 0 3.6 1.2 4.4 2.5.4.6 1.4.6 1.8 0 .8-1.3 2.3-2.5 4.4-2.5 3.7 0 5.5 3.9 4 7.2C19.5 16.4 12 21 12 21z" />
+    </svg>
+  );
+}
+
+export function PostCard({ post, now, onToggleLike, likeBusy, likeError }: PostCardProps) {
   return (
     <article className="post" data-testid="post-card">
       <header className="post-head">
@@ -32,10 +50,20 @@ export function PostCard({ post, now }: { post: CardPost; now?: number }) {
         ) : null,
       )}
       <footer className="post-stats">
-        <span aria-label={`${post.likesCount} likes`}>
-          <span className="heart" aria-hidden="true">&#9829;</span> {post.likesCount}
-        </span>
+        <button
+          type="button"
+          className={post.isLiked ? "like-btn liked" : "like-btn"}
+          aria-pressed={post.isLiked}
+          aria-label={post.isLiked ? `Unlike, ${post.likesCount} likes` : `Like, ${post.likesCount} likes`}
+          disabled={likeBusy || !post.id || !onToggleLike}
+          onClick={() => onToggleLike?.(post)}
+        >
+          <Heart filled={post.isLiked} /> <span className="like-count">{post.likesCount}</span>
+        </button>
         <span aria-label={`${post.commentsCount} comments`}>{post.commentsCount} comments</span>
+        {likeError ? (
+          <span className="like-error" role="alert">Could not update like.</span>
+        ) : null}
       </footer>
     </article>
   );