@jetshop/core/components/Head.js

import { useTracker } from '@jetshop/core/analytics/Analytics';
import { trackPageEvent } from '@jetshop/core/analytics/tracking';
import React, { useContext, useEffect } from 'react';
import Helmet from 'react-helmet-async';
import useWarningInDev from '../hooks/useWarningInDev';
import ChannelContext from './ChannelContext';
import { useLocation } from 'react-router';
import qs from 'qs';
function renderAlternateRoutes(alternateRoute, channelsById) {
    const channel = channelsById[alternateRoute.channelId];
    const url = channel.url;
    const route = alternateRoute.route;
    const query = channel.defaultLanguage.culture !== alternateRoute.culture
        ? `?culture=${alternateRoute.culture}`
        : '';
    const href = `${url}${route}${query}`;
    return (React.createElement("link", { key: href + alternateRoute.culture, rel: "alternate", href: href, hrefLang: alternateRoute.alias || alternateRoute.culture }));
}
const queryParamsWhitelist = ['page'];
const Head = ({ data, route }) => {
    const { search } = useLocation();
    const queryStringObject = qs.parse(search, { ignoreQueryPrefix: true });
    Object.keys(queryStringObject).forEach(key => {
        !queryParamsWhitelist.includes(key) && delete queryStringObject[key];
    });
    const whiteListedSearch = qs.stringify(queryStringObject, {
        addQueryPrefix: true
    });
    const { selectedChannel, channelsById } = useContext(ChannelContext);
    const lang = selectedChannel.language.culture.split('-')[0];
    const metaTags = (data && data.metaTags) || [];
    const href = (route === null || route === void 0 ? void 0 : route.canonicalPath) &&
        `${selectedChannel.url}${route.canonicalPath}${whiteListedSearch}`;
    useWarningInDev(route && !route.alternateRoutes, `You must include the RouteCrumbFragment in your RouteQuery.gql
    Please see https://gitlab.jetshop.se/jetshop/flight/blob/master/packages/template-trend/src/components/RouteQuery.gql for an example
    `);
    const track = useTracker();
    useEffect(() => {
        track(trackPageEvent({
            pathname: window.location.pathname,
            title: data.title
        }));
    }, [data.title, track]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Helmet, null,
            React.createElement("html", { lang: lang }),
            data && React.createElement("title", null, data.title),
            metaTags.map(tag => (React.createElement("meta", { name: tag.name, content: tag.content, key: tag.name }))),
            route &&
                route.alternateRoutes &&
                route.alternateRoutes.map(alternateRoute => renderAlternateRoutes(alternateRoute, channelsById)),
            href && React.createElement("link", { rel: "canonical", href: href }))));
};
export default Head;
//# sourceMappingURL=Head.js.map