recoil to jotai migration 13/n - review threads and comments

Summary:
Continue the Recoil to Jotai migration by moving review thread and comment-related atoms. This allows components that render inline PR comments and review threads to use the simpler Jotai API.

The gitHubPullRequestReviewThreads selector remains in Recoil because it's still consumed by gitHubPullRequestThreadsByCommit and gitHubPullRequestThreadsForCommit, which are used by components not yet migrated.

Differential Revision: D92244729

fbshipit-source-id: 7484ba3508288d2fc606579749d20163a3b54ddc

Author: bherila

eden/contrib/reviewstack/src/PullRequestReviewComment.tsx

@@ -9,9 +9,9 @@ import type {ID, GitObject} from './github/types';
 
 import PullRequestReviewCommentLineNumber from './PullRequestReviewCommentLineNumber';
 import TrustedRenderedMarkdown from './TrustedRenderedMarkdown';
-import {gitHubPullRequestCommentForID} from './recoil';
+import {gitHubPullRequestCommentForIDAtom} from './jotai';
 import {Box} from '@primer/react';
-import {useRecoilValue} from 'recoil';
+import {useAtomValue} from 'jotai';
 
 type Props = {
   comment: {
@@ -23,7 +23,7 @@ type Props = {
 };
 
 export default function PullRequestReviewComment({comment}: Props): React.ReactElement {
-  const reviewComment = useRecoilValue(gitHubPullRequestCommentForID(comment.id));
+  const reviewComment = useAtomValue(gitHubPullRequestCommentForIDAtom(comment.id));
   const commentID = comment.id;
   const commit = comment.originalCommit?.oid;
   const lineNumber = reviewComment?.originalLine;

eden/contrib/reviewstack/src/PullRequestTimeline.tsx

@@ -26,8 +26,11 @@ import CommitLink from './CommitLink';
 import PendingLabel from './PendingLabel';
 import PullRequestReviewComment from './PullRequestReviewComment';
 import TrustedRenderedMarkdown from './TrustedRenderedMarkdown';
-import {gitHubOrgAndRepoAtom, gitHubPullRequestAtom} from './jotai';
-import {gitHubPullRequestReviewThreadsByFirstCommentID} from './recoil';
+import {
+  gitHubOrgAndRepoAtom,
+  gitHubPullRequestAtom,
+  gitHubPullRequestReviewThreadsByFirstCommentIDAtom,
+} from './jotai';
 import {
   CheckCircleFillIcon,
   FileDiffIcon,
@@ -37,7 +40,6 @@ import {
 import {Box, StyledOcticon, Text} from '@primer/react';
 import {useAtomValue} from 'jotai';
 import React, {Suspense} from 'react';
-import {useRecoilValue} from 'recoil';
 import {notEmpty} from 'shared/utils';
 
 export default function PullRequestTimeline(): React.ReactElement {
@@ -135,7 +137,7 @@ function TimelineBasicEvent(props: {children?: React.ReactNode}): React.ReactEle
 }
 
 function PullRequestReview({item}: {item: PullRequestReviewItem}): React.ReactElement {
-  const threadMap = useRecoilValue(gitHubPullRequestReviewThreadsByFirstCommentID);
+  const threadMap = useAtomValue(gitHubPullRequestReviewThreadsByFirstCommentIDAtom);
   const comments = (item.comments.nodes ?? []).filter(notEmpty).flatMap((comment, index) => {
     // Check and see whether the first comment in the PullRequestReview corresponds
     // to a thread. If so, the comments in the thread are not available as

eden/contrib/reviewstack/src/PullRequestTimelineCommentInput.tsx

@@ -8,16 +8,14 @@
 import PullRequestCommentInput from './PullRequestCommentInput';
 import PullRequestReviewSelector from './PullRequestReviewSelector';
 import {PullRequestReviewEvent} from './generated/graphql';
-import {gitHubClientAtom, gitHubPullRequestAtom} from './jotai';
-import {gitHubPullRequestPendingReviewID} from './recoil';
+import {gitHubClientAtom, gitHubPullRequestAtom, gitHubPullRequestPendingReviewIDAtom} from './jotai';
 import useRefreshPullRequest from './useRefreshPullRequest';
 import {useAtomValue} from 'jotai';
 import {loadable} from 'jotai/utils';
 import {useCallback, useMemo, useState} from 'react';
-import {useRecoilValue} from 'recoil';
 
 export default function PullRequestTimelineCommentInput(): React.ReactElement {
-  const pendingReviewID = useRecoilValue(gitHubPullRequestPendingReviewID);
+  const pendingReviewID = useAtomValue(gitHubPullRequestPendingReviewIDAtom);
   const refreshPullRequest = useRefreshPullRequest();
   const pullRequest = useAtomValue(gitHubPullRequestAtom);
   const [event, setEvent] = useState(PullRequestReviewEvent.Comment);

eden/contrib/reviewstack/src/PullRequestVersionCommitSelector.tsx

@@ -8,13 +8,14 @@
 import type {GitObjectID, VersionCommit} from './github/types';
 
 import PullRequestVersionCommitSelectorItem from './PullRequestVersionCommitSelectorItem';
-import {gitHubPullRequestComparableVersionsAtom} from './jotai';
-import {gitHubPullRequestSelectedVersionCommits} from './recoil';
+import {
+  gitHubPullRequestComparableVersionsAtom,
+  gitHubPullRequestSelectedVersionCommitsAtom,
+} from './jotai';
 import {shortOid} from './utils';
 import {ActionList, ActionMenu} from '@primer/react';
 import {useAtomValue} from 'jotai';
 import React from 'react';
-import {useRecoilValue} from 'recoil';
 import {notEmpty} from 'shared/utils';
 
 type Props = {
@@ -32,7 +33,7 @@ export default React.memo(function PullRequestVersionCommitSelector({
     beforeCommitID: null,
     afterCommitID: '',
   };
-  const commits = useRecoilValue(gitHubPullRequestSelectedVersionCommits);
+  const commits = useAtomValue(gitHubPullRequestSelectedVersionCommitsAtom);
   const beforeIndex = getIndex(beforeCommitID, commits, -1);
   const afterIndex = getIndex(afterCommitID, commits, commits.length - 1);
 

eden/contrib/reviewstack/src/jotai/atoms.ts

@@ -20,7 +20,11 @@ import type {
 } from '../generated/graphql';
 import type GitHubClient from '../github/GitHubClient';
 import type {DiffCommitIDs, DiffWithCommitIDs} from '../github/diffTypes';
-import type {GitHubPullRequestReviewThread, PullRequest} from '../github/pullRequestTimelineTypes';
+import type {
+  GitHubPullRequestReviewThread,
+  PullRequest,
+  PullRequestReviewComment,
+} from '../github/pullRequestTimelineTypes';
 import type {PullsQueryInput, PullsWithPageInfo} from '../github/pullsTypes';
 import type {Blob, Commit, DateTime, GitObjectID, ID, Version, VersionCommit} from '../github/types';
 
@@ -706,6 +710,118 @@ export const gitHubPullRequestsAtom = atomFamily(
   },
 );
 
+// =============================================================================
+// Pull Request Pending Review ID
+// =============================================================================
+
+/**
+ * Migrated from: gitHubPullRequestPendingReviewID selector in recoil.ts
+ *
+ * A PR should have at most a single pending review per user. Any inline
+ * comments made will either create a new pending review or be added to the
+ * existing one.
+ */
+export const gitHubPullRequestPendingReviewIDAtom = atom<ID | null>(get => {
+  const pullRequest = get(gitHubPullRequestAtom);
+  const pendingReview = (pullRequest?.timelineItems?.nodes ?? []).find(
+    item => item?.__typename === 'PullRequestReview' && item.state === 'PENDING',
+  );
+  return (pendingReview as {id: ID} | undefined)?.id ?? null;
+});
+
+// =============================================================================
+// Pull Request Review Threads
+// =============================================================================
+
+/**
+ * Migrated from: gitHubPullRequestReviewThreads selector in recoil.ts
+ *
+ * Extracts and normalizes review threads from the pull request.
+ */
+export const gitHubPullRequestReviewThreadsAtom = atom<GitHubPullRequestReviewThread[]>(get => {
+  const pullRequest = get(gitHubPullRequestAtom);
+  return (pullRequest?.reviewThreads.nodes ?? []).filter(notEmpty).map(reviewThread => {
+    const {originalLine, diffSide, comments} = reviewThread;
+    const normalizedComments = (comments?.nodes ?? [])
+      .map(comment => {
+        if (comment == null) {
+          return null;
+        }
+
+        const {id, author, originalCommit, path, state, bodyHTML} = comment;
+        const reviewThreadComment = {
+          id,
+          author: author ?? null,
+          originalCommit,
+          path,
+          state,
+          bodyHTML,
+        };
+        return reviewThreadComment;
+      })
+      .filter(notEmpty);
+    const firstCommentID = normalizedComments[0].id;
+    return {
+      firstCommentID,
+      originalLine,
+      diffSide,
+      comments: normalizedComments,
+    };
+  });
+});
+
+/**
+ * Migrated from: gitHubPullRequestReviewThreadsByFirstCommentID selector in recoil.ts
+ *
+ * Returns review threads indexed by the ID of their first comment.
+ * Used to look up thread information when rendering inline comments.
+ */
+export const gitHubPullRequestReviewThreadsByFirstCommentIDAtom = atom<{
+  [id: ID]: GitHubPullRequestReviewThread;
+}>(get => {
+  return Object.fromEntries(
+    get(gitHubPullRequestReviewThreadsAtom).map(thread => [thread.firstCommentID, thread]),
+  );
+});
+
+// =============================================================================
+// Pull Request Comment Lookup
+// =============================================================================
+
+// Note: PullRequestReviewComment type is imported from pullRequestTimelineTypes.ts
+
+/**
+ * Internal atom that indexes all review comments by their ID.
+ */
+const gitHubPullRequestReviewCommentsByIDAtom = atom<Map<ID, PullRequestReviewComment>>(get => {
+  const reviewThreads = get(gitHubPullRequestReviewThreadsAtom);
+  const commentsByID = new Map<ID, PullRequestReviewComment>();
+  reviewThreads.forEach(({originalLine, comments}) => {
+    comments.forEach(comment => {
+      const {id} = comment;
+      if (id != null) {
+        commentsByID.set(id, {originalLine, comment});
+      }
+    });
+  });
+  return commentsByID;
+});
+
+/**
+ * Migrated from: gitHubPullRequestCommentForID selectorFamily in recoil.ts
+ *
+ * Looks up a review comment by its ID. Returns the comment with its
+ * original line number for display purposes.
+ */
+export const gitHubPullRequestCommentForIDAtom = atomFamily(
+  (id: ID) =>
+    atom<PullRequestReviewComment | null>(get => {
+      const commentsByID = get(gitHubPullRequestReviewCommentsByIDAtom);
+      return commentsByID.get(id) ?? null;
+    }),
+  (a, b) => a === b,
+);
+
 // =============================================================================
 // GitHub Blob
 // =============================================================================

eden/contrib/reviewstack/src/jotai/index.ts

@@ -41,6 +41,10 @@ export {
   gitHubThreadsForDiffFileAtom,
   gitHubPullRequestLineToPositionForFileAtom,
   gitHubPullRequestCheckRunsAtom,
+  gitHubPullRequestPendingReviewIDAtom,
+  gitHubPullRequestReviewThreadsAtom,
+  gitHubPullRequestReviewThreadsByFirstCommentIDAtom,
+  gitHubPullRequestCommentForIDAtom,
 } from './atoms';
 
 export type {

eden/contrib/reviewstack/src/recoil.ts

@@ -10,8 +10,6 @@ import type {CommitChange, DiffWithCommitIDs} from './github/diffTypes';
 import type {
   CommitData,
   PullRequestCommitItem,
-  PullRequestReviewComment,
-  PullRequestReviewItem,
   GitHubPullRequestReviewThread,
   PullRequest,
 } from './github/pullRequestTimelineTypes';
@@ -22,15 +20,14 @@ import type {
   DateTime,
   ForcePushEvent,
   GitObjectID,
-  ID,
   Version,
   VersionCommit,
 } from './github/types';
 import type {LineToPosition} from './lineToPosition';
 import type {RecoilValueReadOnly} from 'recoil';
 
 import {lineToPosition} from './diffServiceClient';
-import {DiffSide, PullRequestReviewState} from './generated/graphql';
+import {DiffSide} from './generated/graphql';
 import CachingGitHubClient, {openDatabase} from './github/CachingGitHubClient';
 import GraphQLGitHubClient from './github/GraphQLGitHubClient';
 import {diffCommits, diffCommitWithParent} from './github/diff';
@@ -137,22 +134,8 @@ export const gitHubPullRequestBaseRef = selector<GitObjectID | null>({
   },
 });
 
-/**
- * A PR should have at most a single pending review per user. Any inline
- * comments made will either create a new pending review or be added to the
- * existing one.
- */
-export const gitHubPullRequestPendingReviewID = selector<ID | null>({
-  key: 'gitHubPullRequestPendingReviewID',
-  get: ({get}) => {
-    const pullRequest = get(gitHubPullRequest);
-    const pendingReview = (pullRequest?.timelineItems?.nodes ?? []).find(
-      item =>
-        item?.__typename === 'PullRequestReview' && item.state === PullRequestReviewState.Pending,
-    ) as PullRequestReviewItem;
-    return pendingReview?.id ?? null;
-  },
-});
+// NOTE: gitHubPullRequestPendingReviewID has been migrated to Jotai.
+// See gitHubPullRequestPendingReviewIDAtom in jotai/atoms.ts
 
 export const gitHubPullRequestCommits = selector<CommitData[]>({
   key: 'gitHubPullRequestCommits',
@@ -472,43 +455,11 @@ export const gitHubPullRequestReviewThreads = selector<GitHubPullRequestReviewTh
   },
 });
 
-export const gitHubPullRequestReviewThreadsByFirstCommentID = selector<{
-  [id: ID]: GitHubPullRequestReviewThread;
-}>({
-  key: 'gitHubPullRequestReviewThreadsByFirstCommentID',
-  get: ({get}) => {
-    return Object.fromEntries(
-      get(gitHubPullRequestReviewThreads).map(thread => [thread.firstCommentID, thread]),
-    );
-  },
-});
-
-const gitHubPullRequestReviewCommentsByID = selector<Map<ID, PullRequestReviewComment>>({
-  key: 'gitHubPullRequestReviewCommentsByID',
-  get: ({get}) => {
-    const reviewThreads = get(gitHubPullRequestReviewThreads);
-    const commentsByID = new Map();
-    reviewThreads.forEach(({originalLine, comments}) => {
-      comments.forEach(comment => {
-        const {id} = comment;
-        if (id != null) {
-          commentsByID.set(id, {originalLine, comment});
-        }
-      });
-    });
-    return commentsByID;
-  },
-});
+// NOTE: gitHubPullRequestReviewThreadsByFirstCommentID has been migrated to Jotai.
+// See gitHubPullRequestReviewThreadsByFirstCommentIDAtom in jotai/atoms.ts
 
-export const gitHubPullRequestCommentForID = selectorFamily<PullRequestReviewComment | null, ID>({
-  key: 'gitHubPullRequestCommentForID',
-  get:
-    id =>
-    ({get}) => {
-      const commentsByID = get(gitHubPullRequestReviewCommentsByID);
-      return commentsByID.get(id) ?? null;
-    },
-});
+// NOTE: gitHubPullRequestCommentForID has been migrated to Jotai.
+// See gitHubPullRequestCommentForIDAtom in jotai/atoms.ts
 
 export const gitHubPullRequestNewCommentInputCell = atom<{
   lineNumber: number;
@@ -855,15 +806,8 @@ export const gitHubPullRequestComparableVersions = atom<ComparableVersions>({
   }),
 });
 
-export const gitHubPullRequestSelectedVersionCommits = selector<VersionCommit[]>({
-  key: 'gitHubPullRequestSelectedVersionCommits',
-  get: ({get}) => {
-    const [versions, selectedVersionIndex] = get(
-      waitForAll([gitHubPullRequestVersions, gitHubPullRequestSelectedVersionIndex]),
-    );
-    return versions[selectedVersionIndex]?.commits ?? [];
-  },
-});
+// NOTE: gitHubPullRequestSelectedVersionCommits has been migrated to Jotai.
+// See gitHubPullRequestSelectedVersionCommitsAtom in jotai/atoms.ts
 
 // NOTE: gitHubPullRequestVersionDiff has been migrated to Jotai.
 // See gitHubPullRequestVersionDiffAtom in jotai/atoms.ts