rxjs/operators#catchError JavaScript Examples

fetchResultCountEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_RESULT_COUNT),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { resultClass, facetClass } = action
    const params = stateToUrl({
      facets: state[`${facetClass}Facets`].facets
    })
    const requestUrl = `${apiUrl}/faceted-search/${resultClass}/count`
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse => updateResultCount({
        resultClass,
        data: ajaxResponse.response.data,
        sparqlQuery: ajaxResponse.response.sparqlQuery
      })),
      catchError(error => of({
        type: FETCH_RESULT_COUNT_FAILED,
        resultClass,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

resolveReferences = (action$, state$, { fhirClient }) => action$.pipe(
  ofType(actionTypes.RESOURCE_BATCH),
  // delay(1000), // e.g.: for debugging
  concatMap(({ payload }) => from(extractReferences(payload))
    .pipe(
      mergeMap(({
        referenceUrn, context, // referenceType, parentType,
      }) => from(fhirClient.resolve({ reference: referenceUrn, context })).pipe(
        // tap(() => console.log('Silent success referenceUrn', referenceUrn)),
        rxMap((result) => ({
          type: actionTypes.FHIR_FETCH_SUCCESS,
          payload: result,
        })),
        catchError((error) => handleError(error, `Error in resolveReferences fhirClient.resolve urn:\n ${referenceUrn}`)),
      )),
    )),
  takeUntil(action$.pipe(ofType(actionTypes.CLEAR_PATIENT_DATA))),
  repeat(),
  catchError((error) => handleError(error, 'Error in resolveReferences')),
)

requestNextItems = (action$, state$, { fhirClient }) => action$.pipe(
  ofType(actionTypes.FHIR_FETCH_SUCCESS),
  // delay(1000), // e.g.: for debugging
  concatMap(({ payload }) => from(extractNextUrls(payload)).pipe(
    concatMap((url) => fhirClient.request(url)),
  ).pipe(
    rxMap((result) => ({
      type: actionTypes.FHIR_FETCH_SUCCESS,
      payload: result,
    })),
    catchError((error) => handleError(error, 'Error in requestNextItems nextRequests$.pipe')),
  )),
  takeUntil(action$.pipe(ofType(actionTypes.CLEAR_PATIENT_DATA))),
  repeat(),
  catchError((error) => handleError(error, 'Error in requestNextItems concatMap')),
)

initializeFhirClient = (action$, state$, { fhirClient }) => action$.pipe(
  ofType(actionTypes.SET_AUTH),
  // delay(5000), // e.g.: for debugging -- import delay from rxjs/operators
  concatMap(({ payload }) => {
    if (payload === MOCK_AUTH) {
      return Promise.resolve({
        type: actionTypes.FHIR_FETCH_SUCCESS,
        payload: MOCK_BUNDLE,
      });
    }

    return from(fhirClient.queryPatient())
      .pipe(
        mergeMap((requestFn) => from(requestFn()).pipe(
          rxMap((result) => ({
            type: actionTypes.FHIR_FETCH_SUCCESS,
            payload: result,
          })),
          catchError((error) => handleError(error, 'Error in queryPatient', actionTypes.FHIR_FETCH_ERROR)),
        )),
      );
  }),
  takeUntil(action$.pipe(ofType(actionTypes.CLEAR_PATIENT_DATA))),
  repeat(),
  catchError((error) => handleError(error, 'Error in initializeFhirClient switchMap')),
)

getMyTradesObs (apiKey, symbolCurrencyPair = undefined, params = {}) {
    let counter = -1
    this.initializeApiKey(apiKey)
    const fetchTrades = () => {
      counter++
      return super.getMyTrades(apiKey, undefined, {ofs: counter * 50})
    }

    const trades$ = defer(() => fetchTrades())

    let load$ = new BehaviorSubject('')

    const whenToRefresh$ = of('').pipe(
      delay(5000),
      tap(_ => load$.next('')),
      skip(1))

    const poll$ = concat(trades$, whenToRefresh$)
    let result$ = load$.pipe(
      concatMap(_ => poll$),
      takeWhile(data => data.length > 0),
      map(data => ({errors: [], data})),
      catchError(error$ => {
        return of({errors: [error$.toString()], data: []})
      }))
    return result$
  }

// fetch deposits AND withdrawal
  getDepositsObs (apiKey, symbolCurrencyPair = undefined, params = {}) {
    let counter = -1
    this.initializeApiKey(apiKey)
    const query = () => {
      counter++
      return this.ccxt.fetchLedger(undefined, undefined, undefined, {ofs: counter * 50})
    }

    const trades$ = defer(query)

    let load$ = new BehaviorSubject('')

    const whenToRefresh$ = of('').pipe(
      delay(5000),
      tap(_ => load$.next('')),
      skip(1))

    const byDepositAndWithdrawal = trade => trade && ['deposit', 'withdrawal'].includes(trade.info.type)

    const poll$ = concat(trades$, whenToRefresh$)

    return load$.pipe(
      concatMap(_ => poll$),
      takeWhile(data => data.length > 0),
      map(data => ({errors: [], data: data.filter(byDepositAndWithdrawal).map(parseLedger)})),
      catchError(error$ => of({errors: [error$.toString()], data: []})))
  }

signAndSendExtrinsics = curry((dock, initiator, txs$) => {
  // The first nonce to be used will come from the API call
  // To send several extrinsics simultaneously, we need to emulate increasing nonce
  return from(dock.api.rpc.system.accountNextIndex(initiator.address)).pipe(
    switchMap((nonce) => {
      const sendExtrinsic = (tx) =>
        defer(() => {
          dock.setAccount(initiator);
          const sentTx = dock.signAndSend(tx, FinalizeTx, { nonce });
          // Increase nonce by hand
          nonce = nonce.add(new BN(1));

          return from(timeout(TxFinalizationTimeout, sentTx));
        }).pipe(
          mapRx((result) => ({ tx, result })),
          catchError((error, caught) => {
            console.error(` * Transaction failed: ${error}`);
            const stringified = error.toString().toLowerCase();

            // Filter out errors related to balance and double-claim
            if (
              stringified.includes("balance") ||
              stringified.includes("alreadyclaimed") ||
              stringified.includes("invalid transaction") ||
              stringified.includes("election")
            ) {
              return EMPTY;
            } else {
              // Retry an observable after the given timeout
              return timer(RetryTimeout).pipe(concatMapTo(caught));
            }
          })
        );

      return txs$.pipe(mergeMap(sendExtrinsic, ConcurrentTxLimit));
    })
  );
})

fetchKnowledgeGraphMetadataEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_KNOWLEDGE_GRAPH_METADATA),
  withLatestFrom(state$),
  mergeMap(([action]) => {
    const requestUrl = `${apiUrl}/void/${action.perspectiveID}/${action.resultClass}`
    return ajax({
      url: requestUrl,
      method: 'GET'
    }).pipe(
      map(ajaxResponse => updateKnowledgeGraphMetadata({
        resultClass: action.resultClass,
        data: ajaxResponse.response.data ? ajaxResponse.response.data[0] : null,
        sparqlQuery: ajaxResponse.response.sparqlQuery
      })),
      catchError(error => of({
        type: FETCH_KNOWLEDGE_GRAPH_METADATA_FAILED,
        perspectiveID: action.resultClass,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchGeoJSONLayersBackendEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_GEOJSON_LAYERS_BACKEND),
  withLatestFrom(state$),
  mergeMap(([action]) => {
    const { layerIDs /* bounds */ } = action
    // const { latMin, longMin, latMax, longMax } = boundsToValues(bounds)
    const params = {
      layerID: layerIDs
      // latMin,
      // longMin,
      // latMax,
      // longMax
    }
    const requestUrl = `${apiUrl}/wfs?${querystring.stringify(params)}`
    return ajax.getJSON(requestUrl).pipe(
      map(res => updateGeoJSONLayers({
        payload: res
      })),
      catchError(error => of({
        type: SHOW_ERROR,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchSimilarDocumentsEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_SIMILAR_DOCUMENTS_BY_ID),
  withLatestFrom(state$),
  mergeMap(([action]) => {
    const { resultClass, id, modelName, resultSize } = action
    const requestUrl = `${documentFinderAPIUrl}/top-similar/${modelName}/${id}?n=${resultSize}`
    return ajax.getJSON(requestUrl).pipe(
      map(res => updateInstanceTableExternal({
        resultClass,
        data: res.documents || null
      })),
      catchError(error => of({
        type: FETCH_SIMILAR_DOCUMENTS_BY_ID_FAILED,
        resultClass: action.resultClass,
        id: action.id,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

clientFSFetchResultsEpic = (action$, state$) => action$.pipe(
  ofType(CLIENT_FS_FETCH_RESULTS),
  withLatestFrom(state$),
  debounceTime(500),
  switchMap(([action, state]) => {
    const { perspectiveID, jenaIndex } = action
    const federatedSearchState = state[perspectiveID]
    const selectedDatasets = pickSelectedDatasets(federatedSearchState.datasets)
    const dsParams = selectedDatasets.map(ds => `dataset=${ds}`).join('&')
    let requestUrl
    if (action.jenaIndex === 'text') {
      requestUrl = `${apiUrl}/federated-search?q=${action.query}&${dsParams}&perspectiveID=${perspectiveID}`
    } else if (action.jenaIndex === 'spatial') {
      const { latMin, longMin, latMax, longMax } = federatedSearchState.maps.boundingboxSearch
      requestUrl = `${apiUrl}/federated-search?latMin=${latMin}&longMin=${longMin}&latMax=${latMax}&longMax=${longMax}&${dsParams}&perspectiveID=${perspectiveID}`
    }
    return ajax.getJSON(requestUrl).pipe(
      map(response => clientFSUpdateResults({
        results: response,
        jenaIndex
      })),
      catchError(error => of({
        type: CLIENT_FS_FETCH_RESULTS_FAILED,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchByURIEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_BY_URI),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { perspectiveID, resultClass, facetClass, uri } = action
    const params = stateToUrl({
      perspectiveID,
      facets: facetClass == null ? null : state[`${facetClass}Facets`].facets,
      facetClass
    })
    const requestUrl = `${apiUrl}/${resultClass}/page/${encodeURIComponent(uri)}`
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse => updateInstanceTable({
        resultClass,
        data: ajaxResponse.response.data,
        sparqlQuery: ajaxResponse.response.sparqlQuery
      })),
      catchError(error => of({
        type: FETCH_BY_URI_FAILED,
        resultClass: resultClass,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fullTextSearchEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_FULL_TEXT_RESULTS),
  withLatestFrom(state$),
  debounceTime(500),
  switchMap(([action, state]) => {
    const requestUrl = `${apiUrl}/full-text-search?q=${action.query}`
    return ajax.getJSON(requestUrl).pipe(
      map(response => updateResults({
        resultClass: 'fullTextSearch',
        data: response.data,
        sparqlQuery: response.sparqlQuery,
        query: action.query,
        jenaIndex: action.jenaIndex
      })),
      catchError(error => of({
        type: FETCH_RESULTS_FAILED,
        resultClass: 'fullTextSearch',
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchPopularRestaurants = (action$) => action$.pipe(
  filter((action) => action.type === actionType.ADD_POPULAR_RESTAURANTS),
  mergeMap(async (action) => {
    const popularRestaurants = await fetch(GET_POPULAR_RESTAURANTS).then((res) => res.json());
    return { ...action, type: actionType.ADD_POPULAR_RESTAURANTS_SUCCESS, popularRestaurants };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_RESTAURANTS_FAIL,
    message: err.message,
  })),
)

editReservation = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.EDIT_BOOKING),
  mergeMap(async (action) => {
    const bookingData = store.value.bookingReducer;
    const restaurantData = store.value.restaurantReducer;

    const booking = await fetch(`${PUT_RESERVATION}/${bookingData.bookingCode}`, {
      method: "PUT",
      mode: "cors",
      credentials: "same-origin",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        date: bookingData.date,
        time: bookingData.time,
        restaurantID: restaurantData.selected.ID,
        numberOfGuests: bookingData.seats,
        notes: bookingData.notes,
        name: bookingData.name,
        phone: bookingData.phone,
        email: bookingData.email,
      }),
    }).then((res) => res.json());

    return { ...action, type: actionType.EDIT_BOOKING_SUCCESS, booking };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.EDIT_BOOKING_FAIL,
    message: err.message,
  })),
)

getRestaurantBookings = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.GET_RESTAURANT_BOOKINGS),
  mergeMap(async (action) => {
    const bookingData = store.value.bookingReducer;
    const bookings = await fetch(RESTAURANT_BOOKING(bookingData.currentRestaurantID))
      .then((res) => res.json());
    return {
      ...action,
      type: actionType.GET_RESTAURANT_BOOKINGS_SUCCCESS,
      restaurantBookings: bookings.result,
    };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.GET_RESTAURANT_BOOKINGS_FAIL,
    message: err.message,
  })),
)

getRestaurantHours = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.GET_RESTAURANT_HOURS),
  mergeMap(async (action) => {
    const restaurantData = store.value.restaurantReducer;
    const hours = await fetch(RESTAURANT_HOURS(restaurantData.selected.ID))
      .then((res) => res.json());
    return { ...action, type: actionType.GET_RESTAURANT_HOURS_SUCCESS, restaurantHours: hours };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.GET_RESTAURANT_HOURS_FAIL,
    message: err.message,
  })),
)

getAvailableHours = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.GET_AVAILABLE_RESTAURANT_HOURS),
  mergeMap(async (action) => {
    const bookingData = store.value.bookingReducer;
    const restaurantData = store.value.restaurantReducer;
    const endPoint = `${FREE_TABLE}?restaurantID=${restaurantData.selected.ID}&numberOfGuests=${bookingData.seats}&date=${bookingData.date}`;
    const available = await fetch(endPoint).then((res) => res.json());
    return {
      ...action,
      type: actionType.GET_AVAILABLE_RESTAURANT_HOURS_SUCCESS,
      availableRestaurantHours: available,
    };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.GET_AVAILABLE_RESTAURANT_HOURS_FAIL,
    message: err.message,
  })),
)

getTableCapacity = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.GET_TABLE_CAPACITY),
  mergeMap(async (action) => {
    const restaurantData = store.value.restaurantReducer;
    const capacity = await fetch(TABLE_CAPACITY(restaurantData.selected.ID)).then((res) => res.json());
    return {
      ...action,
      type: actionType.GET_TABLE_CAPACITY_SUCCESS,
      tableCapacity: capacity,
    };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.GET_TABLE_CAPACITY_FAIL,
    message: err.message,
  })),
)

getRestaurantMenu = (action$, store) => action$.pipe(
    filter((action) => action.type === actionType.GET_RESTAURANT_MENU),
    mergeMap(async (action) => {
      const menu = await fetch(RESTAURANT_MENU(action.restaurantID))
        .then((res) => res.json());
      return { ...action, type: actionType.GET_RESTAURANT_MENU_SUCCESS, menus: menu };
    }),
    catchError((err) => Promise.resolve({
      type: actionType.GET_RESTAURANT_MENU_FAIL,
      message: err.message,
    })),
  )

fetchRestaurants = (action$) => action$.pipe(
  filter((action) => action.type === actionType.ADD_RESTAURANTS),
  mergeMap(async (action) => {
    const restaurants = await fetch(GET_ALL_RESTAURANTS).then((res) => res.json());
    return { ...action, type: actionType.ADD_RESTAURANTS_SUCCESS, restaurants };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_RESTAURANTS_FAIL,
    message: err.message,
  })),
)

fetchOpenRestaurants = (action$) => action$.pipe(
  filter((action) => action.type === actionType.ADD_OPEN_RESTAURANTS),
  mergeMap(async (action) => {
    const openRestaurants = await fetch(GET_OPEN_RESTAURANTS).then((res) => res.json());
    return { ...action, type: actionType.ADD_OPEN_RESTAURANTS_SUCCESS, openRestaurants };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_RESTAURANTS_FAIL,
    message: err.message,
  })),
)

fetchNewRestaurants = (action$) => action$.pipe(
  filter((action) => action.type === actionType.ADD_NEW_RESTAURANTS),
  mergeMap(async (action) => {
    const newRestaurants = await fetch(GET_NEW_RESTAURANTS).then((res) => res.json());
    return { ...action, type: actionType.ADD_NEW_RESTAURANTS_SUCCESS, newRestaurants };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_RESTAURANTS_FAIL,
    message: err.message,
  })),
)

fetchSearchedRestaurants = (action$) => action$.pipe(
  filter((action) => action.type === actionType.ADD_SEARCH_RESTAURANTS),
  mergeMap(async (action) => {
    const restaurants = await fetch(`${GET_SEARCH_RESTAURANTS}${action.searchText}`).then((res) => res.json());
    return { ...action, type: actionType.ADD_RESTAURANTS_SUCCESS, restaurants };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_RESTAURANTS_FAIL,
    message: err.message,
  })),
)

fetchResultsEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_RESULTS),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { perspectiveID, resultClass, facetClass, limit, optimize } = action
    const params = stateToUrl({
      perspectiveID,
      facets: facetClass ? state[`${facetClass}Facets`].facets : null,
      facetClass,
      uri: action.uri ? action.uri : null,
      limit,
      optimize
    })
    const requestUrl = `${apiUrl}/faceted-search/${resultClass}/all`
    // https://rxjs-dev.firebaseapp.com/api/ajax/ajax
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse => updateResults({
        resultClass,
        data: ajaxResponse.response.data,
        sparqlQuery: ajaxResponse.response.sparqlQuery,
        order: action.order
      })),
      catchError(error => of({
        type: FETCH_RESULTS_FAILED,
        resultClass,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchFacetConstrainSelfEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_FACET_CONSTRAIN_SELF),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { facetClass, facetID } = action
    const facets = state[`${facetClass}Facets`].facets
    const facet = facets[facetID]
    const { sortBy, sortDirection } = facet
    const params = stateToUrl({
      facets: facets,
      sortBy: sortBy,
      sortDirection: sortDirection,
      constrainSelf: true
    })
    const requestUrl = `${apiUrl}/faceted-search/${action.facetClass}/facet/${facetID}`
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse => updateFacetValuesConstrainSelf({
        facetClass,
        id: facetID,
        data: ajaxResponse.response.data || [],
        flatData: ajaxResponse.response.flatData || [],
        sparqlQuery: ajaxResponse.response.sparqlQuery
      })),
      catchError(error => of({
        type: FETCH_FACET_FAILED,
        resultClass: facetClass,
        id: action.id,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchFacetEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_FACET),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { facetClass, facetID, constrainSelf } = action
    const facets = state[`${facetClass}Facets`].facets
    const facet = facets[facetID]
    const { sortBy = null, sortDirection = null } = facet
    const params = stateToUrl({
      facets,
      sortBy,
      sortDirection,
      constrainSelf
    })
    const requestUrl = `${apiUrl}/faceted-search/${action.facetClass}/facet/${facetID}`
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse => updateFacetValues({
        facetClass,
        id: ajaxResponse.response.id,
        data: ajaxResponse.response.data || [],
        flatData: ajaxResponse.response.flatData || [],
        sparqlQuery: ajaxResponse.response.sparqlQuery
      })),
      catchError(error => of({
        type: FETCH_FACET_FAILED,
        facetClass,
        facetID,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

fetchPaginatedResultsEpic = (action$, state$) => action$.pipe(
  ofType(FETCH_PAGINATED_RESULTS),
  withLatestFrom(state$),
  mergeMap(([action, state]) => {
    const { resultClass, facetClass, sortBy } = action
    const { page, pagesize, sortDirection } = state[resultClass]
    const params = stateToUrl({
      facets: state[`${facetClass}Facets`].facets,
      facetClass: null,
      page,
      pagesize,
      sortBy,
      sortDirection
    })
    const requestUrl = `${apiUrl}/faceted-search/${resultClass}/paginated`
    // https://rxjs-dev.firebaseapp.com/api/ajax/ajax
    return ajax({
      url: requestUrl,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: params
    }).pipe(
      map(ajaxResponse =>
        updatePaginatedResults({
          resultClass,
          data: ajaxResponse.response.data,
          sparqlQuery: ajaxResponse.response.sparqlQuery
        })),
      // https://redux-observable.js.org/docs/recipes/ErrorHandling.html
      catchError(error => of({
        type: FETCH_PAGINATED_RESULTS_FAILED,
        resultClass,
        error: error,
        message: {
          text: backendErrorText,
          title: 'Error'
        }
      }))
    )
  })
)

addReservation = (action$, store) => action$.pipe(
  filter((action) => action.type === actionType.ADD_BOOKING),
  mergeMap(async (action) => {
    const bookingData = store.value.bookingReducer;
    const restaurantData = store.value.restaurantReducer;

    const tableIDEndpoint = `${TABLE_ID.toString()}?date=${bookingData.date}&time=${bookingData.time.substring(0, 2)}&numberOfGuests=${bookingData.seats}&restaurantID=${restaurantData.selected.ID}`;

    const tableID = await fetch(tableIDEndpoint, {
      method: "GET",
      mode: "cors",
      credentials: "same-origin",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());

    const booking = await fetch(POST_RESERVATION, {
      method: "POST",
      mode: "cors",
      credentials: "same-origin",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        date: bookingData.date,
        time: bookingData.time,
        restaurantID: restaurantData.selected.ID,
        numberOfGuests: bookingData.seats,
        tableID: tableID.result[0].ID,
        notes: bookingData.notes,
        name: bookingData.name,
        phone: bookingData.phone,
        email: bookingData.email,
      }),
    }).then((res) => res.json());

    return { ...action, type: actionType.ADD_BOOKING_SUCCESS, booking };
  }),
  catchError((err) => Promise.resolve({
    type: actionType.ADD_BOOKING_FAIL,
    message: err.message,
  })),
)