wip

thoughtbot · Dec 12, 2024 · 78fa800 · 78fa800
1 parent e63566a
commit 78fa800
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 108 deletions.
diff --git a/superglue/lib/components/Navigation.tsx b/superglue/lib/components/Navigation.tsx
@@ -220,15 +220,9 @@ const NavigationProvider = forwardRef(function NavigationProvider(
   if (Component) {
     return (
       <NavigationContext.Provider
-        value={{ pageKey, navigateTo, visit, remote }}
+        value={{ pageKey, navigateTo, visit, remote, ownProps }}
       >
-        <Component
-          pageKey={pageKey}
-          navigateTo={navigateTo}
-          visit={visit}
-          remote={remote}
-          {...ownProps}
-        />
+        <Component />
       </NavigationContext.Provider>
     )
   } else {

diff --git a/superglue/lib/index.tsx b/superglue/lib/index.tsx
@@ -4,7 +4,7 @@ import { config } from './config'
 import { urlToPageKey, ujsHandlers, argsForHistory } from './utils'
 import { saveAndProcessPage } from './action_creators'
 import { historyChange, setCSRFToken } from './actions'
-import { Provider, connect } from 'react-redux'
+import { Provider } from 'react-redux'
 
 import { createBrowserHistory, createMemoryHistory } from 'history'
 
@@ -24,10 +24,8 @@ export {
 } from './actions'
 export * from './types'
 
-import { mapStateToProps, mapDispatchToProps } from './utils/react'
 import {
   VisitResponse,
-  ConnectedMapping,
   ApplicationProps,
   NavigateTo,
   SuperglueStore,
@@ -73,18 +71,6 @@ export const prepareStore = (
   store.dispatch(setCSRFToken({ csrfToken }))
 }
 
-export const connectMapping = (
-  unconnectedMapping: Record<string, React.ComponentType>
-) => {
-  const nextMapping: ConnectedMapping = {}
-  for (const key in unconnectedMapping) {
-    const component = unconnectedMapping[key]
-    nextMapping[key] = connect(mapStateToProps, mapDispatchToProps)(component)
-  }
-
-  return nextMapping
-}
-
 /**
  * The entry point to your superglue application. It sets up the redux Provider,
  * redux state and the Navigation component.
@@ -104,33 +90,31 @@ function Application({
 }: ApplicationProps) {
   const navigatorRef = useRef<{ navigateTo: NavigateTo }>(null)
 
-  const { visit, remote, nextHistory, connectedMapping, initialPageKey, ujs } =
-    useMemo(() => {
-      config.baseUrl = baseUrl
-
-      const { visit, remote } = buildVisitAndRemote(navigatorRef, store)
-
-      const initialPageKey = urlToPageKey(parse(path).href)
-      const nextHistory = history || createHistory()
-      nextHistory.replace(...argsForHistory(path))
-      prepareStore(store, initialPage, path)
-
-      const handlers = ujsHandlers({
-        visit,
-        remote,
-        ujsAttributePrefix: 'data-sg',
-        store,
-      })
-
-      return {
-        visit,
-        remote,
-        connectedMapping: connectMapping(mapping),
-        nextHistory,
-        initialPageKey,
-        ujs: handlers,
-      }
-    }, [])
+  const { visit, remote, nextHistory, initialPageKey, ujs } = useMemo(() => {
+    config.baseUrl = baseUrl
+
+    const { visit, remote } = buildVisitAndRemote(navigatorRef, store)
+
+    const initialPageKey = urlToPageKey(parse(path).href)
+    const nextHistory = history || createHistory()
+    nextHistory.replace(...argsForHistory(path))
+    prepareStore(store, initialPage, path)
+
+    const handlers = ujsHandlers({
+      visit,
+      remote,
+      ujsAttributePrefix: 'data-sg',
+      store,
+    })
+
+    return {
+      visit,
+      remote,
+      nextHistory,
+      initialPageKey,
+      ujs: handlers,
+    }
+  }, [])
 
   // The Nav component is pretty bare and can be inherited from for custom
   // behavior or replaced with your own.
@@ -141,7 +125,7 @@ function Application({
           ref={navigatorRef}
           visit={visit}
           remote={remote}
-          mapping={connectedMapping}
+          mapping={mapping}
           history={nextHistory}
           initialPageKey={initialPageKey}
         />

diff --git a/superglue/lib/types/index.ts b/superglue/lib/types/index.ts
@@ -3,7 +3,6 @@ import type { Action } from '@reduxjs/toolkit'
 import { EnhancedStore, Tuple, StoreEnhancer } from '@reduxjs/toolkit'
 import { ThunkDispatch } from '@reduxjs/toolkit'
 import { ThunkAction } from '@reduxjs/toolkit'
-import { ConnectedComponent } from 'react-redux'
 import {
   VisitProps,
   RemoteProps,
@@ -241,28 +240,6 @@ export interface RootState<T = JSONMappable> {
   [name: string]: unknown
 }
 
-/**
- * Helpful props passed to the page component.
- */
-export interface PageOwnProps {
-  /** the pagekey of the current page */
-  pageKey: PageKey
-  navigateTo: NavigateTo
-  visit: ApplicationVisit
-  remote: ApplicationRemote
-}
-
-/**
- * Your Page's content in the data node in {@link VisitResponse} merged with additional
- * helpers
- */
-export type Content = PageOwnProps & {
-  pageKey: PageKey
-  fragments: Fragment[]
-  csrfToken?: string
-  [key: string]: unknown
-}
-
 /**
  * Meta is passed to the Promise when visit or remote
  * resolves and contains additional information for
@@ -444,6 +421,7 @@ export type NavigationContextProps = {
   visit: ApplicationVisit
   remote: ApplicationRemote
   pageKey: PageKey
+  ownProps: Record<string, unknown>
 }
 
 /**
@@ -459,18 +437,10 @@ export type NavigationProviderProps = {
   history: History
   visit: ApplicationVisit
   remote: ApplicationRemote
-  mapping: Record<
-    ComponentIdentifier,
-    ConnectedComponent<React.ComponentType, PageOwnProps>
-  >
+  mapping: Record<ComponentIdentifier, React.ComponentType>
   initialPageKey: PageKey
 }
 
-export type ConnectedMapping = Record<
-  ComponentIdentifier,
-  ConnectedComponent<React.ComponentType, PageOwnProps>
->
-
 /**
  * Provide this callback to {@link ApplicationProps} returning a Redux store for
  * Superglue to use. This would be setup and generated for you in `store.js`. We

diff --git a/superglue/lib/utils/index.ts b/superglue/lib/utils/index.ts
@@ -1,6 +1,5 @@
 export * from './helpers'
 export * from './immutability'
-export * from './react'
 export * from './request'
 export * from './ujs'
 export * from './url'

diff --git a/superglue/lib/utils/react.ts b/superglue/lib/utils/react.ts