diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js index c9fe05b6..280025db 100644 --- a/packages/web-shared/components/ContentSingle.js +++ b/packages/web-shared/components/ContentSingle.js @@ -12,7 +12,7 @@ import { add as addBreadcrumb, useBreadcrumbDispatch } from '../providers/Breadc import { set as setModal, useModal } from '../providers/ModalProvider'; import { Box, Loader, Longform, H3, ContentCard, BodyText, ShareButton } from '../ui-kit'; -import { useHTMLContent, useVideoMediaProgress } from '../hooks'; +import { useFeatureFeed, useHTMLContent, useVideoMediaProgress } from '../hooks'; import { Title, ParentTitle, ParentSummary } from './ContentSingle.styles'; import VideoPlayer from './VideoPlayer'; @@ -27,6 +27,17 @@ function ContentSingle(props = {}) { const [state, dispatch] = useModal(); const parseHTMLContent = useHTMLContent(); + const feedId = props?.data?.featureFeed?.id; + const { + feedLoading, + feedError, + data: feedData, + } = useFeatureFeed({ + variables: { + itemId: feedId, + }, + }); + const invalidPage = !props.loading && !props.data; // Video details @@ -70,7 +81,6 @@ function ContentSingle(props = {}) { parentChannel, childContentItemsConnection, siblingContentItemsConnection, - featureFeed, parentItem, } = props?.data; @@ -79,7 +89,9 @@ function ContentSingle(props = {}) { const hasChildContent = childContentItems?.length > 0; const hasSiblingContent = siblingContentItems?.length > 0; const hasParent = !!parentItem; - const validFeatures = featureFeed?.features?.filter( + + const feed = feedData?.node; + const validFeatures = feed?.features?.filter( (feature) => !!FeatureFeedComponentMap[feature?.__typename] ); const hasFeatures = validFeatures?.length; @@ -342,7 +354,7 @@ function ContentSingle(props = {}) { {/* Sub-Feature Feed */} {hasFeatures ? ( - + ) : null} diff --git a/packages/web-shared/hooks/useContentItem.js b/packages/web-shared/hooks/useContentItem.js index 86713d01..26916b6d 100644 --- a/packages/web-shared/hooks/useContentItem.js +++ b/packages/web-shared/hooks/useContentItem.js @@ -88,62 +88,6 @@ export const GET_CONTENT_ITEM = gql` ... on FeaturesNode { featureFeed { id - features { - id - ... on HorizontalCardListFeature { - title - cards { - id - title - summary - coverImage { - name - sources { - uri - } - } - hasAction - action - actionIcon - relatedNode { - id - __typename - ... on ContentItem { - title - } - ... on Url { - url - } - } - } - } - ... on ButtonFeature { - action { - title - action - relatedNode { - id - __typename - ... on Url { - url - } - } - } - } - ... on HtmlFeature { - content - } - ... on ScriptureFeature { - scriptures { - id - html - reference - copyright - version - text - } - } - } } } } diff --git a/packages/web-shared/hooks/useFeatureFeed.js b/packages/web-shared/hooks/useFeatureFeed.js index 5055b2b9..549bf5e7 100644 --- a/packages/web-shared/hooks/useFeatureFeed.js +++ b/packages/web-shared/hooks/useFeatureFeed.js @@ -268,6 +268,32 @@ export const FEED_FEATURES = gql` } } } + ... on ButtonFeature { + action { + title + action + relatedNode { + id + __typename + ... on Url { + url + } + } + } + } + ... on HtmlFeature { + content + } + ... on ScriptureFeature { + scriptures { + id + html + reference + copyright + version + text + } + } } } } diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html index ed60320e..976916de 100644 --- a/web-embeds/public/index.html +++ b/web-embeds/public/index.html @@ -72,12 +72,11 @@ class="apollos-widget" style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px" > --> +
-
-
-
+ data-feature-feed="FeatureFeed:d3912726-487b-4635-9cec-99ed84a21209" data-modal="true" class="apollos-widget"> + +