review-mamangement-update-f2f

src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx

@@ -58,11 +58,11 @@ const ChallengeTitle: FC<{
 const ReviewSummaryList: FC<ReviewListProps> = props => {
     const columns = useMemo<TableColumn<ReviewSummary>[]>(
         () => [
-            {
-                label: 'Challenge type',
-                propertyName: '',
-                type: 'text',
-            },
+            // {
+            //     label: 'Challenge type',
+            //     propertyName: '',
+            //     type: 'text',
+            // },
             {
                 label: 'Challenge Title',
                 propertyName: 'challengeName',
@@ -76,11 +76,11 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
                 propertyName: 'legacyChallengeId',
                 type: 'text',
             },
-            {
-                label: 'Current phase',
-                propertyName: '',
-                type: 'text',
-            },
+            // {
+            //     label: 'Current phase',
+            //     propertyName: '',
+            //     type: 'text',
+            // },
             { label: 'Status', propertyName: 'challengeStatus', type: 'text' },
             // I think this column is important, and it exits in `admin-app`
             // but resp does not have it, so I just comment it here

src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { format } from 'date-fns'
 
-import { CheckIcon } from '@heroicons/react/solid'
+import { CheckIcon, XIcon } from '@heroicons/react/solid'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import {
     Button,
@@ -27,6 +27,7 @@ export interface ReviewerListProps {
     approvingReviewerId: number
     onPageChange: (page: number) => void
     onApproveApplication: (reviewer: Reviewer) => void
+    onUnapproveApplication: (reviewer: Reviewer) => void
     onToggleSort: (sort: Sort) => void
 }
 
@@ -35,15 +36,22 @@ const ApproveButton: FC<{
     openReviews: number
     approvingReviewerId: number
     onApproveApplication: ReviewerListProps['onApproveApplication']
+    onUnapproveApplication: ReviewerListProps['onUnapproveApplication']
 }> = props => {
     const handleApprove = useEventCallback((): void => {
         props.onApproveApplication(props.reviewer)
     })
 
+    const handleRemove = useEventCallback((): void => {
+        props.onUnapproveApplication(props.reviewer)
+    })
+
     const isApproving = props.approvingReviewerId === props.reviewer.userId
     const isOtherApproving = props.approvingReviewerId > 0
     const hideApproveButton
         = props.openReviews < 1 || props.reviewer.applicationStatus !== 'Pending'
+    const showRemoveButton
+        = props.reviewer.applicationStatus === 'Approved'
 
     return (
         <>
@@ -53,7 +61,19 @@ const ApproveButton: FC<{
                     className={styles.approvingLoadingSpinner}
                 />
             ) : (
-                !hideApproveButton && (
+                hideApproveButton ? (
+                    showRemoveButton && (
+                        <Button
+                            primary
+                            variant='danger'
+                            onClick={handleRemove}
+                        >
+                            <XIcon className='icon icon-fill' />
+                            {' '}
+                            Remove Reviewer
+                        </Button>
+                    )
+                ) : (
                     <Button
                         primary
                         onClick={handleApprove}
@@ -105,13 +125,15 @@ const Actions: FC<{
     openReviews: number
     approvingReviewerId: number
     onApproveApplication: ReviewerListProps['onApproveApplication']
+    onUnapproveApplication: ReviewerListProps['onUnapproveApplication']
 }> = props => (
     <div className={styles.rowActions}>
         <ApproveButton
             reviewer={props.reviewer}
             openReviews={props.openReviews}
             approvingReviewerId={props.approvingReviewerId}
             onApproveApplication={props.onApproveApplication}
+            onUnapproveApplication={props.onUnapproveApplication}
         />
     </div>
 )
@@ -155,7 +177,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                 type: 'element',
             },
             {
-                label: 'Open Review Opp',
+                label: 'Open Reviews',
                 propertyName: '',
                 renderer: (reviewer: Reviewer) => (
                     // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -170,7 +192,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                 propertyName: 'reviewsInPast60Days',
                 type: 'number',
             },
-            { label: 'Matching Skills', propertyName: '', type: 'text' },
+            // { label: 'Matching Skills', propertyName: '', type: 'text' },
             {
                 label: '',
                 renderer: (reviewer: Reviewer) => (
@@ -179,6 +201,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                         openReviews={props.openReviews}
                         approvingReviewerId={props.approvingReviewerId}
                         onApproveApplication={props.onApproveApplication}
+                        onUnapproveApplication={props.onUnapproveApplication}
                     />
                 ),
                 type: 'action',

src/apps/admin/src/lib/components/RolesFilter/RolesFilter.tsx

@@ -73,7 +73,7 @@ export const RolesFilter: FC<Props> = props => {
         })
         setNewOption(undefined)
         setSearchKey('')
-    }, [])
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
     const onSubmit = useCallback(
         (value: string) => {

src/apps/admin/src/review-management/ManageReviewerPage/ManageReviewerPage.tsx

@@ -7,7 +7,7 @@ import {
     useRef,
     useState,
 } from 'react'
-import { useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 import { sortBy } from 'lodash'
 
 import { XIcon } from '@heroicons/react/solid'
@@ -61,6 +61,7 @@ export const ManageReviewerPage: FC = () => {
     const { challengeId = '' }: { challengeId?: string } = useParams<{
         challengeId: string
     }>()
+    const navigate: NavigateFunction = useNavigate()
     const [filterCriteria, setFilterCriteria]: [
         ReviewFilterCriteria,
         Dispatch<SetStateAction<ReviewFilterCriteria>>
@@ -134,6 +135,13 @@ export const ManageReviewerPage: FC = () => {
             })
     })
 
+    const unapprove = useEventCallback((): void => {
+        // how to get challenge Id?
+        // Now we use one specific challenge id for testing
+        const realChallengeId = 'c713e250-ecb4-4192-8717-d607ddda8db4'
+        navigate(`${rootRoute}/challenge-management/${realChallengeId}/manage-user`)
+    })
+
     // Init
     useEffect(() => {
         search()
@@ -214,6 +222,7 @@ export const ManageReviewerPage: FC = () => {
                         reviewers={reviewers}
                         openReviews={openReviews}
                         onApproveApplication={approve}
+                        onUnapproveApplication={unapprove}
                         approvingReviewerId={userId}
                         paging={{
                             page: filterCriteria.page,