feat(UI): complete Mr Reviewer feature (#1509)

* feat(UI): update reviewer hooks

* feat(UI): complete Mr Reviewer feature

* feat(UI): complete Mr Reviewer feature

Author: yumeowo

moon/apps/web/components/Issues/IssueDetailPage.tsx

@@ -25,6 +25,7 @@ import { usePostIssueLabels } from '@/hooks/usePostIssueLabels'
 import { useUploadHelpers } from '@/hooks/useUploadHelpers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
 import { trimHtml } from '@/utils/trimHtml'
+import { CommonDetailData } from '@/utils/types'
 
 import { MemberAvatar } from '../MemberAvatar'
 import TimelineItems from '../MrView/TimelineItems'
@@ -316,7 +317,7 @@ export default function IssueDetailPage({ link }: { link: string }) {
                     <LoadingSpinner />
                   </div>
                 ) : (
-                  <TimelineItems detail={issueDetail} id={link} type='issue' editorRef={editorRef} />
+                  <TimelineItems detail={issueDetail as CommonDetailData} id={link} type='issue' editorRef={editorRef} />
                 )}
 
                 {info && info.status === 'open' && (

moon/apps/web/components/MrBox/ChecksSection.tsx

@@ -201,7 +201,7 @@ export function ChecksSection({ checks, onStatusChange, additionalChecks }: Chec
           />
         </Collapsible.Trigger>
 
-        {/* CheckList 部分 */ }
+        {/* CheckList & AdditionalChecks 部分 */ }
         <Collapsible.Content>
           <CheckList groupedChecks={ groupedChecks }/>
           <AdditionalChecksSection additionalChecks={ additionalChecks || [] }/>

moon/apps/web/components/MrBox/MergeBox.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useMergeChecks } from './hooks/useMergeChecks';
 import { ReviewerSection } from './ReviewerSection';
 import { ChecksSection } from './ChecksSection';
@@ -7,16 +7,39 @@ import { FeedMergedIcon } from "@primer/octicons-react";
 import { usePostMrMerge } from "@/hooks/usePostMrMerge";
 import { useGetMergeBox } from "@/components/MrBox/hooks/useGetMergeBox";
 import { LoadingSpinner } from "@gitmono/ui";
-
-const REQUIRED_REVIEWERS = 2; // 假设需要2个 reviewer
+import { usePostMrReviewerApprove } from "@/hooks/usePostMrReviewerApprove";
+import { useRouter } from "next/router";
+import { useGetMrReviewers } from "@/hooks/useGetMrReviewers";
+import { useQueryClient } from '@tanstack/react-query';
+import { legacyApiClient } from '@/utils/queryClient';
+import { useGetCurrentUser } from "@/hooks/useGetCurrentUser";
 
 export function MergeBox({ prId }: { prId: string }) {
   const { checks, refresh } = useMergeChecks(prId);
-  const [isReviewerApproved, setIsReviewerApproved] = useState(false);
   const [hasCheckFailures, setHasCheckFailures] = useState(true);
   const { mutate: approveMr, isPending: mrMergeIsPending } = usePostMrMerge(prId)
+  const { mutate: reviewApprove } = usePostMrReviewerApprove()
+  const queryClient = useQueryClient();
+
+  const route = useRouter();
+  const { link } = route.query;
+  const id = typeof link === 'string'? link : '';
+  const { reviewers, isLoading: isReviewerLoading } = useGetMrReviewers(id)
+
+  const required: number = useMemo(() => reviewers.length, [reviewers]);
+  const actual: number = useMemo(() => reviewers.filter(i => i.approved).length, [reviewers]);
+  const isAllReviewerApproved: boolean = useMemo(() => actual >= required, [actual, required]);
+
+  let isNowUserApprove: boolean | undefined = undefined;
+  const { data } = useGetCurrentUser()
+  const find_user = reviewers.find(i => i.username === data?.username)
+
+  if(find_user) {
+    isNowUserApprove = find_user.approved
+  }
+
+  const { mergeBoxData, isLoading: isAdditionLoading } = useGetMergeBox(prId)
 
-  const { mergeBoxData, isLoading } = useGetMergeBox(prId)
 
   // 定义最终的合并处理函数
   const handleMerge = useCallback(async () => {
@@ -38,30 +61,47 @@ export function MergeBox({ prId }: { prId: string }) {
     }
   }, [approveMr, refresh]);
 
+  const handleApprove = useCallback(async () => {
+    reviewApprove({
+      link: id,
+      data: {
+        approved: true
+      }
+    }, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: legacyApiClient.v1.getApiMrReviewers().requestKey(id)
+        });
+      }
+    });
+  }, [reviewApprove, id, queryClient]);
+
   const additionalChecks = mergeBoxData?.merge_requirements?.conditions ?? []
 
   return (
     <div className="flex">
       <FeedMergedIcon size={ 24 } className='text-gray-500 ml-1'/>
-      { isLoading? (
+      { isReviewerLoading && isAdditionLoading? (
         <div className='flex h-[400px] items-center justify-center'>
           <LoadingSpinner/>
         </div>
       ) : (
         <div className="border rounded-lg bg-white divide-y ml-3 w-full">
           <ReviewerSection
-            required={ REQUIRED_REVIEWERS }
-            onStatusChange={ setIsReviewerApproved }
+            required={required}
+            actual={actual}
           />
           <ChecksSection
             checks={ checks }
             onStatusChange={ setHasCheckFailures }
             additionalChecks={ additionalChecks }
           />
           <MergeSection
-            isReviewerApproved={ isReviewerApproved }
+            isNowUserApprove={isNowUserApprove}
+            isAllReviewerApproved={ isAllReviewerApproved }
             hasCheckFailures={ hasCheckFailures }
             onMerge={ handleMerge }
+            onApprove={ handleApprove }
             isMerging={ mrMergeIsPending }
           />
         </div>

moon/apps/web/components/MrBox/MergeSection.tsx

@@ -2,17 +2,19 @@ import { AlertIcon, WarningTriangleIcon, CheckCircleIcon, LoadingSpinner } from
 import React from "react";
 
 interface MergeSectionProps {
-  isReviewerApproved: boolean;
+  isNowUserApprove?: boolean;
+  isAllReviewerApproved: boolean;
   hasCheckFailures: boolean;
   onMerge: () => Promise<void>;
+  onApprove: () => void;
   isMerging: boolean;
 }
 
-export function MergeSection({ isReviewerApproved, hasCheckFailures, onMerge, isMerging }: MergeSectionProps) {
+export function MergeSection({ isAllReviewerApproved, hasCheckFailures, isNowUserApprove, onMerge, onApprove, isMerging }: MergeSectionProps) {
   let statusNode: React.ReactNode;
-  const isMergeable = isReviewerApproved && !hasCheckFailures;
+  const isMergeable = isAllReviewerApproved && !hasCheckFailures;
 
-  if (!isReviewerApproved) {
+  if (!isAllReviewerApproved) {
     statusNode = (
       <div className="flex items-center text-yellow-700">
         <WarningTriangleIcon className="h-5 w-5 mr-3" />
@@ -38,15 +40,28 @@ export function MergeSection({ isReviewerApproved, hasCheckFailures, onMerge, is
   return (
     <div className="p-3">
       {statusNode}
-      <button
-        onClick={onMerge}
-        disabled={!isMergeable}
-        className="w-full mt-3 px-4 py-2 font-bold text-white bg-green-600 rounded-md
-                   hover:bg-green-700
+      <div className="flex items-center justify-center space-x-4">
+        <button
+          onClick={onApprove}
+          disabled={isNowUserApprove === undefined || isNowUserApprove}
+          className="w-full mt-3 px-4 py-2 font-bold text-white bg-green-600 rounded-md
+                   hover:bg-green-800
+                   duration-500
                    disabled:bg-gray-400 disabled:cursor-not-allowed"
-      >
-        {isMerging ? <LoadingSpinner/> : "Confirm Merge"}
-      </button>
+        >
+          {"Approve"}
+        </button>
+        <button
+          onClick={onMerge}
+          disabled={!isMergeable}
+          className="w-full mt-3 px-4 py-2 font-bold text-white bg-green-600 rounded-md
+                   hover:bg-green-800
+                   duration-500
+                   disabled:bg-gray-400 disabled:cursor-not-allowed"
+        >
+          {isMerging ? <LoadingSpinner/> : "Confirm Merge"}
+        </button>
+      </div>
     </div>
   );
 }

moon/apps/web/components/MrBox/ReviewerSection.tsx

@@ -1,29 +1,17 @@
-import { useState, useEffect } from 'react';
 import { CheckCircleIcon, AlertIcon } from "@gitmono/ui";
 
 interface ReviewerSectionProps {
   required: number;
-  onStatusChange: (isApproved: boolean) => void;
+  actual: number;
 }
 
-export function ReviewerSection({ required, onStatusChange }: ReviewerSectionProps) {
-  // 实际的 review 人数，暂时用 state 模拟，未来应由 API 获取
-  const [actual, _setActual] = useState(1);
+export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
   const isApproved = actual >= required;
 
-  useEffect(() => {
-    // TODO: 调用 API 获取实际 review 人数并更新 setActual
-    // fetch('/api/.../reviewers').then(res => res.json()).then(data => setActual(data.count));
-  }, []);
-
-  useEffect(() => {
-    onStatusChange(isApproved);
-  }, [isApproved, onStatusChange]);
-
   if (isApproved) {
     return (
       <div className="flex items-center p-3 text-green-700">
-        <CheckCircleIcon className="h-5 w-5 mr-3" />
+        <CheckCircleIcon className="h-5 w-5 mr-3"/>
         <div>
           <span className="font-semibold">All required reviewers have approved</span>
         </div>
@@ -33,11 +21,11 @@ export function ReviewerSection({ required, onStatusChange }: ReviewerSectionPro
 
   return (
     <div className="flex items-center p-3 text-gray-800">
-      <AlertIcon className="h-5 w-5 mr-3 text-yellow-600" />
+      <AlertIcon className="h-5 w-5 mr-3 text-yellow-600"/>
       <div>
         <div className="font-semibold">Review required</div>
         <div className="ml-auto text-sm text-gray-500">
-          {`At least ${required} reviewer${required > 1 ? 's' : ''} required with write access.`}
+          { `At least ${ required } reviewer${ required > 1? 's' : '' } required with write access, now has ${ actual }` }
         </div>
       </div>
     </div>