feat(PM-1067): list copilot applications

src/apps/copilots/src/models/CopilotApplication.ts

@@ -3,4 +3,6 @@ export interface CopilotApplication {
     notes?: string,
     createdAt: Date,
     opportunityId: string,
+    handle?: string,
+    userId: number,
 }

src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable react/jsx-no-bind */
+/* eslint-disable complexity */
 import {
+    Dispatch,
     FC,
+    SetStateAction,
     useCallback,
     useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { mutate } from 'swr'
 import moment from 'moment'
 
@@ -17,6 +20,7 @@ import {
     IconOutline,
     LoadingSpinner,
     PageTitle,
+    TabsNavbar,
 } from '~/libs/ui'
 import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
 
@@ -27,29 +31,60 @@ import {
     useCopilotApplications,
     useCopilotOpportunity,
 } from '../../services/copilot-opportunities'
+import { FormattedMembers, useMembers } from '../../services/members'
 import { copilotRoutesMap } from '../../copilots.routes'
 
 import { ApplyOpportunityModal } from './apply-opportunity-modal'
+import {
+    CopilotDetailsTabViews,
+    getCopilotDetailsTabsConfig,
+    getHashFromTabId,
+    getTabIdFromHash,
+} from './tabs/config/copilot-details-tabs-config'
+import { OpportunityDetails } from './tabs/opportunity-details'
+import { CopilotApplications } from './tabs/copilot-applications'
 import styles from './styles.module.scss'
 
 const CopilotOpportunityDetails: FC<{}> = () => {
     const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
     const navigate = useNavigate()
     const [showNotFound, setShowNotFound] = useState(false)
     const [showApplyOpportunityModal, setShowApplyOpportunityModal] = useState(false)
-    const { profile }: ProfileContextData = useContext(profileContext)
+    const { profile, initialized }: ProfileContextData = useContext(profileContext)
     const isCopilot: boolean = useMemo(
         () => !!profile?.roles?.some(role => role === UserRole.copilot),
         [profile],
     )
+    const isAdminOrPM: boolean = useMemo(
+        () => !!profile?.roles?.some(role => role === UserRole.administrator || role === UserRole.projectManager),
+        [profile],
+    )
     const { data: copilotApplications }: { data?: CopilotApplication[] } = useCopilotApplications(opportunityId)
+    const { data: members }: { data?: FormattedMembers[]} = useMembers(
+        copilotApplications ? copilotApplications?.map(item => item.userId) : [],
+    )
 
     if (!opportunityId) {
         navigate(copilotRoutesMap.CopilotOpportunityList)
     }
 
     const { data: opportunity, isValidating }: CopilotOpportunityResponse = useCopilotOpportunity(opportunityId)
 
+    const { hash }: { hash: string } = useLocation()
+
+    const activeTabHash: string = useMemo<string>(() => getTabIdFromHash(hash), [hash])
+
+    const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>] = useState<string>(activeTabHash)
+
+    useEffect(() => {
+        setActiveTab(activeTabHash)
+    }, [activeTabHash])
+
+    const handleTabChange = useCallback((tabId: string): void => {
+        setActiveTab(tabId)
+        window.location.hash = getHashFromTabId(tabId)
+    }, [getHashFromTabId, setActiveTab])
+
     useEffect(() => {
         const timer = setTimeout(() => {
             if (!opportunity) {
@@ -154,29 +189,23 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                     </div>
                 </div>
             </div>
-            <div className={styles.content}>
-                <div>
-                    <h2 className={styles.subHeading}> Required skills </h2>
-                    <div className={styles.skillsContainer}>
-                        {opportunity?.skills.map((skill: any) => (
-                            <div key={skill.id} className={styles.skillPill}>
-                                {skill.name}
-                            </div>
-                        ))}
-                    </div>
-                    <h2 className={styles.subHeading}> Description </h2>
-                    <p>
-                        {opportunity?.overview}
-                    </p>
-                </div>
-                <div>
-                    <h2 className={styles.subHeading}> Complexity </h2>
-                    <span className={styles.textCaps}>{opportunity?.complexity}</span>
+            {
+                initialized && (
+                    <TabsNavbar
+                        defaultActive={activeTab}
+                        onChange={handleTabChange}
+                        tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                    />
+                )
+            }
+            {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
+            {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && (
+                <CopilotApplications
+                    copilotApplications={copilotApplications}
+                    members={members}
+                />
+            )}
 
-                    <h2 className={styles.subHeading}> Requires Communication </h2>
-                    <span className={styles.textCaps}>{opportunity?.requiresCommunication}</span>
-                </div>
-            </div>
             {
                 showApplyOpportunityModal
                 && opportunity && (

src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss

@@ -13,40 +13,6 @@
     color: $teal-100;
 }
 
-.subHeading {
-    margin-top: $sp-8;
-}
-
-.content {
-    margin-top: $sp-6;
-    display: flex;
-    flex-direction: row;
-    gap: 100px;
-}
-
-.content > div:first-child {
-    flex: 3;
-}
-
-.content > div:last-child {
-    flex: 1;
-}
-
-.skillsContainer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: $sp-2;
-}
-
-.skillPill {
-    background-color: $teal-100;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 10px;
-    white-space: nowrap;
-    font-size: 14px;
-}
 
 .infoRow {
     display: flex;

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts

@@ -0,0 +1,55 @@
+import { TabsNavItem } from '~/libs/ui'
+
+export enum CopilotDetailsTabViews {
+    details = '0',
+    applications = '1',
+}
+
+export const getCopilotDetailsTabsConfig = (isAdminOrPM: boolean): TabsNavItem[] => (isAdminOrPM ? [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+    {
+        id: CopilotDetailsTabViews.applications,
+        title: 'Applications',
+    },
+] : [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+])
+
+export const CopilotDetailsTabsConfig: TabsNavItem[] = [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+    {
+        id: CopilotDetailsTabViews.applications,
+        title: 'Applications',
+    },
+]
+
+export function getHashFromTabId(tabId: string): string {
+    switch (tabId) {
+        case CopilotDetailsTabViews.details:
+            return '#details'
+        case CopilotDetailsTabViews.applications:
+            return '#applications'
+        default:
+            return '#details'
+    }
+}
+
+export function getTabIdFromHash(hash: string): string {
+    switch (hash) {
+        case '#details':
+            return CopilotDetailsTabViews.details
+        case '#applications':
+            return CopilotDetailsTabViews.applications
+        default:
+            return CopilotDetailsTabViews.details
+    }
+}

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx

@@ -0,0 +1,87 @@
+import { FC, useMemo } from 'react'
+
+import { Table, TableColumn } from '~/libs/ui'
+import { USER_PROFILE_URL } from '~/config/environments/default.env'
+
+import { CopilotApplication } from '../../../../models/CopilotApplication'
+import { FormattedMembers } from '../../../../services/members'
+
+import styles from './styles.module.scss'
+
+const tableColumns: TableColumn<CopilotApplication>[] = [
+    {
+        label: 'Topcoder Handle',
+        propertyName: 'handle',
+        renderer: (copilotApplication: CopilotApplication) => (
+            <a
+                href={`${USER_PROFILE_URL}/${copilotApplication.handle}`}
+                target='_blank'
+                rel='noreferrer'
+            >
+                {copilotApplication.handle}
+            </a>
+        ),
+        type: 'element',
+    },
+    {
+        label: 'Fulfillment Rating',
+        propertyName: 'fulfilment',
+        type: 'text',
+    },
+    {
+        label: 'Active Projects',
+        propertyName: 'activeProjects',
+        type: 'text',
+    },
+    {
+        label: 'Applied Date',
+        propertyName: 'createdAt',
+        type: 'date',
+    },
+    {
+        label: 'Notes',
+        propertyName: 'notes',
+        renderer: (copilotApplication: CopilotApplication) => (
+            <div className={styles.title}>
+                {copilotApplication.notes}
+            </div>
+        ),
+        type: 'element',
+    },
+]
+
+const CopilotApplications: FC<{
+    copilotApplications?: CopilotApplication[]
+    members?: FormattedMembers[]
+}> = props => {
+    const getData = (): CopilotApplication[] => (props.copilotApplications ? props.copilotApplications.map(item => {
+        const member = props.members && props.members.find(each => each.userId === item.userId)
+        return {
+            ...item,
+            activeProjects: member?.activeProjects || 0,
+            fulfilment: member?.copilotFulfillment || 0,
+            handle: member?.handle,
+        }
+    })
+        .sort((a, b) => (b.fulfilment || 0) - (a.fulfilment || 0)) : [])
+
+    const tableData = useMemo(getData, [props.copilotApplications, props.members])
+
+    return (
+        <div>
+            {
+                tableData.length > 0 && (
+                    <Table
+                        columns={tableColumns}
+                        data={tableData}
+                        disableSorting
+                        removeDefaultSort
+                        preventDefault
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default CopilotApplications

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/index.ts

@@ -0,0 +1 @@
+export { default as CopilotApplications } from './CopilotApplications'

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+
+import { CopilotOpportunity } from '../../../../models/CopilotOpportunity'
+
+import styles from './styles.module.scss'
+
+const OpportunityDetails: FC<{
+    opportunity?: CopilotOpportunity
+}> = props => (
+    <div className={styles.content}>
+        <div>
+            <h2 className={styles.subHeading}> Required skills </h2>
+            <div className={styles.skillsContainer}>
+                {props.opportunity?.skills.map((skill: any) => (
+                    <div key={skill.id} className={styles.skillPill}>
+                        {skill.name}
+                    </div>
+                ))}
+            </div>
+            <h2 className={styles.subHeading}> Description </h2>
+            <p>
+                {props.opportunity?.overview}
+            </p>
+        </div>
+        <div>
+            <h2 className={styles.subHeading}> Complexity </h2>
+            <span className={styles.textCaps}>{props.opportunity?.complexity}</span>
+
+            <h2 className={styles.subHeading}> Requires Communication </h2>
+            <span className={styles.textCaps}>{props.opportunity?.requiresCommunication}</span>
+        </div>
+    </div>
+)
+
+export default OpportunityDetails

src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/index.ts

@@ -0,0 +1 @@
+export { default as OpportunityDetails } from './OpportunityDetails'