Replace old reservations API with new one

Fetch reservations from the new reservations API.

.env.example

@@ -9,7 +9,11 @@ ACCESSIBILITY_SENTENCE_API="https://www.hel.fi/palvelukarttaws/rest/v4"
 SERVICEMAP_API="https://api.hel.fi/servicemap/"
 SERVICEMAP_API_VERSION="v2"
 EVENTS_API="https://api.hel.fi/linkedevents/v1"
-RESERVATIONS_API="https://api.hel.fi/respa/v1"
+
+RESERVATIONS_API="https://tilavaraus.hel.fi" # For production
+# RESERVATIONS_API="https://tilavaraus.test.hel.ninja" # For test environment
+# RESERVATIONS_API="https://tilavaraus.dev.hel.ninja" # For local development
+
 FEEDBACK_URL="https://api.hel.fi/servicemap/open311/"
 DIGITRANSIT_API="https://api.digitransit.fi/routing/v1/routers/hsl/index/graphql"
 # This is key for DIGITRANSIT API. There are separate urls and keys for prod (api.digitransit.fi) and dev (dev-api.digitransit.fi) digitransit apis. Developer should generate own

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       SERVICEMAP_API: https://api.hel.fi/servicemap/
       SERVICEMAP_API_VERSION: "v2"
       EVENTS_API: https://api.hel.fi/linkedevents/v1
-      RESERVATIONS_API: https://api.hel.fi/respa/v1
+      RESERVATIONS_API: https://tilavaraus.hel.fi
       PRODUCTION_PREFIX: SM
       DIGITRANSIT_API: https://api.digitransit.fi/routing/v1/routers/hsl/index/graphql
       DIGITRANSIT_API_KEY: a9219bfb875d4cc79b5f69123b57d0db

server/dataFetcher.js

@@ -180,7 +180,7 @@ export const fetchSelectedUnitData = (req, res, next) => {
       store.dispatch(fetchSuccess(data.results));
       response();
     }
-    reservationsFetch({ unit: `tprek:${id}` }, null, reservationFetchEnd, fetchOnError, null, null, controller)
+    reservationsFetch(null, null, reservationFetchEnd, fetchOnError, null, id, controller);
 
   } catch(e) {
     console.log('Error in fetchSelectedUnitData', e.message);

src/components/ListItems/ReservationItem/ReservationItem.js

@@ -2,20 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EventAvailable } from '@mui/icons-material';
 import SimpleListItem from '../SimpleListItem';
-import useLocaleText from '../../../utils/useLocaleText';
+import config from '../../../../config';
+import { useSelector } from 'react-redux';
+import { getLocale } from '../../../redux/selectors/user';
+
+const getLocalizedText = (reservation, locale) => {
+  switch (locale) {
+    case 'fi':
+      return reservation.name_fi;
+    case 'en':
+      return reservation.name_en;
+    case 'sv':
+      return reservation.name_sv;
+    default:
+      return reservation.name_fi; // Fallback to Finnish
+  }
+};
 
 const ReservationItem = ({ reservation, intl, divider }) => {
-  const getLocaleText = useLocaleText();
+  const locale = useSelector(getLocale);
+  const localizedText = getLocalizedText(reservation, locale);
+
   return (
     <SimpleListItem
-      key={reservation.id}
+      key={reservation.pk}
       className="reservationItem"
       icon={<EventAvailable color="primary" />}
       link
-      text={`${getLocaleText(reservation.name)} ${intl.formatMessage({ id: 'opens.new.tab' })}`}
+      text={`${localizedText} ${intl.formatMessage({ id: 'opens.new.tab' })}`}
       divider={divider}
       handleItemClick={() => {
-        window.open(`https://varaamo.hel.fi/resources/${reservation.id}`);
+        window.open(`${config.reservationsAPI.root}/${locale}/reservation-unit/${reservation.pk}`);
       }}
     />
   );
@@ -24,8 +41,10 @@ const ReservationItem = ({ reservation, intl, divider }) => {
 ReservationItem.propTypes = {
   intl: PropTypes.objectOf(PropTypes.any).isRequired,
   reservation: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.objectOf(PropTypes.any),
+    pk: PropTypes.number,
+    name_fi: PropTypes.string,
+    name_en: PropTypes.string,
+    name_sv: PropTypes.string,
   }).isRequired,
   divider: PropTypes.bool,
 };

src/redux/actions/selectedUnitReservations.js

@@ -2,48 +2,31 @@ import { reservations } from './fetchDataActions';
 import { reservationsFetch } from '../../utils/fetch';
 
 const {
-  isFetching, fetchSuccess, fetchMoreSuccess, fetchError, fetchProgressUpdate,
+  isFetching, fetchSuccess, fetchError
 } = reservations;
 
-export const fetchReservations = (id, pageSize, all = false) => async (dispatch, getState) => {
-  const { selectedUnit } = getState();
-  const { reservations } = selectedUnit;
-  const previousFetch = reservations.previousSearch;
-  if (previousFetch) {
-    const parts = previousFetch.split('-');
-    if (parts[0] === id && parts[1] === 'all') {
-      return;
-    }
-  }
+export const fetchReservations = (id) => async (dispatch, getState) => {
+
   const onStart = () => {
-    dispatch(isFetching(`${id}-${all ? 'all' : 'partial'}`));
+    dispatch(isFetching(id));
   };
+
   const onSuccess = (data) => {
     if (data && data.length) {
       dispatch(fetchSuccess(data));
       return;
     }
-    dispatch(fetchProgressUpdate(data.results.length, data.count, data.next));
     dispatch(fetchSuccess(data.results, { count: data.count, next: data.next }));
   };
-  const onError = e => dispatch(fetchError(e.message));
-  const onNext = all ? (resultTotal, response) => {
-    dispatch(fetchProgressUpdate(resultTotal.length, response.count));
-  } : null;
 
-  // Fetch data
-  reservationsFetch({ unit: `tprek:${id}`, page_size: pageSize || 5 }, onStart, onSuccess, onError, onNext);
-};
-
-
-export const fetchAdditionalReservations = next => async (dispatch) => {
-  // fetch additional data that is added to previous data
-  const onStart = () => dispatch(isFetching());
-  const onSuccess = (data) => {
-    dispatch(fetchMoreSuccess(data.results, { count: data.count, next: data.next }));
+  const onError = e => {
+    console.error(e); // Log the error
+    dispatch(fetchError(e.message));
   };
-  const onError = e => dispatch(fetchError(e.message));
 
-  // Fetch data
-  reservationsFetch(null, onStart, onSuccess, onError, null, null, null, next);
+  try {
+    await reservationsFetch(null, onStart, onSuccess, onError, null, id, null, null, null);
+  } catch (e) {
+    onError(e);
+  }
 };

src/utils/fetch/constants.js

@@ -26,11 +26,9 @@ export const APIHandlers = {
     envName: config.serviceMapAPI.id,
   },
   reservations: {
-    url: `${config.reservationsAPI.root}/resource/`,
-    options: {
-      page_size: 5,
-    },
-    envName: config.serviceMapAPI.id,
+    url: id => `${config.reservationsAPI.root}/v1/palvelukartta/reservation-units/${id}`,
+    options: {},
+    envName: config.reservationsAPI.id,
   },
   search: {
     url: `${config.serviceMapAPI.root}${config.serviceMapAPI.version}/search/`,

src/views/UnitView/components/ExtendedData/ExtendedData.js

@@ -38,7 +38,7 @@ const ExtendedData = ({
           fetchUnitEvents(unit, 50, true);
           break;
         case 'reservations':
-          fetchReservations(unit, 20, true);
+          fetchReservations(unit, true);
           break;
         default:
       }
@@ -163,7 +163,7 @@ const ExtendedData = ({
             id="reservations"
             data={data || []}
             customComponent={item => (
-              <ReservationItem key={item.id} reservation={item} />
+              <ReservationItem key={item.pk} reservation={item} />
             )}
             srTitle={srTitle}
             title={titleText}

src/views/UnitView/components/UnitDataList/UnitDataList.js

@@ -22,7 +22,7 @@ const UnitDataList = ({
   const dataItems = data.data;
   let fullDataLength;
 
-  if (type === 'educationServices') {
+  if (type === 'educationServices' || type === 'reservations') {
     fullDataLength = dataItems?.length;
   } else {
     fullDataLength = data.max;
@@ -57,7 +57,7 @@ const UnitDataList = ({
     } if (type === 'reservations') {
       return (
         shownData.map((item, i) => (
-          <ReservationItem key={item.id} reservation={item} divider={i !== shownData.length - 1} />
+          <ReservationItem key={item.pk} reservation={item} divider={i !== shownData.length - 1} />
         ))
       );
     }