UICAL-277: Fix attempting to access a Monthly calendar view causes th…

…e browser to freeze
folio-org · Oct 26, 2023 · 165ee08 · 165ee08
1 parent b73de1f
commit 165ee08
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/data/useDataRepository.ts b/src/data/useDataRepository.ts
@@ -1,5 +1,8 @@
 import { useOkapiKy } from '@folio/stripes/core';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
+import {
+  useMemo
+} from 'react';
 import { Calendar, CalendarDTO, User } from '../types/types';
 import DataRepository from './DataRepository';
 import {
@@ -91,7 +94,7 @@ export default function useDataRepository(): DataRepository {
     }
   );
 
-  return new DataRepository(
+  return useMemo(() => new DataRepository(
     calendars.isSuccess ? calendars.data : undefined,
     servicePoints.isSuccess ? servicePoints.data : undefined,
     {
@@ -101,5 +104,5 @@ export default function useDataRepository(): DataRepository {
       dates: getDateRange.mutateAsync,
       getUser: getUserInfo.mutateAsync
     }
-  );
+  ), [calendars.isSuccess, calendars.data, servicePoints.isSuccess, servicePoints.data, createCalendar.mutateAsync, putCalendar.mutateAsync, deleteCalendars.mutateAsync, getDateRange.mutateAsync, getUserInfo.mutateAsync]);
 }
diff --git a/src/views/MonthlyCalendarPickerView.tsx b/src/views/MonthlyCalendarPickerView.tsx
@@ -13,7 +13,8 @@ import React, {
   ReactNode,
   useCallback,
   useEffect,
-  useState
+  useState,
+  useMemo
 } from 'react';
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 import { Route, useHistory, useRouteMatch } from 'react-router-dom';
@@ -104,6 +105,8 @@ const MonthlyCalendarPickerView: FunctionComponent<
     servicePointId: string;
   }>('/settings/calendar/monthly/:servicePointId')?.params?.servicePointId;
 
+  const getServicePoint = useMemo(() => dataRepository.getServicePointFromId(currentRouteId), [dataRepository, currentRouteId]);
+
   useEffect(() => {
     if (currentRouteId !== undefined && !(currentRouteId in events)) {
       const newEvents = { ...events, [currentRouteId]: {} };
@@ -182,7 +185,7 @@ const MonthlyCalendarPickerView: FunctionComponent<
           onClose={() => {
             history.push('/settings/calendar/monthly/');
           }}
-          servicePoint={dataRepository.getServicePointFromId(currentRouteId)}
+          servicePoint={getServicePoint}
           events={events[currentRouteId ?? '']}
           requestEvents={requestEvents}
         />

diff --git a/src/views/panes/MonthlyCalendarView.tsx b/src/views/panes/MonthlyCalendarView.tsx
@@ -38,7 +38,7 @@ export const MonthlyCalendarView: FunctionComponent<
   const localeWeekdays = useLocaleWeekdays(intl);
 
   useEffect(() => {
-    (async () => {
+    (() => {
       if (servicePoint === undefined) {
         return;
       }
@@ -65,7 +65,7 @@ export const MonthlyCalendarView: FunctionComponent<
         servicePoint?.id
       );
     })();
-  }, [monthBasis, servicePoint, events, requestEvents, localeWeekdays, intl]);
+  }, [monthBasis, events, localeWeekdays, intl, servicePoint, requestEvents]);
 
   if (servicePoint === undefined) {
     return null;