Merge pull request #512 from social-tw/fix/show-reputation-history-re…

…lated-to-user

[Fix] [Frontend] only show the reputation history records related to the user

packages/frontend/src/features/core/index.ts

@@ -14,6 +14,7 @@ export { CommentService } from './services/CommentService/CommentService'
 export { PostService } from './services/PostService/PostService'
 export { RelayApiService } from './services/RelayApiService/RelayApiService'
 export { ReportService } from './services/ReportService/ReportService'
+export { ReputationService } from './services/ReputationService/ReputationService'
 export { UserService } from './services/UserService/UserService'
 export { VoteService } from './services/VoteService/VoteService'
 export * from './stores/actions'

packages/frontend/src/features/core/services/ReportService/ReportService.ts

@@ -1,9 +1,8 @@
 import { RelayApiService, genReportIdentityProof } from '@/features/core'
-import { ReportHistory } from '@/features/reporting/utils/types'
 import { RelayCreateReportResponse } from '@/types/api'
 import {
     RelayRawReportCategory,
-    ReportCategory,
+    ReportHistory,
     ReportStatus,
     ReportType,
 } from '@/types/Report'
@@ -48,7 +47,7 @@ export class ReportService extends RelayApiService {
         type: ReportType
         objectId: string
         reason: string
-        category: ReportCategory
+        category: number
         identityNonce: number
     }) {
         const client = this.getAuthClient()

packages/frontend/src/features/core/services/ReputationService/ReputationService.ts

@@ -0,0 +1,27 @@
+import { FetchReputationHistoryResponse } from '@/types/api'
+import { isMyEpochKey } from '@/utils/helpers/epochKey'
+import { RelayApiService } from '../RelayApiService/RelayApiService'
+
+export class ReputationService extends RelayApiService {
+    async fetchReputationHistory(fromEpoch: number, toEpoch: number) {
+        const client = this.getClient()
+        const searchParams = new URLSearchParams()
+        searchParams.append('from_epoch', fromEpoch.toString())
+        searchParams.append('to_epoch', toEpoch.toString())
+        const response = await client.get<FetchReputationHistoryResponse>(
+            `/reputation/history?${searchParams.toString()}`,
+        )
+        return response.data
+    }
+
+    async fetchMyReputationHistory(fromEpoch: number, toEpoch: number) {
+        const userState = this.getUserState()
+        const reputationRecords = await this.fetchReputationHistory(
+            fromEpoch,
+            toEpoch,
+        )
+        return reputationRecords.filter((record) =>
+            isMyEpochKey(userState, record.epoch, record.epochKey),
+        )
+    }
+}

packages/frontend/src/features/post/components/Comment/CommentReportDialog.tsx

@@ -1,5 +1,4 @@
 import { Dialog } from '@/features/shared'
-import { ReportCategory } from '@/types/Report'
 import { FieldValues, useForm, UseFormGetValues } from 'react-hook-form'
 import { useReportComment } from '../../hooks/useReportComment/useReportComment'
 import {
@@ -59,7 +58,7 @@ export function CommentReportDialog({
             await reportComment({
                 postId,
                 commentId,
-                category: data[`${REGISTER_ID_REASON}`] as ReportCategory,
+                category: data[`${REGISTER_ID_REASON}`],
                 reason: data[`${REGISTER_ID_DESC}`],
             })
         } catch (_error) {}

packages/frontend/src/features/post/components/Post/PostReportDialog.tsx

@@ -1,5 +1,4 @@
 import { Dialog } from '@/features/shared'
-import { ReportCategory } from '@/types/Report'
 import { FieldValues, useForm, UseFormGetValues } from 'react-hook-form'
 import { useReportPost } from '../../hooks/useReportPost/useReportPost'
 import {
@@ -56,7 +55,7 @@ export function PostReportDialog({
         try {
             await reportPost({
                 postId,
-                category: data[`${REGISTER_ID_REASON}`] as ReportCategory,
+                category: data[`${REGISTER_ID_REASON}`],
                 reason: data[`${REGISTER_ID_DESC}`],
             })
         } catch (error) {}

packages/frontend/src/features/post/hooks/useReportComment/useReportComment.test.ts

@@ -1,5 +1,4 @@
 import { SERVER } from '@/constants/config'
-import { ReportCategory } from '@/types/Report'
 import { wrapper } from '@/utils/test-helpers/wrapper'
 import { renderHook, waitFor } from '@testing-library/react'
 import nock from 'nock'
@@ -70,7 +69,7 @@ describe('useReportPost', () => {
         const { result } = renderHook(useReportComment, { wrapper })
         let mockPostId = 'mocked_postId'
         let mockCommentId = 'mocked_commentId'
-        let mockCategory = ReportCategory.ATTACK
+        let mockCategory = 1
         let mockReason = 'mocked_reason'
         await result.current.reportComment({
             postId: mockPostId,

packages/frontend/src/features/post/hooks/useReportComment/useReportComment.ts

@@ -10,7 +10,7 @@ import {
     useUserState,
     useUserStateTransition,
 } from '@/features/core'
-import { ReportCategory, ReportType } from '@/types/Report'
+import { ReportType } from '@/types/Report'
 import { getEpochKeyNonce } from '@/utils/helpers/getEpochKeyNonce'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
@@ -37,7 +37,7 @@ export function useReportComment() {
         }: {
             postId: string
             commentId: string
-            category: ReportCategory
+            category: number
             reason: string
         }) => {
             const userState = await getGuaranteedUserState()

packages/frontend/src/features/post/hooks/useReportPost/useReportPost.test.ts

@@ -1,5 +1,4 @@
 import { SERVER } from '@/constants/config'
-import { ReportCategory } from '@/types/Report'
 import { wrapper } from '@/utils/test-helpers/wrapper'
 import { renderHook, waitFor } from '@testing-library/react'
 import nock from 'nock'
@@ -69,7 +68,7 @@ describe('useReportPost', () => {
 
         const { result } = renderHook(useReportPost, { wrapper })
         let mockPostId = 'mocked_postId'
-        let mockCategory = ReportCategory.ATTACK
+        let mockCategory = 1
         let mockReason = 'mocked_reason'
         await result.current.reportPost({
             postId: mockPostId,

packages/frontend/src/features/post/hooks/useReportPost/useReportPost.ts

@@ -10,7 +10,7 @@ import {
     useUserState,
     useUserStateTransition,
 } from '@/features/core'
-import { ReportCategory, ReportType } from '@/types/Report'
+import { ReportType } from '@/types/Report'
 import { getEpochKeyNonce } from '@/utils/helpers/getEpochKeyNonce'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
@@ -35,7 +35,7 @@ export function useReportPost() {
             reason,
         }: {
             postId: string
-            category: ReportCategory
+            category: number
             reason: string
         }) => {
             const userState = await getGuaranteedUserState()

packages/frontend/src/features/profile/components/ReputationHistory/ReputationHistory.tsx

@@ -1,3 +1,4 @@
+import { useUserState } from '@/features/core'
 import {
     BodyCellType,
     TableBody,
@@ -9,9 +10,12 @@ import {
 import { useDatePicker } from '@/features/shared/hooks/useDatePicker'
 import { FromToEpoch } from '@/features/shared/services/EpochDateService'
 import { FetchReputationHistoryResponse } from '@/types/api'
+import { ReputationType } from '@/types/Report'
+import { formatDateByEpoch } from '@/utils/helpers/formatDateByEpoch'
+import { UserState } from '@unirep/core'
 import dayjs from 'dayjs'
 import { ReactNode } from 'react'
-import { useReputationHistory } from '../../hooks/useReputationHistory/useReputationHistory'
+import { useMyReputationHistory } from '../../hooks/useMyReputationHistory/useMyReputationHistory'
 import SearchByDate from '../SearchByDate/SearchByDate'
 import { SearchDayLimitDialog } from './SearchDayLimitDialog'
 
@@ -62,10 +66,10 @@ function Wrapper({ children }: { children: ReactNode }) {
 }
 
 function ReputationTable({ fromToEpoch }: ReputationTableProps) {
-    const { isFetching, isFetched, data } = useReputationHistory(fromToEpoch)
-    console.log(data)
+    const { userState } = useUserState()
+    const { isFetching, isFetched, data } = useMyReputationHistory(fromToEpoch)
     const headerData = getHeaderData()
-    const bodyData = parseReputationHistoryToBodyData(data || [])
+    const bodyData = parseReputationHistoryToBodyData(data || [], userState)
 
     if (!isFetched) {
         return <div className="min-h-[300px]" />
@@ -95,16 +99,20 @@ function getHeaderData(): HeaderCellData[] {
 
 function parseReputationHistoryToBodyData(
     reputationHistoryData: FetchReputationHistoryResponse,
+    userState?: UserState | null | undefined,
 ): BodyCellData[][] {
     return reputationHistoryData.map((v) => {
         return [
             {
                 type: BodyCellType.Text,
-                content: formatVoteDate(Number(v.report.reportAt)),
+                content: userState ? formatDateByEpoch(userState, v.epoch) : '',
             },
             { type: BodyCellType.Text, content: getReputationTypeText(v.type) },
-            { type: BodyCellType.Text, content: v.report.reportorEpochKey },
-            { type: BodyCellType.Text, content: String(v.score) },
+            { type: BodyCellType.Text, content: v.epochKey },
+            {
+                type: BodyCellType.Text,
+                content: formatReputationScore(v.type, v.score),
+            },
         ]
     })
 }
@@ -117,23 +125,42 @@ function isWithin30Days(startDate: Date | null, endDate: Date | null) {
     return daysDifference <= 30
 }
 
-function formatVoteDate(date: number) {
-    return dayjs(date).format('YYYY/MM/DD')
-}
-
-function getReputationTypeText(type: number) {
+function getReputationTypeText(type: ReputationType) {
     switch (type) {
-        case 0:
+        case ReputationType.REPORT_SUCCESS: {
             return '檢舉成功'
-        case 1:
+        }
+        case ReputationType.REPORT_FAILURE: {
             return '檢舉失敗'
-        case 2:
+        }
+        case ReputationType.BE_REPORTED: {
             return '被檢舉成功'
-        case 3:
+        }
+        case ReputationType.ADJUDICATE: {
             return '協助檢舉判定'
-        case 4:
+        }
+        case ReputationType.CHECK_IN: {
             return '登入'
-        default:
+        }
+        default: {
             return ''
+        }
+    }
+}
+
+function formatReputationScore(type: ReputationType, score: number) {
+    switch (type) {
+        case ReputationType.ADJUDICATE:
+        case ReputationType.REPORT_SUCCESS:
+        case ReputationType.CHECK_IN: {
+            return `+${score}`
+        }
+        case ReputationType.REPORT_FAILURE:
+        case ReputationType.BE_REPORTED: {
+            return `-${score}`
+        }
+        default: {
+            return `${score}`
+        }
     }
 }

packages/frontend/src/features/profile/hooks/useReputationHistory/useReputationHistory.ts → packages/frontend/src/features/profile/hooks/useMyReputationHistory/useMyReputationHistory.ts

@@ -1,24 +1,28 @@
 import { QueryKeys } from '@/constants/queryKeys'
+import { ReputationService, useUserState } from '@/features/core'
 import {
     FromToEpoch,
     ValidFromToEpoch,
 } from '@/features/shared/services/EpochDateService'
-import { fetchReputationHistory } from '@/utils/api'
 import { useQuery } from '@tanstack/react-query'
 
-export function useReputationHistory(fromToEpoch: FromToEpoch) {
+export function useMyReputationHistory(fromToEpoch: FromToEpoch) {
+    const { userState } = useUserState()
+
     return useQuery({
         queryKey: [
             QueryKeys.ReputationHistory,
             fromToEpoch.from,
             fromToEpoch.to,
+            userState?.id.toString(),
         ],
         queryFn: async () => {
-            return await fetchReputationHistory(
+            const reputationService = new ReputationService(userState)
+            return reputationService.fetchMyReputationHistory(
                 fromToEpoch.from,
                 fromToEpoch.to,
             )
         },
-        enabled: fromToEpoch instanceof ValidFromToEpoch,
+        enabled: fromToEpoch instanceof ValidFromToEpoch && !!userState,
     })
 }

packages/frontend/src/features/profile/index.ts

@@ -3,4 +3,5 @@ export { default as ReputationHistory } from './components/ReputationHistory/Rep
 export { default as SearchByDate } from './components/SearchByDate/SearchByDate'
 export { useMyCommentHistory } from './hooks/useMyCommentHistory/useMyCommentHistory'
 export { useMyPostHistory } from './hooks/useMyPostHistory/useMyPostHistory'
+export { useMyReputationHistory } from './hooks/useMyReputationHistory/useMyReputationHistory'
 export { useMyVoteHistory } from './hooks/useMyVoteHistory/useMyVoteHistory'

packages/frontend/src/features/reporting/components/Adjudicate/AdjudicateForm.tsx

@@ -1,13 +1,13 @@
 import { ReactComponent as GavelRaisedIcon } from '@/assets/svg/gavel-raised.svg'
-import { AdjudicateValue, ReportCategory } from '@/constants/report'
+import { AdjudicateValue } from '@/constants/report'
 import AdjudicateActions from './AdjudicateActions'
 import ReportContent from './ReportContent'
 import ReportReason from './ReportReason'
 
 export interface ReportData {
     id: string
     content: string
-    category: ReportCategory
+    category: number
     reason: string
 }