Merge pull request #1108 from City-of-Helsinki/UHF-9441-fetch-timeout

UHF-9441: Fetch timeout

hdbt.libraries.yml

@@ -211,7 +211,7 @@ nav-global:
     - hdbt/nav-toggle
 
 event-list:
-  version: 1.3
+  version: 1.3.1
   js:
     dist/js/linkedevents.min.js: {
       preprocess: false,
@@ -223,7 +223,7 @@ event-list:
     - core/drupal
 
 school-search:
-  version: 1.5
+  version: 1.5.1
   js:
     dist/js/school-search.min.js: {
       preprocess: false,
@@ -256,7 +256,7 @@ hyphenopoly:
     - hdbt/hyphenopoly-loader
 
 job-search:
-  version: 1.8.0
+  version: 1.8.1
   js:
     dist/js/job-search.min.js: {
       preprocess: false,
@@ -267,7 +267,7 @@ job-search:
     - core/drupal
 
 district-and-project-search:
-  version: 1.3
+  version: 1.3.1
   js:
     dist/js/district-and-project-search.min.js: {
       preprocess: false,
@@ -278,7 +278,7 @@ district-and-project-search:
     - core/drupal
 
 news-archive:
-  version: 1.3
+  version: 1.3.1
   js:
     dist/js/news-archive.min.js: {
       preprocess: false,
@@ -306,7 +306,7 @@ table-figcaption:
     - core/once
 
 health-station-search:
-  version: 1.3
+  version: 1.3.1
   js:
     dist/js/health-station-search.min.js: {
       preprocess: false,
@@ -317,7 +317,7 @@ health-station-search:
     - core/drupal
 
 maternity-and-child-health-clinic-search:
-  version: 1.2
+  version: 1.2.1
   js:
     dist/js/maternity-and-child-health-clinic-search.min.js: {
       preprocess: false,
@@ -328,7 +328,7 @@ maternity-and-child-health-clinic-search:
     - core/drupal
 
 ploughing-schedule:
-  version: 1.0
+  version: 1.0.1
   js:
     dist/js/ploughing-schedule.min.js: {
       preprocess: false,

src/js/react/apps/district-and-project-search/containers/ResultsContainer.tsx

@@ -16,6 +16,7 @@ import Settings from '../enum/Settings';
 import type URLParams from '../types/URLParams';
 import ResultsHeader from '@/react/common/ResultsHeader';
 import ResultsEmpty from '@/react/common/ResultsEmpty';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 const ResultsContainer = (): JSX.Element => {
   const { size } = Global;
@@ -33,7 +34,7 @@ const ResultsContainer = (): JSX.Element => {
     const proxyUrl = drupalSettings?.helfi_react_search?.elastic_proxy_url;
     const url: string | undefined = proxyUrl;
 
-    return fetch(`${url}/${Settings.INDEX}/_search`, {
+    return useTimeoutFetch(`${url}/${Settings.INDEX}/_search`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/js/react/apps/district-and-project-search/store.tsx

@@ -6,6 +6,7 @@ import IndexFields from './enum/IndexFields';
 import useAggregations from './hooks/useAggregations';
 import type URLParams from './types/URLParams';
 import type OptionType from './types/OptionType';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type configurations = {
   error: Error|null,
@@ -80,7 +81,7 @@ export const configurationsAtom = atom(async(): Promise<configurations> => {
 
   const body = JSON.stringify(AGGREGATIONS);
 
-  return fetch(`${url}/${Settings.INDEX}/_search`, {
+  return useTimeoutFetch(`${url}/${Settings.INDEX}/_search`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

src/js/react/apps/health-station-search/hooks/UseProximityQuery.ts

@@ -6,6 +6,7 @@ import SearchParams from '../types/SearchParams';
 import configurationsAtom from '../store';
 import getQueryString from '../helpers/ProximityQuery';
 import AppSettings from '../enum/AppSettings';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type Result = {
   units?: number[]
@@ -48,7 +49,7 @@ const UseProximityQuery = (params: SearchParams) => {
       ids = locationsData.results.flatMap((result: Result) => result.units ?? []);
     }
 
-    return fetch(`${baseUrl}/${index}/_search`, {
+    return useTimeoutFetch(`${baseUrl}/${index}/_search`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/js/react/apps/job-search/hooks/useIndexQuery.tsx

@@ -1,6 +1,7 @@
 import useSWR from 'swr';
 import { PublicConfiguration } from 'swr/_internal';
 import Global from '../enum/Global';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type UseIndexQueryProps = {
   // Uses _mquery endpoint if true
@@ -19,7 +20,7 @@ const useIndexQuery = ({ query, multi, ...rest }: UseIndexQueryProps) => {
     const endpoint = multi ? '_msearch' : '_search';
     const contentType = `application/${multi ? 'x-ndjson' : 'json'}`;
 
-    return fetch(`${url}/${index}/${endpoint}`, {
+    return useTimeoutFetch(`${url}/${index}/${endpoint}`, {
       method: 'POST',
       headers: {
         'Content-Type': contentType,

src/js/react/apps/job-search/store.tsx

@@ -11,6 +11,7 @@ import type Term from './types/Term';
 import type URLParams from './types/URLParams';
 import AggregationItem from './types/AggregationItem';
 import { getAreaInfo } from './helpers/Areas';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 // Make maps out of bucket responses
 const bucketToMap = (bucket: AggregationItem[]) => {
@@ -132,7 +133,7 @@ export const configurationsAtom = atom(async(): Promise<configurations> => {
     JSON.stringify(PROMOTED_IDS)
     }\n`;
 
-  return fetch(`${url}/${index}/_msearch`, {
+  return useTimeoutFetch(`${url}/${index}/_msearch`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/x-ndjson',

src/js/react/apps/linkedevents/containers/SearchContainer.tsx

@@ -5,6 +5,7 @@ import ResultsContainer from './ResultsContainer';
 import FormContainer from './FormContainer';
 import type Event from '../types/Event';
 import { initialUrlAtom, urlAtom, initialParamsAtom, paramsAtom, useFixturesAtom } from '../store';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type ResponseType = {
   data: Event[];
@@ -46,7 +47,7 @@ const SearchContainer = () => {
   }
 
   const getEvents = async (reqUrl: string): Promise<ResponseType | null> => {
-    const response = await fetch(reqUrl);
+    const response = await useTimeoutFetch(reqUrl);
 
     if (response.status === 200) {
       const result = await response.json();

src/js/react/apps/maternity-and-child-health-clinic-search/hooks/UseProximityQuery.ts

@@ -6,6 +6,7 @@ import SearchParams from '../types/SearchParams';
 import configurationsAtom from '../store';
 import getQueryString from '../helpers/ProximityQuery';
 import AppSettings from '../enum/AppSettings';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type Result = {
   units?: number[]
@@ -48,7 +49,7 @@ const UseProximityQuery = (params: SearchParams) => {
       ids = locationsData.results.flatMap((result: Result) => result.units ?? []);
     }
 
-    return fetch(`${baseUrl}/${index}/_search`, {
+    return useTimeoutFetch(`${baseUrl}/${index}/_search`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/js/react/apps/news-archive/hooks/useIndexQuery.tsx

@@ -1,6 +1,7 @@
 import useSWR from 'swr';
 import { PublicConfiguration } from 'swr/_internal';
 import Global from '../enum/Global';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type useIndexQueryProps = {
   // Dev purposes only, use this to debug certain requests
@@ -31,7 +32,7 @@ const useIndexQuery = ({debug, query, multi, key, ...rest}: useIndexQueryProps)
       });
     }
 
-    return fetch(`${url}/${index}/${endpoint}`, {
+    return useTimeoutFetch(`${url}/${index}/${endpoint}`, {
       method: 'POST',
       headers: {
         'Content-Type': contentType,

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

@@ -4,6 +4,7 @@ import { useAtomValue } from 'jotai';
 import SearchParams from '../types/SearchParams';
 import configurationsAtom from '../store';
 import getQueryString from '../helpers/GetQueryString';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 const UseQuery = (params: SearchParams) => {
   const { baseUrl, index } = useAtomValue(configurationsAtom);
@@ -15,7 +16,7 @@ const UseQuery = (params: SearchParams) => {
       return;
     }
 
-    return fetch(`${baseUrl}/${index}/_search`, {
+    return useTimeoutFetch(`${baseUrl}/${index}/_search`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/js/react/apps/school-search/containers/SearchContainer.tsx

@@ -1,12 +1,15 @@
-import { Suspense, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useSetAtom } from 'jotai';
 
+import { ErrorBoundary } from '@sentry/react';
 import LoadingOverlay from '@/react/common/LoadingOverlay';
 import ProximityFormContainer from './ProximityFormContainer';
 import ProximityResultsContainer from './ProximityResultsContainer';
 import FeatureFormContainer from './FeatureFormContainer';
 import FeatureResultsContainer from './FeatureResultsContainer';
-import { paramsAtom } from '../store';
+import { paramsAtom, setConfigurationsAtom } from '../store';
+import UseConfigurationsQuery from '../hooks/UseConfigurationsQuery';
+import ResultsError from '@/react/common/ResultsError';
 
 const MODE_OPTIONS = {
   // Search by school features
@@ -16,8 +19,10 @@ const MODE_OPTIONS = {
 };
 
 const SearchContainer = () => {
+  const { data: configurations, error: configurationsError } = UseConfigurationsQuery();
   const [searchMode, setSearchMode] = useState<string>(MODE_OPTIONS.proximity);
   const setParams = useSetAtom(paramsAtom);
+  const setConfigurations = useSetAtom(setConfigurationsAtom);
 
   const changeSearchMode = (mode: string) => {
     if (mode === searchMode) {
@@ -28,6 +33,15 @@ const SearchContainer = () => {
     setSearchMode(mode);
   };
 
+  useEffect(() => {
+    if (configurations) {
+      setConfigurations({
+        ...configurations,
+        error: configurationsError
+      });
+    }
+  }, [configurations]);
+
   return (
     <>
       <div className='hdbt-search--react__results--tablist' role='tablist'>
@@ -38,23 +52,27 @@ const SearchContainer = () => {
           {Drupal.t('Search with school information', {}, {context: 'School search: Feature form title'})}
         </button>
       </div>
-      <Suspense fallback={
-        <div className='hdbt__loading-wrapper'>
-          <LoadingOverlay />
-        </div>
-      }>
-        {
-          searchMode === MODE_OPTIONS.proximity ?
-            <div>
-              <ProximityFormContainer />
-              <ProximityResultsContainer />
-            </div> :
-            <div>
-              <FeatureFormContainer />
-              <FeatureResultsContainer />
-            </div>
-        }
-      </Suspense>
+      <ErrorBoundary
+        fallback={<ResultsError error={new Error('Error loading school search results')} />}
+      >
+        <Suspense fallback={
+          <div className='hdbt__loading-wrapper'>
+            <LoadingOverlay />
+          </div>
+        }>
+          {
+            searchMode === MODE_OPTIONS.proximity ?
+              <div>
+                <ProximityFormContainer />
+                <ProximityResultsContainer />
+              </div> :
+              <div>
+                <FeatureFormContainer />
+                <FeatureResultsContainer />
+              </div>
+          }
+        </Suspense>
+      </ErrorBoundary>
     </>
   );
 };

src/js/react/apps/school-search/hooks/UseConfigurationsQuery.ts

@@ -0,0 +1,54 @@
+import useSWR from 'swr';
+import AppSettings from '../enum/AppSettings';
+import { AGGREGATIONS } from '../helpers/FeatureQuery';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
+
+const UseConfigurationsQuery = () => {
+  const proxyUrl = drupalSettings?.helfi_react_search.elastic_proxy_url;
+  const { index } = AppSettings;
+
+  const body = JSON.stringify(AGGREGATIONS);
+
+  const fetcher = async() => {
+    const result = await useTimeoutFetch(`${proxyUrl}/${index}/_search`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body,
+    });
+
+    if (!result.ok) {
+      throw new Error('Initialization failed.');
+    }
+
+    const data = await result.json();
+
+    const { aggregations } = data;
+
+    if (!aggregations) {
+      return {
+        aggs: {},
+        baseUrl: proxyUrl
+      };
+    }
+
+    return {
+      aggs: aggregations,
+      baseUrl: proxyUrl
+    };
+  };
+
+  const { data, error } = useSWR('configurations', fetcher, {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    suspense: true
+  });
+
+  return {
+    data,
+    error
+  };
+};
+
+export default UseConfigurationsQuery;