Merge branch 'main' into main-fix-search-bar

ApollosProject · Feb 19, 2024 · 49fab4e · 49fab4e
2 parents 125c892 + 0b98d9b
commit 49fab4e
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 135 deletions.
diff --git a/micro-service/README.md b/micro-service/README.md
@@ -15,16 +15,17 @@ The JS file used to embed these widgets is hosted on GitHub and picked up by [js
 
 That's it! Your updated version of the apollos-embeds will be available for use.
 
-_⚠️  React needs to be imported in every file it is used, otherwise the js build file will error when you embed it in your website._
+_⚠️ React needs to be imported in every file it is used, otherwise the js build file will error when you embed it in your website._
 
-***
+---
 
 # Using Embeds in Webflow
 
 ## 1. Adding the Script Tags:
 
 Copy the following script tags into your Webflow website. In your Dashboard, you should see the tab 'Custom Code'. Scroll to the bottom and paste the following script tags in the Footer Code block:
 html
+
 ```
 <link href="https://cdn.jsdelivr.net/npm/@apollosproject/[email protected]/widget/index.css" rel="stylesheet"/>
 <script src="https://cdn.jsdelivr.net/npm/@apollosproject/[email protected]/widget/index.js"></script>
@@ -45,6 +46,7 @@ Add the class `apollos-widget` to both of those divs. This is necessary for the
 <img width="935" alt="image" src="https://user-images.githubusercontent.com/2528817/231847323-53430bca-f2fd-4d2c-b7ee-90948fb694b5.png">
 
 ## 4. Adding Custom Attributes:
+
 To control which embed shows up in which div and what church content is displayed, we use 'data-attributes' or 'Custom attributes' in Webflow.
 
 For the 'Auth' embed, add `data-type="Auth"` and `data-church=[INSERT_CHURCH_SLUG_HERE]` as custom attributes. Here's an example for Bayside:
@@ -63,51 +65,59 @@ For the 'FeatureFeed' embed, which displays the church's content, add `data-type
 
 <img width="928" alt="image" src="https://user-images.githubusercontent.com/2528817/231847773-9698dc62-3ca8-4814-ad33-63204fb5f625.png">
 
-
 _⚠️ Make sure to replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier, or 'slug'._
 
-### Options
+### Enabling Caching for Local Frustration
+
+For local development and testing purposes, you might want to enable caching to ensure you're not receiving the latest responses directly from the API. To do this, please refer to the Apollo client configuration file:
 
-| data-type      |
-|----------------|
-| Auth           |
-| FeatureFeed    |
-
-| data-church               |
-|---------------------------|
-| apollos_demo              | 
-| bayside                   | 
-| cedar_creek               |
-| celebration               |
-| chase_oaks                |
-| christ_fellowship         |
-| city_first                |
-| community_christian       |
-| crossings_community_church|
-| crossroads_kids_club      |
-| crossroads_tv             |
-| default                   |
-| eastview                  |
-| eleven22                  |
-| fairhaven                 |
-| fake                      |
-| fake_dag_church           |
-| fellowship_greenville     |
-| fellowship_nwa            |
-| hope_in_real_life         |
-| king_of_kings             |
-| lcbc                      |
-| liquid_church             |
-| newspring                 |
-| oakcliff                  |
-| real_life                 |
-| river_valley              |
-| try_grace                 |
-| willow_creek              |
-| woodmen                   |
-| ymca_gc                   |
-
-
-***
+[../packages/web-shared/client/apollosApiLink.js](../packages/web-shared/client/apollosApiLink.js)
 
+In this file, locate the header configuration within the `apollosApiLink` function and comment the following line:
+
+```javascript
+'x-cache-me-not': 1,
+```
+
+### Options
 
+| data-type   |
+| ----------- |
+| Auth        |
+| FeatureFeed |
+
+| data-church                |
+| -------------------------- |
+| apollos_demo               |
+| bayside                    |
+| cedar_creek                |
+| celebration                |
+| chase_oaks                 |
+| christ_fellowship          |
+| city_first                 |
+| community_christian        |
+| crossings_community_church |
+| crossroads_kids_club       |
+| crossroads_tv              |
+| default                    |
+| eastview                   |
+| eleven22                   |
+| fairhaven                  |
+| fake                       |
+| fake_dag_church            |
+| fellowship_greenville      |
+| fellowship_nwa             |
+| hope_in_real_life          |
+| king_of_kings              |
+| lcbc                       |
+| liquid_church              |
+| newspring                  |
+| oakcliff                   |
+| real_life                  |
+| river_valley               |
+| try_grace                  |
+| willow_creek               |
+| woodmen                    |
+| ymca_gc                    |
+
+---
diff --git a/packages/web-shared/client/apollosApiLink.js b/packages/web-shared/client/apollosApiLink.js
@@ -8,6 +8,7 @@ const apollosApiLink = (church_slug) =>
       headers: {
         ...headers,
         'x-church': church_slug,
+        'x-cache-me-not': 1,
       },
     }));
 

diff --git a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js
@@ -21,44 +21,48 @@ function ScriptureFeature(props = {}) {
   };
 
   function parseBibleReference(reference) {
-    // This regex handles cases like 'Genesis 1-3' and 'Genesis 1:1-3:24'
-    const regex = /^([\w\s]+)\s(\d+)(?::(\d+))?(?:-(\d+)(?::(\d+))?)?$/;
+    const regex = /^([\w\s]+)\s(\d+)(?::(\d+))?(?:-(\d+)?(?::(\d+))?)?$/;
     const match = reference.match(regex);
 
     if (!match) {
       return null; // Invalid format
     }
 
-    const [_, book, startChapter, startVerse, endChapter, endVerse] = match;
+    const [_, book, startChapter, startVerse = '', endChapterOrVerse, endVerse = ''] = match;
+
     let title, verses;
+    let isRangeWithinSingleChapter = false;
+    let actualEndVerse = endVerse;
+
+    // Determine if it's a range within the same chapter
+    if (startChapter === endChapterOrVerse || (startVerse && endChapterOrVerse && !endVerse)) {
+      isRangeWithinSingleChapter = true;
+      // If endChapterOrVerse is not empty and endVerse is empty, it means endChapterOrVerse is actually the endVerse
+      actualEndVerse = endChapterOrVerse && !endVerse ? endChapterOrVerse : endVerse;
+    }
 
-    if (endChapter || endVerse) {
-      // Case for a range
-      if (endChapter && !endVerse) {
-        // Range of chapters, e.g., 'Genesis 1-3'
-        title = `${book} ${startChapter}-${endChapter}`;
-        verses = `Chapters ${startChapter}-${endChapter}`;
-      } else if (startChapter !== endChapter) {
-        // Range of chapters and verses, e.g., 'Genesis 1:1-3:24'
-        title = `${book} ${startChapter}:${startVerse}-${endChapter}:${endVerse}`;
-        verses = `Verses ${startChapter}:${startVerse}-${endChapter}:${endVerse}`;
-      } else {
-        // Range within a single chapter, e.g., 'Genesis 1:1-24'
-        title = `${book} ${startChapter}:${startVerse}-${endVerse}`;
-        verses = `Verses ${startChapter}:${startVerse}-${endVerse}`;
-      }
+    if (isRangeWithinSingleChapter) {
+      // Range within the same chapter
+      title = `${book} ${startChapter}:${startVerse}-${actualEndVerse}`;
+      verses = `Verses ${startChapter}:${startVerse}-${actualEndVerse}`;
+    } else if (startVerse && endVerse) {
+      // Range spans chapters and verses
+      title = `${book} ${startChapter}:${startVerse}-${endChapterOrVerse}:${endVerse}`;
+      verses = `Verses ${startChapter}:${startVerse}-${endChapterOrVerse}:${endVerse}`;
+    } else if (!startVerse && endChapterOrVerse) {
+      // Range spans entire chapters
+      title = `${book} ${startChapter}-${endChapterOrVerse}`;
+      verses = `Chapters ${startChapter}-${endChapterOrVerse}`;
     } else {
-      // Single chapter and verse, e.g., 'Genesis 1:1'
-      title = `${book} ${startChapter}${startVerse ? `:${startVerse}` : ''}`;
+      // Single chapter or verse
+      title = `${book} ${startChapter}${startVerse ? ':' + startVerse : ''}`;
       verses = startVerse ? `Verse ${startChapter}:${startVerse}` : `Chapter ${startChapter}`;
     }
 
-    const result = {
+    return {
       title,
       verses,
     };
-
-    return result;
   }
 
   const ScriptureItem = ({ scripture }) => {

diff --git a/packages/web-shared/embeds/FeatureFeed.js b/packages/web-shared/embeds/FeatureFeed.js
@@ -14,68 +14,32 @@ import { Box } from '../ui-kit';
 import { useSearchParams } from 'react-router-dom';
 import { parseSlugToIdAndType } from '../utils';
 import { useAnalytics } from '../providers/AnalyticsProvider';
+import { getComponentFromType } from '../utils/getContentFromURL';
 
 function RenderFeatures(props) {
   const [searchParams] = useSearchParams();
   const _id = searchParams.get('id');
   const { type, randomId } = parseSlugToIdAndType(_id) ?? {};
 
-  switch (type) {
-    case 'MediaContentItem':
-    case 'WeekendContentItem':
-    case 'Event':
-    case 'UniversalContentItem': {
-      const options = {
-        variables: { id: `${type}:${randomId}` },
-      };
+  const Component = getComponentFromType({ type, id: randomId });
 
-      return <ContentItemProvider Component={ContentSingle} options={options} />;
-    }
-    case 'ContentSeriesContentItem': {
-      const options = {
-        variables: { id: `${type}:${randomId}` },
-      };
-
-      return <ContentItemProvider Component={ContentSeriesSingle} options={options} />;
-    }
-    case 'Livestream': {
-      const options = {
-        variables: { id: `${type}:${randomId}` },
-      };
-
-      return <ContentItemProvider Component={LivestreamSingle} options={options} />;
-    }
-    case 'ContentChannel': {
-      const options = {
-        variables: { id: `${type}:${randomId}` },
-      };
-      return <ContentFeedProvider Component={ContentChannel} options={options} />;
-    }
-    case 'Url': {
-      return <h1>External Url</h1>;
-    }
-    case 'FeatureFeed': {
-      const options = {
-        variables: { itemId: `${type}:${randomId}` },
-      };
-      return <FeatureFeedProvider Component={FeatureFeedList} options={options} />;
-    }
-    default: {
-      return (
-        <Box>
-          <FeatureFeedProvider
-            Component={FeatureFeedList}
-            options={{
-              variables: {
-                itemId: props.featureFeed,
-              },
-            }}
-            {...props}
-          />
-        </Box>
-      );
-    }
+  if (Component) {
+    return Component;
   }
+  // If not component is found, fallback to a FeatureFeed
+  return (
+    <Box>
+      <FeatureFeedProvider
+        Component={FeatureFeedList}
+        options={{
+          variables: {
+            itemId: props.featureFeed,
+          },
+        }}
+        {...props}
+      />
+    </Box>
+  );
 }
 
 const FeatureFeed = (props) => {
@@ -84,10 +48,10 @@ const FeatureFeed = (props) => {
   const analytics = useAnalytics();
 
   useEffect(() => {
-    console.log(props)
+    console.log(props);
     analytics.track('ViewFeatureFeed', {
       featureFeedId: props.featureFeed,
-    })
+    });
   }, []);
 
   return (

diff --git a/packages/web-shared/utils/getContentFromURL.js b/packages/web-shared/utils/getContentFromURL.js
@@ -11,36 +11,35 @@ import {
 import parseSlugToIdAndType from './parseSlugToIdAndType';
 import { Box } from '../ui-kit';
 
-function getContentFromURL(url) {
-  const { type, randomId } = parseSlugToIdAndType(url);
-
+export function getComponentFromType({ type, id }) {
   switch (type) {
     case 'MediaContentItem':
     case 'WeekendContentItem':
+    case 'Event':
     case 'UniversalContentItem': {
       const options = {
-        variables: { id: `${type}:${randomId}` },
+        variables: { id: `${type}:${id}` },
       };
 
       return <ContentItemProvider Component={ContentSingle} options={options} />;
     }
     case 'ContentSeriesContentItem': {
       const options = {
-        variables: { id: `${type}:${randomId}` },
+        variables: { id: `${type}:${id}` },
       };
 
       return <ContentItemProvider Component={ContentSeriesSingle} options={options} />;
     }
     case 'Livestream': {
       const options = {
-        variables: { id: `${type}:${randomId}` },
+        variables: { id: `${type}:${id}` },
       };
 
       return <ContentItemProvider Component={LivestreamSingle} options={options} />;
     }
     case 'ContentChannel': {
       const options = {
-        variables: { id: `${type}:${randomId}` },
+        variables: { id: `${type}:${id}` },
       };
       return <ContentFeedProvider Component={ContentChannel} options={options} />;
     }
@@ -49,14 +48,20 @@ function getContentFromURL(url) {
     }
     case 'FeatureFeed': {
       const options = {
-        variables: { itemId: `${type}:${randomId}` },
+        variables: { itemId: `${type}:${id}` },
       };
       return <FeatureFeedProvider Component={FeatureFeedList} options={options} />;
     }
     default: {
-      return <Box>No Content</Box>;
+      return null;
     }
   }
 }
 
+function getContentFromURL(url) {
+  const { type, randomId } = parseSlugToIdAndType(url) ?? {};
+
+  return getComponentFromType({ type, id: randomId });
+}
+
 export default getContentFromURL;
diff --git a/web-embeds/README.md b/web-embeds/README.md
@@ -76,6 +76,18 @@ For the 'FeatureFeed' embed, which displays the church's content, add `data-type
 
 _⚠️ Make sure to replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier, or 'slug'._
 
+### Enabling Caching for Local Frustration
+
+For local development and testing purposes, you might want to enable caching to ensure you're not receiving the latest responses directly from the API. To do this, please refer to the Apollo client configuration file:
+
+[../packages/web-shared/client/apollosApiLink.js](../packages/web-shared/client/apollosApiLink.js)
+
+In this file, locate the header configuration within the `apollosApiLink` function and comment the following line:
+
+```javascript
+'x-cache-me-not': 1,
+```
+
 ### Options
 
 | data-type   |