• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88

import React from "react";
import { graphql } from "gatsby";
import styled from "styled-components";
import {
    ContentTemplate,
    FilterBar,
    PageTemplateWrapper,
    RelatedContentStyled
} from "@resourcehub/resourcehub-components";
import configGenerator from "@resourcehub/resourcehub-configuration";

const ContentContainer = styled.main`
    overflow: hidden;
`;
const ResourcePreviewContainer = styled.div`
    background-color: #e5e5e5;
    padding-bottom: 4rem;
`;

const ContentPageTemplate = ({ data, location, pageContext }) => {
    const { item, items, site } = data;
    console.log("----");
    // Filter items with those in the selected stream
    const filteredItems = items.edges.filter((edge) => edge.node.data.streams.includes(pageContext.streamId));
    const config = configGenerator({
        market: site.siteMetadata.market,
        site: site.siteMetadata.site,
        locale: site.siteMetadata.lang,
        page: "dynamic-content"
    });

    config.page.helmet.meta_title = item.data.seo_title || "";
    config.page.helmet.meta_description = item.data.seo_description || "";
    config.page.helmet.canonical_url = item.data.canonical_url || "";

    return (
        <PageTemplateWrapper config={config}>
            <ContentContainer>
                <ResourcePreviewContainer>
                    <FilterBar copyData={config.page.content.copyData} vertical={site.siteMetadata.legacy.vertical} />
                    <ContentTemplate
                        copyData={config.page.content.copyData}
                        domain={site.siteMetadata.legacy.domain}
                        item={item}
                        location={location}
                        vertical={site.siteMetadata.legacy.vertical}
                    />
                    <RelatedContentStyled
                        copyData={config.page.content.copyData}
                        items={filteredItems}
                        siteMetadata={site.siteMetadata}
                        title={config.page.content.copyData.similar_resources}
                    />
                </ResourcePreviewContainer>
            </ContentContainer>
        </PageTemplateWrapper>
    );
};

export default ContentPageTemplate;

export const pageQuery = graphql`
    query contentQuery($rawId: String!, $streamId: String!) {
        item: airtable(id: { eq: $rawId }) {
            ...ItemFragment
        }
        items: allAirtable(
            filter: {
                table: { eq: "Items" }
                id: { ne: $rawId }
                data: { streams: { eq: $streamId }, market: { eq: "US" } }
            }
        ) {
            edges {
                node {
                    ...ItemsFragment
                }
            }
        }
        site {
            ...SiteFragment
        }
        stream: airtable(id: { eq: $streamId }) {
            ...StreamFragment
        }
    }
`;