From 93fd82c4c48ef48844dfd111868eddb42d93a9f5 Mon Sep 17 00:00:00 2001
From: "andrei.pradan" <work@pradan.dev>
Date: Tue, 5 Nov 2024 20:38:26 +0200
Subject: [PATCH] FE: fixing bug on payments bar chart when switching
 currencies

---
 frontend/src/app/finances/Credit/Details.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/finances/Credit/Details.js b/frontend/src/app/finances/Credit/Details.js
index d5e7c918..22c8f1c9 100644
--- a/frontend/src/app/finances/Credit/Details.js
+++ b/frontend/src/app/finances/Credit/Details.js
@@ -38,6 +38,9 @@ const Details = () => {
   const [lineChartInterest, setLineChartInterest] = useState(null)
   const [lineChartLabels, setLineChartLabels] = useState(null)
 
+  const getPrincipal = payments => payments ? payments.map(p => p.principal).reverse() : []
+  const getInterest = payments => payments ? payments.map(p => p.interest).reverse() : []
+
   useEffect(() => {
     {
       !payment.results && dispatch(PaymentsApi.getList(token));
@@ -49,8 +52,8 @@ const Details = () => {
     }, [overview.credit]
   );
 
-  useEffect(() => setBarChartPrincipal(payment.results?.map(p => p.principal).reverse()), [payment.results])
-  useEffect(() => setBarChartInterest(payment.results?.map(p => p.interest).reverse()), [payment.results])
+  useEffect(() => setBarChartPrincipal(getPrincipal(payment.results)), [payment.results])
+  useEffect(() => setBarChartInterest(getInterest(payment.results)), [payment.results])
   useEffect(() => setBarChartLabels(payment.results?.map(p => p.date).reverse()), [payment.results])
 
 
@@ -131,8 +134,8 @@ const Details = () => {
     setPaidPrepaid(getAmountInCurrency(overview.payment_stats?.prepaid, currency))
     setPaidPrincipal(getAmountInCurrency(overview.payment_stats?.principal, currency))
 
-    setBarChartPrincipal(barChartPrincipal?.map(p => getAmountInCurrency(p, currency)))
-    setBarChartInterest(barChartInterest?.map(p => getAmountInCurrency(p, currency)))
+    setBarChartPrincipal(getPrincipal(payment.results).map(p => getAmountInCurrency(p, currency)))
+    setBarChartInterest(getInterest(payment.results).map(p => getAmountInCurrency(p, currency)))
   }
 
   const onExcludePrepaymentsChange = () => {
@@ -546,6 +549,8 @@ const Details = () => {
         </div>
       </div>
     </div>
+
+    {/* Line chart - Interest rate */}
     <div className="row">
       <div className="col-sm-12 grid-margin stretch-card">
         <div className="card">