From 0daf478d9ad8b14d2844ff6ae2db9bd72970d680 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 6 Jun 2024 12:14:35 +0100
Subject: [PATCH] fix: fix crash if component in data is missing from config

---
 packages/core/components/DropZone/index.tsx  | 13 ++++++++-----
 packages/core/components/LayerTree/index.tsx | 10 ++++++----
 packages/core/components/Puck/index.tsx      | 13 +++++++------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 5a9327fe2..9bbaeefdb 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -10,7 +10,7 @@ import { DropZoneProvider, dropZoneContext } from "./context";
 import { getZoneId } from "../../lib/get-zone-id";
 import { useAppContext } from "../Puck/context";
 import { DropZoneProps } from "./types";
-import { PuckContext } from "../../types/Config";
+import { ComponentConfig, PuckContext } from "../../types/Config";
 
 const getClassName = getClassNameFactory("DropZone", styles);
 
@@ -231,6 +231,12 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                       </div>
                     );
 
+                const componentConfig: ComponentConfig | undefined =
+                  config.components[item.type];
+
+                const label =
+                  componentConfig?.["label"] ?? item.type.toString();
+
                 return (
                   <div
                     key={item.props.id}
@@ -244,10 +250,7 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                       }}
                     >
                       <DraggableComponent
-                        label={
-                          config.components[item.type]["label"] ??
-                          item.type.toString()
-                        }
+                        label={label}
                         id={`draggable-${componentId}`}
                         index={i}
                         isSelected={isSelected}
diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
index 66cd2f0f9..113e0a27c 100644
--- a/packages/core/components/LayerTree/index.tsx
+++ b/packages/core/components/LayerTree/index.tsx
@@ -1,6 +1,6 @@
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { Config, Data } from "../../types/Config";
+import { ComponentConfig, Config, Data } from "../../types/Config";
 import { ItemSelector, getItem } from "../../lib/get-item";
 import { scrollIntoView } from "../../lib/scroll-into-view";
 import { ChevronDown, LayoutGrid, Layers, Type } from "lucide-react";
@@ -71,6 +71,10 @@ export const LayerTree = ({
 
           const childIsSelected = isChildOfZone(item, selectedItem, ctx);
 
+          const componentConfig: ComponentConfig | undefined =
+            config.components[item.type];
+          const label = componentConfig?.["label"] ?? item.type.toString();
+
           return (
             <li
               className={getClassNameLayer({
@@ -132,9 +136,7 @@ export const LayerTree = ({
                         <LayoutGrid size="16" />
                       )}
                     </div>
-                    <div className={getClassNameLayer("name")}>
-                      {config.components[item.type]["label"] ?? item.type}
-                    </div>
+                    <div className={getClassNameLayer("name")}>{label}</div>
                   </div>
                 </button>
               </div>
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 0bfe357c9..04dddf6c7 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -369,6 +369,12 @@ export function Puck<UserConfig extends Config = Config>({
     setMounted(true);
   }, []);
 
+  const selectedComponentConfig =
+    selectedItem && config.components[selectedItem.type];
+  const selectedComponentLabel = selectedItem
+    ? selectedComponentConfig?.["label"] ?? selectedItem.type.toString()
+    : "";
+
   return (
     <div className={`Puck ${getClassName()}`}>
       <AppProvider
@@ -592,12 +598,7 @@ export function Puck<UserConfig extends Config = Config>({
                         noPadding
                         noBorderTop
                         showBreadcrumbs
-                        title={
-                          selectedItem
-                            ? config.components[selectedItem.type]["label"] ??
-                              selectedItem.type
-                            : "Page"
-                        }
+                        title={selectedItem ? selectedComponentLabel : "Page"}
                       >
                         <Fields />
                       </SidebarSection>