UHF-11057: Support address param in ploughing schedule

src/js/react/apps/ploughing-schedule/containers/FormContainer.tsx

@@ -10,18 +10,20 @@ type SuggestionItemType = {
   value: string;
 };
 
-const FormContainer = () => {
+const FormContainer = ({ initialParams }: { initialParams?: SearchParams}) => {
   const setParams = useSetAtom(paramsAtom);
-  const [keyword, setKeyword] = useState('');
+  const [address, setAddress] = useState(initialParams?.address);
   const { baseUrl, index } = useAtomValue(configurationsAtom);
 
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const params: SearchParams = {};
-    params.keyword = keyword;
+    params.address = address;
     setParams(params);
   };
 
+  console.log(address, initialParams);
+
   const getSuggestions = (searchString: string) => new Promise<SuggestionItemType[]>((resolve, reject) => {
     const suggestions = fetch(`${baseUrl}/${index}/_search`, {
       method: 'POST',
@@ -65,10 +67,11 @@ const FormContainer = () => {
         label={Drupal.t('Street name', {}, {context: 'Ploughing schedule: Input label'})}
         suggestionLabelField='value'
         getSuggestions={getSuggestions}
-        onSubmit={value => setKeyword(value)}
-        onChange={(value) => setKeyword(value)}
+        onSubmit={value => setAddress(value)}
+        onChange={(value) => setAddress(value)}
         visibleSuggestions={5}
         placeholder={Drupal.t('For example, Mannerheimintie', {}, {context: 'Ploughing schedule: Input placeholder'})}
+        value={address}
       />
       <Button className='hdbt-search--react__submit-button hdbt-search--ploughing-schedule__submit-button' type='submit'>
         {Drupal.t('See the ploughing schedule', {}, {context: 'Ploughing schedule: Form title / submit'})}

src/js/react/apps/ploughing-schedule/containers/SearchContainer.tsx

@@ -1,13 +1,23 @@
-import { Suspense } from 'react';
-import { useAtomValue } from 'jotai';
+import { Suspense, useEffect } from 'react';
+import { useAtom, useAtomValue } from 'jotai';
 
 import LoadingOverlay from '@/react/common/LoadingOverlay';
 import FormContainer from './FormContainer';
 import ResultsContainer from './ResultsContainer';
 import { paramsAtom } from '../store';
+import useInitialParams from '@/react/common/hooks/useInitialParams';
 
 const SearchContainer = () => {
-  const params = useAtomValue(paramsAtom);
+  const [params, setParams] = useAtom(paramsAtom);
+  const initialParams = useInitialParams({
+    address: '',
+  });
+
+  useEffect(() => {
+    if (initialParams) {
+      setParams(initialParams);
+    }
+  }, []);
 
   return (
     <Suspense fallback={
@@ -16,8 +26,8 @@ const SearchContainer = () => {
       </div>
     }>
       <div>
-        <FormContainer />
-        { params.keyword ? <ResultsContainer /> : '' }
+        <FormContainer initialParams={initialParams} />
+        { params.address ? <ResultsContainer /> : '' }
       </div>
     </Suspense>
   );

src/js/react/apps/ploughing-schedule/helpers/GetQueryString.ts

@@ -1,11 +1,11 @@
 import BooleanQuery from '@/types/BooleanQuery';
 
-const getQueryString = (keyword: string) => {
+const getQueryString = (address: string) => {
   const query: BooleanQuery = {
     bool: {
       must: [
         {
-          match: { street_name: keyword }
+          match: { street_name: address }
         }
       ]
     }

src/js/react/apps/ploughing-schedule/helpers/GetSuggestionsQuery.ts

@@ -1,9 +1,9 @@
-const getSuggestionsQuery = (keyword: string) => {
+const getSuggestionsQuery = (address: string) => {
 
   const query = {
     match_phrase_prefix: {
       street_name: {
-        query: keyword
+        query: address
       }
     }
   };

src/js/react/apps/ploughing-schedule/hooks/UseQuery.ts

@@ -10,9 +10,9 @@ const UseQuery = (params: SearchParams) => {
   const { baseUrl, index } = useAtomValue(configurationsAtom);
 
   const fetcher = async () => {
-    const { keyword } = params;
+    const { address } = params;
 
-    if (!keyword) {
+    if (!address) {
       return;
     }
 
@@ -21,7 +21,7 @@ const UseQuery = (params: SearchParams) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: getQueryString(keyword),
+      body: getQueryString(address),
     }).then((res) => res.json());
   };
 

src/js/react/apps/ploughing-schedule/types/SearchParams.ts

@@ -1,5 +1,5 @@
 type SearchParams = {
-  keyword?: string;
+  address?: string;
 };
 
 export default SearchParams;