Refactored out common hooks for client paging.

mbta · Nov 8, 2024 · 393a468 · 393a468
1 parent cecb834
commit 393a468
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 49 deletions.
diff --git a/assets/src/components/v2/elevator/elevator_closures.tsx b/assets/src/components/v2/elevator/elevator_closures.tsx
@@ -1,10 +1,4 @@
-import React, {
-  ComponentType,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { ComponentType, useLayoutEffect, useRef, useState } from "react";
 import cx from "classnames";
 import NormalService from "Images/svgr_bundled/normal-service.svg";
 import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
@@ -13,6 +7,7 @@ import PagingDotSelected from "Images/svgr_bundled/paging_dot_selected.svg";
 import makePersistent, { WrappedComponentProps } from "../persistent_wrapper";
 import RoutePill, { routePillKey, type Pill } from "../departures/route_pill";
 import _ from "lodash";
+import useClientPaging from "Hooks/v2/use_client_paging";
 
 type StationWithClosure = {
   id: string;
@@ -91,14 +86,14 @@ const OutsideClosureList = ({
   lastUpdate,
   onFinish,
 }: OutsideClosureListProps) => {
-  const [isFirstRender, setIsFirstRender] = useState(true);
-  const [pageIndex, setPageIndex] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
 
   // Each value represents the pageIndex the row is visible on
   const [rowPageIndexes, setRowPageIndexes] = useState<{
     [key: number]: number;
   }>({});
+  const numPages = Object.keys(rowPageIndexes).length;
+  const pageIndex = useClientPaging({ numPages, onFinish, lastUpdate });
 
   const numOffsetRows = Object.keys(rowPageIndexes).reduce((acc, key) => {
     if (parseInt(key) === pageIndex) {
@@ -108,27 +103,6 @@ const OutsideClosureList = ({
     }
   }, 0);
 
-  const numPages = Object.keys(rowPageIndexes).length;
-
-  useEffect(() => {
-    if (lastUpdate != null) {
-      if (isFirstRender) {
-        setIsFirstRender(false);
-      } else if (pageIndex < numPages - 1) {
-        setPageIndex((i) => i + 1);
-      } else {
-        setPageIndex(0);
-      }
-    }
-  }, [lastUpdate]);
-
-  useEffect(() => {
-    // numPages can be 0 before useLayoutEffect runs
-    if (numPages > 0 && pageIndex === numPages) {
-      onFinish();
-    }
-  }, [pageIndex]);
-
   useLayoutEffect(() => {
     if (!ref.current) return;
 

diff --git a/assets/src/components/v2/persistent_carousel.tsx b/assets/src/components/v2/persistent_carousel.tsx
@@ -1,5 +1,6 @@
-import React, { ComponentType, ReactNode, useEffect, useState } from "react";
+import React, { ComponentType, ReactNode } from "react";
 import makePersistent, { WrappedComponentProps } from "./persistent_wrapper";
+import useClientPaging from "Hooks/v2/use_client_paging";
 
 interface PageRendererProps<T> {
   page: T;
@@ -18,24 +19,11 @@ const Carousel = <T,>({
   onFinish,
   lastUpdate,
 }: Props<T>): ReactNode => {
-  const [isFirstRender, setIsFirstRender] = useState(true);
-  const [pageIndex, setPageIndex] = useState(0);
-
-  useEffect(() => {
-    if (lastUpdate != null) {
-      if (isFirstRender) {
-        setIsFirstRender(false);
-      } else {
-        setPageIndex((i) => i + 1);
-      }
-    }
-  }, [lastUpdate]);
-
-  useEffect(() => {
-    if (pageIndex === pages.length - 1) {
-      onFinish();
-    }
-  }, [pageIndex]);
+  const pageIndex = useClientPaging({
+    numPages: pages.length,
+    onFinish,
+    lastUpdate,
+  });
 
   return (
     <PageRenderer

diff --git a/assets/src/hooks/v2/use_client_paging.tsx b/assets/src/hooks/v2/use_client_paging.tsx
@@ -0,0 +1,31 @@
+import { WrappedComponentProps } from "Components/v2/persistent_wrapper";
+import { useEffect, useState } from "react";
+
+interface Args extends WrappedComponentProps {
+  numPages: number;
+}
+
+const useClientPaging = ({ numPages, onFinish, lastUpdate }: Args) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isFirstRender, setIsFirstRender] = useState(true);
+
+  useEffect(() => {
+    if (lastUpdate != null) {
+      if (isFirstRender) {
+        setIsFirstRender(false);
+      } else {
+        setPageIndex((i) => i + 1);
+      }
+    }
+  }, [lastUpdate]);
+
+  useEffect(() => {
+    if (pageIndex === numPages - 1) {
+      onFinish();
+    }
+  }, [pageIndex]);
+
+  return pageIndex;
+};
+
+export default useClientPaging;