refactor(code-review): extract comment file filtering

Generated-By: PostHog Code
Task-Id: 199c1147-fca6-415b-9ea1-00a45d9b7267

Author: MattPua

packages/ui/src/features/code-review/commentFileFilter.ts

@@ -0,0 +1,123 @@
+import type { PrCommentThread } from "@posthog/core/code-review/types";
+import type { ReactNode } from "react";
+
+export type CommentFileFilter = "none" | "commented" | "unresolved";
+
+export interface ReviewListItem {
+  key: string;
+  scrollKey?: string;
+  filePaths?: string[];
+  node: ReactNode;
+}
+
+interface CommentFileFilterState {
+  activeFilter: CommentFileFilter;
+  visibleItems: ReviewListItem[];
+  commentedFileCount: number;
+  unresolvedCommentedFileCount: number;
+}
+
+interface DeriveCommentFileFilterStateArgs {
+  items: ReviewListItem[];
+  requestedFilter: CommentFileFilter;
+  commentedFilePaths?: ReadonlySet<string>;
+  unresolvedCommentedFilePaths?: ReadonlySet<string>;
+}
+
+export function getCommentedFilePaths(threads: Map<number, PrCommentThread>): {
+  all: Set<string>;
+  unresolved: Set<string>;
+} {
+  const all = new Set<string>();
+  const unresolved = new Set<string>();
+
+  for (const thread of threads.values()) {
+    if (thread.comments.length === 0) continue;
+    all.add(thread.filePath);
+    if (!thread.isResolved) unresolved.add(thread.filePath);
+  }
+
+  return { all, unresolved };
+}
+
+export function filterReviewItemsByFilePaths(
+  items: ReviewListItem[],
+  filePaths: ReadonlySet<string>,
+): ReviewListItem[] {
+  const filteredItems: ReviewListItem[] = [];
+  let pendingSectionItems: ReviewListItem[] = [];
+
+  for (const item of items) {
+    if (!item.filePaths) {
+      pendingSectionItems = [item];
+      continue;
+    }
+
+    if (!item.filePaths.some((filePath) => filePaths.has(filePath))) continue;
+
+    filteredItems.push(...pendingSectionItems, item);
+    pendingSectionItems = [];
+  }
+
+  return filteredItems;
+}
+
+export function deriveCommentFileFilterState({
+  items,
+  requestedFilter,
+  commentedFilePaths,
+  unresolvedCommentedFilePaths,
+}: DeriveCommentFileFilterStateArgs): CommentFileFilterState {
+  if (!commentedFilePaths || !unresolvedCommentedFilePaths) {
+    return {
+      activeFilter: "none",
+      visibleItems: items,
+      commentedFileCount: 0,
+      unresolvedCommentedFileCount: 0,
+    };
+  }
+
+  const commentedItems = filterReviewItemsByFilePaths(
+    items,
+    commentedFilePaths,
+  );
+  const unresolvedCommentedItems = filterReviewItemsByFilePaths(
+    items,
+    unresolvedCommentedFilePaths,
+  );
+
+  let visibleItems: ReviewListItem[];
+  switch (requestedFilter) {
+    case "commented":
+      visibleItems = commentedItems;
+      break;
+    case "unresolved":
+      visibleItems = unresolvedCommentedItems;
+      break;
+    case "none":
+      visibleItems = items;
+      break;
+  }
+
+  return {
+    activeFilter: requestedFilter,
+    visibleItems,
+    commentedFileCount: commentedItems.filter((item) => item.filePaths).length,
+    unresolvedCommentedFileCount: unresolvedCommentedItems.filter(
+      (item) => item.filePaths,
+    ).length,
+  };
+}
+
+export function getEmptyReviewMessage(
+  commentFilter: CommentFileFilter,
+): string {
+  switch (commentFilter) {
+    case "commented":
+      return "No files with comments";
+    case "unresolved":
+      return "No files with unresolved comments";
+    case "none":
+      return "No file changes to review";
+  }
+}

packages/ui/src/features/code-review/components/CloudReviewPage.tsx

@@ -7,15 +7,13 @@ import { useMemo } from "react";
 import { useDiffViewerStore } from "../../code-editor/diffViewerStore";
 import { usePrDetails } from "../../git-interaction/usePrDetails";
 import { useCloudChangedFiles } from "../../task-detail/hooks/useCloudChangedFiles";
-import { useReviewNavigationStore } from "../reviewNavigationStore";
-import { PatchedFileDiff } from "./PatchedFileDiff";
 import {
-  buildItemIndex,
   getCommentedFilePaths,
   type ReviewListItem,
-  ReviewShell,
-  useReviewState,
-} from "./ReviewShell";
+} from "../commentFileFilter";
+import { useReviewNavigationStore } from "../reviewNavigationStore";
+import { PatchedFileDiff } from "./PatchedFileDiff";
+import { buildItemIndex, ReviewShell, useReviewState } from "./ReviewShell";
 import { changedFileSignature } from "./reviewItemBuilders";
 
 interface CloudReviewPageProps {

packages/ui/src/features/code-review/components/DiffSettingsMenu.tsx

@@ -13,8 +13,7 @@ import {
   DropdownMenuTrigger,
 } from "@posthog/quill";
 import { useDiffViewerStore } from "@posthog/ui/features/code-editor/diffViewerStore";
-
-export type CommentFileFilter = "none" | "commented" | "unresolved";
+import type { CommentFileFilter } from "../commentFileFilter";
 
 interface DiffSettingsMenuProps {
   commentedFileCount: number;

packages/ui/src/features/code-review/components/ReviewPage.tsx

@@ -18,18 +18,16 @@ import { useCwd } from "../../sidebar/useCwd";
 import { useDiscardAllChanges } from "../../task-detail/hooks/useDiscardAllChanges";
 import { useDiscardFile } from "../../task-detail/hooks/useDiscardFile";
 import { useStageToggle } from "../../task-detail/hooks/useStageToggle";
+import {
+  getCommentedFilePaths,
+  type ReviewListItem,
+} from "../commentFileFilter";
 import { REVIEW_FILE_CACHE_TIME_MS, REVIEW_MAX_FILE_LINES } from "../constants";
 import { useEffectiveDiffSource } from "../hooks/useEffectiveDiffSource";
 import { useReviewDiffs } from "../hooks/useReviewDiffs";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import type { DiffOptions } from "../types";
-import {
-  buildItemIndex,
-  getCommentedFilePaths,
-  type ReviewListItem,
-  ReviewShell,
-  useReviewState,
-} from "./ReviewShell";
+import { buildItemIndex, ReviewShell, useReviewState } from "./ReviewShell";
 import {
   buildPatchReviewItems,
   buildRemoteReviewItems,

packages/ui/src/features/code-review/components/ReviewShell.tsx

@@ -14,24 +14,28 @@ import {
   useState,
 } from "react";
 import { VList, type VListHandle } from "virtua";
+import {
+  type CommentFileFilter,
+  deriveCommentFileFilterState,
+  getEmptyReviewMessage,
+  type ReviewListItem,
+} from "../commentFileFilter";
 import {
   REVIEW_LIST_BUFFER_PX,
   REVIEW_LIST_ESTIMATED_ITEM_SIZE,
 } from "../constants";
 import { useReviewDraftsStore } from "../reviewDraftsStore";
 import { REVIEW_HOST, type ReviewHost } from "../reviewHost";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
-import type { ReviewListItem, ReviewShellProps } from "../reviewShellParts";
+import type { ReviewShellProps } from "../reviewShellParts";
 import {
   buildItemIndex,
-  filterReviewItemsByFilePaths,
   findActiveScrollKey,
   findRenderedScrollAnchor,
   isFileViewed,
 } from "../reviewShellParts";
 import { ReviewViewedContext } from "../reviewViewedContext";
 import { useReviewViewedStore } from "../reviewViewedStore";
-import type { CommentFileFilter } from "./DiffSettingsMenu";
 import { PendingReviewBar } from "./PendingReviewBar";
 import { ReviewToolbar } from "./ReviewToolbar";
 
@@ -45,17 +49,6 @@ const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_MAX_WIDTH = 500;
 const SIDEBAR_DEFAULT_WIDTH = 280;
 
-function getEmptyReviewMessage(commentFilter: CommentFileFilter): string {
-  switch (commentFilter) {
-    case "commented":
-      return "No files with comments";
-    case "unresolved":
-      return "No files with unresolved comments";
-    case "none":
-      return "No file changes to review";
-  }
-}
-
 function ExpandedSidebar({ task }: { task: Task }) {
   const reviewHost = useService<ReviewHost>(REVIEW_HOST);
   const [width, setWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
@@ -159,41 +152,25 @@ export function ReviewShell({
   const pendingNavigationRef = useRef<string | null>(null);
   const navigationFrameRef = useRef<number | null>(null);
   const [commentFilter, setCommentFilter] = useState<CommentFileFilter>("none");
-  const activeCommentFilter =
-    commentedFilePaths && unresolvedCommentedFilePaths ? commentFilter : "none";
-
-  const commentedItems = useMemo(
+  const {
+    activeFilter: activeCommentFilter,
+    visibleItems,
+    commentedFileCount,
+    unresolvedCommentedFileCount,
+  } = useMemo(
     () =>
-      commentedFilePaths
-        ? filterReviewItemsByFilePaths(items, commentedFilePaths)
-        : [],
-    [commentedFilePaths, items],
+      deriveCommentFileFilterState({
+        items,
+        requestedFilter: commentFilter,
+        commentedFilePaths,
+        unresolvedCommentedFilePaths,
+      }),
+    [commentFilter, commentedFilePaths, items, unresolvedCommentedFilePaths],
   );
-  const unresolvedCommentedItems = useMemo(
-    () =>
-      unresolvedCommentedFilePaths
-        ? filterReviewItemsByFilePaths(items, unresolvedCommentedFilePaths)
-        : [],
-    [items, unresolvedCommentedFilePaths],
-  );
-  const visibleItems =
-    activeCommentFilter === "commented"
-      ? commentedItems
-      : activeCommentFilter === "unresolved"
-        ? unresolvedCommentedItems
-        : items;
   const visibleItemIndexByFilePath = useMemo(
     () => buildItemIndex(visibleItems),
     [visibleItems],
   );
-  const commentedFileCount = useMemo(
-    () => commentedItems.filter((item) => item.filePaths).length,
-    [commentedItems],
-  );
-  const unresolvedCommentedFileCount = useMemo(
-    () => unresolvedCommentedItems.filter((item) => item.filePaths).length,
-    [unresolvedCommentedItems],
-  );
 
   const workerFactory = useCallback(
     () => reviewHost.diffWorkerFactory(),

packages/ui/src/features/code-review/components/ReviewToolbar.tsx

@@ -16,7 +16,8 @@ import { Tooltip } from "@posthog/ui/primitives/Tooltip";
 import { Flex, Separator, Text } from "@radix-ui/themes";
 import { FoldVertical, Maximize, Minimize, UnfoldVertical } from "lucide-react";
 import { memo } from "react";
-import { type CommentFileFilter, DiffSettingsMenu } from "./DiffSettingsMenu";
+import type { CommentFileFilter } from "../commentFileFilter";
+import { DiffSettingsMenu } from "./DiffSettingsMenu";
 import { DiffSourceSelector } from "./DiffSourceSelector";
 
 interface ReviewToolbarProps {

packages/ui/src/features/code-review/components/reviewItemBuilders.tsx

@@ -7,7 +7,7 @@ import {
 import type { PrCommentThread } from "@posthog/core/code-review/types";
 import type { ChangedFile } from "@posthog/shared/domain-types";
 import { makeFileKey } from "../../git-interaction/utils/fileKey";
-import type { ReviewListItem } from "../reviewShellParts";
+import type { ReviewListItem } from "../commentFileFilter";
 import type { DiffOptions } from "../types";
 import { PatchRow, RemoteRow, UntrackedRow } from "./ReviewRows";
 

packages/ui/src/features/code-review/reviewShellParts.test.tsx

@@ -14,14 +14,17 @@ vi.mock("../../primitives/FileIcon", () => ({
   FileIcon: () => <span data-testid="file-icon" />,
 }));
 
+import {
+  deriveCommentFileFilterState,
+  filterReviewItemsByFilePaths,
+  getCommentedFilePaths,
+  type ReviewListItem,
+} from "./commentFileFilter";
 import {
   DeferredDiffPlaceholder,
   DiffFileHeader,
-  filterReviewItemsByFilePaths,
   findActiveScrollKey,
   findRenderedScrollAnchor,
-  getCommentedFilePaths,
-  type ReviewListItem,
 } from "./reviewShellParts";
 
 type FileDiffMetadata = import("@pierre/diffs/react").FileDiffMetadata;
@@ -257,4 +260,24 @@ describe("commented file filtering", () => {
       ),
     ).toEqual(["section:changes", "unstaged:b.ts"]);
   });
+
+  it("derives visible items and counts for the selected filter", () => {
+    const items: ReviewListItem[] = [
+      { key: "a.ts", filePaths: ["a.ts"], node: <span>A</span> },
+      { key: "b.ts", filePaths: ["b.ts"], node: <span>B</span> },
+      { key: "c.ts", filePaths: ["c.ts"], node: <span>C</span> },
+    ];
+
+    const state = deriveCommentFileFilterState({
+      items,
+      requestedFilter: "unresolved",
+      commentedFilePaths: new Set(["a.ts", "b.ts"]),
+      unresolvedCommentedFilePaths: new Set(["b.ts"]),
+    });
+
+    expect(state.activeFilter).toBe("unresolved");
+    expect(state.visibleItems.map((item) => item.key)).toEqual(["b.ts"]);
+    expect(state.commentedFileCount).toBe(2);
+    expect(state.unresolvedCommentedFileCount).toBe(1);
+  });
 });