Creating helpers and useEffect

src/App.jsx

@@ -1,12 +1,24 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Header, Button } from "./components";
+import { formatMoney, calculateTotalPay } from "./helpers";
 
 function App() {
   const MIN = 0;
   const MAX = 20000;
   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>

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 };