Merge pull request #156 from zimmerman-team/feat/DX-1550

feat: DX-1550 Pagination for report media

src/app/hooks/useInfinityScroll.ts

@@ -8,8 +8,8 @@ export const useInfinityScroll = (
     //handle infinity scroll with IntersectionObserver api
 
     const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
+      ([entry]) => {
+        if (entry.isIntersecting) {
           setIsObserved(true);
         } else {
           setIsObserved(false);

src/app/hooks/useSearchMediaSources.tsx

@@ -133,6 +133,12 @@ export function useSearchMediaSources(source: string, elementType: string) {
       });
   };
 
+  const reset = () => {
+    setData([]);
+    setPage(1);
+    setPageToken("");
+  };
+
   const getUnsplashImages = async (q: string, nextPage: boolean) => {
     await axios
       .get(
@@ -178,7 +184,7 @@ export function useSearchMediaSources(source: string, elementType: string) {
   const search = async (q: string, nextPage: boolean = false) => {
     if ((elementType === "video" || elementType === "image") && token) {
       if (!nextPage) {
-        setData([]);
+        reset();
       }
       setLoading(true);
       const sources = sourceGetter[elementType as keyof typeof sourceGetter];

src/app/modules/report-module/__test__/reportRightPanelCreateView.test.tsx

@@ -41,6 +41,8 @@ import {
 import { mockChartList } from "app/modules/report-module/__test__/data";
 import axios, { AxiosResponse } from "axios";
 import { ChartsAppliedFiltersState } from "app/state/api/action-reducers/sync/charts/filters";
+import { setupIntersectionObserverMock } from "./setupIntersectionObserver";
+setupIntersectionObserverMock();
 
 interface MockProps {
   showHeaderItem: boolean;

src/app/modules/report-module/__test__/setupIntersectionObserver.ts

@@ -0,0 +1,38 @@
+/**
+ * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
+ * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
+ * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the intersection observer, but its methods.
+ */
+export function setupIntersectionObserverMock({
+  root = null,
+  rootMargin = "",
+  thresholds = [],
+  disconnect = () => null,
+  observe = () => null,
+  takeRecords = () => [],
+  unobserve = () => null,
+} = {}): void {
+  class MockIntersectionObserver implements IntersectionObserver {
+    readonly root: Element | null = root;
+    readonly rootMargin: string = rootMargin;
+    readonly thresholds: ReadonlyArray<number> = thresholds;
+    disconnect: () => void = disconnect;
+    observe: (target: Element) => void = observe;
+    takeRecords: () => IntersectionObserverEntry[] = takeRecords;
+    unobserve: (target: Element) => void = unobserve;
+  }
+
+  Object.defineProperty(window, "IntersectionObserver", {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver,
+  });
+
+  Object.defineProperty(global, "IntersectionObserver", {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver,
+  });
+}