TAL - import profiles page into talent search app, render as new route, move shared swr config to @shared library

Author: vas3a

craco.config.js

@@ -42,6 +42,7 @@ module.exports = {
             '@devCenter': resolve('src/apps/dev-center/src'),
             '@gamificationAdmin': resolve('src/apps/gamification-admin/src'),
             '@talentSearch': resolve('src/apps/talent-search/src'),
+            '@profiles': resolve('src/apps/profiles/src'),
 
             '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files

src/apps/profiles/src/ProfilesApp.tsx

@@ -2,20 +2,20 @@ import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
 import { routerContext, RouterContextData } from '~/libs/core'
+import { SharedSwrConfig } from '~/libs/shared'
 
 import { toolTitle } from './profiles.routes'
-import { ProfileSwr } from './lib'
 
 const ProfilesApp: FC<{}> = () => {
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
 
     return (
-        <ProfileSwr>
+        <SharedSwrConfig>
             <Outlet />
             <Routes>
                 {getChildRoutes(toolTitle)}
             </Routes>
-        </ProfileSwr>
+        </SharedSwrConfig>
     )
 }
 

src/apps/profiles/src/lib/index.ts

@@ -1,2 +1 @@
-export * from './profile-swr'
 export * from './helpers'

src/apps/profiles/src/lib/profile-swr/index.ts

@@ -2,6 +2,7 @@ import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
 import { routerContext, RouterContextData } from '~/libs/core'
+import { SharedSwrConfig } from '~/libs/shared'
 
 import { toolTitle } from './talent-search.routes'
 
@@ -10,12 +11,12 @@ const TalentSearchApp: FC<{}> = () => {
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
 
     return (
-        <>
+        <SharedSwrConfig>
             <Outlet />
             <Routes>
                 {getChildRoutes(toolTitle)}
             </Routes>
-        </>
+        </SharedSwrConfig>
     )
 }
 

src/apps/talent-search/src/TalentSearchApp.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, FC } from 'react'
 import { orderBy } from 'lodash'
+import { Link } from 'react-router-dom'
 import codes from 'country-calling-code'
 
 import { IconSolid } from '~/libs/ui'
@@ -8,6 +9,7 @@ import { EmsiSkill, isSkillVerified } from '~/libs/shared'
 import { MatchBar } from '../match-bar'
 import { SkillPill } from '../skill-pill'
 import { Member } from '../../lib/models'
+import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
 
 import styles from './TalentCard.module.scss'
 
@@ -27,13 +29,19 @@ interface TalentCardProps {
 }
 
 const TalentCard: FC<TalentCardProps> = props => {
-    const visibleSkills = orderBy(props.member.emsiSkills, [props.isMatchingSkill, isSkillVerified], ['desc', 'desc'])
+    const talentRoute = `${TALENT_SEARCH_PATHS.talent}/${props.member.handle}`
+
+    const visibleSkills = orderBy(
+        props.member.emsiSkills,
+        [props.isMatchingSkill, isSkillVerified],
+        ['desc', 'desc'],
+    )
         .slice(0, 6) as EmsiSkill[]
 
     const hiddenSkills = props.member.emsiSkills.length - visibleSkills.length
 
     return (
-        <div className={styles.wrap}>
+        <Link to={talentRoute} className={styles.wrap}>
             <div
                 className={styles.profilePic}
                 style={{ '--background-image-url': `url(${props.member.photoURL})` } as CSSProperties}
@@ -83,7 +91,7 @@ const TalentCard: FC<TalentCardProps> = props => {
                     )}
                 </div>
             </div>
-        </div>
+        </Link>
     )
 }
 

src/apps/talent-search/src/components/talent-card/TalentCard.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react'
+
+import { MemberProfilePage } from '@profiles/member-profile'
+
+const TalentPage: FC = () => (
+    <MemberProfilePage />
+)
+
+export default TalentPage

src/apps/talent-search/src/routes/talent-page/TalentPage.module.scss

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

src/apps/talent-search/src/routes/talent-page/TalentPage.tsx

@@ -9,6 +9,10 @@ const SearchResultsPage: LazyLoadedComponent = lazyLoad(
     () => import('./routes/search-results-page'),
     'SearchResultsPage',
 )
+const TalentPage: LazyLoadedComponent = lazyLoad(
+    () => import('./routes/talent-page'),
+    'TalentPage',
+)
 
 export const rootRoute: string = (
     EnvironmentConfig.SUBDOMAIN === AppSubdomain.talentSearch ? '' : `/${AppSubdomain.talentSearch}`
@@ -17,6 +21,7 @@ export const rootRoute: string = (
 export const TALENT_SEARCH_PATHS = {
     results: `${rootRoute}/results`,
     root: rootRoute,
+    talent: `${rootRoute}/talent`,
 }
 
 export const toolTitle: string = ToolTitle.talentSearch
@@ -33,6 +38,10 @@ export const talentSearchRoutes: ReadonlyArray<PlatformRoute> = [
                 element: <SearchResultsPage />,
                 route: '/results',
             },
+            {
+                element: <TalentPage />,
+                route: '/talent/:memberHandle',
+            },
         ],
         domain: AppSubdomain.talentSearch,
         element: <TalentSearchAppRoot />,