fix: fix types and refactor

rambler-digital-solutions · Dec 8, 2023 · 09e6bb8 · 09e6bb8
1 parent 94c4b66
commit 09e6bb8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git a/src/common/types.ts b/src/common/types.ts
@@ -1,4 +1,8 @@
-import type {RouteProps, NavigateFunction, RouteMatch} from 'react-router-dom'
+import type {
+  PathRouteProps,
+  NavigateFunction,
+  RouteMatch
+} from 'react-router-dom'
 import type {Location} from 'history'
 import type {Request, Response} from 'express'
 
@@ -82,13 +86,14 @@ export type PageComponent<P = any> = React.ComponentType<
 }
 
 /** Lazy page component */
-export interface LazyPageComponent extends React.LazyExoticComponent<any> {
+export interface LazyPageComponent<P = any>
+  extends React.LazyExoticComponent<PageComponent<P>> {
   getMetaData: GetMetaData
   getInitialData: GetInitialData
 }
 
 /** Page route object for React Router */
-export type PageRoute = RouteProps & {
+export type PageRoute = Omit<PathRouteProps, 'Component'> & {
   /** Fallback component for Suspense */
   Fallback?: React.ComponentType<any>
   /** Page component */
@@ -99,9 +104,9 @@ export type PageRoute = RouteProps & {
 export enum TransitionMode {
   /** Wait for `getInitialData` to get completed, and show the next page */
   BLOCKED = 'blocked',
-  /** Show Fallback component while `getInitialData` is pending */
+  /** Show the next page with fallback while `getInitialData` is pending */
   WAIT_FOR_DATA = 'wait-for-data',
-  /** Show Fallback component while Suspense is pending */
+  /** Show the next page with fallback while lazy page is pending */
   INSTANT = 'instant'
 }
 

diff --git a/src/components/routes.tsx b/src/components/routes.tsx
@@ -40,6 +40,9 @@ export const Routes: React.FC<RoutesProps> = ({
   const [currentLocation, setCurrentLocation] = useState(location)
   const [routeData, setRouteData] = useState({data, meta, isLoading: false})
 
+  const isWaitingMode = transition === TransitionMode.WAIT_FOR_DATA
+  const isBlockedMode = !isWaitingMode && transition !== TransitionMode.INSTANT
+
   useEffect(() => {
     if (location !== currentLocation) {
       const {pathname} = location
@@ -54,16 +57,12 @@ export const Routes: React.FC<RoutesProps> = ({
 
       setRouteData((prevState) => ({...prevState, isLoading: true}))
 
-      if (
-        scrollToTop &&
-        (transition === TransitionMode.WAIT_FOR_DATA ||
-          transition === TransitionMode.INSTANT)
-      ) {
+      if (scrollToTop && !isBlockedMode) {
         window.scrollTo(0, 0)
       }
 
       loadRouteData({pathname, routes, context}).then((routeData) => {
-        if (scrollToTop && transition === TransitionMode.BLOCKED) {
+        if (scrollToTop && isBlockedMode) {
           window.scrollTo(0, 0)
         }
 
@@ -79,13 +78,7 @@ export const Routes: React.FC<RoutesProps> = ({
     }
   }, [location, currentLocation, scrollToTop]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const routerLocation =
-    transition === TransitionMode.WAIT_FOR_DATA ||
-    transition === TransitionMode.INSTANT
-      ? location
-      : currentLocation
-
-  const pageData = {...routeData.data, isLoading: routeData.isLoading}
+  const routerLocation = isBlockedMode ? currentLocation : location
 
   return (
     <BaseRoutes location={routerLocation}>
@@ -97,12 +90,14 @@ export const Routes: React.FC<RoutesProps> = ({
           path={path}
           element={
             <Suspense fallback={Fallback ? <Fallback /> : null}>
-              {transition === TransitionMode.WAIT_FOR_DATA &&
-              routeData.isLoading &&
-              Fallback ? (
+              {isWaitingMode && routeData.isLoading && Fallback ? (
                 <Fallback />
               ) : (
-                <Component {...rest} {...pageData} />
+                <Component
+                  {...rest}
+                  {...routeData.data}
+                  isLoading={routeData.isLoading}
+                />
               )}
             </Suspense>
           }