fix: feature flag apollosId search param behind a new data tag (#245)

* fix: use apollosId in the search params instead of generic id * fix: feature flag apollosId search param behind a new data tag
ApollosProject · Dec 4, 2024 · a1a38c3 · a1a38c3
1 parent faf3603
commit a1a38c3
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 72 deletions.
diff --git 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/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 (
-    <ShouldUsePathRouter.Provider value={props.usePathRouter}>
-      <ApolloProvider client={client} {...props}>
-        <AuthProvider>
-          <AnalyticsProvider church={props.church}>
-            <SearchProvider
-              church={props.church}
-              searchFeed={props.searchFeed}
-              searchProfileSize={props.searchProfileSize}
-              customPlaceholder={props.customPlaceholder}
-            >
-              <ModalProvider>
-                <ThemeProvider>{props.children}</ThemeProvider>
-              </ModalProvider>
-            </SearchProvider>
-          </AnalyticsProvider>
-        </AuthProvider>
-      </ApolloProvider>
-    </ShouldUsePathRouter.Provider>
+    <UseApollosIdParamContext.Provider value={props.useApollosIdParam}>
+      <ShouldUsePathRouter.Provider value={props.usePathRouter}>
+        <ApolloProvider client={client} {...props}>
+          <AuthProvider>
+            <AnalyticsProvider church={props.church}>
+              <SearchProvider
+                church={props.church}
+                searchFeed={props.searchFeed}
+                searchProfileSize={props.searchProfileSize}
+                customPlaceholder={props.customPlaceholder}
+              >
+                <ModalProvider>
+                  <ThemeProvider>{props.children}</ThemeProvider>
+                </ModalProvider>
+              </SearchProvider>
+            </AnalyticsProvider>
+          </AuthProvider>
+        </ApolloProvider>
+      </ShouldUsePathRouter.Provider>
+    </UseApollosIdParamContext.Provider>
   );
 }
 

diff --git a/packages/web-shared/providers/NavigationProvider.js b/packages/web-shared/providers/NavigationProvider.js
@@ -1,16 +1,20 @@
 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: () => {} });
 
 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 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: `?id=${id}`,
+          search: `?${useApollosId ? 'apollosId' : 'id'}=${id}`,
         });
       } else {
         nativeNavigate({

diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
@@ -1,18 +1,17 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -21,29 +20,29 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <style>
-    * {
-      font-family:
-        "Inter",
-        -apple-system,
-        BlinkMacSystemFont,
-        Segoe UI,
-        Roboto,
-        Oxygen,
-        Ubuntu,
-        Cantarell,
-        Fira Sans,
-        Droid Sans,
-        Helvetica Neue,
-        sans-serif;
-    }
-  </style>
-</head>
+    <style>
+      * {
+        font-family:
+          "Inter",
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          Fira Sans,
+          Droid Sans,
+          Helvetica Neue,
+          sans-serif;
+      }
+    </style>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <!-- This is an example of how to use the apollos widgets -->
-  <!-- <div
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- This is an example of how to use the apollos widgets -->
+    <!-- <div
       data-church="cedar_creek"
       data-type="FeatureFeed"
       data-feature-feed="FeatureFeed:5aae43e6-3526-4cd2-8dfe-771d2ce8a333"
@@ -58,13 +57,19 @@
       data-church="apollos_demo"
       data-feature-feed="FeatureFeed:caf294f0-cd0e-4486-95e7-fa11bd5fb1c5"
       data-modal="true"
+      data-apollos-id-param="true"
       class="apollos-widget"
     ></div>
 
-  <div data-type="FeatureFeed" data-church="liquid_church"
-    data-feature-feed="FeatureFeed:7ff30e63-caa8-4015-bc00-73633e857b2f" data-modal="true" class="apollos-widget"
-    data-empty-placeholder-text="No jobs today!"></div>
-  <!-- 
+    <div
+      data-type="FeatureFeed"
+      data-church="liquid_church"
+      data-feature-feed="FeatureFeed:7ff30e63-caa8-4015-bc00-73633e857b2f"
+      data-modal="true"
+      class="apollos-widget"
+      data-empty-placeholder-text="No jobs today!"
+    ></div>
+    <!-- 
     <div
       data-church="cedar_creek"
       data-type="Search"
@@ -73,13 +78,23 @@
       class="apollos-widget"
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
-  <div data-church="liquid_church" data-type="Auth" data-modal="true" class="apollos-widget"
-    style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
-    data-search-feed="FeatureFeed:07e1050d-a6c4-4b46-a2a0-12d8fbf1df3c"></div>
-  <div data-type="FeatureFeed" data-church="liquid_church"
-    data-feature-feed="FeatureFeed:d3912726-487b-4635-9cec-99ed84a21209" data-modal="true" class="apollos-widget"></div>
+    <div
+      data-church="liquid_church"
+      data-type="Auth"
+      data-modal="true"
+      class="apollos-widget"
+      style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
+      data-search-feed="FeatureFeed:07e1050d-a6c4-4b46-a2a0-12d8fbf1df3c"
+    ></div>
+    <div
+      data-type="FeatureFeed"
+      data-church="liquid_church"
+      data-feature-feed="FeatureFeed:d3912726-487b-4635-9cec-99ed84a21209"
+      data-modal="true"
+      class="apollos-widget"
+    ></div>
 
-  <!--
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -89,6 +104,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git 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}
     >
       <RouterProvider router={router} />
     </AppProvider>