From 6ebeaeab4965dca85efb7d994863ec5715bfed76 Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Sun, 19 Jan 2025 20:07:07 -0500
Subject: [PATCH] fix: improvements to component structure

This i think fixes some cases where vite would not refresh the UI on code change.

Signed-off-by: Nick Mitchell <nickm@us.ibm.com>
---
 pdl-live-react/src/view/transcript/Transcript.tsx   | 13 ++-----------
 .../src/view/transcript/TranscriptItem.tsx          | 10 ++++++++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/pdl-live-react/src/view/transcript/Transcript.tsx b/pdl-live-react/src/view/transcript/Transcript.tsx
index 74bc0364..1cc804ea 100644
--- a/pdl-live-react/src/view/transcript/Transcript.tsx
+++ b/pdl-live-react/src/view/transcript/Transcript.tsx
@@ -6,7 +6,7 @@ import {
   type MouseEvent,
 } from "react"
 
-import { Accordion, AccordionItem } from "@patternfly/react-core"
+import { Accordion } from "@patternfly/react-core"
 
 import Context from "../../Context"
 import DrawerContext from "../../DrawerContentContext"
@@ -61,16 +61,7 @@ export default function Transcript({ data }: Props) {
         .concat(hasResult(data) ? [<FinalResult block={data} ctx={ctx} />] : [])
         .map((block, idx) =>
           isValidElement(block) && "data-id" in block.props ? (
-            <AccordionItem
-              key={idx}
-              className={isValidElement(block) && block.props.className}
-              isExpanded={
-                !isValidElement(block) ||
-                expanded.includes(block.props["data-id"])
-              }
-            >
-              {block}
-            </AccordionItem>
+            block
           ) : (
             <div key={idx} className="pdl-interstitial-text">
               {block}
diff --git a/pdl-live-react/src/view/transcript/TranscriptItem.tsx b/pdl-live-react/src/view/transcript/TranscriptItem.tsx
index 5f6dee0e..b0e9fbae 100644
--- a/pdl-live-react/src/view/transcript/TranscriptItem.tsx
+++ b/pdl-live-react/src/view/transcript/TranscriptItem.tsx
@@ -1,5 +1,6 @@
 import { type PropsWithChildren } from "react"
 import {
+  AccordionItem,
   AccordionContent,
   AccordionToggle,
   DescriptionList,
@@ -82,7 +83,12 @@ export default function TranscriptItem(props: Props) {
   )
 
   return (
-    <div className={props.className} data-id={props.ctx.id}>
+    <AccordionItem
+      key={props.ctx.id}
+      className={props.className}
+      data-id={props.ctx.id}
+      isExpanded={props.ctx.isAccordionExpanded.includes(props.ctx.id)}
+    >
       <AccordionToggle id={props.ctx.id} onClick={props.ctx.toggleAccordion}>
         {toggleContent}
       </AccordionToggle>
@@ -99,6 +105,6 @@ export default function TranscriptItem(props: Props) {
           </DescriptionListGroup>
         </DescriptionList>
       </AccordionContent>
-    </div>
+    </AccordionItem>
   )
 }