optimize render cost

1 files changed, 3 insertions, 47 deletions

diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js
index c56493ad..110915cf 100644
--- a/src/pages/my/transactions/[id].js
+++ b/src/pages/my/transactions/[id].js
@@ -10,7 +10,7 @@ import VariantCard from "@/components/variants/VariantCard";
 import currencyFormat from "@/core/utils/currencyFormat";
 import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
-import { CustomerSection } from "@/components/transactions/TransactionDetail";
+import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
 import { SkeletonList } from "@/components/elements/Skeleton";
 
 export default function DetailTransactions() {
@@ -18,18 +18,6 @@ export default function DetailTransactions() {
   const { id } = router.query;
   const [ auth ] = useAuth();
   const [ transaction, setTransaction ] = useState(null);
-  const [ activeSection, setActiveSection ] = useState({
-    purchase: false,
-    shipping: false,
-    invoice: false,
-  });
-
-  const toggleSection = ( name ) => {
-    setActiveSection({
-      ...activeSection,
-      [name]: !activeSection[name] 
-    });
-  };
 
   useEffect(() => {
     if (auth) {
@@ -88,42 +76,10 @@ export default function DetailTransactions() {
               </div>
             </div>
 
-
-            <LineDivider />
-
-            <Disclosure 
-              label="Detail Pembeli" 
-              active={activeSection.purchase} 
-              onClick={() => toggleSection('purchase')} 
-            />
-            { activeSection.purchase && (
-              <CustomerSection address={transaction?.address?.customer} />
-            ) }
-
-            <LineDivider />
-
-            <Disclosure 
-              label="Detail Pengiriman" 
-              active={activeSection.shipping} 
-              onClick={() => toggleSection('shipping')} 
-            />
-            { activeSection.shipping && (
-              <CustomerSection address={transaction?.address?.shipping} />
-            ) }
-
-            <LineDivider />
-
-            <Disclosure 
-              label="Detail Penagihan" 
-              active={activeSection.invoice} 
-              onClick={() => toggleSection('invoice')} 
-            />
-            { activeSection.invoice && (
-              <CustomerSection address={transaction?.address?.invoice} />
-            ) }
+            <TransactionDetailAddress transaction={transaction} />
           </>
         ) : (
-          <div className="p-4">
+          <div className="p-4 py-6">
             <SkeletonList number={12} />
           </div>
         ) }