elements view & empty check

client/src/collections/strapiPoleElementsLoader.mjs

@@ -19,26 +19,52 @@ const strapiPoleElementsLoader = defineCollection({
       },
     });
 
-    // Fetch articles from Strapi
-    const poleElementsData = await fetch(url.href);
-    const { data }= await poleElementsData.json();
-    
-    // Transform the API response into the desired data structure
-    return data.map((item) => ({
-      id: item.id.toString(),
-      name: item.name,
-      title: item.name,
-      description: item.description,
-      createdAt: item.createdAt,
-      updatedAt: item.updatedAt,
-      publishedAt: item.publishedAt,
-      mainImage: {
-        id: Number(item.mainImage.id),
-        documentId: item.mainImage.documentId,
-        url: item.mainImage.url,
-        alternativeText: item.mainImage.alternativeText,
+    try {
+      // Fetch articles from Strapi
+      const poleElementsData = await fetch(url.href);
+      
+      if (!poleElementsData.ok) {
+        throw new Error(`Failed to fetch data from Strapi: ${poleElementsData.status} ${poleElementsData.statusText}`);
       }
-    }));
+      
+      const response = await poleElementsData.json();
+      const { data } = response;
+      
+      // Check if data is null or undefined
+      if (!data) {
+        throw new Error("No data received from Strapi API - the response was null or undefined");
+      }
+      
+      // Ensure data is an array
+      const dataArray = Array.isArray(data) ? data : [data];
+      
+      // Transform the API response into the desired data structure
+      return dataArray
+        .filter(item => item !== null && item !== undefined) // Filter out null/undefined items
+        .map((item) => ({
+          id: item.id?.toString() || "",
+          name: item.name || "",
+          title: item.name || "",
+          description: item.description || "",
+          createdAt: item.createdAt || "",
+          updatedAt: item.updatedAt || "",
+          publishedAt: item.publishedAt || "",
+          mainImage: item.mainImage ? {
+            id: Number(item.mainImage.id) || 0,
+            documentId: item.mainImage.documentId || "",
+            url: item.mainImage.url || "",
+            alternativeText: item.mainImage.alternativeText || "",
+          } : {
+            id: 0,
+            documentId: "",
+            url: "",
+            alternativeText: "",
+          }
+        }));
+    } catch (error) {
+      console.error("Error loading pole elements from Strapi:", error);
+      return [];
+    }
   },
   // Define the schema for type validation using Zod
   schema: z.object({

client/src/views/ElementView.astro

@@ -0,0 +1,36 @@
+---
+import MardownContent from '../components/MardownContent.astro';
+
+interface Props {
+  entry: {
+    data: {
+      title: string;
+      description: string;
+    };
+  };
+}
+
+const { entry } = Astro.props;
+---
+
+<div class="element-view">
+  <h1>{entry.data.title}</h1>
+  <MardownContent content={entry.data.description} />
+</div>
+
+<style>
+  .element-view {
+    max-width: 56rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .element-view h1 {
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: #111827;
+    margin-bottom: 1.5rem;
+    margin-top: 2rem;
+    line-height: 1.2;
+  }
+</style>