Bugfix/saving goal negitive

frontend/src/components/SavingsTracker.jsx

@@ -60,6 +60,15 @@ export default function SavingsTracker() {
 
   // Updates the user's savings goal via the Set New Goal button
   const updateGoal = () => {
+    //checks if newGoal is null if it is replace it with 0
+    //new val updated goal is used because setNewGoal is Aync and might not update in time for sending data to the db
+    let updatedGoal = newGoal;
+    if(newGoal === ''){
+      updatedGoal = 0;
+      setNewGoal(0)
+    }
+
+    //saves newGoal to the DB
     const token = localStorage.getItem("token");
     const axiosInstance = axios.create({
       baseURL: "http://localhost:4000",
@@ -68,10 +77,10 @@ export default function SavingsTracker() {
 
     axiosInstance
       .patch("/user/goal", {
-        goal: newGoal,
+        goal: updatedGoal,
       })
       .then((response) => {
-        setGoal(newGoal);
+        setGoal(updatedGoal);
         setShowSetGoal(false);
       })
       .catch((error) => {

frontend/src/components/SetGoal.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useEffect } from "react";
 import "../App.css";
 
 export default function SetGoal({
@@ -7,14 +8,34 @@ export default function SetGoal({
   updateGoal,
   closeModal,
 }) {
+
+
   const handleSliderChange = (e) => {
     setNewGoal(e.target.value);
   };
 
   const handleInputChange = (e) => {
-    setNewGoal(e.target.value);
+    //removes and save all non number chars in newGoal
+    let value = e.target.value.replace(/[^0-9.]/g, "");
+
+    //removes all dots after the first one
+    let valueSplit = value.split(".");
+    if(valueSplit.length > 1){
+      value = valueSplit[0] +"."
+      for(let i= 1; i<valueSplit.length; i++){
+        value += valueSplit[i]
+      }
+    }
+
+    setNewGoal(value);
   };
 
+  useEffect(() => {
+    if(newGoal < 0){
+      setNewGoal(0)
+    }
+  }, [newGoal]);
+
   return (
     <>
       <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
@@ -37,17 +58,17 @@ export default function SetGoal({
             className="w-full"
           ></input>
           <input
-            type="number"
-            min="0"
-            max="1000000"
+            type="text"
             value={newGoal}
-            onChange={handleInputChange}
+            onInput={handleInputChange}
             className="mt-2 border p-2 text-center w-full"
           ></input>
           <div className="flex justify-center mt-4 gap-4">
             <button
               className=" bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-full w-full active:bg-primary-darker"
-              onClick={updateGoal}
+              onClick={
+                updateGoal
+              }
             >
               Apply
             </button>