crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 07:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Test to remove suspense from dynamic content manager

Browse Source
This commit is contained in:
Henrik Larsson 2023-08-28 14:53:03 +02:00
parent 74d368531f
commit 0e4cc37ece
1 changed files with 75 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
components/layout/dynamic-content-manager/dynamic-content-manager.tsx
View File

@ -7,7 +7,80 @@ import ReusableSection from '@/components/modules/reusable-section/reusable-sect
import Slider from '@/components/modules/slider/slider';
import USPSection from '@/components/modules/usp-section/usp-section';
import { InformationCircleIcon } from '@heroicons/react/24/outline';
import { Suspense } from 'react';
interface getContentComponentProps {
_type: string;
_key: number;
disabled: boolean;
}
const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
let Component: any;
switch (_type) {
case 'hero':
if (disabled !== true) {
Component = Hero;
} else {
return;
}
break;
case 'slider':
if (disabled !== true) {
Component = Slider;
} else {
return;
}
break;
case 'filteredProductList':
if (disabled !== true) {
Component = FilteredProductList;
} else {
return;
}
break;
case 'blurbSection':
if (disabled !== true) {
Component = BlurbSection;
} else {
return;
}
break;
case 'uspSection':
if (disabled !== true) {
Component = USPSection;
} else {
return;
}
break;
case 'reusableSection':
if (disabled !== true) {
Component = ReusableSection;
} else {
return;
}
break;
default:
return (
<div
className={`px-4 lg:px-8 2xl:px-16 ${
process.env.NODE_ENV === 'production' ? 'hidden' : ''
}`}
key={`index-${_key}`}
>
<span className="inline-flex items-center bg-red p-2 text-sm font-bold">
<InformationCircleIcon className="mr-1" />
{`No matching component (Type: ${_type})`}
</span>
</div>
);
}
return Component ? (
<Component key={`${_key}`} {...rest} />
) : (
<div key={`${_key}`}>Something else</div>
);
};
interface dynamicContentManagerProps {
content: [] | any;
@ -15,89 +88,7 @@ interface dynamicContentManagerProps {
const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
return (
<div className="dynamic-content overflow-x-hidden">
{content?.map(
(
component: { _type: string; _key: number; disabled: boolean; rest: any } | any,
index: number
) => {
const { _type, _key, disabled, ...rest } = component;
let Component: any;
switch (_type) {
case 'hero':
if (disabled !== true) {
Component = Hero;
} else {
return;
}
break;
case 'slider':
if (disabled !== true) {
Component = Slider;
} else {
return;
}
break;
case 'filteredProductList':
if (disabled !== true) {
Component = FilteredProductList;
} else {
return;
}
break;
case 'blurbSection':
if (disabled !== true) {
Component = BlurbSection;
} else {
return;
}
break;
case 'uspSection':
if (disabled !== true) {
Component = USPSection;
} else {
return;
}
break;
case 'reusableSection':
if (disabled !== true) {
Component = ReusableSection;
} else {
return;
}
break;
default:
return (
<div
className={`px-4 lg:px-8 2xl:px-16 ${
process.env.NODE_ENV === 'production' ? 'hidden' : ''
}`}
key={`index-${_key}`}
>
<span className="inline-flex items-center bg-red p-2 text-sm font-bold">
<InformationCircleIcon className="mr-1" />
{`No matching component (Type: ${_type})`}
</span>
</div>
);
}
if (Component && index === 0) {
return <Component key={`${_key}`} {...rest} />;
} else if (Component) {
return (
<Suspense key={`${_key}`}>
<Component {...rest} />
</Suspense>
);
} else {
<div key={`${_key}`}>Something else</div>;
}
}
)}
</div>
<div className="dynamic-content overflow-x-hidden">{content?.map(getContentComponent)}</div>
);
};