From 5ce55b5c33e2e4d40a37776db7bf7e73f5c2bf09 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Wed, 24 Sep 2025 14:05:47 -0400
Subject: [PATCH] refactor: sections-map

---
 .../app/components/sections/SectionTextBlock.vue  |  1 -
 .../themes/ccat/app/composables/useSection.ts     | 12 ------------
 wp-content/themes/ccat/includes/vendors/acf.php   |  3 +--
 wp-content/themes/ccat/server/api/preview.post.ts |  9 ++++-----
 .../themes/ccat/shared/utils/sections-map.ts      | 15 +++++++++++++++
 5 files changed, 20 insertions(+), 20 deletions(-)
 delete mode 100644 wp-content/themes/ccat/app/composables/useSection.ts
 create mode 100644 wp-content/themes/ccat/shared/utils/sections-map.ts

diff --git a/wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue b/wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue
index 4f2e34e..f036385 100644
--- a/wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue
+++ b/wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue
@@ -7,6 +7,5 @@ defineProps<SectionTextBlockFragment>();
 <template>
   <section data-section-type="text-block">
     <div :class="layoutSettings?.contentWidth" v-html="content" />
-    <pre>{{ layoutSettings }}</pre>
   </section>
 </template>
diff --git a/wp-content/themes/ccat/app/composables/useSection.ts b/wp-content/themes/ccat/app/composables/useSection.ts
deleted file mode 100644
index b840b52..0000000
--- a/wp-content/themes/ccat/app/composables/useSection.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SectionTextBlockFragment, TheSectionFragment } from "#graphql-operations";
-import { SectionTextBlock } from "#components";
-
-export function useSection(section: TheSectionFragment) {
-  const { fieldGroupName, ...attrs } = section;
-  switch (fieldGroupName) {
-    case "GroupAbstractBuilderSectionsTextBlockLayout":
-      return { component: SectionTextBlock, attrs: attrs as SectionTextBlockFragment };
-    default:
-      throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: `Type de section invalide: ${fieldGroupName}` });
-  }
-}
diff --git a/wp-content/themes/ccat/includes/vendors/acf.php b/wp-content/themes/ccat/includes/vendors/acf.php
index ba23cea..9ca0586 100644
--- a/wp-content/themes/ccat/includes/vendors/acf.php
+++ b/wp-content/themes/ccat/includes/vendors/acf.php
@@ -51,9 +51,8 @@ function ccat_acf_init() {
 
 // Helper: Get GraphQL field group name for flexible content layout
 function ccat_get_graphql_field_group_name( $field_group_key, $layout_name ) {
-	$field_group_name = \WPGraphQL\Utils\Utils::format_type_name( $field_group_key );
 	$layout_type_name = \WPGraphQL\Utils\Utils::format_type_name( $layout_name );
-	return "{$field_group_name}{$layout_type_name}Layout";
+	return "GroupAbstractBuilderSections{$layout_type_name}Layout";
 }
 
 // Helper: Convert field name to GraphQL format
diff --git a/wp-content/themes/ccat/server/api/preview.post.ts b/wp-content/themes/ccat/server/api/preview.post.ts
index 4899ff4..311c01f 100644
--- a/wp-content/themes/ccat/server/api/preview.post.ts
+++ b/wp-content/themes/ccat/server/api/preview.post.ts
@@ -1,14 +1,13 @@
 import { renderToString } from "vue/server-renderer";
 import { createSSRApp, h } from "vue";
+import type { TheSectionFragment } from "#graphql-operations";
 
 export default defineEventHandler(async (event) => {
-  const { fieldGroupName, ...attrs } = await readBody(event);
-  const componentName = fieldGroupName.replace(/^GroupAbstractBuilder(.*)Layout$/, "Section$1");
+  const { fieldGroupName, ...attrs } = await readBody<TheSectionFragment>(event);
   try {
-    const componentModule = await import(`../../app/components/sections/${componentName}.vue`);
     const app = createSSRApp({
       render() {
-        return h(componentModule.default, attrs);
+        return h(sectionsMap[fieldGroupName as FieldGroupName], attrs);
       },
     });
     const html = await renderToString(app);
@@ -16,6 +15,6 @@ export default defineEventHandler(async (event) => {
   }
   catch (error) {
     const message = error instanceof Error ? error.message : "Une erreur est survenue.";
-    throw createError({ statusCode: 500, statusMessage: "Erreur interne", message });
+    return `<div style="color: red">${message}</div>`;
   }
 });
diff --git a/wp-content/themes/ccat/shared/utils/sections-map.ts b/wp-content/themes/ccat/shared/utils/sections-map.ts
new file mode 100644
index 0000000..5529940
--- /dev/null
+++ b/wp-content/themes/ccat/shared/utils/sections-map.ts
@@ -0,0 +1,15 @@
+import SectionTextBlock from "~/components/sections/SectionTextBlock.vue";
+import type { TheSectionFragment } from "#graphql-operations";
+
+export const sectionsMap = {
+  GroupAbstractBuilderSectionsTextBlockLayout: SectionTextBlock,
+} as const;
+
+export type FieldGroupName = keyof typeof sectionsMap;
+
+export function useSection(section: TheSectionFragment) {
+  const { fieldGroupName, ...attrs } = section;
+  const component = sectionsMap[fieldGroupName as FieldGroupName];
+  if (!component) throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Section invalide." });
+  return { component, attrs };
+}