From c78406f1c7d77043f749155dd46ce2199d5e0f4c Mon Sep 17 00:00:00 2001
From: Jymma <jkmogollon.cp@gmail.com>
Date: Thu, 15 Jun 2023 14:57:38 -0500
Subject: [PATCH] Creating helpers and useEffect

---
 src/App.jsx          | 21 +++++++++++++++++----
 src/helpers/index.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/helpers/index.js

diff --git a/src/App.jsx b/src/App.jsx
index 2367435..60893c7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Header, Button } from "./components";
+import { formatMoney, calculateTotalPay } from "./helpers";
 
 function App() {
   const MIN = 0;
@@ -7,6 +8,17 @@ function App() {
   const STEP = 100;
   const [amount, setAmount] = useState(1000);
   const [months, setMonths] = useState(6);
+  const [total, setTotal] = useState();
+  const [pay, setPay] = useState();
+
+  useEffect(() => {
+    const resultTotalPay = calculateTotalPay(amount, months);
+    setTotal(resultTotalPay);
+  }, [amount, months]);
+
+  useEffect(() => {
+    setPay(total / months);
+  }, [total]);
 
   function handleChange(e) {
     setAmount(+e.target.value);
@@ -52,7 +64,7 @@ function App() {
       />
 
       <p className="text-center my-10 text-5xl font-extrabold text-indigo-600">
-        {amount}
+        {formatMoney(amount)}
       </p>
 
       <h2 className="text-2xl font-extrabold text-gray-500 text-center">
@@ -78,10 +90,11 @@ function App() {
           <span className="text-indigo-600">{months}</span> Months
         </p>
         <p className="text-xl text-gray-500 text-center font-bold">
-          <span className="text-indigo-600">total</span> Total to pay
+          <span className="text-indigo-600">{formatMoney(total)}</span> Total to
+          pay
         </p>
         <p className="text-xl text-gray-500 text-center font-bold">
-          <span className="text-indigo-600">pay </span>Monthly
+          <span className="text-indigo-600">{formatMoney(pay)}</span>Monthly
         </p>
       </div>
     </div>
diff --git a/src/helpers/index.js b/src/helpers/index.js
new file mode 100644
index 0000000..ad1b739
--- /dev/null
+++ b/src/helpers/index.js
@@ -0,0 +1,31 @@
+const formatMoney = (value) => {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+  return formatter.format(value);
+};
+
+const calculateTotalPay = (amount, term) => {
+  let total;
+
+  if (amount < 5000) {
+    total = amount * 1.5;
+  } else if (amount >= 5000 && amount < 10000) {
+    total = amount * 1.4;
+  } else if (amount >= 10000 && amount < 15000) {
+    total = amount * 1.3;
+  } else {
+    total = amount * 1.2;
+  }
+
+  if (term === 6) {
+    total *= 1.1;
+  } else if (term === 12) {
+    total *= 1.2;
+  } else {
+    total *= 1.3;
+  }
+  return total;
+};
+export { formatMoney, calculateTotalPay };