minor filter changes #133

site/package.json

@@ -23,7 +23,6 @@
     "gsap": "^3.12.1",
     "html-to-text": "^9.0.5",
     "i": "^0.3.7",
-    "immer": "^10.0.3",
     "lodash.debounce": "^4.0.8",
     "lodash.flatten": "^4.4.0",
     "lodash.uniq": "^4.5.0",

site/src/components/pages/OpenPositions/Filter/Filter.tsx

@@ -1,6 +1,5 @@
 import { Checkbox, Select, SELECT_SIZE } from '@nilfoundation/ui-kit'
 import { PositionsFilter } from '../types'
-import { produce } from 'immer'
 import s from './Filter.module.scss'
 import { TextFilter } from './TextFilter'
 
@@ -13,51 +12,68 @@ type FilterProps = {
 }
 
 export const Filter = ({ filter, setFilter, departments, locations, types }: FilterProps) => {
-  const setFilterValue = (key: keyof PositionsFilter, value: PositionsFilter[typeof key]) =>
-    setFilter(
-      produce(filter, (draft) => {
-        (draft[key] as PositionsFilter[typeof key]) = value
-      }),
-    )
-
   const departmentsOptions = departments.map((department) => ({
     label: department,
     value: department,
   }))
-
   const locationsOptions = locations.map((location) => ({
     label: location,
     value: location,
   }))
-
   const typesOptions = types.map((type) => ({
     label: type,
     value: type,
   }))
 
+  const selectedDepartment = filter.department ? [{ label: filter.department, value: filter.department }] : undefined
+  const selectedType = filter.type ? [{ label: filter.type, value: filter.type }] : undefined
+  const selectedLocation = filter.location ? [{ label: filter.location, value: filter.location }] : undefined
+
   return (
     <div className={s.filter}>
       <Select
         placeholder="Choose Department"
         size={SELECT_SIZE.small}
         options={departmentsOptions}
-        onChange={({ value }) => setFilterValue('department', "Marketing")}
+        value={selectedDepartment}
+        onChange={({ value }) => {
+          setFilter({ ...filter, department: value[0]?.value as string })
+        }}
+        searchable={false}
+        valueKey="label"
+      />
+      <Select
+        placeholder="Choose Work Type"
+        size={SELECT_SIZE.small}
+        options={typesOptions}
+        searchable={false}
+        value={selectedType}
+        onChange={({ value }) => {
+          setFilter({ ...filter, type: value[0]?.value as string })
+        }}
+      />
+      <Select
+        placeholder="Choose Location"
+        size={SELECT_SIZE.small}
+        options={locationsOptions}
         searchable={false}
+        value={selectedLocation}
+        onChange={({ value }) => {
+          setFilter({ ...filter, location: value[0]?.value as string })
+        }}
       />
-      <Select placeholder="Choose Work Type" size={SELECT_SIZE.small} options={typesOptions} searchable={false} />
-      <Select placeholder="Choose Location" size={SELECT_SIZE.small} options={locationsOptions} searchable={false} />
       <div className={s.remoteToggleContainer}>
         <Checkbox
           checkmarkType="toggle"
           labelPlacement="left"
           checked={filter.remote}
-          onChange={({ target }) => setFilterValue('remote', target.checked)}
+          onChange={({ target }) => setFilter({ ...filter, remote: target.checked })}
         >
           Remote only
         </Checkbox>
       </div>
       <div className={s.titleTitleFilterContainer}>
-        <TextFilter setFilterValue={(value) => setFilterValue('title', value)} />
+        <TextFilter setFilterValue={(value) => setFilter({ ...filter, title: value })} />
       </div>
     </div>
   )

site/src/components/pages/OpenPositions/OpenPositions.tsx

@@ -14,10 +14,9 @@ import { getPageTitleOverrides, getCommonHeadingOverrides } from './overrides'
 import { useGroupPositionsByDepartments } from './useGroupPositionsByDepartments'
 import { Filter } from './Filter/Filter'
 import { useFilterPositions } from './useFilterPositions'
-import { useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { PositionsFilter } from './types'
 import { Position } from './Position/Position'
-import { mapTypeToDisplayType } from './utils/mapTypeToDisplayType'
 import uniq from 'lodash.uniq'
 
 type OpenPositionsProps = {
@@ -29,10 +28,10 @@ const departmensOrder = ['Engineering', 'Developer Relations', 'Marketing', 'Hum
 const OpenPositions = ({ jobsPostings = [] }: OpenPositionsProps) => {
   const { isMobile } = useViewport()
   const [filter, setFilter] = useState<PositionsFilter>({
-    department: '',
-    location: '',
-    type: '',
-    title: '',
+    department: undefined,
+    location: undefined,
+    type: undefined,
+    title: undefined,
     remote: true,
   })
 
@@ -41,9 +40,18 @@ const OpenPositions = ({ jobsPostings = [] }: OpenPositionsProps) => {
   const positionsByDepartmentMap = useGroupPositionsByDepartments(sortedByTitleJobsPostings, departmensOrder)
   const departments = Object.keys(positionsByDepartmentMap)
 
-  const availableDepartments = uniq(jobsPostings.map((p) => p.department).filter((d) => !!d))
-  const availableLocations = uniq(jobsPostings.map((p) => p.branch.city).filter((d) => !!d))
-  const availableTypes = uniq(jobsPostings.map((p) => mapTypeToDisplayType(p.type)).filter((d) => !!d))
+  const availableDepartments = useMemo(
+    () => uniq(jobsPostings.map((p) => p.department).filter((d) => !!d)),
+    [jobsPostings],
+  )
+  const availableLocations = useMemo(
+    () => uniq(jobsPostings.map((p) => p.branch.city).filter((d) => !!d)),
+    [jobsPostings],
+  )
+  const availableTypes = useMemo(
+    () => uniq(jobsPostings.map((p) => p.type).filter((d) => !!d)),
+    [jobsPostings],
+  )
 
   return (
     <>
@@ -84,8 +92,8 @@ const OpenPositions = ({ jobsPostings = [] }: OpenPositionsProps) => {
               const positions = positionsByDepartmentMap[department]
 
               return (
-                <>
-                  <div key={department} className={s.department}>
+                <Fragment key={department}>
+                  <div className={s.department}>
                     <HeadingXLarge overrides={getCommonHeadingOverrides()}>{department}</HeadingXLarge>
                     <LabelMedium color={PRIMITIVE_COLORS.gray300}>
                       {positions.length === 1 ? '1 Open Role' : `${positions.length} Open Roles`}
@@ -94,7 +102,7 @@ const OpenPositions = ({ jobsPostings = [] }: OpenPositionsProps) => {
                   {positions.map((position) => {
                     return <Position key={position.id} position={position} />
                   })}
-                </>
+                </Fragment>
               )
             })}
           </div>

site/src/components/pages/OpenPositions/Position/Position.tsx

@@ -3,7 +3,6 @@ import s from './Position.module.scss'
 import { UIPosition } from 'src/freshteam/types'
 import { HeadingXLarge, LabelMedium, PRIMITIVE_COLORS } from '@nilfoundation/ui-kit'
 import { labelOverrides, titleOverrides } from './overrides'
-import { mapTypeToDisplayType } from '../utils/mapTypeToDisplayType'
 
 type PositionProps = {
   position: UIPosition
@@ -14,7 +13,7 @@ export const Position = ({ position: { id, remote, type, title, plainTextDescrip
     <Card key={id} className={s.position} href={{ query: { jobId: id } }}>
       <div className={s.type}>
         <LabelMedium overrides={labelOverrides}>{remote ? 'Remote' : 'Onsite'}</LabelMedium>
-        <LabelMedium overrides={labelOverrides}>{mapTypeToDisplayType(type)}</LabelMedium>
+        <LabelMedium overrides={labelOverrides}>{type}</LabelMedium>
       </div>
       <div className={s.title}>
         <HeadingXLarge overrides={titleOverrides}>{title}</HeadingXLarge>

site/src/components/pages/OpenPositions/types.ts

@@ -1,9 +1,9 @@
 import { Branch, Department, Position } from 'src/freshteam/types'
 
 export interface PositionsFilter {
-  title: Position['title']
-  department: Department['name']
+  title?: Position['title']
+  department?: Department['name']
   remote: Position['remote']
-  type: Position['type']
-  location: Branch['city']
+  type?: Position['type']
+  location?: Branch['city']
 }

site/src/components/pages/OpenPositions/useFilterPositions.ts

@@ -7,7 +7,7 @@ export const useFilterPositions = (positions: UIPosition[], filter: PositionsFil
     const departmentFilter = filter.department
       ? position.department.toLowerCase() === filter.department.toLowerCase()
       : true
-    const remoteFilter = filter.remote ? position.remote === filter.remote : true
+    const remoteFilter = position.remote === filter.remote
     const typeFilter = filter.type ? position.type.toLowerCase() === filter.type.toLowerCase() : true
     const locationFilter = filter.location ? position.branch.city.toLowerCase() === filter.location.toLowerCase() : true
 

site/src/components/pages/OpenPositions/useGroupPositionsByDepartments.ts

@@ -14,14 +14,16 @@ export const useGroupPositionsByDepartments = (positions: UIPosition[], order?:
     }, {} as Record<string, UIPosition[]>)
 
     if (order) {
-      return order
+      const orderedDepartments = order
         .filter((x) => Object.keys(departments).includes(x))
         .reduce((acc, department) => {
           return {
             ...acc,
             [department]: departments[department],
           }
         }, {} as Record<string, UIPosition[]>)
+
+      return { ...orderedDepartments, ...departments }
     }
 
     return departments

site/src/freshteam/mappers.ts

@@ -8,8 +8,19 @@ export const mapPositionToUIPosition = (position: Position): UIPosition => {
     description: position.description,
     plainTextDescription: convert(position.description, { wordwrap: false, limits: { maxBaseElements: 200 } }),
     remote: position.remote,
-    type: position.type,
+    type: mapTypeToDisplayType(position.type),
     branch: position.branch,
     department: position.department.name,
   }
 }
+
+const mapTypeToDisplayType = (type: Position['type']): string => {
+  switch (type) {
+    case 'full_time':
+      return 'Full Time'
+    case 'part_time':
+      return 'Part Time'
+    default:
+      return ''
+  }
+}