From 9670980538acb4b2b653c8df84c0def988c855a0 Mon Sep 17 00:00:00 2001 From: Nathan Lewis Date: Wed, 4 Dec 2024 10:59:28 -0600 Subject: [PATCH 1/2] fix: use apollosId in the search params instead of generic id --- packages/web-shared/components/Modal/Modal.js | 5 ----- packages/web-shared/providers/NavigationProvider.js | 6 +++--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js index ee87b69c..5d426d17 100644 --- a/packages/web-shared/components/Modal/Modal.js +++ b/packages/web-shared/components/Modal/Modal.js @@ -26,15 +26,10 @@ function ChurchLogo(props) { const Modal = (props = {}) => { const [state, dispatch] = useModal(); - - console.log('Modal props: ', props); - const ref = useRef(); const imageRef = useRef(); const { id, navigate } = useNavigation(); - console.log('Navigation ID: ', id); - useEffect(() => { // Watch for changes to the `id` search param if (id) { diff --git a/packages/web-shared/providers/NavigationProvider.js b/packages/web-shared/providers/NavigationProvider.js index ea0bc62b..86b01363 100644 --- a/packages/web-shared/providers/NavigationProvider.js +++ b/packages/web-shared/providers/NavigationProvider.js @@ -6,11 +6,11 @@ const NavigationContext = createContext({ id: null, navigate: () => {} }); const NavigationProvider = (props = {}) => { const [searchParams] = useSearchParams(); - const { contentId, feedId } = useParams(); + const { apollosId, contentId, feedId } = useParams(); const shouldUsePathRouter = useShouldUsePathRouter(); const nativeNavigate = useNavigate(); - const id = contentId || feedId || searchParams.get('id'); + const id = contentId || feedId || apollosId || searchParams.get('apollosId'); let navigate = () => {}; if (shouldUsePathRouter) { @@ -31,7 +31,7 @@ const NavigationProvider = (props = {}) => { navigate = ({ id, type } = {}) => { if (id) { nativeNavigate({ - search: `?id=${id}`, + search: `?apollosId=${id}`, }); } else { nativeNavigate({ From 7332fadc45feabac731b1eddb74a8b5aa07a4a99 Mon Sep 17 00:00:00 2001 From: Nathan Lewis Date: Wed, 4 Dec 2024 14:02:53 -0600 Subject: [PATCH 2/2] fix: feature flag apollosId search param behind a new data tag --- packages/web-shared/providers/AppProvider.js | 42 ++++--- .../providers/NavigationProvider.js | 10 +- web-embeds/public/index.html | 104 ++++++++++-------- web-embeds/src/App.js | 8 ++ 4 files changed, 98 insertions(+), 66 deletions(-) diff --git a/packages/web-shared/providers/AppProvider.js b/packages/web-shared/providers/AppProvider.js index d348df40..8742ebae 100644 --- a/packages/web-shared/providers/AppProvider.js +++ b/packages/web-shared/providers/AppProvider.js @@ -9,6 +9,10 @@ import AnalyticsProvider from './AnalyticsProvider'; import ModalProvider from './ModalProvider'; import SearchProvider from './SearchProvider'; +const UseApollosIdParamContext = createContext(false); + +export const useApollosIdParam = () => useContext(UseApollosIdParamContext); + const ShouldUsePathRouter = createContext(false); export const useShouldUsePathRouter = () => useContext(ShouldUsePathRouter); @@ -28,24 +32,26 @@ function AppProvider(props = {}) { } return ( - - - - - - - {props.children} - - - - - - + + + + + + + + {props.children} + + + + + + + ); } diff --git a/packages/web-shared/providers/NavigationProvider.js b/packages/web-shared/providers/NavigationProvider.js index 86b01363..d10eec03 100644 --- a/packages/web-shared/providers/NavigationProvider.js +++ b/packages/web-shared/providers/NavigationProvider.js @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; import { useSearchParams, useParams, useNavigate } from 'react-router-dom'; -import { useShouldUsePathRouter } from '../providers/AppProvider'; +import { useApollosIdParam, useShouldUsePathRouter } from '../providers/AppProvider'; const NavigationContext = createContext({ id: null, navigate: () => {} }); @@ -10,7 +10,11 @@ const NavigationProvider = (props = {}) => { const shouldUsePathRouter = useShouldUsePathRouter(); const nativeNavigate = useNavigate(); - const id = contentId || feedId || apollosId || searchParams.get('apollosId'); + const useApollosId = useApollosIdParam(); + + const id = useApollosId + ? apollosId || contentId || feedId || searchParams.get('apollosId') + : contentId || feedId || searchParams.get('id'); let navigate = () => {}; if (shouldUsePathRouter) { @@ -31,7 +35,7 @@ const NavigationProvider = (props = {}) => { navigate = ({ id, type } = {}) => { if (id) { nativeNavigate({ - search: `?apollosId=${id}`, + search: `?${useApollosId ? 'apollosId' : 'id'}=${id}`, }); } else { nativeNavigate({ diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html index 38e4e5e5..26e42025 100644 --- a/web-embeds/public/index.html +++ b/web-embeds/public/index.html @@ -1,18 +1,17 @@ - - - - - - - - - - - - + + - - - - + -
-
+
+
- - - - \ No newline at end of file + + diff --git a/web-embeds/src/App.js b/web-embeds/src/App.js index 1bd03983..ac31a29f 100644 --- a/web-embeds/src/App.js +++ b/web-embeds/src/App.js @@ -20,6 +20,9 @@ function App() { const churchElement = document.querySelector("[data-church]"); const placeholderElement = document.querySelector("[data-placeholder]"); const pathRouter = document.querySelector("[data-use-path-router]"); + const apollosIdParamElement = document.querySelector( + "[data-apollos-id-param]" + ); const searchFeed = searchElement ? searchElement.getAttribute("data-search-feed") @@ -38,6 +41,10 @@ function App() { ? pathRouter.getAttribute("data-use-path-router") === "true" : false; + const useApollosIdParam = apollosIdParamElement + ? apollosIdParamElement.getAttribute("data-apollos-id-param") === "true" + : false; + const router = createBrowserRouter([ { path: "*", @@ -63,6 +70,7 @@ function App() { searchProfileSize={searchProfileSize} customPlaceholder={customPlaceholder} usePathRouter={usePathRouter} + useApollosIdParam={useApollosIdParam} >