Preview: componentMapper.ts
Size: 4.37 KB
/var/www/uibuilder.cmshelp.dk/httpdocs/src/app/_components/mappers/componentMapper.ts
import { bannerConfig } from '../config/bannerConfig';
import { marqueeConfig } from '../config/marqueeConfig';
import MediaService from '../services/mediaService';
import { defaultProperties as textDefaultProperties, htmlTemplate as textHtmlTemplate } from '../packages/TextComponent/TextComponent';
import { v4 as uuidv4 } from 'uuid';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const mapBlockToComponent = (block: any) => {
const contentTypeKey = block.contentTypeKey;
const values = block.values;
switch (contentTypeKey) {
case "b5386d3b-78d6-425f-a78b-4efbb9c8d4d6":
return mapBannerComponent(values);
case "d9169e50-d0e2-4dce-be6b-4882be6dc8ed":
return mapMarqueeComponent(values);
case "22fc06c9-e3d0-4e31-85f4-3c8b80d3a846":
return mapTextComponent(values);
default:
return null;
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const fetchMediaUrl = async (imageItem: any) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mediaKey: string[] = imageItem?.value?.map((item: any) => item.mediaKey) || [];
const imageUrl = mediaKey.length ? await MediaService.fetchImageUrls(mediaKey) : [];
return imageUrl.length ? { url: imageUrl[0]?.urlInfos[0]?.url || "", id: imageUrl[0]?.id || "" } : { url: "", id: "" };
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mapBannerComponent = (values: any) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ctaItem = values.find((v: any) => v.alias === "bannerCta");
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const bannerCta = ctaItem?.value?.map((link: any) => ({
text: link.name,
href: link.url
})) || [{ text: null, href: null }];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const imageItem = values.find((v: any) => v.alias === "image");
const imageUrlPromise = fetchMediaUrl(imageItem);
const bannerComponent = {
id: "banner",
uniqueId: `banner-${uuidv4()}`, // Use UUID instead of Date.now()
properties: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
bannerTitle: values.find((v: any) => v.alias === "bannerTitle")?.value || "",
// eslint-disable-next-line @typescript-eslint/no-explicit-any
bannerDescription: values.find((v: any) => v.alias === "bannerDescription")?.value || "",
bannerCta,
image: { url: "", id: "" }
},
html: bannerConfig.htmlTemplate({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
title: values.find((v: any) => v.alias === "bannerTitle")?.value || "",
// eslint-disable-next-line @typescript-eslint/no-explicit-any
bannerDescription: values.find((v: any) => v.alias === "bannerDescription")?.value || "",
image: { url: "", id: "" },
bannerCta
})
};
imageUrlPromise?.then((image) => {
debugger
bannerComponent.properties.image = image;
bannerComponent.html = bannerConfig.htmlTemplate({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
bannerTitle: values.find((v: any) => v.alias === "bannerTitle")?.value || "",
// eslint-disable-next-line @typescript-eslint/no-explicit-any
bannerDescription: values.find((v: any) => v.alias === "bannerDescription")?.value || "",
image: image,
bannerCta
});
});
return bannerComponent;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mapMarqueeComponent = (values: any) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const marqueeText = values.find((v: any) => v.alias === "marqueeText")?.value || "";
return {
id: "marquee",
uniqueId: `marquee-${uuidv4()}`, // Use UUID instead of Date.now()
properties: {
marqueeText: marqueeText,
marqueeSpeed: 20
},
html: marqueeConfig.htmlTemplate({
marqueeText: marqueeText,
marqueeSpeed: 20
})
};
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mapTextComponent = (values: any) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const text = values.find((v: any) => v.alias === "text")?.value || textDefaultProperties.text;
return {
id: "text",
uniqueId: `text-${uuidv4()}`, // Use UUID instead of Date.now()
properties: {
text: text
},
html: textHtmlTemplate({
text: text
})
};
};
Directory Contents
Dirs: 0 × Files: 5