From 0d398640f2578b41d45433ad020afb21b4380907 Mon Sep 17 00:00:00 2001
From: Amanda Yee <amandakyee@gmail.com>
Date: Sun, 6 Oct 2024 20:15:35 -0400
Subject: [PATCH] add success and error msgs to daily data page

---
 code/client/src/components/DailyData.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/code/client/src/components/DailyData.js b/code/client/src/components/DailyData.js
index 425da3d63..384d32922 100644
--- a/code/client/src/components/DailyData.js
+++ b/code/client/src/components/DailyData.js
@@ -38,6 +38,9 @@ function DailyData() {
     exercise: "",
   });
 
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
   // Handle input changes and update formData state
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -99,6 +102,10 @@ function DailyData() {
   const handleSubmit = async (event) => {
     event.preventDefault(); // Prevent default form submission behavior (e.g., page reload)
 
+    // Clear any existing messages before processing the form
+    setSuccessMessage('');
+    setErrorMessage('');
+
     const updatedFormData = {
       ...formData, // Include all the existing form data (weight, steps, sleep, etc.)
       entryDate: date ? date.toISOString() : null, // Add the selected date
@@ -112,9 +119,11 @@ function DailyData() {
           headers: { Authorization: `Bearer ${token}` }, // Pass token
         })
         console.log("Daily entry processed");
+        setSuccessMessage('Daily entry successful!');
       }
     } catch (err) {
       console.log("Error submitting daily entry", err);
+      setErrorMessage('Error: Failed to submit daily entry. Please try again');
     }
   };
 
@@ -270,6 +279,8 @@ function DailyData() {
           </Grid2>
         </Grid2>
       </form>
+      {errorMessage && <p style={{ color: '#E95D5C', fontWeight: "bold"}}>{errorMessage}</p>}
+      {successMessage && <p style={{ color: '#008000', fontWeight: "bold" }}>{successMessage}</p>}
     </Box>
   );
 }