Merge pull request #1086 from topcoder-platform/pm-580

feat(PM-580): added assign action to applications list

Author: kkartunov

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

@@ -1,8 +1,15 @@
+export enum CopilotApplicationStatus {
+    INVITED = 'invited',
+    ACCEPTED = 'accepted',
+    PENDING = 'pending',
+}
+
 export interface CopilotApplication {
     id: number,
     notes?: string,
     createdAt: Date,
     opportunityId: string,
     handle?: string,
     userId: number,
+    status: CopilotApplicationStatus,
 }

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

@@ -137,8 +137,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
             }
             infoComponent={(isCopilot && !(copilotApplications
                 && copilotApplications.length === 0
-                && opportunity?.status === 'active'
-            ) && !!application) && (
+            ) && opportunity?.status === 'active' && !!application) && (
                 <div className={styles.applied}>
                     <IconSolid.CheckCircleIcon className={styles.appliedIcon} />
                     <span

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

@@ -0,0 +1,56 @@
+import { useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import { mutate } from 'swr'
+import { useCallback } from 'react'
+
+import { assignCopilotOpportunity, copilotBaseUrl } from '~/apps/copilots/src/services/copilot-opportunities'
+import { CopilotApplication, CopilotApplicationStatus } from '~/apps/copilots/src/models/CopilotApplication'
+import { IconSolid, Tooltip } from '~/libs/ui'
+
+import styles from './styles.module.scss'
+
+const CopilotApplicationAction = (copilotApplication: CopilotApplication): JSX.Element => {
+    const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
+    const onClick = useCallback(async () => {
+        if (copilotApplication.status !== CopilotApplicationStatus.PENDING) {
+            return
+        }
+
+        if (opportunityId) {
+            try {
+                await assignCopilotOpportunity(opportunityId, copilotApplication.id)
+                toast.success('Invited a copilot')
+                mutate(`${copilotBaseUrl}/copilots/opportunity/${opportunityId}/applications`)
+            } catch (e) {
+                const error = e as Error
+                toast.error(error.message)
+            }
+
+        }
+    }, [opportunityId, copilotApplication])
+    return (
+        <div onClick={onClick} className={styles.actionWrapper}>
+            {
+                copilotApplication.status === CopilotApplicationStatus.INVITED && (
+                    <Tooltip content='User already invited'>
+                        <IconSolid.MailOpenIcon />
+                    </Tooltip>
+                )
+            }
+
+            {
+                copilotApplication.status === CopilotApplicationStatus.PENDING && (
+                    <IconSolid.UserAddIcon />
+                )
+            }
+
+            {
+                copilotApplication.status === CopilotApplicationStatus.ACCEPTED && (
+                    <IconSolid.BadgeCheckIcon />
+                )
+            }
+        </div>
+    )
+}
+
+export default CopilotApplicationAction

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

@@ -6,6 +6,7 @@ import { USER_PROFILE_URL } from '~/config/environments/default.env'
 import { CopilotApplication } from '../../../../models/CopilotApplication'
 import { FormattedMembers } from '../../../../services/members'
 
+import CopilotApplicationAction from './CopilotApplicationAction'
 import styles from './styles.module.scss'
 
 const tableColumns: TableColumn<CopilotApplication>[] = [
@@ -33,6 +34,16 @@ const tableColumns: TableColumn<CopilotApplication>[] = [
         propertyName: 'activeProjects',
         type: 'text',
     },
+    {
+        label: 'Status',
+        propertyName: 'status',
+        renderer: (copilotApplication: CopilotApplication) => (
+            <div className={styles.status}>
+                {copilotApplication.status}
+            </div>
+        ),
+        type: 'element',
+    },
     {
         label: 'Applied Date',
         propertyName: 'createdAt',
@@ -48,6 +59,12 @@ const tableColumns: TableColumn<CopilotApplication>[] = [
         ),
         type: 'element',
     },
+    {
+        label: 'Actions',
+        propertyName: '',
+        renderer: CopilotApplicationAction,
+        type: 'element',
+    },
 ]
 
 const CopilotApplications: FC<{

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

@@ -0,0 +1,14 @@
+@import '@libs/ui/styles/includes';
+
+.status {
+    text-transform: capitalize;
+}
+
+.actionWrapper {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    svg {
+        color: $teal-100;
+    }
+}

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

@@ -105,6 +105,21 @@ export const applyCopilotOpportunity = async (opportunityId: number, request?: {
     return xhrPostAsync(url, request, {})
 }
 
+/**
+ * apply copilot opportunity
+ * @param opportunityId
+ * @param applicationId
+ * @returns
+ */
+export const assignCopilotOpportunity = async (
+    opportunityId: string,
+    applicationId: number,
+): Promise<{applicationId: number}> => {
+    const url = `${copilotBaseUrl}/copilots/opportunity/${opportunityId}/assign`
+
+    return xhrPostAsync(url, { applicationId: applicationId.toString() }, {})
+}
+
 /**
  * Custom hook to fetch copilot applications by opportunity id.
  *