Initial talent search implementation

Author: jmgasper

craco.config.js

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

src/apps/platform/src/platform.routes.tsx

@@ -4,6 +4,7 @@ import { devCenterRoutes } from '~/apps/dev-center'
 import { gamificationAdminRoutes } from '~/apps/gamification-admin'
 import { earnRoutes } from '~/apps/earn'
 import { selfServiceRoutes } from '~/apps/self-service'
+import { talentSearchRoutes } from '~/apps/talent-search'
 
 const Home: LazyLoadedComponent = lazyLoad(() => import('./routes/home'), 'HomePage')
 
@@ -24,5 +25,6 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...earnRoutes,
     ...learnRoutes,
     ...gamificationAdminRoutes,
-    ...homeRoutes,
+    ...talentSearchRoutes,
+    ...homeRoutes
 ]

src/apps/talent-search/README.md

@@ -0,0 +1,6 @@
+### Talent search
+
+This is an internal for finding members based on skills and other search facets.  The main APIs used include:
+
+* Member API
+* Match Engine API

src/apps/talent-search/index.ts

@@ -0,0 +1 @@
+export * from './src'

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

@@ -0,0 +1,22 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { toolTitle } from './talent-search.routes'
+
+const TalentSearchApp: FC<{}> = () => {
+
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <>
+            <Outlet />
+            <Routes>
+                {getChildRoutes(toolTitle)}
+            </Routes>
+        </>
+    )
+}
+
+export default TalentSearchApp

src/apps/talent-search/src/index.ts

@@ -0,0 +1 @@
+export * from './talent-search.routes'

src/apps/talent-search/src/lib/models/Member.ts

@@ -0,0 +1,20 @@
+import SkillScore from './SkillScore'
+
+export default interface Member {
+    userId: number;
+    handle: string;
+    firstName: string;
+    lastName: string;
+    country: string;
+    accountAge: number;
+    numberOfChallengesWon: number;
+    numberOfChallengesPlaced: number;
+    skills: Array<SkillScore>;
+    searchedSkills: Array<SkillScore>;
+    roles: Array<string>;
+    domains: Array<string>;
+    totalSkillScore: number;
+    searchedSkillScore: number;
+}
+
+  

src/apps/talent-search/src/lib/models/Skill.ts

@@ -0,0 +1,6 @@
+export default interface Skill {
+    id: string;
+    skillName: string;
+    description: string;
+}
+  

src/apps/talent-search/src/lib/models/SkillScore.ts

@@ -0,0 +1,5 @@
+
+export default interface SkillScore {
+    skill: string;
+    score: number;
+}

src/apps/talent-search/src/lib/services/MatcherService.ts

@@ -0,0 +1,28 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import Skill from '@talentSearch/lib/models/Skill'
+import Member from '@talentSearch/lib/models/Member'
+
+export async function getAllSkills(): Promise<Array<Skill>>{
+    return xhrGetAsync(`${EnvironmentConfig.API.V1}/match-engine/skills`)
+}
+
+export async function retrieveMatchesForSkills(skills:ReadonlyArray<Skill>): Promise<Array<Member>>{
+  const params = new URLSearchParams()
+  console.log("Search skills: " + JSON.stringify(skills))
+  skills.forEach(value => params.append('skill', value.skillName))
+  params.append('sortBy', 'numberOfChallengesWon')
+  params.append('sortOrder', 'desc')
+  
+  const url = `${EnvironmentConfig.API.V1}/match-engine/members?${params.toString()}`
+
+  return xhrGetAsync(url)
+}
+
+const MatcherService = {
+  getAllSkills,
+  retrieveMatchesForSkills,
+};
+
+export default MatcherService;

src/apps/talent-search/src/routes/talent-search/TalentSearch.module.scss

@@ -0,0 +1,25 @@
+@import "@libs/ui/styles/includes";
+@import '@talentSearch/styles/variables';
+
+.contentLayout {
+  width: 100%;
+  padding-top: 30px;
+
+  .contentLayout-outer {
+    width: 100%;
+
+    .contentLayout-inner {
+      width: 100%;
+      overflow: visible;
+    }
+  }
+}
+
+.header{
+  padding-bottom: 20px;
+}
+
+.options{
+  max-width: 600px;
+  padding-bottom: 30px;
+}

src/apps/talent-search/src/routes/talent-search/TalentSearch.tsx

@@ -0,0 +1,133 @@
+import {
+    FC,
+    useEffect,
+    useState,
+} from 'react'
+
+import { ContentLayout, LoadingSpinner } from '~/libs/ui'
+import SkillSearchResults from './components/skill-search-results/SkillSearchResults'
+import Skill from '@talentSearch/lib/models/Skill'
+import Member from '@talentSearch/lib/models/Member'
+import Select from 'react-select';
+
+import MatcherService from '@talentSearch/lib/services/MatcherService'
+
+import styles from './TalentSearch.module.scss'
+
+export const TalentSearch: FC = () => {
+    const [allSkills, setAllSkills] = useState<Array<Skill>>([]);
+    const [skillsFilter, setSkillsFilter] = useState<ReadonlyArray<Skill>>([]);
+    const [searchResults, setSearchResults] = useState<Array<Member>>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        retrieveAllSkills();
+    }, []);
+
+    const retrieveAllSkills = () => {
+        MatcherService.getAllSkills()
+        .then((response: Array<Skill>) => {
+            setAllSkills(response);
+            
+            console.log(JSON.stringify(allSkills));
+        })
+        .catch((e: Error) => {
+            console.log(e);
+        });
+    };
+
+    function retrieveMatches(filter:ReadonlyArray<Skill>){
+        setIsLoading(true);
+        setSearchResults([]);
+        MatcherService.retrieveMatchesForSkills(filter)
+        .then((response: Array<Member>) => {
+            if(response){
+                response.forEach(function (value){
+                    //The service doesn't always return all fields, so clean up the data a bit
+                    if(!value.numberOfChallengesPlaced){
+                        value.numberOfChallengesPlaced = 0
+                    }
+                    if(!value.numberOfChallengesWon){
+                        value.numberOfChallengesWon = 0
+                    }
+                    if(!value.country){
+                        value.country="-"
+                    }
+                    
+                    //totalSkillScore holds the total scoe for *all* skills associated with this member, regardless of if 
+                    //they are applicable against the searched skills
+                    value.totalSkillScore = 0
+
+                    //searchedSkillScore holds the total score for all searched skills (Javascript, HTML, CSS, for example)
+                    //for this particular member.  
+                    value.searchedSkillScore = 0
+                    value.searchedSkills = []
+                    if(value.skills){
+                        //This isn't super efficient, but should be OK for now
+                        //Here, we summarise the total score and collect an array of *just* the searched
+                        //skills, for aggregation so that the user can differentiate between all skills
+                        //for a particular member and the ones that are actively being searched for
+                        value.skills.forEach(function(skill){
+                            value.totalSkillScore += skill.score
+                            
+                            filter.forEach(function(searched){
+                                if(skill.skill == searched.skillName){
+                                    value.searchedSkillScore += skill.score
+                                    value.searchedSkills.push(skill)
+                                }
+                            })
+                        })
+                    }
+                })
+            }
+            setSearchResults(response);
+            setIsLoading(false);
+        })
+        .catch((e: Error) => {
+            console.log(e);
+        });
+    }
+
+    if(!allSkills || allSkills.length==0){
+        return (<LoadingSpinner />)
+    }
+
+    return (
+            <ContentLayout
+                contentClass={styles.contentLayout}
+                outerClass={styles['contentLayout-outer']}
+                innerClass={styles['contentLayout-inner']}
+            >
+            <div className={styles['header']}>
+              <h2>Talent search</h2>
+            </div>
+            <div className={styles['options']}>
+                <h4>Select Skills:</h4>
+                
+                <Select
+                    isMulti
+                    name="skills"
+                    className="basic-multi-select"
+                    classNamePrefix="select"
+                    getOptionLabel={(skill: Skill) => skill.skillName}
+                    getOptionValue={(skill: Skill) => skill.id}
+                    options={allSkills}
+                    onChange={(option: readonly Skill[]) => {
+                        setSkillsFilter(option);
+                        retrieveMatches(option);
+                    }}
+                />
+            </div>
+            
+
+            <SkillSearchResults 
+                results={searchResults}
+                skillsFilter={skillsFilter}
+                isLoading={isLoading}
+            />
+            
+            </ContentLayout>
+    )
+}
+
+export default TalentSearch

src/apps/talent-search/src/routes/talent-search/components/skill-search-results/SkillSearchResults.module.scss

@@ -0,0 +1,98 @@
+
+import { Component } from 'react'
+import Skill from '@talentSearch/lib/models/Skill'
+import Member from '@talentSearch/lib/models/Member'
+import { LoadingCircles, Table, TableColumn } from '~/libs/ui'
+import MemberHandleRenderer from './renderers/MemberHandleRenderer'
+
+import styles from './SkillSearchResults.module.scss'
+import MemberSkillsRenderer from './renderers/MemberSkillsRenderer'
+
+export const memberColumns: ReadonlyArray<TableColumn<Member>> = [
+    {
+        label: 'Handle',
+        propertyName: 'handle',
+        type: 'element',
+        renderer: MemberHandleRenderer,
+    },
+    {
+        label: 'Searched Skill Score',
+        propertyName: 'searchedSkillScore',
+        type: 'numberElement',
+        renderer: MemberSkillsRenderer,
+        defaultSortDirection: 'desc',
+        isDefaultSort: true,
+    },
+    {
+        label: 'Challenges Won',
+        propertyName: 'numberOfChallengesWon',
+        type: 'number',
+    },
+    {
+        label: 'Challenges Placed',
+        propertyName: 'numberOfChallengesPlaced',
+        type: 'number',
+    },
+    {
+        label: 'First Name',
+        propertyName: 'firstName',
+        type: 'text',
+    },
+    {
+        label: 'Last Name',
+        propertyName: 'lastName',
+        type: 'text',
+    },
+    {
+        label: 'Country',
+        propertyName: 'country',
+        type: 'text',
+    },
+    {
+        label: 'Total Skill Score',
+        propertyName: 'totalSkillScore',
+        type: 'number',
+        renderer: MemberSkillsRenderer,
+    }
+]
+
+type SkillSearchResultsProps = {
+    results:ReadonlyArray<Member>
+    skillsFilter?:ReadonlyArray<Skill>
+    isLoading?:boolean
+}
+
+export default class SkillSearchResult extends Component<SkillSearchResultsProps>{
+
+    render() {
+        console.log("results:" + this.props.results + this.props.results.length)
+        console.log("skillsFilter:" + this.props.skillsFilter + this.props.skillsFilter!.length)
+        console.log("Loading:",this.props.isLoading)
+        //If we searched and have no results, show "No results found", otherwise hide the results table 
+        //until a search has been made
+        if(this.props.isLoading){
+            return (<LoadingCircles />)
+        }
+        else if(this.props.skillsFilter && 
+            this.props.skillsFilter.length>0 && 
+            (!this.props.results || 
+            this.props.results.length==0)){
+            //TODO - fill this in with useful no results found
+            return (<div>No results found</div>)
+        }
+        else if(!this.props.skillsFilter || 
+                 this.props.skillsFilter.length==0){
+            return (<div></div>)
+        }
+
+        return (
+            <div>
+                <Table
+                    data={this.props.results}
+                    columns={memberColumns}
+                />
+            </div>
+        )
+    }
+}
+