Merge pull request #1015 from topcoder-platform/PM-589

PM-589 Copilot opportunity listing page

Author: himaniraghav3

src/apps/copilots/src/copilots.routes.tsx

@@ -1,7 +1,8 @@
-import { lazyLoad, LazyLoadedComponent, PlatformRoute, Rewrite, UserRole } from '~/libs/core'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core'
 import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
 
 const CopilotsApp: LazyLoadedComponent = lazyLoad(() => import('./CopilotsApp'))
+const CopilotOpportunityList: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-opportunity-list/index'))
 const CopilotsRequests: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-requests/index'))
 const CopilotsRequestForm: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-request-form/index'))
 
@@ -13,20 +14,25 @@ export const toolTitle: string = ToolTitle.copilots
 export const absoluteRootRoute: string = `${window.location.origin}${rootRoute}`
 
 export const childRoutes = [
+    {
+        element: <CopilotOpportunityList />,
+        id: 'CopilotOpportunityList',
+        route: '/',
+    },
     {
         element: <CopilotsRequests />,
         id: 'CopilotRequests',
-        route: 'requests',
+        route: '/requests',
     },
     {
         element: <CopilotsRequestForm />,
         id: 'CopilotRequestForm',
-        route: 'requests/new',
+        route: '/requests/new',
     },
     {
         element: <CopilotsRequests />,
         id: 'CopilotRequestDetails',
-        route: 'requests/:requestId',
+        route: '/requests/:requestId',
     },
 ] as const
 
@@ -35,17 +41,13 @@ type RouteMap = {
 };
 
 export const copilotRoutesMap = childRoutes.reduce((allRoutes, route) => (
-    Object.assign(allRoutes, { [route.id]: `${rootRoute}/${route.route}` })
+    Object.assign(allRoutes, { [route.id]: `${rootRoute}${route.route}` })
 ), {} as RouteMap)
 
 export const copilotsRoutes: ReadonlyArray<PlatformRoute> = [
     {
         authRequired: true,
         children: [
-            {
-                element: <Rewrite to={childRoutes[0].route} />,
-                route: '',
-            },
             ...childRoutes,
 
         ],

src/apps/copilots/src/models/CopilotOpportunity.ts

@@ -0,0 +1,25 @@
+import { UserSkill } from '~/libs/core'
+
+import { ProjectType } from '../constants'
+
+export interface CopilotOpportunity {
+    id: number,
+    copilotRequestId: number,
+    status: string,
+    type: ProjectType,
+    projectId: string,
+    projectName: string,
+    projectType: ProjectType,
+    complexity: 'high' | 'medium' | 'low',
+    copilotUsername: string,
+    numHoursPerWeek: number,
+    numWeeks: number,
+    overview: string,
+    paymentType: string,
+    otherPaymentType: string,
+    requiresCommunication: 'yes' | 'no',
+    skills: UserSkill[],
+    startDate: Date,
+    tzRestrictions: 'yes' | 'no',
+    createdAt: Date,
+}

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

@@ -0,0 +1,107 @@
+import { FC, useMemo } from 'react'
+import classNames from 'classnames'
+
+import {
+    ContentLayout,
+    LoadingSpinner,
+    PageTitle,
+    Table,
+    TableColumn,
+} from '~/libs/ui'
+
+import { CopilotOpportunity } from '../../models/CopilotOpportunity'
+import { CopilotOpportunitiesResponse, useCopilotOpportunities } from '../../services/copilot-opportunities'
+
+import styles from './styles.module.scss'
+
+const tableColumns: TableColumn<CopilotOpportunity>[] = [
+    {
+        label: 'Title',
+        propertyName: 'projectName',
+        type: 'text',
+    },
+    {
+        label: 'Status',
+        propertyName: 'status',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div className={classNames(styles.status, copilotOpportunity.status === 'active' && styles.activeStatus)}>
+                {copilotOpportunity.status}
+            </div>
+        ),
+        type: 'element',
+    },
+    {
+        label: 'Skills Required',
+        propertyName: 'skills',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div className={styles.skillsContainer}>
+                {copilotOpportunity.skills.map((skill: any) => (
+                    <div key={skill.id} className={styles.skillPill}>
+                        {skill.name}
+                    </div>
+                ))}
+            </div>
+        ),
+        type: 'element',
+    },
+    {
+        label: 'Type',
+        propertyName: 'type',
+        type: 'text',
+    },
+    {
+        label: 'Starting Date',
+        propertyName: 'startDate',
+        type: 'date',
+    },
+    {
+        label: 'Complexity',
+        propertyName: 'complexity',
+        type: 'text',
+    },
+    {
+        label: 'Hours per week needed',
+        propertyName: 'numHoursPerWeek',
+        type: 'number',
+    },
+    {
+        label: 'Payment',
+        propertyName: 'paymentType',
+        type: 'text',
+    },
+]
+
+const CopilotOpportunityList: FC<{}> = () => {
+
+    const {
+        data: opportunities, isValidating, size, setSize,
+    }: CopilotOpportunitiesResponse = useCopilotOpportunities()
+
+    const tableData = useMemo(() => opportunities, [opportunities])
+
+    function loadMore(): void {
+        setSize(size + 1)
+    }
+
+    const opportunitiesLoading = isValidating
+
+    return (
+        <ContentLayout
+            title='Copilot Opportunities'
+        >
+            <PageTitle>Copilot Opportunities</PageTitle>
+            <Table
+                columns={tableColumns}
+                data={tableData}
+                moreToLoad={isValidating || opportunities.length > 0}
+                onLoadMoreClick={loadMore}
+            />
+            {opportunitiesLoading && (
+                <LoadingSpinner overlay />
+            ) }
+
+        </ContentLayout>
+    )
+}
+
+export default CopilotOpportunityList

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

@@ -0,0 +1,29 @@
+@import '@libs/ui/styles/includes';
+
+.skillsContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.skillPill {
+    background-color: #aaaaaa;
+    color: #333;
+    padding: 4px 8px;
+    border-radius: 10px;
+    white-space: nowrap;
+    font-size: 14px;
+}
+
+.status {
+    color: orange;
+    font-weight: bold;
+    padding: 4px 8px;
+    border-radius: 4px;
+    display: inline-block;
+    text-transform: capitalize;
+}
+
+.activeStatus {
+    color: green;
+}

src/apps/copilots/src/services/copilot-opportunities.ts

@@ -0,0 +1,61 @@
+import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import { CopilotOpportunity } from '../models/CopilotOpportunity'
+
+const baseUrl = `${EnvironmentConfig.API.V5}/projects`
+
+const PAGE_SIZE = 20
+
+/**
+ * Creates a CopilotOpportunity object by merging the provided data and its nested data,
+ * setting specific properties, and formatting the createdAt date.
+ *
+ * @param data - The input data object containing the properties to be merged and transformed.
+ * @returns A new CopilotOpportunity object with the transformed properties.
+ */
+function copilotOpportunityFactory(data: any): CopilotOpportunity {
+    return {
+        ...data,
+        ...data.data,
+        projectName: data.project.name,
+    }
+}
+
+export interface CopilotOpportunitiesResponse {
+    isValidating: boolean;
+    data: CopilotOpportunity[];
+    size: number;
+    setSize: (size: number) => void;
+}
+
+/**
+ * Custom hook to fetch all copilot requests.
+ *
+ * @returns {CopilotOpportunitiesResponse} - The response containing copilot opportunities.
+ */
+export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
+    const getKey = (pageIndex: number, previousPageData: CopilotOpportunity[]): string | undefined => {
+        if (previousPageData && previousPageData.length < PAGE_SIZE) return undefined
+        return `${baseUrl}/copilots/opportunities?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}&sort=createdAt desc`
+    }
+
+    const fetcher = (url: string): Promise<CopilotOpportunity[]> => xhrGetAsync<CopilotOpportunity[]>(url)
+        .then((data: any) => data.map(copilotOpportunityFactory))
+
+    const {
+        isValidating,
+        data = [],
+        size,
+        setSize,
+    }: SWRInfiniteResponse<CopilotOpportunity[]> = useSWRInfinite(getKey, fetcher, {
+        revalidateOnFocus: false,
+    })
+
+    // Flatten data array
+    const opportunities = data ? data.flat() : []
+
+    return { data: opportunities, isValidating, setSize: (s: number) => { setSize(s) }, size }
+}

src/libs/ui/lib/components/table/Table.module.scss

@@ -96,3 +96,5 @@
     display: flex;
     justify-content: center;
 }
+
+

src/libs/ui/lib/components/table/table-cell/TableCell.tsx

@@ -31,19 +31,16 @@ const TableCell: <T extends { [propertyName: string]: any }>(
 ) => {
     const ContainerTag = props.as ?? 'td'
     let data: string | JSX.Element | undefined
+    const rawDate = props.data[props.propertyName as string]
     switch (props.type) {
         case 'date':
-            data = textFormatDateLocaleShortString(
-                props.data[props.propertyName as string] as Date,
-            )
+            data = textFormatDateLocaleShortString(new Date(rawDate))
             break
-
         case 'action':
         case 'element':
         case 'numberElement':
             data = props.renderer?.(props.data)
             break
-
         case 'money':
             data = textFormatMoneyLocaleString(
                 props.data[props.propertyName as string],