feat(tp): pagination for browse jobseekers page

apps/redi-connect/src/components/organisms/Footer.tsx

@@ -89,8 +89,8 @@ const RediFooter = () => {
                 {t('footer.support')}
               </Element>
               <Element renderAs="ul">
-                {supportLinks.map((link) => (
-                  <Element renderAs="li" key={link.url}>
+                {supportLinks.map((link, index) => (
+                  <Element renderAs="li" key={`${link.url}-${index}`}>
                     <Element
                       renderAs="a"
                       href={link.url}
@@ -114,8 +114,8 @@ const RediFooter = () => {
                 {t('footer.legal')}
               </Element>
               <Element renderAs="ul">
-                {legalLinks.map((link) => (
-                  <Element renderAs="li" key={link.url}>
+                {legalLinks.map((link, index) => (
+                  <Element renderAs="li" key={`${link.url}-${index}`}>
                     <Element
                       renderAs="a"
                       href={link.url}

apps/redi-connect/src/pages/app/applications/application-card/ApplicationCard.tsx

@@ -104,7 +104,7 @@ const ApplicationCard = ({ application }: Props) => {
 
           <Columns.Column className="application-card-dropdown">
             <Icon
-              icon="chevron"
+              icon="chevronDown"
               size="small"
               className={classnames({ 'icon--rotate': showDetails })}
             />

apps/redi-connect/src/pages/app/applications/application-card/MobileApplicationCard.tsx

@@ -95,7 +95,7 @@ function MobileApplicationCard({ application }: Props) {
           </Columns.Column>
           <Columns.Column className="mobile-application-card-dropdown">
             <Icon
-              icon="chevron"
+              icon="chevronDown"
               size="small"
               className={classnames({ 'icon--rotate': showDetails })}
             />

apps/redi-talent-pool/src/components/molecules/AccordionForm.tsx

@@ -39,7 +39,7 @@ export function AccordionForm({
         </Columns.Column>
         <Columns.Column narrow>
           <Icon
-            icon="chevron"
+            icon="chevronDown"
             size="small"
             className={classnames({ 'icon--rotate': isOpen })}
           />

apps/redi-talent-pool/src/components/organisms/Footer.tsx

@@ -95,8 +95,8 @@ const RediFooter = () => {
                 {t('footer.support')}
               </Element>
               <Element renderAs="ul">
-                {supportLinks.map((link) => (
-                  <Element renderAs="li" key={link.url}>
+                {supportLinks.map((link, index) => (
+                  <Element renderAs="li" key={`${link.url}-${index}`}>
                     <Element
                       renderAs="a"
                       href={link.url}
@@ -120,8 +120,8 @@ const RediFooter = () => {
                 {t('footer.legal')}
               </Element>
               <Element renderAs="ul">
-                {legalLinks.map((link) => (
-                  <Element renderAs="li" key={link.url}>
+                {legalLinks.map((link, index) => (
+                  <Element renderAs="li" key={`${link.url}-${index}`}>
                     <Element
                       renderAs="a"
                       href={link.url}

apps/redi-talent-pool/src/components/templates/LoggedIn.tsx

@@ -6,6 +6,7 @@ import {
 import { Loader } from '@talent-connect/shared-atomic-design-components'
 import { ReactNode } from 'react'
 import { Columns, Container } from 'react-bulma-components'
+import { useLocation } from 'react-router-dom'
 import { useIsBusy } from '../../hooks/useIsBusy'
 import { TpMainNavItem } from '../molecules/TpMainNavItem'
 import { Navbar } from '../organisms'
@@ -25,6 +26,7 @@ const LoggedIn = ({ children, hideNavigation }: Props) => {
     myTpData.data?.tpCurrentUserDataGet?.tpJobseekerDirectoryEntry
 
   const isBusy = useIsBusy()
+  const location = useLocation()
 
   // Determine user type (jobseeker, company representative, or undefined), then
   // inform Hotjar about it (we're using its IDENTIFY API)

apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx

@@ -10,6 +10,7 @@ import {
   Checkbox,
   FilterDropdown,
   Icon,
+  Paginate,
   SearchField,
 } from '@talent-connect/shared-atomic-design-components'
 import { LANGUAGES } from '@talent-connect/shared-config'
@@ -23,6 +24,7 @@ import {
   topSkillsIdToLabelMap,
 } from '@talent-connect/talent-pool/config'
 import { objectEntries } from '@talent-connect/typescript-utilities'
+import { useState } from 'react'
 import { Columns, Element, Tag } from 'react-bulma-components'
 import { useQueryClient } from 'react-query'
 import {
@@ -40,16 +42,12 @@ import {
   useTpCompanyUnmarkJobseekerAsFavouriteMutation,
 } from './BrowseCompany.generated'
 
-const germanFederalStatesOptions = objectEntries(germanFederalStates).map(
-  ([value, label]) => ({
-    value,
-    label,
-  })
-)
+const JOBSEEKER_CARDS_PER_PAGE = 12
 
 export function BrowseCompany() {
   const queryClient = useQueryClient()
 
+  const [currentPageNumber, setCurrentPageNumber] = useState(1)
   const [query, setQuery] = useQueryParams({
     name: withDefault(StringParam, ''),
     desiredLanguages: withDefault(ArrayParam, []),
@@ -97,8 +95,6 @@ export function BrowseCompany() {
         //joinsMunich24SummerJobFair,
       },
     })
-  const jobseekerProfiles =
-    jobseekerProfilesQuery.data?.tpJobseekerDirectoryEntriesVisible
 
   const favoritedJobseekersQuery =
     useTpCompanyFavouritedJobseekerProfilesQuery()
@@ -107,6 +103,31 @@ export function BrowseCompany() {
   const unfavouriteJobseekerMutation =
     useTpCompanyUnmarkJobseekerAsFavouriteMutation()
 
+  const jobseekerProfiles =
+    jobseekerProfilesQuery?.data?.tpJobseekerDirectoryEntriesVisible
+
+  // Filter the jobseekerProfiles based on the onlyFavorites flag before pagination
+  const filteredJobseekerProfiles = jobseekerProfiles?.filter((profile) => {
+    if (!onlyFavorites) return true
+    const isFavorite =
+      favoritedJobseekersQuery.data?.tpCompanyFavoritedJobseekerProfiles
+        ?.map((p) => p.favoritedTpJobseekerProfileId)
+        ?.includes(profile.id)
+    return isFavorite
+  })
+
+  const lastItemIndex = currentPageNumber * JOBSEEKER_CARDS_PER_PAGE
+  const firstItemIndex = lastItemIndex - JOBSEEKER_CARDS_PER_PAGE
+  const currentItems = filteredJobseekerProfiles?.slice(
+    firstItemIndex,
+    lastItemIndex
+  )
+
+  const totalItems = filteredJobseekerProfiles?.length
+  const totalPagesNumber = totalItems
+    ? Math.ceil(totalItems / JOBSEEKER_CARDS_PER_PAGE)
+    : undefined
+
   const handleFavoriteJobseeker = async (tpJobseekerProfileId: string) => {
     const isFavorite =
       favoritedJobseekersQuery.data?.tpCompanyFavoritedJobseekerProfiles
@@ -194,15 +215,15 @@ export function BrowseCompany() {
         style={{ flexGrow: 1 }}
       >
         Browse our Talent Pool
-        {jobseekerProfiles?.length ? ` (${jobseekerProfiles.length})` : ''}
+        {totalItems ? ` (${totalItems})` : ''}
       </Element>
       <Element
         renderAs="p"
         textSize={4}
         responsive={{ mobile: { textSize: { value: 6 } } }}
         className="oneandhalf-bs"
       >
-        Browse our Jobseeker profiles and find the talent you're looking for.
+        Search our Jobseeker profiles to find the talent you're looking for.
       </Element>
       <div className="filters">
         <div className="filters-inner">
@@ -373,41 +394,37 @@ export function BrowseCompany() {
         )}
       </div>
       <Columns>
-        {jobseekerProfiles
-          ?.filter((profile) => {
-            if (!onlyFavorites) return true
-            const isFavorite =
-              favoritedJobseekersQuery.data?.tpCompanyFavoritedJobseekerProfiles
-                ?.map((p) => p.favoritedTpJobseekerProfileId)
-                ?.includes(profile.id)
-            return isFavorite
-          })
-          .map((profile) => {
-            const isFavorite =
-              favoritedJobseekersQuery.data?.tpCompanyFavoritedJobseekerProfiles
-                ?.map((p) => p.favoritedTpJobseekerProfileId)
-                ?.includes(profile.id)
-
-            if (!isFavorite && onlyFavorites) return
+        {currentItems?.map((profile) => {
+          const isFavorite =
+            favoritedJobseekersQuery.data?.tpCompanyFavoritedJobseekerProfiles
+              ?.map((p) => p.favoritedTpJobseekerProfileId)
+              ?.includes(profile.id)
 
-            return (
-              <Columns.Column
+          return (
+            <Columns.Column
+              key={profile.id}
+              mobile={{ size: 12 }}
+              tablet={{ size: 6 }}
+              desktop={{ size: 4 }}
+            >
+              <JobseekerProfileCard
                 key={profile.id}
-                mobile={{ size: 12 }}
-                tablet={{ size: 6 }}
-                desktop={{ size: 4 }}
-              >
-                <JobseekerProfileCard
-                  key={profile.id}
-                  jobseekerProfile={profile}
-                  linkTo={`/app/jobseeker-profile/${profile.id}`}
-                  toggleFavorite={handleFavoriteJobseeker}
-                  isFavorite={isFavorite}
-                />
-              </Columns.Column>
-            )
-          })}
+                jobseekerProfile={profile}
+                linkTo={`/app/jobseeker-profile/${profile.id}`}
+                toggleFavorite={handleFavoriteJobseeker}
+                isFavorite={isFavorite}
+              />
+            </Columns.Column>
+          )
+        })}
       </Columns>
+      {totalItems > JOBSEEKER_CARDS_PER_PAGE && (
+        <Paginate
+          totalPagesNumber={totalPagesNumber}
+          currentPageNumber={currentPageNumber}
+          setCurrentPageNumber={setCurrentPageNumber}
+        />
+      )}
     </LoggedIn>
   )
 }
@@ -427,6 +444,12 @@ const desiredLanguagesOptions = Object.entries(LANGUAGES).map(
     label,
   })
 )
+const germanFederalStatesOptions = objectEntries(germanFederalStates).map(
+  ([value, label]) => ({
+    value,
+    label,
+  })
+)
 
 interface FilterTagProps {
   id: string

libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx

@@ -44,7 +44,7 @@ function FormDraggableAccordion({
         </Columns.Column>
         <Columns.Column onClick={() => setShowAnswer(!showAnswer)} narrow>
           <Icon
-            icon="chevron"
+            icon="chevronDown"
             size="small"
             className={classnames({ 'icon--rotate': showAnswer })}
           />

libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx

@@ -9,7 +9,7 @@ import { formSelectStyles } from './FormSelect.styles'
 
 export const DropdownIndicator = (props: any) => (
   <components.DropdownIndicator {...props}>
-    <Icon icon="chevron" size="small" />
+    <Icon icon="chevronDown" size="small" />
   </components.DropdownIndicator>
 )
 

libs/shared-atomic-design-components/src/lib/atoms/Icon.scss

@@ -32,4 +32,8 @@
   &--active {
     cursor: pointer;
   }
+
+  &--disabled path {
+    fill: $grey-light;
+  }
 }

libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx

@@ -11,11 +11,14 @@ import { ReactComponent as Career } from '../../assets/images/career.svg'
 import { ReactComponent as Certificate } from '../../assets/images/certificate.svg'
 import { ReactComponent as Chat } from '../../assets/images/chat.svg'
 import { ReactComponent as Checkmark } from '../../assets/images/checkmark.svg'
-import { ReactComponent as Chevron } from '../../assets/images/chevron.svg'
+import { ReactComponent as ChevronDown } from '../../assets/images/chevron-down.svg'
+import { ReactComponent as ChevronLeft } from '../../assets/images/chevron-left.svg'
+import { ReactComponent as ChevronRight } from '../../assets/images/chevron-right.svg'
 import { ReactComponent as Clipboard } from '../../assets/images/clipboard.svg'
 import { ReactComponent as Delete } from '../../assets/images/delete.svg'
 import { ReactComponent as EditLightGrey } from '../../assets/images/edit-lightgrey.svg'
 import { ReactComponent as Edit } from '../../assets/images/edit.svg'
+import { ReactComponent as EllipsisHorizontal } from '../../assets/images/ellipsis-horizontal.svg'
 import { ReactComponent as Ellipsis } from '../../assets/images/ellipsis.svg'
 import { ReactComponent as Fb } from '../../assets/images/fb.svg'
 import { ReactComponent as Hamburger } from '../../assets/images/hamburger.svg'
@@ -49,11 +52,14 @@ const Icons = {
   edit: Edit,
   editLightGrey: EditLightGrey,
   ellipsis: Ellipsis,
+  ellipsisHorizontal: EllipsisHorizontal,
   delete: Delete,
   refresh: Refresh,
   link: Link,
   cancel: Cancel,
-  chevron: Chevron,
+  chevronDown: ChevronDown,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
   heart: Heart,
   heartFilled: HeartFilled,
   clipboard: Clipboard,

libs/shared-atomic-design-components/src/lib/molecules/FaqItem.tsx

@@ -23,7 +23,7 @@ function FaqItem({ question, answer }: Props) {
         </Columns.Column>
         <Columns.Column narrow>
           <Icon
-            icon="chevron"
+            icon="chevronDown"
             size="small"
             className={classnames({ 'icon--rotate': showAnswer })}
           />

libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx

@@ -51,7 +51,7 @@ const FilterDropdown = ({
       >
         Filter by {label}
         <Icon
-          icon="chevron"
+          icon="chevronDown"
           size="small"
           className={classnames({
             'icon--rotate': showDropdown,

libs/shared-atomic-design-components/src/lib/molecules/Paginate.scss

@@ -0,0 +1,5 @@
+@import '../styles/_variables.scss';
+
+.icon-hover:hover path {
+  fill: $redi-orange-dark;
+}