Skew bug fixed

ui-subsystem/src/components/Landing.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
 import './Landing.css';
 import MyModal from './Modal';
+import WarnModal from './WarnModal';
 // import {useQuery} from '@apollo/client';
 // import {USER_QUERY} from "../GraphQL/Queries" ;
 // import { Button, Card } from 'react-bootstrap';
@@ -9,12 +10,11 @@ import MyModal from './Modal';
 
 function Landing() {
     const [plants,setPlants] = useState([]);
-    const [healths, setHealths] = useState([]); // fill this later w actual data
     const [modalIsOpen, setModalIsOpen] = useState(false)
     var [dataFromModal, setDataFromModal] = useState({});
 
     // station: '192.168.4.1'  localWiFi(AP): 172.16.107.184
-    const ESP32_IP_ADDRESS = '192.168.1.8';  
+    const ESP32_IP_ADDRESS = '172.16.107.184';  
     const { sendMessage, lastMessage, readyState } = useWebSocket(`ws://${ESP32_IP_ADDRESS}/ws`);
 
     // For Data Transmission testing purposes
@@ -33,24 +33,38 @@ function Landing() {
 
     
 
-    const loadPlant = () => {
-        const newPlantData = {
-            name: dataFromModal['Plant Name'],
-            maxWaterUsage: dataFromModal['Max Water Usage'],
-            minMoistureLevel: dataFromModal['Min Moisture Level'],
-            wateringHours: dataFromModal['Watering Hours'],
-          };
-
-        const newHealth = (
-            <div className='new-health'>
-                New Health {healths.length + 1}
-            </div>
-        );
-    
-        setPlants([...plants, newPlantData]);
-        console.log(plants)
-        setHealths([...healths, newHealth])
+    //   const loadPlant = () => {
+    //     // Check if all required fields have values
+    //     if (
+    //       dataFromModal['plantName'] ||
+    //       dataFromModal['maxWaterUsage'] ||
+    //       dataFromModal['minMoistureLevel'] ||
+    //       dataFromModal['wateringHours']
+    //     ) {
+    //       const newPlantData = {
+    //         name: dataFromModal['plantName'],
+    //         maxWaterUsage: dataFromModal['maxWaterUsage'],
+    //         minMoistureLevel: dataFromModal['minMoistureLevel'],
+    //         wateringHours: dataFromModal['wateringHours'],
+    //       };
+      
+      
+    //       const newPlants = [...plants, newPlantData];
+      
+    //       setPlants(newPlants);
+      
+    //       // Now, you can log the updated state in a useEffect to ensure it's displayed correctly
+    //     } else {
+    //       // Handle the case when some fields are undefined or empty
+    //       console.error('Some fields are undefined or empty');
+
+    //     }
+    //   };
+
+    const loadPlant = (newPlantData) => {
+        setPlants(prevPlants => [...prevPlants, newPlantData]);
     };
+      
 
     const openModal = () => {
         setModalIsOpen(true);
@@ -60,9 +74,32 @@ function Landing() {
         setModalIsOpen(false);
     }
 
+    // const receiveData = (data) => {
+    //     setDataFromModal(data, () => {
+    //         // Only call loadPlant after the state has been updated
+    //         loadPlant();
+    //         closeModal();
+    //     });
+    // }
+
     const receiveData = (data) => {
-        setDataFromModal(data);
-    }
+        const newPlantData = {
+            name: data['plantName'],
+            maxWaterUsage: data['maxWaterUsage'],
+            minMoistureLevel: data['minMoistureLevel'],
+            wateringHours: data['wateringHours'],
+        };
+
+        // Ensure the new plant data is valid before adding
+        if (newPlantData.name && newPlantData.maxWaterUsage && newPlantData.minMoistureLevel && newPlantData.wateringHours) {
+            loadPlant(newPlantData);
+            closeModal();
+        } else {
+            console.error('Some fields are undefined or empty');
+        }
+    };
+
+    
     
     
     // Gonna send plants: [{name, maxWaterUsage, minMoistureLevel, wateringHours}] to ESP32
@@ -80,6 +117,10 @@ function Landing() {
         }
       }, [lastMessage]);
 
+    useEffect(() => {
+    // Log the updated 'plants' state whenever it changes
+    console.log(plants);
+    }, [plants]);
    
 
     return (
@@ -109,7 +150,7 @@ function Landing() {
                         <div className='options-bg'>
                             <div className='options-container'>
                                 <div className='options'>
-                                    <button className='add-plant-btn' onClick={ () => {openModal(); loadPlant();}}>Add Plant</button>
+                                    <button className='add-plant-btn' onClick={ () => {openModal();}}>Add Plant</button>
                                     <p className='options-text'>Max Water Usage</p>
                                     <p className='options-text'>Min Moisture Level</p>
                                     <p className='options-text'>Watering Hours</p>
@@ -119,7 +160,7 @@ function Landing() {
                             <div className='plant-container'>
                                 {plants.length > 0 ? (plants.map((plant, index) => (
                                     <div className='new-plant' key={index}>
-                                        <p className='new-plant-text'>Plant {plants.length + 1}: {plant.name}</p>
+                                        <p className='new-plant-text'>Plant {index+1}: {plant.name}</p>
                                         <p className='new-plant-text'>{plant.maxWaterUsage}</p>
                                         <p className='new-plant-text'>{plant.minMoistureLevel}</p>
                                         <p className='new-plant-text'>{plant.wateringHours}</p>
@@ -133,9 +174,6 @@ function Landing() {
                         <div className='health-wrap'>
                             <p className='health-header'>Plant Health</p>
                             <div className='health-container'>
-                                {/* {healths.map((health, index) => (
-                                    <div key = {index}>{health}</div>
-                                ))} */}
                                 {dataObjects.map((item, index) => (
                                     <p key={index}>
                                     Address: {item.address}, Health: {item.health}