UHF-12470: Convert search monitor to dialog

src/js/react/apps/job-search/components/AreaFilter.tsx

@@ -0,0 +1,44 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { areaFilterAtom, getAreaAtom, setStateValueAtom } from '../store';
+import SearchComponents from '../enum/SearchComponents';
+import { Select } from 'hds-react';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const areaFilterLabel: string = Drupal.t('Job location', {}, { context: 'Job search: Job location label' });
+
+export const AreaFilter = () => {
+  const areaOptions = useAtomValue(areaFilterAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const value = useAtomValue(getAreaAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.AREA_FILTER}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({ key: SearchComponents.AREA_FILTER, value: selectedOptions });
+      }}
+      options={areaOptions}
+      value={value}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': areaFilterLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': areaFilterLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: areaFilterLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t('All areas', {}, { context: 'Location placeholder' }),
+      }}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/CheckBoxFilters.tsx

@@ -0,0 +1,73 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getCheckBoxValuesAtom, getEmploymentSearchIdMap, setStateValueAtom } from '../store';
+import CustomIds from '../enum/CustomTermIds';
+import { Checkbox } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultCheckboxStyle } from '@/react/common/constants/checkboxStyle';
+
+export const CheckBoxFilters = () => {
+  const [continuous, internship, summerJobs, youthSummerJobs] = useAtomValue(getCheckBoxValuesAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const employmentSearchIdMap = useAtomValue(getEmploymentSearchIdMap);
+  const showContinuous = employmentSearchIdMap.get(CustomIds.CONTINUOUS);
+  const showInternships = employmentSearchIdMap.get(CustomIds.TRAINING);
+  const showSummerJobs = employmentSearchIdMap.get(CustomIds.SUMMER_JOBS);
+  const showYouthSummerJobs =
+    employmentSearchIdMap.get(CustomIds.YOUTH_SUMMER_JOBS) || employmentSearchIdMap.get(CustomIds.COOL_SUMMER_PROJECT);
+
+  return (
+    <fieldset className='job-search-form__checkboxes'>
+      <legend className='job-search-form__checkboxes-legend'>
+        {Drupal.t('Filters', {}, { context: 'Checkbox filters heading' })}
+      </legend>
+      {showContinuous && (
+        <Checkbox
+          checked={continuous}
+          className='job-search-form__checkbox'
+          id={SearchComponents.CONTINUOUS}
+          label={Drupal.t('Open-ended vacancies', {}, { context: 'Job search' })}
+          name={SearchComponents.CONTINUOUS}
+          onClick={() => setStateValue({ key: SearchComponents.CONTINUOUS, value: !continuous })}
+          value={continuous.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showInternships && (
+        <Checkbox
+          checked={internship}
+          className='job-search-form__checkbox'
+          id={SearchComponents.INTERNSHIPS}
+          label={Drupal.t('Practical training', {}, { context: 'Job search' })}
+          name={SearchComponents.INTERNSHIPS}
+          onClick={() => setStateValue({ key: SearchComponents.INTERNSHIPS, value: !internship })}
+          value={internship.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showSummerJobs && (
+        <Checkbox
+          checked={summerJobs}
+          className='job-search-form__checkbox'
+          id={SearchComponents.SUMMER_JOBS}
+          label={Drupal.t('Summer jobs', {}, { context: 'Job search' })}
+          name={SearchComponents.SUMMER_JOBS}
+          onClick={() => setStateValue({ key: SearchComponents.SUMMER_JOBS, value: !summerJobs })}
+          value={summerJobs.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showYouthSummerJobs && (
+        <Checkbox
+          checked={youthSummerJobs}
+          className='job-search-form__checkbox'
+          id={SearchComponents.YOUTH_SUMMER_JOBS}
+          label={Drupal.t('Summer jobs for young people', {}, { context: 'Job search' })}
+          name={SearchComponents.YOUTH_SUMMER_JOBS}
+          onClick={() => setStateValue({ key: SearchComponents.YOUTH_SUMMER_JOBS, value: !youthSummerJobs })}
+          value={youthSummerJobs.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+    </fieldset>
+  );
+};

src/js/react/apps/job-search/components/EmploymentFilter.tsx

@@ -0,0 +1,42 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { employmentAtom, getEmploymentAtom, setStateValueAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const employmentRelationshipLabel: string = Drupal.t('Employment type', {}, { context: 'Employment filter label' });
+
+export const EmploymentFilter = () => {
+  const employmentOptions = useAtomValue(employmentAtom);
+  const value = useAtomValue(getEmploymentAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.EMPLOYMENT}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) => setStateValue({ key: SearchComponents.EMPLOYMENT, value: selectedOptions })}
+      options={employmentOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': employmentRelationshipLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': employmentRelationshipLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: employmentRelationshipLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t('All types of employment', {}, { context: 'Employment filter placeholder' }),
+      }}
+      value={value}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/LanguageFilter.tsx

@@ -0,0 +1,43 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getLanguageAtom, languagesAtom, setStateValueAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultSelectTheme } from '@/react/common/constants/selectTheme';
+
+const languageLabel: string = Drupal.t('Language', {}, { context: 'Language filter label' });
+
+export const LanguageFilter = () => {
+  const languageOptions = useAtomValue(languagesAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const value = useAtomValue(getLanguageAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.LANGUAGE}
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({ key: SearchComponents.LANGUAGE, value: selectedOptions });
+      }}
+      options={languageOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': languageLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': languageLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: languageLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t('All languages', {}, { context: 'Language placeholder' }),
+      }}
+      value={value}
+      theme={defaultSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/SearchBar.tsx

@@ -0,0 +1,33 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getKeywordAtom, setStateValueAtom } from '../store';
+import { TextInput } from 'hds-react';
+import { defaultTextInputStyle } from '@/react/common/constants/textInputStyle';
+import SearchComponents from '../enum/SearchComponents';
+
+export const SearchBar = () => {
+  const keyword = useAtomValue(getKeywordAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStateValue({ key: SearchComponents.KEYWORD, value: event.target.value.replace(/\s+/g, ' ') });
+  };
+
+  return (
+    <TextInput
+      className='job-search-form__filter'
+      id={SearchComponents.KEYWORD}
+      label={Drupal.t('Search term', {}, { context: 'Search keyword label' })}
+      name={SearchComponents.KEYWORD}
+      onChange={handleChange}
+      placeholder={Drupal.t(
+        'Eg. title, location, department',
+        {},
+        { context: 'HELfi Rekry job search keyword placeholder' },
+      )}
+      type='search'
+      value={keyword}
+      clearButtonAriaLabel={Drupal.t('Clear', {}, { context: 'React search' })}
+      style={defaultTextInputStyle}
+    />
+  );
+};

src/js/react/apps/job-search/components/TaskAreaFilter.tsx

@@ -0,0 +1,45 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getTaskAreasAtom, setStateValueAtom, taskAreasAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import type { OptionType } from '../types/OptionType';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const taskAreasLabel: string = Drupal.t('Task area', {}, { context: 'Task areas filter label' });
+
+export const TaskAreaFilter = () => {
+  const taskAreaOptions = useAtomValue(taskAreasAtom);
+  const value = useAtomValue(getTaskAreasAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.TASK_AREAS}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({ key: SearchComponents.TASK_AREAS, value: selectedOptions as OptionType[] });
+      }}
+      options={taskAreaOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': taskAreasLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': taskAreasLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: taskAreasLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t('All fields', {}, { context: 'Task areas filter placeholder' }),
+      }}
+      value={value}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/results/ResultCard.tsx

@@ -3,8 +3,10 @@ import { useAtomValue } from 'jotai';
 import CardItem from '@/react/common/Card';
 import type Result from '@/types/Result';
 import { currentLanguage } from '../../query/queries';
-import { urlAtom } from '../../store';
 import type Job from '../../types/Job';
+import { submittedStateAtom } from '../../store';
+import SearchComponents from '../../enum/SearchComponents';
+import type { OptionType } from '../../types/OptionType';
 
 const getResultCard = ({
   title,
@@ -79,14 +81,14 @@ const getResultCard = ({
 type ResultCardProps = { job: Job; innerHits: Result<Job>[] };
 
 const ResultCard = ({ job, innerHits }: ResultCardProps) => {
+  const submittedState = useAtomValue(submittedStateAtom);
   const { _language, title } = job;
 
   if (!title || !title.length) {
     return null;
   }
 
-  // biome-ignore lint/correctness/useHookAtTopLevel: @todo UHF-12501
-  const languageFilterActive = useAtomValue(urlAtom)?.language;
+  const languageFilterActive = (submittedState[SearchComponents.LANGUAGE] as OptionType[])?.length > 0;
   // If no filtering by language, prefer showing current language translation
   if (!languageFilterActive && innerHits.length > 1 && !_language.includes(currentLanguage)) {
     for (const hit of innerHits) {

src/js/react/apps/job-search/components/results/ResultsSort.tsx

@@ -1,11 +1,10 @@
 import { Select } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useEffect, useState } from 'react';
 import { defaultSelectTheme } from '@/react/common/constants/selectTheme';
 import { getCurrentLanguage } from '@/react/common/helpers/GetCurrentLanguage';
 import Global from '../../enum/Global';
-import { urlAtom, urlUpdateAtom } from '../../store';
 import type OptionType from '../../types/OptionType';
+import { setSortAtom, submittedStateAtom } from '../../store';
 
 const { sortOptions } = Global;
 const options: OptionType[] = [
@@ -14,34 +13,22 @@ const options: OptionType[] = [
 ];
 
 const ResultsSort = () => {
-  const urlParams = useAtomValue(urlAtom);
-  const setUrlParams = useSetAtom(urlUpdateAtom);
-  const [sort, setSort] = useState<OptionType>(options[0]);
+  const submittedState = useAtomValue(submittedStateAtom);
+  const setSort = useSetAtom(setSortAtom);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: @todo UHF-12501
-  useEffect(() => {
-    if (urlParams.sort) {
-      const matchedSort = options.find((option: OptionType) => option.value === urlParams.sort);
-
-      if (matchedSort) {
-        setSort(matchedSort);
-      }
-    }
-  }, []);
   return (
     <Select
       className='job-listing-search__sort'
       clearable={false}
       onChange={(_selectedOptions, clickedOption) => {
-        setSort(clickedOption);
-        setUrlParams({ ...urlParams, sort: clickedOption.value });
+        setSort(clickedOption?.value || sortOptions.newestFirst);
       }}
       options={options}
       texts={{
         label: Drupal.t('Sort search results', {}, { context: 'HELfi Rekry job search' }),
         language: getCurrentLanguage(window.drupalSettings.path.currentLanguage),
       }}
-      value={[sort]}
+      value={[options.find((option) => option.value === submittedState.sort) || options[0]]}
       theme={defaultSelectTheme}
     />
   );