Restore params and remove redundant code (I think)

dac09 · Feb 28, 2023 · e086fbd · e086fbd
1 parent ec28d6c
commit e086fbd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 71 deletions.
diff --git a/packages/router/src/active-route-loader.tsx b/packages/router/src/active-route-loader.tsx
@@ -1,11 +1,6 @@
-import React, { Suspense, useEffect, useRef, useState } from 'react'
+import React, { Suspense, useEffect, useRef } from 'react'
 
 import { getAnnouncement, getFocus, resetFocus } from './a11yUtils'
-import {
-  ActivePageContextProvider,
-  LoadingStateRecord,
-} from './ActivePageContext'
-import { useLocation } from './location'
 import { inIframe, Spec } from './util'
 
 interface Props {
@@ -18,17 +13,12 @@ interface Props {
 }
 
 export const ActiveRouteLoader = ({
-  path,
   spec,
   params,
   whileLoadingPage,
 }: Props) => {
-  const location = useLocation()
   const announcementRef = useRef<HTMLDivElement>(null)
   const LazyRouteComponent = spec.LazyComponent
-  const [loadingState, setLoadingState] = useState<LoadingStateRecord>({
-    [path]: { specName: '', state: 'PRE_SHOW', location },
-  })
 
   useEffect(() => {
     // Make this hook a no-op if we're rendering in an iframe.
@@ -50,25 +40,13 @@ export const ActiveRouteLoader = ({
     }
   }, [spec, params])
 
-  // @MARK keep this useffect to see if we can get the params to work
-  useEffect(() => {
-    setLoadingState((loadingState: LoadingStateRecord) => ({
-      ...loadingState,
-      [path]: {
-        specName: spec.name,
-        state: 'DONE',
-        location,
-      },
-    }))
-  }, [spec, path, location])
-
   // @TODO whileLoadingPage is undefined, why?
   return (
     <Suspense fallback={whileLoadingPage?.()}>
-      <ActivePageContextProvider value={{ loadingState }}>
-        <LazyRouteComponent {...params} />
-        {/* @TODO adding announcer causes hydration warnings */}
-        {/* <div
+      <LazyRouteComponent {...params} />
+      {/* @TODO why do we need activePageContext in InternalRoute??? */}
+      {/* @TODO adding announcer causes hydration warnings */}
+      {/* <div
               id="redwood-announcer"
               style={{
                 position: 'absolute',
@@ -86,7 +64,6 @@ export const ActiveRouteLoader = ({
               aria-atomic="true"
               ref={announcementRef}
             ></div> */}
-      </ActivePageContextProvider>
     </Suspense>
   )
 }
diff --git a/packages/router/src/params.tsx b/packages/router/src/params.tsx
@@ -1,8 +1,6 @@
 import React, { useContext } from 'react'
 
-import { LocationContextType, useLocation } from './location'
-import { useRouterState } from './router-context'
-import { createNamedContext, matchPath, parseSearch } from './util'
+import { createNamedContext } from './util'
 
 export interface ParamsContextProps {
   params: Record<string, string>
@@ -11,39 +9,16 @@ export interface ParamsContextProps {
 export const ParamsContext = createNamedContext<ParamsContextProps>('Params')
 
 interface Props {
-  path?: string
-  location?: LocationContextType
+  allParams?: Record<any, any>
   children?: React.ReactNode
 }
 
-export const ParamsProvider: React.FC<Props> = ({
-  path,
-  location,
-  children,
-}) => {
-  const { paramTypes } = useRouterState()
-  const contextLocation = useLocation()
-  const internalLocation = location || contextLocation
-
-  let pathParams = {}
-  const searchParams = parseSearch(internalLocation.search)
-
-  if (path) {
-    const { match, params } = matchPath(path, internalLocation.pathname, {
-      paramTypes,
-    })
-
-    if (match && typeof params !== 'undefined') {
-      pathParams = params
-    }
-  }
-
+export const ParamsProvider: React.FC<Props> = ({ allParams, children }) => {
   return (
     <ParamsContext.Provider
       value={{
         params: {
-          ...searchParams,
-          ...pathParams,
+          ...allParams,
         },
       }}
     >

diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -61,6 +61,11 @@ function Route(props: RouteProps | RedirectRouteProps | NotFoundRouteProps) {
   return <InternalRoute {...props} />
 }
 
+// @MARK Why do we need this???
+// The actual route gets loaded by active-route-loader, and not render by this component
+// is this component only used to validate?
+// The matchPath, parseSearch, validatePath functions are used already in the Router, why do
+// repeat them here? (see analyzeRouterPath and Router component)
 const InternalRoute = ({
   path,
   page,
@@ -256,18 +261,20 @@ const LocationAwareRouter: React.FC<RouterProps> = ({
   // Level 2/3 (LocationAwareRouter)
   return (
     <RouterContextProvider useAuth={useAuth} paramTypes={paramTypes}>
-      {redirect && <Redirect to={replaceParams(redirect, allParams)} />}
-      {!redirect && page && (
-        <ActiveRouteLoader
-          path={path}
-          spec={normalizePage(page)}
-          delay={pageLoadingDelay}
-          params={allParams}
-          whileLoadingPage={whileLoadingPage}
-        >
-          {root}
-        </ActiveRouteLoader>
-      )}
+      <ParamsProvider allParams={allParams}>
+        {redirect && <Redirect to={replaceParams(redirect, allParams)} />}
+        {!redirect && page && (
+          <ActiveRouteLoader
+            path={path}
+            spec={normalizePage(page)}
+            delay={pageLoadingDelay}
+            params={allParams}
+            whileLoadingPage={whileLoadingPage}
+          >
+            {root}
+          </ActiveRouteLoader>
+        )}
+      </ParamsProvider>
     </RouterContextProvider>
   )
 }
@@ -317,8 +324,6 @@ function analyzeRouterTree(
         return previousValue
       }
 
-      console.log(`👉 \n ~ file: router.tsx:358 ~ child:`, child)
-
       if (isRoute(child)) {
         if (child.props.notfound && child.props.page) {
           NotFoundPage = child.props.page