TAL - update search results page

vas3a · vas3a · commit 4d43439730e1 · 2023-07-20T00:26:06.000+03:00
diff --git a/src/apps/talent-search/src/assets/background.jpg b/src/apps/talent-search/src/assets/background.jpg
diff --git a/src/apps/talent-search/src/assets/background.png b/src/apps/talent-search/src/assets/background.png
diff --git a/src/apps/talent-search/src/assets/background.webp b/src/apps/talent-search/src/assets/background.webp
diff --git a/src/apps/talent-search/src/components/talent-card/TalentCard.module.scss b/src/apps/talent-search/src/components/talent-card/TalentCard.module.scss
@@ -34,11 +34,11 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
-        left: 0;
+        top: -10%;
+        left: -10%;
         z-index: -1;
-        width: 100%;
-        height: 100%;
+        width: 120%;
+        height: 120%;
         background-image: var(--background-image-url);
         background-position: center;
         background-size: cover;
diff --git a/src/apps/talent-search/src/components/talent-card/TalentCard.tsx b/src/apps/talent-search/src/components/talent-card/TalentCard.tsx
@@ -1,23 +1,33 @@
 import { CSSProperties, FC } from 'react'
 import { orderBy } from 'lodash'
+import codes from 'country-calling-code'
 
 import { IconSolid } from '~/libs/ui'
-import { EmsiSkill } from '~/libs/shared'
+import { EmsiSkill, isSkillVerified } from '~/libs/shared'
 
 import { MatchBar } from '../match-bar'
 import { SkillPill } from '../skill-pill'
 import { Member } from '../../lib/models'
 
 import styles from './TalentCard.module.scss'
 
+const getCountry = (countryCode: string): string => (
+    codes.find(c => c.isoCode3 === countryCode || c.isoCode2 === countryCode)?.country ?? countryCode ?? ''
+)
+
+const getAddrString = (city: string, country: string): string => (
+    [city, country].filter(Boolean)
+        .join(', ')
+)
+
 interface TalentCardProps {
     isMatchingSkill: (skill: EmsiSkill) => boolean
     member: Member
     match?: number
 }
 
 const TalentCard: FC<TalentCardProps> = props => {
-    const visibleSkills = orderBy(props.member.emsiSkills, props.isMatchingSkill, 'desc')
+    const visibleSkills = orderBy(props.member.emsiSkills, [props.isMatchingSkill, isSkillVerified], ['desc', 'desc'])
         .slice(0, 6) as EmsiSkill[]
 
     const hiddenSkills = props.member.emsiSkills.length - visibleSkills.length
@@ -53,7 +63,7 @@ const TalentCard: FC<TalentCardProps> = props => {
                         >
                             <IconSolid.LocationMarkerIcon className='icon-xxl' />
                             <span className='body-main'>
-                                {`${addr.city}, ${addr.stateCode}`}
+                                {getAddrString(addr.city, getCountry(props.member.homeCountryCode))}
                             </span>
                         </div>
                     ))}
@@ -63,9 +73,9 @@ const TalentCard: FC<TalentCardProps> = props => {
                     {visibleSkills.map(skill => (
                         <SkillPill
                             key={skill.skillId}
-                            theme='dark'
+                            theme={props.isMatchingSkill(skill) ? 'verified' : 'dark'}
                             skill={skill}
-                            verified={props.isMatchingSkill(skill)}
+                            verified={isSkillVerified(skill)}
                         />
                     ))}
                     {hiddenSkills > 0 && (
diff --git a/src/apps/talent-search/src/lib/models/Skill.ts b/src/apps/talent-search/src/lib/models/Skill.ts
diff --git a/src/apps/talent-search/src/lib/models/index.ts b/src/apps/talent-search/src/lib/models/index.ts
@@ -2,4 +2,3 @@ export type { default as Member } from './Member'
 export type { default as MemberEmsiSkill } from './MemberEmsiSkill'
 export type { default as MemberMaxRating } from './MemberMaxRating'
 export type { default as MemberStats } from './MemberStats'
-export type { default as Skill } from './Skill'
diff --git a/src/apps/talent-search/src/lib/services/use-fetch-talent-matches.ts b/src/apps/talent-search/src/lib/services/use-fetch-talent-matches.ts
@@ -1,22 +1,27 @@
+import { uniqBy } from 'lodash'
+import { useEffect, useState } from 'react'
 import useSWR, { SWRResponse } from 'swr'
 
 import { EnvironmentConfig } from '~/config'
-import { xhrGetAsync } from '~/libs/core'
+import { PaginatedResponse, xhrGetPaginatedAsync } from '~/libs/core'
 import { Skill } from '~/libs/shared'
 import Member from '@talentSearch/lib/models/Member'
 
-export interface TalenMatchesResponse {
+export interface TalentMatchesResponse {
     error: boolean,
     loading: boolean,
     matches: Member[],
+    page: number,
     ready: boolean,
+    total: number,
+    totalPages: number,
 }
 
-export function useFetchTalenMatches(
+export function useFetchTalentMatches(
     skills: ReadonlyArray<Skill>,
     page: number,
     pageSize: number,
-): TalenMatchesResponse {
+): TalentMatchesResponse {
     const searchParams = [
         ...skills.map(s => `skillId=${s.emsiId}`),
         'sortBy=skillScore',
@@ -26,14 +31,56 @@ export function useFetchTalenMatches(
 
     const url = `${EnvironmentConfig.API.V5}/members/searchBySkills?${searchParams}`
 
-    const { data, error }: SWRResponse = useSWR(url, xhrGetAsync, {
+    const { data, error }: SWRResponse<PaginatedResponse<Member[]>> = useSWR(url, xhrGetPaginatedAsync<Member[]>, {
         isPaused: () => !skills?.length,
+        refreshInterval: 0,
+        revalidateOnFocus: false,
     })
 
+    const matches = data?.data
+
     return {
         error: !!error,
-        loading: !data,
-        matches: data ?? [],
-        ready: !!data,
+        loading: !matches,
+        matches: matches ?? [],
+        page: data?.page ?? 0,
+        ready: !!matches,
+        total: data?.total ?? 0,
+        totalPages: data?.totalPages ?? 0,
+    }
+}
+
+export interface InfiniteTalentMatchesResposne {
+    fetchNext: () => void
+    hasNext: boolean
+    matches: Member[]
+    page: number
+    loading: boolean
+    total: number
+}
+
+export function useInfiniteTalentMatches(
+    skills: ReadonlyArray<Skill>,
+    pageSize: number = 10,
+): InfiniteTalentMatchesResposne {
+    const [matches, setMatches] = useState([] as Member[])
+    const [page, setPage] = useState(1)
+    const matchResponse = useFetchTalentMatches(skills, page, pageSize)
+
+    function fetchNext(): void {
+        setPage(p => p + 1)
+    }
+
+    useEffect(() => {
+        setMatches(m => uniqBy([...m, ...matchResponse.matches], 'userId'))
+    }, [matchResponse.matches])
+
+    return {
+        fetchNext,
+        hasNext: matchResponse.page < matchResponse.totalPages,
+        loading: matchResponse.loading,
+        matches,
+        page,
+        total: matchResponse.total,
     }
 }
diff --git a/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss b/src/apps/talent-search/src/routes/search-page/SearchPage.module.scss
@@ -1,7 +1,7 @@
 @import "@libs/ui/styles/includes";
 
 .contentLayout {
-    background-image: url("../../assets/background.png");
+    background-image: url("../../assets/background.webp");
     background-size: cover;
     background-repeat: no-repeat;
 }
diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.module.scss b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.module.scss
@@ -6,10 +6,15 @@
 
 .headerContentLayout {
     height: 100%;
-    background-image: url("../../assets/background.png");
+    background-image: url("../../assets/background.jpg");
     background-size: cover;
     background-repeat: no-repeat;
-    padding: 0 $sp-8;
+    position: relative;
+    z-index: 2;
+
+    &Inner {
+        padding: 0 $sp-8;
+    }
 }
 
 .summaryText {
@@ -29,6 +34,11 @@
     background: $black-5;
     padding: $sp-2;
     position: relative;
+    z-index: 1;
+
+    .contentLayout-inner {
+        padding-bottom: $sp-12;
+    }
 }
 
 .resultsWrap {
@@ -37,3 +47,8 @@
     gap: $sp-9;
 }
 
+.moreBtn {
+    margin-top: $sp-8;
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
@@ -1,19 +1,25 @@
 import { FC, useCallback } from 'react'
 import classNames from 'classnames'
 
-import { ContentLayout, LoadingSpinner } from '~/libs/ui'
+import { Button, ContentLayout, LoadingCircles } from '~/libs/ui'
 import { EmsiSkill } from '~/libs/shared'
 
 import { TalentCard } from '../../components/talent-card'
 import { SearchInput } from '../../components/search-input'
 import { useUrlQuerySearchParms } from '../../lib/utils/search-query'
-import { TalenMatchesResponse, useFetchTalenMatches } from '../../lib/services'
+import { InfiniteTalentMatchesResposne, useInfiniteTalentMatches } from '../../lib/services'
 
 import styles from './SearchResultsPage.module.scss'
 
 const SearchResultsPage: FC = () => {
     const [skills, setSkills] = useUrlQuerySearchParms('q')
-    const { matches, loading }: TalenMatchesResponse = useFetchTalenMatches(skills, 1, 10)
+    const {
+        loading,
+        matches,
+        fetchNext,
+        hasNext,
+        total,
+    }: InfiniteTalentMatchesResposne = useInfiniteTalentMatches(skills)
 
     const isMatchingSkill = useCallback((skill: EmsiSkill) => (
         !!skills.find(s => skill.skillId === s.emsiId)
@@ -22,7 +28,10 @@ const SearchResultsPage: FC = () => {
     return (
         <>
             <div className={styles.headerWrap}>
-                <ContentLayout contentClass={styles.headerContentLayout}>
+                <ContentLayout
+                    contentClass={styles.headerContentLayout}
+                    innerClass={styles.headerContentLayoutInner}
+                >
                     <SearchInput
                         className={styles.searchInput}
                         skills={skills}
@@ -35,14 +44,21 @@ const SearchResultsPage: FC = () => {
                 outerClass={styles['contentLayout-outer']}
                 innerClass={styles['contentLayout-inner']}
             >
-                <LoadingSpinner hide={!loading} />
                 <div className={classNames('body-medium-normal', styles.summaryText)}>
-                    We found&nbsp;
-                    <span className='body-medium-medium'>
-                        {matches.length}
-                        &nbsp;Experts
-                    </span>
-                    &nbsp;that match your search
+                    {loading ? (
+                        <>
+                            Finding experts that match your search...
+                        </>
+                    ) : (
+                        <>
+                            We found&nbsp;
+                            <span className='body-medium-medium'>
+                                {total}
+                                &nbsp;Experts
+                            </span>
+                            &nbsp;that match your search
+                        </>
+                    )}
                 </div>
                 <div className={styles.resultsWrap}>
                     {matches.map(member => (
@@ -54,6 +70,13 @@ const SearchResultsPage: FC = () => {
                         />
                     ))}
                 </div>
+                {loading && <LoadingCircles />}
+
+                {hasNext && (
+                    <div className={styles.moreBtn}>
+                        <Button secondary size='lg' onClick={fetchNext}>Load more</Button>
+                    </div>
+                )}
             </ContentLayout>
         </>
     )
diff --git a/src/libs/core/lib/xhr/xhr-functions/index.ts b/src/libs/core/lib/xhr/xhr-functions/index.ts
@@ -3,7 +3,9 @@ export {
     deleteAsync as xhrDeleteAsync,
     getAsync as xhrGetAsync,
     getBlobAsync as xhrGetBlobAsync,
+    getPaginatedAsync as xhrGetPaginatedAsync,
     patchAsync as xhrPatchAsync,
     postAsync as xhrPostAsync,
     putAsync as xhrPutAsync,
+    type PaginatedResponse,
 } from './xhr.functions'
diff --git a/src/libs/core/lib/xhr/xhr-functions/xhr.functions.ts b/src/libs/core/lib/xhr/xhr-functions/xhr.functions.ts
@@ -1,10 +1,19 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { identity } from 'lodash'
+import axios, { AxiosHeaders, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 
 import { tokenGetAsync, TokenModel } from '../../auth'
 
 // initialize the global instance when this singleton is loaded
 export const globalInstance: AxiosInstance = createInstance()
 
+export const getResonseXHeader = <T>(
+    headers: AxiosHeaders,
+    headerName: string,
+    // eslint-disable-next-line default-param-last
+    parser: any = identity,
+    defaultValue?: T | undefined,
+): T => (parser(headers.get(headerName)) ?? defaultValue) as T
+
 export function createInstance(): AxiosInstance {
 
     // create the instance
@@ -31,6 +40,29 @@ export async function getAsync<T>(url: string, xhrInstance: AxiosInstance = glob
     return output.data
 }
 
+export interface PaginatedResponse<T> {
+    data: T;
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+}
+
+export async function getPaginatedAsync<T>(
+    url: string,
+    xhrInstance: AxiosInstance = globalInstance,
+): Promise<PaginatedResponse<T>> {
+    const output: AxiosResponse<T> = await xhrInstance.get(url)
+
+    return {
+        data: output.data,
+        page: getResonseXHeader(output.headers as AxiosHeaders, 'x-page', Number, 0),
+        perPage: getResonseXHeader(output.headers as AxiosHeaders, 'x-per-page', Number, 0),
+        total: getResonseXHeader(output.headers as AxiosHeaders, 'x-total', Number, 0),
+        totalPages: getResonseXHeader(output.headers as AxiosHeaders, 'x-total-pages', Number, 0),
+    }
+}
+
 export async function getBlobAsync<T>(url: string, xhrInstance: AxiosInstance = globalInstance): Promise<T> {
     const output: AxiosResponse<T> = await xhrInstance.get(url, { responseType: 'blob' })
     return output.data
diff --git a/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts b/src/libs/shared/lib/services/emsi-skills/emsi-skills.service.ts
@@ -23,7 +23,3 @@ export async function updateMemberEmsiSkills(userId: string | number, skills: Sk
         emsiSkills: skills,
     })
 }
-
-export async function deleteMemberEmsiSkills(userId: string | number): Promise<void> {
-    return xhrDeleteAsync(`${EnvironmentConfig.API.V5}/emsi-skills/member-emsi-skills/${userId}`)
-}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import "@libs/ui/styles/includes";`
`2`	`2`
`3`	`3`	`.contentLayout {`
`4`		`- background-image: url("../../assets/background.png");`
	`4`	`+ background-image: url("../../assets/background.webp");`
`5`	`5`	`background-size: cover;`
`6`	`6`	`background-repeat: no-repeat;`
`7`	`7`	`}`