Challenge review details page integration part 1

Author: billsedison

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage

src/apps/admin/src/lib/hooks/useTableFilterLocal.ts

@@ -22,11 +22,13 @@ export interface useTableFilterLocalProps<T> {
  * @param allDatas all table datas
  * @param defaultSort default sort
  * @param mappingSortField mapping from property field to sort field
+ * @param disablePagination should disable pagination
  */
 export function useTableFilterLocal<T>(
     allDatas: T[],
     defaultSort?: Sort,
     mappingSortField?: { [key: string]: string },
+    disablePagination?: boolean,
 ): useTableFilterLocalProps<T> {
     const [page, setPage] = useState(1)
     const [sort, setSort] = useState<Sort | undefined>(defaultSort)
@@ -66,6 +68,8 @@ export function useTableFilterLocal<T>(
         let datas = sortedDatas
         if (!datas.length) {
             setResults([])
+        } else if (disablePagination) {
+            setResults(datas)
         } else {
             const pageFrom0 = (page || 1) - 1
             const itemOffset

src/apps/review/src/config/routes.config.ts

@@ -11,3 +11,4 @@ export const rootRoute: string
 export const activeReviewAssigmentsRouteId = 'active-review-assigments'
 export const openOpportunitiesRouteId = 'open-opportunities'
 export const pastReviewAssignmentsRouteId = 'past-review-assignments'
+export const challengeDetailRouteId = ':challengeId'

src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx

@@ -3,6 +3,8 @@
  */
 import { FC } from 'react'
 
+import { TableLoading } from '~/apps/admin/src/lib'
+
 import {
     ProjectResult,
     RegistrationInfo,
@@ -14,14 +16,15 @@ import { TableNoRecord } from '../TableNoRecord'
 import { TableSubmissionScreening } from '../TableSubmissionScreening'
 import { TableReviewAppeals } from '../TableReviewAppeals'
 import { TableWinners } from '../TableWinners'
-import { useRole } from '../../hooks'
+import { useRole, useRoleProps } from '../../hooks'
 import { APPROVAL, MOCKHANDLE, REVIEWER, SUBMITTER } from '../../../config/index.config'
 import { TableReviewAppealsForSubmitter } from '../TableReviewAppealsForSubmitter'
 
 interface Props {
     selectedTab: string
     type?: string
     registrations: RegistrationInfo[]
+    isLoadingRegistrants: boolean
     submissions: SubmissionInfo[]
     projectResults: ProjectResult[]
     screening: Screening[]
@@ -35,15 +38,30 @@ export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
     const submissions = props.submissions
     const firstSubmissions = props.firstSubmissions
     const projectResults = props.projectResults
-    const { role }: { role: string } = useRole()
+    const { actionChallengeRole }: useRoleProps = useRole()
     const screening
-        = role === REVIEWER
+        = actionChallengeRole === REVIEWER
             ? props.screening
             : props.screening.filter(s => s.handle === MOCKHANDLE)
 
+    // show ui for Registration tab
+    if (selectedTab === 'Registration') {
+        // show loading ui when fetching registrants
+        if (props.isLoadingRegistrants) {
+            return <TableLoading />
+        }
+
+        // show no record message
+        if (!registrations.length) {
+            return <TableNoRecord />
+        }
+
+        // show registrants table
+        return <TableRegistration datas={registrations} />
+    }
+
     if (
-        !registrations.length
-        || !submissions.length
+        !submissions.length
         || !projectResults.length
         || !screening.length
     ) {
@@ -52,13 +70,11 @@ export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
 
     return (
         <>
-            {selectedTab === 'Registration' ? (
-                <TableRegistration datas={registrations} />
-            ) : selectedTab === 'Submission / Screening' ? (
+            {selectedTab === 'Submission / Screening' ? (
                 <TableSubmissionScreening datas={screening} />
             ) : selectedTab === 'Winners' ? (
                 <TableWinners datas={projectResults} />
-            ) : (role !== SUBMITTER || selectedTab === APPROVAL) ? (
+            ) : (actionChallengeRole !== SUBMITTER || selectedTab === APPROVAL) ? (
                 <TableReviewAppeals
                     datas={submissions}
                     tab={selectedTab}

src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.tsx

@@ -1,12 +1,17 @@
 /**
  * Challenge Links.
  */
-import { FC } from 'react'
-import { includes } from 'lodash'
+import { FC, useContext, useMemo, useState } from 'react'
 import classNames from 'classnames'
 
-import { ADMIN, COPILOT } from '../../../config/index.config'
-import { useRole } from '../../hooks'
+import {
+    REVIEWER,
+    SUBMITTER,
+} from '../../../config/index.config'
+import { DialogContactManager } from '../DialogContactManager'
+import { ChallengeDetailContextModel } from '../../models'
+import { ChallengeDetailContext } from '../../contexts'
+import { filterResources } from '../../utils'
 
 import styles from './ChallengeLinks.module.scss'
 
@@ -15,15 +20,49 @@ interface Props {
 }
 
 export const ChallengeLinks: FC<Props> = (props: Props) => {
-    const { role }: {role: string} = useRole()
+    const { challengeInfo, myResources }: ChallengeDetailContextModel
+        = useContext(ChallengeDetailContext)
+    // Show/hide contact manager dialog
+    const [showContactManager, setShowContactManager] = useState(false)
+
+    // Show/hide contact manager button
+    const canShowContactManagerButton = useMemo(
+        () => filterResources([SUBMITTER, REVIEWER], myResources).length > 0,
+        [myResources],
+    )
+
     return (
         <div className={classNames(styles.container, props.className)}>
-            {!includes([ADMIN, COPILOT], role) && (
-                <button type='button' className='borderButton'>
+            {canShowContactManagerButton && (
+                <button
+                    type='button'
+                    className='borderButton'
+                    onClick={function onClick() {
+                        setShowContactManager(true)
+                    }}
+                >
                     Contact Manager
                 </button>
             )}
-            <button type='button' className='borderButton'>Forum</button>
+            {challengeInfo && challengeInfo.discussionsUrl && (
+                <a
+                    href={challengeInfo?.discussionsUrl}
+                    className='borderButton'
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    Forum
+                </a>
+            )}
+
+            {showContactManager && (
+                <DialogContactManager
+                    open
+                    setOpen={function setOpen(open: boolean) {
+                        setShowContactManager(open)
+                    }}
+                />
+            )}
         </div>
     )
 }

src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.module.scss

@@ -63,3 +63,20 @@
         padding-top: 7px;
     }
 }
+
+.blockMyRoles {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.textInfo {
+    span {
+        align-items: center;
+        color: var(--FontColor);
+        font-family: "Nunito Sans", sans-serif;
+        display: flex;
+        font-weight: 700;
+        line-height: 20px;
+    }
+}

src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames'
 
 import { ChallengeInfo } from '../../models'
 import { ProgressBar } from '../ProgressBar'
+import { useRole, useRoleProps } from '../../hooks'
 
 import styles from './ChallengePhaseInfo.module.scss'
 
@@ -15,24 +16,31 @@ interface Props {
 }
 
 export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
+    const { myChallengeRoles }: useRoleProps = useRole()
     const PROGRESS_TYPE = 'progress'
     const uiItems = useMemo(() => {
         const data = props.challengeInfo
         return [
             {
                 icon: 'icon-review',
                 title: 'Phase',
-                value: data.currentPhase,
+                value: data.currentPhase || 'N/A',
             },
             {
                 icon: 'icon-handle',
                 title: 'My Role',
-                value: data.role,
+                value: (
+                    <div className={styles.blockMyRoles}>
+                        {myChallengeRoles.map(item => (
+                            <span key={item}>{item}</span>
+                        ))}
+                    </div>
+                ),
             },
             {
                 icon: 'icon-event',
                 title: 'Phase End Date',
-                value: data.currentPhaseEndDateString,
+                value: data.currentPhaseEndDateString || 'N/A',
             },
             {
                 icon: 'icon-timer',
@@ -41,15 +49,15 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
                     color: data.timeLeftColor,
                 },
                 title: 'Time Left',
-                value: data.timeLeft,
+                value: data.timeLeft || 'N/A',
             },
             {
                 title: 'Review Progress',
                 type: PROGRESS_TYPE,
                 value: data.reviewProgress,
             },
         ]
-    }, [props.challengeInfo])
+    }, [props.challengeInfo, myChallengeRoles])
     return (
         <div className={classNames(styles.container, props.className)}>
             {uiItems.map(item => {
@@ -85,8 +93,13 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
                         </span>
                         <div>
                             <span>{item.title}</span>
-                            <strong style={item.style}>
-                                {item.status && <i className={`icon-${item.status}`} />}
+                            <strong
+                                style={item.style}
+                                className={styles.textInfo}
+                            >
+                                {item.status && (
+                                    <i className={`icon-${item.status}`} />
+                                )}
                                 {item.value}
                             </strong>
                         </div>

src/apps/review/src/lib/components/DialogContactManager/DialogContactManager.module.scss

@@ -0,0 +1,35 @@
+.modal {
+    max-width: 800px !important;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    position: relative;
+
+    textarea {
+        resize: none !important;
+    }
+}
+
+.actionButtons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.dialogLoadingSpinnerContainer {
+    position: absolute;
+    width: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 0;
+    height: 64px;
+    left: 0;
+
+    .spinner {
+        background: none;
+    }
+}