ERA-9761: Add page_size to event feed requests

src/ReportManager/index.js

@@ -17,12 +17,20 @@ import useNavigate from '../hooks/useNavigate';
 import { uuid } from '../utils/string';
 
 import DelayedUnmount from '../DelayedUnmount';
+import LoadingOverlay from '../LoadingOverlay';
 import ReportDetailView from './ReportDetailView';
 
 import styles from './styles.module.scss';
 
 const ADDED_REPORT_TRANSITION_EFFECT_TIME = 600;
 
+const shouldFetchEventDetails = (eventId, eventStore) =>
+  !eventStore[eventId]
+  || !eventStore[eventId].event_details
+  || !eventStore[eventId].files
+  || !eventStore[eventId].notes
+  || !eventStore[eventId].updates;
+
 const ReportManager = ({ onReportBeingAdded }) => {
   const dispatch = useDispatch();
   const location = useLocation();
@@ -89,12 +97,6 @@ const ReportManager = ({ onReportBeingAdded }) => {
     setShowAddedReport(true);
   }, [onCancelAddedReport]);
 
-  useEffect(() => {
-    if (isNewReport || eventStore[reportId]) {
-      setIsLoadingReport(false);
-    }
-  }, [eventStore, isNewReport, reportId]);
-
   useEffect(() => {
     if (isNewReport) {
       if (!reportType) {
@@ -109,24 +111,26 @@ const ReportManager = ({ onReportBeingAdded }) => {
   }, [isNewReport, location.pathname, location.search, location.state, navigate, newReportTemporalId, reportType]);
 
   useEffect(() => {
-    if (!isNewReport && !eventStore[reportId]) {
+    if (!isNewReport && shouldFetchEventDetails(reportId, eventStore)) {
       setIsLoadingReport(true);
       dispatch(fetchEvent(reportId))
         .then(() => setIsLoadingReport(false))
         .catch(() => navigate(`/${TAB_KEYS.EVENTS}`, { replace: true }));
+    } else {
+      setIsLoadingReport(false);
     }
   }, [dispatch, eventStore, isNewReport, navigate, reportId]);
 
   return <TrackerContext.Provider value={reportTracker}>
-    {shouldRenderReportDetailView && <ReportDetailView
+    {shouldRenderReportDetailView ? <ReportDetailView
       formProps={navigationData?.formProps}
       isNewReport={isNewReport}
       key={reportId} // This resets component state when the id changes
       newReportTypeId={newReportTypeId}
       onAddReport={onAddReport}
       reportData={reportData}
       reportId={reportId}
-    />}
+    /> : <LoadingOverlay />}
 
     <DelayedUnmount isMounted={showAddedReport}>
       <ReportDetailView

src/ReportManager/index.test.js

@@ -127,7 +127,7 @@ describe('ReportManager', () => {
     });
   });
 
-  test('fetches the event data if there is an id specified in the URL', async () => {
+  test('fetches the event data if there is an id specified in the URL and the event is not in the store', async () => {
     useLocationMock = jest.fn((() => ({ pathname: '/events/123' })));
     useLocation.mockImplementation(useLocationMock);
 
@@ -138,6 +138,23 @@ describe('ReportManager', () => {
     });
   });
 
+  test('fetches the event data if there is an id specified in the URL and the event is in the store but is missing properties', async () => {
+    useLocationMock = jest.fn((() => ({ pathname: '/events/123' })));
+    useLocation.mockImplementation(useLocationMock);
+
+    store.data.eventStore = {
+      123: {
+        ...eventWithPoint,
+        updates: undefined,
+      },
+    };
+    renderReportManager(store);
+
+    await waitFor(() => {
+      expect(capturedRequestURLs.find((item) => item.includes(`${EVENT_API_URL}123`))).toBeDefined();
+    });
+  });
+
   test('does not fetch the event data if the id is "new"', async () => {
     useLocationMock = jest.fn((() => ({ pathname: '/events/new' })));
     useLocation.mockImplementation(useLocationMock);
@@ -150,7 +167,7 @@ describe('ReportManager', () => {
     });
   });
 
-  test('does not fetch the event data if it is in the event store already', async () => {
+  test('does not fetch the event data if it is in the event store already and complete', async () => {
     useLocationMock = jest.fn((() => ({ pathname: '/events/123' })));
     useLocation.mockImplementation(useLocationMock);
 

src/SideBar/useReportsFeed/index.js

@@ -28,10 +28,17 @@ const useReportsFeed = () => {
 
     return isEqual(restEventFilter, INITIAL_FILTER_STATE);
   }, [eventFilter]);
-  const eventParams = useRef(calcEventFilterForRequest(
-    { params: { exclude_contained: shouldExcludeContained }, format: 'object' },
-    feedSort
-  ));
+  const eventParams = useRef(calcEventFilterForRequest({
+    params: {
+      exclude_contained: shouldExcludeContained,
+      include_details: false,
+      include_files: false,
+      include_notes: false,
+      include_updates: false,
+      page_size: 25,
+    },
+    format: 'object',
+  }, feedSort));
 
   const geoResrictedUserLocationCoords = useMemo(
     () => userIsGeoPermRestricted && userLocationCoords,
@@ -61,7 +68,13 @@ const useReportsFeed = () => {
   }, [geoResrictedUserLocationCoords, loadFeedEvents]);
 
   useEffect(() => {
-    const params = {};
+    const params = {
+      include_details: false,
+      include_files: false,
+      include_notes: false,
+      include_updates: false,
+      page_size: 25,
+    };
     if (shouldExcludeContained) {
       params.exclude_contained = true;
     }