feat: add post like

2026-06-09 16:34:10 +05:30
parent e36afdd1a5
commit 647a803b96
8 changed files with 441 additions and 266 deletions
@@ -21,9 +21,10 @@
 * see the in-place auth modal before the underlying action runs.
 */

-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Loader2 } from "lucide-react";
 import {
+  HiHeart,
  HiOutlineArrowPath,
  HiOutlineChatBubbleOvalLeft,
  HiOutlineFolderPlus,
@@ -37,6 +38,7 @@ import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
+import { PostLikesDrawer } from "@/components/social/post-likes-drawer";
 import { useSharePost } from "./share-post-provider";

 // All icons come from the Heroicons v2 outline family (react-icons
@@ -60,6 +62,12 @@ export function PostActionsFooter({ post }: { post: Post }) {
  const [reshared, setReshared] = useState<boolean>(
    !!post.viewer_has_reshared,
  );
+  // Like state — seeded from the hydrated post, toggled optimistically and
+  // reconciled to the server's effective count on success.
+  const [liked, setLiked] = useState<boolean>(!!post.viewer_has_liked);
+  const [likeCount, setLikeCount] = useState<number>(post.likes_count ?? 0);
+  const [likesOpen, setLikesOpen] = useState(false);
+  const likeBusy = useRef(false);

  const isOwner = !!user && user.id === post.user_id;
  // Owners and resharers both see Send — the post is "on their account"
@@ -71,6 +79,32 @@ export function PostActionsFooter({ post }: { post: Post }) {
    await fn();
  }

+  // Like toggle — optimistic flip + count nudge, reconciled to the server's
+  // effective total (DB count + pending Redis delta) on success, rolled back
+  // on error. A ref guard ignores taps while a request is in flight.
+  async function onLikeToggle() {
+    if (likeBusy.current) return;
+    likeBusy.current = true;
+    const next = !liked;
+    setLiked(next);
+    setLikeCount((c) => Math.max(0, c + (next ? 1 : -1)));
+    try {
+      const res = next
+        ? await postsApi.like(post.id)
+        : await postsApi.unlike(post.id);
+      setLiked(res.liked);
+      setLikeCount(res.likes_count);
+    } catch (err) {
+      setLiked(!next);
+      setLikeCount((c) => Math.max(0, c + (next ? -1 : 1)));
+      const msg =
+        err instanceof SocialError ? err.message : "Could not update like";
+      toast.error(msg, { duration: 3000 });
+    } finally {
+      likeBusy.current = false;
+    }
+  }
+
  async function onReshare() {
    // Optimistic flip first so the UI feels instant; revert on error.
    setReshared(true);
@@ -105,14 +139,26 @@ export function PostActionsFooter({ post }: { post: Post }) {
      <div className="flex items-center justify-between px-2">
        <div className="flex items-center gap-1">
          <ActionButton
-            label="Like"
-            onClick={() =>
-              withAuth(() => {
-                toast("Likes are coming soon", { duration: 2000 });
-              })
+            label={liked ? "Unlike" : "Like"}
+            onClick={() => withAuth(onLikeToggle)}
+            icon={
+              liked ? (
+                <HiHeart className={cn(ICON_CLASS, "text-red-500")} />
+              ) : (
+                <HiOutlineHeart className={ICON_CLASS} />
+              )
            }
-            icon={<HiOutlineHeart className={ICON_CLASS} />}
          />
+          {likeCount > 0 ? (
+            <button
+              type="button"
+              onClick={() => setLikesOpen(true)}
+              aria-label={`${likeCount} ${likeCount === 1 ? "like" : "likes"}`}
+              className="-ml-1 mr-1 rounded px-1 text-sm font-medium tabular-nums text-muted-foreground transition-colors hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {likeCount}
+            </button>
+          ) : null}
          <ActionButton
            label="Comment"
            onClick={() =>
@@ -169,6 +215,11 @@ export function PostActionsFooter({ post }: { post: Post }) {
        isMobile={isMobile}
        existingPostId={post.id}
      />
+      <PostLikesDrawer
+        open={likesOpen}
+        postId={post.id}
+        onClose={() => setLikesOpen(false)}
+      />
      {/* SharePostSheet is mounted globally by SharePostProvider, so
          no per-card instance lives here. The provider's
          openShareSheet swaps the active post under the hood. */}
@@ -0,0 +1,29 @@
+"use client";
+
+/**
+ * PostLikesDrawer — the "liked by" list for a post. A thin wrapper over the
+ * generic virtualized UserListDrawer, wired to the post-likes endpoint.
+ */
+
+import { posts } from "@/lib/social";
+import { UserListDrawer } from "@/components/social/user-list-drawer";
+
+export function PostLikesDrawer({
+  open,
+  postId,
+  onClose,
+}: {
+  open: boolean;
+  postId: string;
+  onClose: () => void;
+}) {
+  return (
+    <UserListDrawer
+      open={open}
+      onClose={onClose}
+      title="Likes"
+      depsKey={`likes:${postId}`}
+      fetchPage={(params) => posts.likers(postId, params)}
+    />
+  );
+}
@@ -0,0 +1,274 @@
+"use client";
+
+/**
+ * UserListDrawer — a generic, virtualized, paginated, searchable list of
+ * users in a drawer (right on desktop, bottom sheet on mobile). Powers both
+ * the followers/following lists and the post "liked by" list.
+ *
+ * The caller supplies `fetchPage(params)` returning `{ users, total }` and a
+ * `depsKey` that changes when the data source changes (so the list reloads).
+ * Search is debounced and queries the backend across the full set. The list
+ * loads the next page as you scroll near the bottom.
+ *
+ * State-update notes (set-state-in-effect rule): the (re)load runs inside a
+ * debounce timer callback and pagination runs from the scroll handler — never
+ * synchronously inside an effect body.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Loader2, Search } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import type { FollowList, FollowListParams, UserSummary } from "@/lib/social";
+import { cn } from "@/lib/utils";
+
+const PAGE = 30;
+const ROW = 64; // px — fixed row height for the virtualizer
+
+export type FetchUserPage = (params: FollowListParams) => Promise<FollowList>;
+
+export function UserListDrawer({
+  open,
+  onClose,
+  title,
+  depsKey,
+  fetchPage,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  /** Changes when the data source changes (e.g. mode/handle or post id), to
+   *  trigger a fresh reload. */
+  depsKey: string;
+  fetchPage: FetchUserPage;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const direction = isMobile ? "bottom" : "right";
+
+  const [q, setQ] = useState("");
+  const [items, setItems] = useState<UserSummary[]>([]);
+  const [total, setTotal] = useState(0);
+  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
+
+  // reqRef tags the current query "session"; a newer reload bumps it so any
+  // in-flight reload/append for an older query is ignored on arrival.
+  const reqRef = useRef(0);
+  const busyRef = useRef(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // Latest fetchPage, read via ref so its (unstable) identity isn't an effect
+  // dep — the reload keys on `depsKey` instead.
+  const fetchRef = useRef(fetchPage);
+  fetchRef.current = fetchPage;
+
+  // (Re)load page 0 when the drawer opens or the source/query changes.
+  // Debounced so typing in search doesn't spam the backend.
+  useEffect(() => {
+    if (!open) return;
+    const t = window.setTimeout(() => {
+      const token = ++reqRef.current;
+      busyRef.current = true;
+      setItems([]);
+      setStatus("loading");
+      fetchRef
+        .current({ q, limit: PAGE, offset: 0 })
+        .then((res) => {
+          if (reqRef.current !== token) return;
+          setItems(res.users);
+          setTotal(res.total);
+          setStatus("idle");
+        })
+        .catch(() => {
+          if (reqRef.current === token) setStatus("error");
+        })
+        .finally(() => {
+          if (reqRef.current === token) busyRef.current = false;
+        });
+    }, 250);
+    return () => window.clearTimeout(t);
+  }, [open, depsKey, q]);
+
+  function loadMore() {
+    if (busyRef.current || items.length >= total) return;
+    const token = reqRef.current; // same session — don't bump
+    const offset = items.length;
+    busyRef.current = true;
+    setStatus("loading");
+    fetchRef
+      .current({ q, limit: PAGE, offset })
+      .then((res) => {
+        if (reqRef.current !== token) return;
+        setItems((prev) => [...prev, ...res.users]);
+        setTotal(res.total);
+        setStatus("idle");
+      })
+      .catch(() => {
+        if (reqRef.current === token) setStatus("error");
+      })
+      .finally(() => {
+        if (reqRef.current === token) busyRef.current = false;
+      });
+  }
+
+  // TanStack Virtual returns non-memoizable functions; the React Compiler
+  // simply skips memoizing this component, which is fine here.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW,
+    overscan: 8,
+  });
+
+  const empty = status !== "loading" && items.length === 0;
+
+  return (
+    <Drawer
+      open={open}
+      direction={direction}
+      onOpenChange={(o) => {
+        if (!o) onClose();
+      }}
+    >
+      <DrawerContent
+        direction={direction}
+        className={cn(
+          "bg-card flex flex-col",
+          isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
+        )}
+      >
+        <DrawerHeader className="border-b border-border text-left">
+          <DrawerTitle className="text-base">{title}</DrawerTitle>
+          <div className="relative mt-2">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <input
+              type="search"
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search"
+              autoComplete="off"
+              className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </div>
+        </DrawerHeader>
+
+        <div
+          ref={scrollRef}
+          onScroll={(e) => {
+            const el = e.currentTarget;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
+              loadMore();
+            }
+          }}
+          className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
+        >
+          {status === "error" ? (
+            <Message>Couldn&apos;t load. Please try again.</Message>
+          ) : empty ? (
+            <Message>{q.trim() ? "No matches." : "Nothing here yet."}</Message>
+          ) : (
+            <div
+              style={{
+                height: virtualizer.getTotalSize(),
+                position: "relative",
+                width: "100%",
+              }}
+            >
+              {virtualizer.getVirtualItems().map((vi) => {
+                const u = items[vi.index];
+                if (!u) return null;
+                return (
+                  <div
+                    key={vi.key}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: vi.size,
+                      transform: `translateY(${vi.start}px)`,
+                    }}
+                  >
+                    <Row user={u} onNavigate={onClose} />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {status === "loading" ? (
+            <div className="flex justify-center py-4">
+              <Loader2 className="size-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : null}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+function Row({
+  user,
+  onNavigate,
+}: {
+  user: UserSummary;
+  onNavigate: () => void;
+}) {
+  return (
+    <Link
+      href={`/u/${user.handle}`}
+      onClick={onNavigate}
+      className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
+    >
+      <RowAvatar src={user.avatar_url} name={user.name} />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-semibold text-foreground">
+          {user.name}
+        </p>
+        <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
+      </div>
+    </Link>
+  );
+}
+
+function RowAvatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={40}
+        height={40}
+        className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
+      {initials}
+    </div>
+  );
+}
+
+function Message({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="px-4 py-10 text-center text-sm text-muted-foreground">
+      {children}
+    </p>
+  );
+}