From 8f607541f890386196f0bd27d0e87d2ec3a824a9 Mon Sep 17 00:00:00 2001 From: Ludwig Date: Wed, 22 May 2024 12:19:40 -0600 Subject: [PATCH 1/3] Add page_size to event feed requests --- src/SideBar/useReportsFeed/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SideBar/useReportsFeed/index.js b/src/SideBar/useReportsFeed/index.js index 13620e67a..2ae0af575 100644 --- a/src/SideBar/useReportsFeed/index.js +++ b/src/SideBar/useReportsFeed/index.js @@ -29,7 +29,7 @@ const useReportsFeed = () => { return isEqual(restEventFilter, INITIAL_FILTER_STATE); }, [eventFilter]); const eventParams = useRef(calcEventFilterForRequest( - { params: { exclude_contained: shouldExcludeContained }, format: 'object' }, + { params: { exclude_contained: shouldExcludeContained, page_size: 25 }, format: 'object' }, feedSort )); @@ -61,7 +61,7 @@ const useReportsFeed = () => { }, [geoResrictedUserLocationCoords, loadFeedEvents]); useEffect(() => { - const params = {}; + const params = { page_size: 25 }; if (shouldExcludeContained) { params.exclude_contained = true; } From f307b12162a97a94f1288eb76e40b7b1240fdade Mon Sep 17 00:00:00 2001 From: Ludwig Date: Fri, 24 May 2024 12:37:56 -0600 Subject: [PATCH 2/3] Add include_updates=false to the feed fetch and load every single report when opening its page --- src/ReportManager/index.js | 13 +++++++------ src/SideBar/useReportsFeed/index.js | 4 ++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/ReportManager/index.js b/src/ReportManager/index.js index 3f803bfdd..d4af1376b 100644 --- a/src/ReportManager/index.js +++ b/src/ReportManager/index.js @@ -17,6 +17,7 @@ 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'; @@ -90,10 +91,10 @@ const ReportManager = ({ onReportBeingAdded }) => { }, [onCancelAddedReport]); useEffect(() => { - if (isNewReport || eventStore[reportId]) { + if (isNewReport) { setIsLoadingReport(false); } - }, [eventStore, isNewReport, reportId]); + }, [isNewReport]); useEffect(() => { if (isNewReport) { @@ -109,16 +110,16 @@ const ReportManager = ({ onReportBeingAdded }) => { }, [isNewReport, location.pathname, location.search, location.state, navigate, newReportTemporalId, reportType]); useEffect(() => { - if (!isNewReport && !eventStore[reportId]) { + if (!isNewReport) { setIsLoadingReport(true); dispatch(fetchEvent(reportId)) .then(() => setIsLoadingReport(false)) .catch(() => navigate(`/${TAB_KEYS.EVENTS}`, { replace: true })); } - }, [dispatch, eventStore, isNewReport, navigate, reportId]); + }, [dispatch, isNewReport, navigate, reportId]); return - {shouldRenderReportDetailView && { onAddReport={onAddReport} reportData={reportData} reportId={reportId} - />} + /> : } { return isEqual(restEventFilter, INITIAL_FILTER_STATE); }, [eventFilter]); const eventParams = useRef(calcEventFilterForRequest( - { params: { exclude_contained: shouldExcludeContained, page_size: 25 }, format: 'object' }, + { params: { exclude_contained: shouldExcludeContained, include_updates: false, page_size: 25 }, format: 'object' }, feedSort )); @@ -61,7 +61,7 @@ const useReportsFeed = () => { }, [geoResrictedUserLocationCoords, loadFeedEvents]); useEffect(() => { - const params = { page_size: 25 }; + const params = { include_updates: false, page_size: 25 }; if (shouldExcludeContained) { params.exclude_contained = true; } From 0bf3a01d97a11408e59f7d232018347cc3be68c4 Mon Sep 17 00:00:00 2001 From: Ludwig Date: Thu, 30 May 2024 09:58:40 -0600 Subject: [PATCH 3/3] ERA-9761: Add more query params narrow down the response size in the feed --- src/ReportManager/index.js | 11 +++++++++-- src/ReportManager/index.test.js | 21 +++++++++++++++++++-- src/SideBar/useReportsFeed/index.js | 23 ++++++++++++++++++----- 3 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/ReportManager/index.js b/src/ReportManager/index.js index d4af1376b..d0a4e77f0 100644 --- a/src/ReportManager/index.js +++ b/src/ReportManager/index.js @@ -24,6 +24,13 @@ 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(); @@ -110,13 +117,13 @@ const ReportManager = ({ onReportBeingAdded }) => { }, [isNewReport, location.pathname, location.search, location.state, navigate, newReportTemporalId, reportType]); useEffect(() => { - if (!isNewReport) { + if (!isNewReport && shouldFetchEventDetails(reportId, eventStore)) { setIsLoadingReport(true); dispatch(fetchEvent(reportId)) .then(() => setIsLoadingReport(false)) .catch(() => navigate(`/${TAB_KEYS.EVENTS}`, { replace: true })); } - }, [dispatch, isNewReport, navigate, reportId]); + }, [dispatch, eventStore, isNewReport, navigate, reportId]); return {shouldRenderReportDetailView ? { }); }); - 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); diff --git a/src/SideBar/useReportsFeed/index.js b/src/SideBar/useReportsFeed/index.js index 3d90588d0..8b636102c 100644 --- a/src/SideBar/useReportsFeed/index.js +++ b/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, include_updates: false, page_size: 25 }, 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 = { include_updates: false, page_size: 25 }; + const params = { + include_details: false, + include_files: false, + include_notes: false, + include_updates: false, + page_size: 25, + }; if (shouldExcludeContained) { params.exclude_contained = true; }