Fix events via url (#170)

ApollosProject · Feb 16, 2024 · d23bf51 · d23bf51
1 parent a104f6e
commit d23bf51
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 65 deletions.
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;