Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example workaround to detect themes in Production+Delivery modes #611

Draft
wants to merge 1 commit into
base: development
Choose a base branch
from
Draft

Example workaround to detect themes in Production+Delivery modes #611

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 65 additions & 3 deletions packages/test-app/src/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,42 @@ import './eb-config';
import { useParams } from 'react-router-dom';
import './styles.css';
import { ExperienceRoot, useFetchBySlug } from '@contentful/experiences-sdk-react';
import { EntityStore } from '@contentful/experiences-core';

import { useContentfulClient } from './hooks/useContentfulClient';
import { useContentfulConfig } from './hooks/useContentfulConfig';

// TODO: This must match your entry
const SITE_CONFIG_CONTENT_TYPE_ID = 'siteConfig';

export default function Page() {
const { slug = 'homePage' } = useParams<{ slug: string }>();
const localeCode = 'en-US';
const { config } = useContentfulConfig();
const { client } = useContentfulClient();

const detectThemeColorFromExperience = (entityStore: EntityStore): string | undefined => {
const siteConfigEntry = entityStore.entities.find((entity) => {
if (entity.sys.type === 'Asset') return false;
if (entity.sys.contentType.sys.id === SITE_CONFIG_CONTENT_TYPE_ID) {
return true;
}
return false;
});

if (!siteConfigEntry) {
return undefined;
}

const siteConfigFields = siteConfigEntry.fields as {
// TODO: this must match the shape of your "site configuratoin" Content Type
themeColor: string;
name: string;
};
const themeColor = siteConfigFields.themeColor;
return themeColor;
};

const { experience, error, isLoading } = useFetchBySlug({
slug,
localeCode,
Expand All @@ -19,9 +46,44 @@ export default function Page() {
hyperlinkPattern: '/{entry.fields.slug}',
});

if (isLoading) return <div>Loading...</div>;
const isInIframe = window.self !== window.top;
const isProbablyInEditorMode = isInIframe;

if (isProbablyInEditorMode) {
if (isLoading) return <div>Loading in editor mode...</div>;

if (error) return <div>{error.message}</div>;
return <ExperienceRoot experience={experience} locale={localeCode} />;
} else {
// In Production+Delivery mode
//
const isStillLoadingEntityStore = isLoading || !experience?.entityStore;
if (isStillLoadingEntityStore) return <div>Loading in production + delivery mode...</div>;

if (error) return <div>{error.message}</div>;

console.log(
`;Experience after isStillLoading(${isStillLoadingEntityStore})==false, has experience.entityStore set `,
experience,
);

if (error) return <div>{error.message}</div>;
const themeColor = detectThemeColorFromExperience(experience.entityStore!);

return <ExperienceRoot experience={experience} locale={localeCode} />;
if ('red' === themeColor) {
return (
<div style={{ backgroundColor: 'red', padding: '16px' }}>
<ExperienceRoot experience={experience} locale={localeCode} />
</div>
);
} else if ('yellow' === themeColor) {
return (
<div style={{ backgroundColor: 'yellow', padding: '16px' }}>
<ExperienceRoot experience={experience} locale={localeCode} />
</div>
);
} else {
// no theme
return <ExperienceRoot experience={experience} locale={localeCode} />;
}
}
}
Loading