From fbf2043c00f560d6614f282aeb4512364c6c387c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Jan 2023 13:38:59 +0700
Subject: optimize render cost

---
 src/components/elements/Disclosure.js            |  2 +-
 src/components/elements/Skeleton.js              |  2 +-
 src/components/transactions/TransactionDetail.js | 56 +++++++++++++++++++++---
 src/pages/my/transactions/[id].js                | 50 ++-------------------
 4 files changed, 56 insertions(+), 54 deletions(-)

(limited to 'src')

diff --git a/src/components/elements/Disclosure.js b/src/components/elements/Disclosure.js
index 0aaedf87..584fa144 100644
--- a/src/components/elements/Disclosure.js
+++ b/src/components/elements/Disclosure.js
@@ -1,7 +1,7 @@
 const { ChevronUpIcon, ChevronDownIcon } = require("@heroicons/react/24/outline");
 
 const Disclosure = ({ label, active, onClick }) => (
-  <div className="flex justify-between p-4" onClick={onClick}>
+  <div className={`flex justify-between p-4 ` + (active && 'bg-yellow_r-2')} onClick={onClick}>
     <p className="font-medium leading-normal">{ label }</p>
     { onClick && ( active ? (
       <ChevronUpIcon className="w-5 h-5" />
diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js
index 843b200f..0a0bbc78 100644
--- a/src/components/elements/Skeleton.js
+++ b/src/components/elements/Skeleton.js
@@ -1,5 +1,5 @@
 const SkeletonList = ({ number }) => (
-  <div role="status" className="space-y-5 animate-pulse">
+  <div role="status" className="space-y-6 animate-pulse">
     { Array.from(Array(number), (e, i) => (
       <div className="flex items-center justify-between" key={i}>
         <div>
diff --git a/src/components/transactions/TransactionDetail.js b/src/components/transactions/TransactionDetail.js
index 6d304d31..7659a321 100644
--- a/src/components/transactions/TransactionDetail.js
+++ b/src/components/transactions/TransactionDetail.js
@@ -1,13 +1,15 @@
+import { useState } from "react";
 import DescriptionRow from "../elements/DescriptionRow";
+import Disclosure from "../elements/Disclosure";
 
-const CustomerSection = ({ address }) => {
+const DetailAddress = ({ address }) => {
   const fullAddress = [];
   if (address?.street) fullAddress.push(address.street);
   if (address?.sub_district?.name) fullAddress.push(address.sub_district.name);
   if (address?.district?.name) fullAddress.push(address.district.name);
   if (address?.city?.name) fullAddress.push(address.city.name);
   return (
-    <div className="px-4 pb-4 flex flex-col gap-y-4">
+    <div className="p-4 flex flex-col gap-y-4">
       <DescriptionRow label="Nama">{ address?.name }</DescriptionRow>
       <DescriptionRow label="Email">{ address?.email || '-' }</DescriptionRow>
       <DescriptionRow label="No Telepon">{ address?.mobile || '-' }</DescriptionRow>
@@ -16,6 +18,50 @@ const CustomerSection = ({ address }) => {
   );
 };
 
-export {
-  CustomerSection
-};
\ No newline at end of file
+const TransactionDetailAddress = ({ transaction }) => {
+  const [ activeSection, setActiveSection ] = useState({
+    purchase: false,
+    shipping: false,
+    invoice: false,
+  });
+
+  const toggleSection = ( name ) => {
+    setActiveSection({
+      ...activeSection,
+      [name]: !activeSection[name] 
+    });
+  };
+
+  return (
+    <div className="m-4 rounded border border-gray_r-6 divide-y divide-gray_r-6">
+      <Disclosure 
+        label="Detail Pelanggan" 
+        active={activeSection.purchase} 
+        onClick={() => toggleSection('purchase')} 
+      />
+      { activeSection.purchase && (
+        <DetailAddress address={transaction?.address?.customer} />
+      ) }
+
+      <Disclosure 
+        label="Detail Pengiriman" 
+        active={activeSection.shipping} 
+        onClick={() => toggleSection('shipping')} 
+      />
+      { activeSection.shipping && (
+        <DetailAddress address={transaction?.address?.shipping} />
+      ) }
+
+      <Disclosure 
+        label="Detail Penagihan" 
+        active={activeSection.invoice} 
+        onClick={() => toggleSection('invoice')} 
+      />
+      { activeSection.invoice && (
+        <DetailAddress address={transaction?.address?.invoice} />
+      ) }
+    </div>
+  );
+};
+
+export { TransactionDetailAddress };
\ No newline at end of file
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>
         ) }
-- 
cgit v1.2.3