PM-3329 show skills activity details

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -1,8 +1,9 @@
-import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { filter, orderBy } from 'lodash'
 
-import { UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core'
+import { getMemberSkillDetails, UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core'
 import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill, useLocalStorage } from '~/libs/shared'
 import { Button } from '~/libs/ui'
 
@@ -23,6 +24,7 @@ interface MemberSkillsInfoProps {
 const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProps) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
+    const [canFetchSkillDetails, setCanFetchSkillDetails] = useState(true)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
     const [hasSeenPrincipalIntro, setHasSeenPrincipalIntro] = useLocalStorage('seen-principal-intro', {} as any)
@@ -131,6 +133,15 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setPrincipalIntroModalVisible(false)
     }
 
+    const fetchSkillDetails = useCallback((skillId: string) => getMemberSkillDetails(props.profile.handle, skillId)
+        .catch(e => {
+            if (e.response.status === 403) {
+                setCanFetchSkillDetails(false)
+            }
+
+            throw e
+        }), [props.profile.handle])
+
     return (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -174,6 +185,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                                     skill={skill}
                                     key={skill.id}
                                     theme={isSkillVerified(skill) ? 'verified' : 'dark'}
+                                    fetchSkillDetails={canFetchSkillDetails ? fetchSkillDetails : undefined}
                                 />
                             ))}
                         </div>
@@ -188,6 +200,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         )}
                         <GroupedSkillsUI
                             groupedSkillsByCategory={groupedSkillsByCategory}
+                            fetchSkillDetails={canFetchSkillDetails ? fetchSkillDetails : undefined}
                         />
                     </div>
                 )}

src/config/environments/default.env.ts

@@ -96,6 +96,8 @@ export const STRIPE = {
 }
 
 export const URLS = {
+    ACADEMY_CERTIFICATION: `https://academy.${TC_DOMAIN}/tca-certifications`,
+    ACADEMY_COURSE: `https://academy.${TC_DOMAIN}/freeCodeCamp`,
     ACCOUNT_SETTINGS: `https://account-settings.${TC_DOMAIN}/#account`,
     CHALLENGES_PAGE: `${TOPCODER_URL}/challenges`,
     UNIVERSAL_NAV: `https://uni-nav.${TC_DOMAIN}/v1/tc-universal-nav.js`,

src/config/environments/global-config.model.ts

@@ -39,6 +39,8 @@ export interface GlobalConfig {
         API_VERSION: string | undefined
     }
     URLS: {
+        ACADEMY_CERTIFICATION: string
+        ACADEMY_COURSE: string
         USER_PROFILE: string
         ACCOUNT_SETTINGS: string
         UNIVERSAL_NAV: string

src/libs/core/lib/profile/profile-functions/profile-store/index.ts

@@ -2,6 +2,7 @@ export {
     get as profileStoreGet,
     patchName as profileStorePatchName,
     getMemberStats,
+    getMemberSkillDetails,
 } from './profile-xhr.store'
 
 export {

src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts

@@ -7,6 +7,7 @@ import { UpdateProfileRequest, UserPhotoUpdateResponse } from '../../modify-user
 import { ModifyUserPropertyRequest, ModifyUserPropertyResponse } from '../../modify-user-role.model'
 import { UserEmailPreferences } from '../../user-email-preference.model'
 import { UserProfile } from '../../user-profile.model'
+import { UserSkillWithActivity } from '../../user-skill.model'
 import { UserStats } from '../../user-stats.model'
 import { UserTraits } from '../../user-traits.model'
 
@@ -123,3 +124,7 @@ export async function updateMemberPhoto(handle: string, payload: FormData): Prom
 export async function downloadProfile(handle: string): Promise<Blob> {
     return xhrGetBlobAsync<Blob>(`${profileUrl(handle)}/profileDownload`)
 }
+
+export function getMemberSkillDetails(handle: string, skillId: string): Promise<UserSkillWithActivity> {
+    return xhrGetAsync<UserSkillWithActivity>(`${profileUrl(handle)}/skills/${skillId}`)
+}

src/libs/core/lib/profile/user-skill.model.ts

@@ -38,4 +38,25 @@ export type UserSkill = {
     description?: string | null | undefined
 }
 
+export type UserSkillActivity = {
+    count: number
+    lastSources: Array<{
+        id?: string
+        completionEventId?: string
+        title?: string
+        name?: string
+        certification?: string
+        dashedName?: string
+    }>
+}
+
+export type UserSkillWithActivity = {
+    lastUsedDate: string
+    activity: {
+        certification?: UserSkillActivity
+        course?: UserSkillActivity
+        challenge?: UserSkillActivity
+    }
+} & UserSkill
+
 export type SearchUserSkill = Pick<UserSkill, 'id'|'name'> & Partial<Pick<UserSkill, 'levels'>>

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx

@@ -4,11 +4,13 @@ import { UserSkill } from '~/libs/core'
 import { SkillPill } from '~/libs/shared'
 
 import { SkillsList } from '../skills-list'
+import { SkillPillProps } from '../skill-pill/SkillPill'
 
 import styles from './GroupedSkillsUI.module.scss'
 
 interface GroupedSkillsUIProps {
     groupedSkillsByCategory: { [key: string]: UserSkill[] }
+    fetchSkillDetails: SkillPillProps['fetchSkillDetails']
 }
 const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => (
     <div
@@ -29,6 +31,7 @@ const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps)
                                         skill={skill}
                                         key={skill.id}
                                         theme='catList'
+                                        fetchSkillDetails={props.fetchSkillDetails}
                                     />
                                 ))
                         }

src/libs/shared/lib/components/skill-pill/SkillPill.module.scss

@@ -69,3 +69,19 @@
         align-items: flex-start;
     }
 }
+
+.tooltipRow {
+    display: flex;
+    align-items: center;
+    gap: $sp-1;
+    text-align: left;
+    &.padLeft{
+        padding-left: $sp-2;
+    }
+}
+
+.tooltipDetails {
+    li {
+        margin-top: $sp-2;
+    }
+}

src/libs/shared/lib/components/skill-pill/SkillPill.tsx

@@ -1,8 +1,12 @@
-import { FC, ReactNode, useCallback, useMemo } from 'react'
+/* eslint-disable complexity */
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react'
+import { format } from 'date-fns'
 import classNames from 'classnames'
+import useSWR, { SWRResponse } from 'swr'
 
-import { IconOutline } from '~/libs/ui'
-import { UserSkill } from '~/libs/core'
+import { EnvironmentConfig } from '~/config'
+import { IconOutline, Tooltip } from '~/libs/ui'
+import { UserSkill, UserSkillWithActivity } from '~/libs/core'
 
 import { isSkillVerified } from '../../services/standard-skills'
 
@@ -12,11 +16,15 @@ export interface SkillPillProps {
     children?: ReactNode
     onClick?: (skill: UserSkill) => void
     selected?: boolean
-    skill: Partial<Pick<UserSkill, 'name'|'levels'>>
+    skill: Partial<Pick<UserSkill, 'id'|'name'|'levels'>>
     theme?: 'dark' | 'verified' | 'presentation' | 'etc' | 'catList'
+    fetchSkillDetails?: (skillId: string) => Promise<UserSkillWithActivity>
 }
 
 const SkillPill: FC<SkillPillProps> = props => {
+    const [hideDetails, setHideDetails] = useState(false)
+    const [loadDetails, setLoadDetails] = useState(false)
+
     const isVerified = useMemo(() => (
         isSkillVerified({ levels: props.skill.levels ?? [] })
     ), [props.skill])
@@ -29,10 +37,103 @@ const SkillPill: FC<SkillPillProps> = props => {
         styles[`theme-${props.theme ?? ''}`],
     )
 
+    const handleMouseEnter = useCallback(() => {
+        setLoadDetails(true)
+    }, [])
+
     const handleClick = useCallback(() => props.onClick?.call(undefined, props.skill as UserSkill), [
         props.onClick, props.skill,
     ])
 
+    const { data: skillDetails, isValidating: isLoadingDetails }: SWRResponse<UserSkillWithActivity>
+        = useSWR<UserSkillWithActivity>(
+            loadDetails
+            && props.fetchSkillDetails
+            && props.skill?.id ? `user-skill-activity/${props.skill.id}` : undefined,
+            () => props.fetchSkillDetails!(props.skill.id!)
+                .catch(() => {
+                    setHideDetails(true)
+                    return {} as any
+                }),
+        )
+
+    const skillDetailsTooltipContent = useMemo(() => {
+        if (!skillDetails || isLoadingDetails || hideDetails) {
+            return 'Loading...'
+        }
+
+        return (
+            <>
+                <div className={styles.tooltipRow}>
+                    <strong>Last used:</strong>
+                    <span>{format(new Date(skillDetails.lastUsedDate), 'MMM dd, yyyy HH:mm')}</span>
+                </div>
+                <ul className={styles.tooltipDetails}>
+                    {skillDetails.activity.challenge && (
+                        <li>
+                            <div className={styles.tooltipRow}>
+                                Challenges (
+                                {skillDetails.activity.challenge.count}
+                                ):
+                            </div>
+                            {skillDetails.activity.challenge.lastSources.map(s => (
+                                <a
+                                    key={s.id}
+                                    className={classNames(styles.tooltipRow, styles.padLeft)}
+                                    href={`${EnvironmentConfig.URLS.CHALLENGES_PAGE}/${s.id}`}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    {s.name}
+                                </a>
+                            ))}
+                        </li>
+                    )}
+                    {skillDetails.activity.course && (
+                        <li>
+                            <div className={styles.tooltipRow}>
+                                Courses (
+                                {skillDetails.activity.course.count}
+                                ):
+                            </div>
+                            {skillDetails.activity.course.lastSources.map(s => (
+                                <a
+                                    key={s.completionEventId}
+                                    className={classNames(styles.tooltipRow, styles.padLeft)}
+                                    href={`${EnvironmentConfig.URLS.ACADEMY_COURSE}/${s.certification}`}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    {s.title}
+                                </a>
+                            ))}
+                        </li>
+                    )}
+                    {skillDetails.activity.certification && (
+                        <li>
+                            <div className={styles.tooltipRow}>
+                                TCA Certifications (
+                                {skillDetails.activity.certification.count}
+                                ):
+                            </div>
+                            {skillDetails.activity.certification.lastSources.map(s => (
+                                <a
+                                    key={s.completionEventId}
+                                    className={classNames(styles.tooltipRow, styles.padLeft)}
+                                    href={`${EnvironmentConfig.URLS.ACADEMY_CERTIFICATION}/${s.dashedName}`}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    {s.title}
+                                </a>
+                            ))}
+                        </li>
+                    )}
+                </ul>
+            </>
+        )
+    }, [skillDetails, isLoadingDetails, hideDetails])
+
     return (
         <div
             className={className}
@@ -42,7 +143,17 @@ const SkillPill: FC<SkillPillProps> = props => {
                 {props.skill.name}
                 {props.children}
             </span>
-            {isVerified && <IconOutline.CheckCircleIcon />}
+            {isVerified && props.fetchSkillDetails && !hideDetails && (
+                <Tooltip
+                    clickable
+                    content={isLoadingDetails ? 'Loading...' : skillDetailsTooltipContent}
+                >
+                    <IconOutline.CheckCircleIcon onMouseEnter={handleMouseEnter} />
+                </Tooltip>
+            )}
+            {isVerified && (!props.fetchSkillDetails || hideDetails) && (
+                <IconOutline.CheckCircleIcon />
+            )}
         </div>
     )
 }