Merge pull request #42 from mseng10/big3

ENH: Fixes
mseng10 · Jul 25, 2024 · 0682b5a · 0682b5a
2 parents d166ef3 + a4c96b7
commit 0682b5a
Show file tree

Hide file tree

Showing 15 changed files with 660 additions and 528 deletions.
diff --git a/client/react/package-lock.json b/client/react/package-lock.json
diff --git a/client/react/package.json b/client/react/package.json
@@ -7,13 +7,13 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.15.8",
-    "@mui/material": "^5.15.7",
+    "@mui/material": "^5.16.4",
     "@mui/x-data-grid": "^6.19.3",
-    "@mui/x-date-pickers": "^6.19.3",
+    "@mui/x-date-pickers": "^7.11.0",
     "@testing-library/jest-dom": "6.2.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-modal": "3.16.1",

diff --git a/client/react/src/App.js b/client/react/src/App.js
@@ -22,6 +22,8 @@ import NewTodoForm from './pages/todo/NewTodoForm';
 import NewTypeForm from './pages/plant/type/NewTypeForm';
 import NewLightForm from './pages/system/light/NewLightForm';
 import NewGenusForm from './pages/plant/genus/NewGenusForm';
+import UpdatePlantForm from './pages/plant/UpdatePlantForm';
+// import '@mui/x-date-pickers/styles';
 
 const drawerWidth = 240;
 
@@ -136,6 +138,7 @@ function App() {
             <Route path="/view" element={<Home />} />
             <Route path="/system/view" element={<Systems />} />
             <Route path="/plant/view" element={<Plants />} />
+            <Route path="/plants/:id" element={<UpdatePlantForm />} />
 
             <Route path="/create" element={<Home />} />
             <Route path="/plant/create" element={<NewPlantForm />} />

diff --git a/client/react/src/elements/Form.js b/client/react/src/elements/Form.js
@@ -7,6 +7,10 @@ import IconFactory from './IconFactory';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import MenuItem from '@mui/material/MenuItem';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
 
 export const FormButton = ({icon, color, handleCancel}) => {
   // Handle case when system data is not available
@@ -186,3 +190,25 @@ export const DropdownInput = (fieldInfo) => {
       </TextField>
     </div>)
 };
+
+export const DateSelector = (fieldInfo) => {
+  if (!fieldInfo) {
+    return <div></div>
+  }
+
+  return  (
+    <div>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
+          variant="standard"
+          margin="normal"
+          fullWidth
+          label={fieldInfo.label}
+          value={fieldInfo.value}
+          onChange={(event) => fieldInfo.setValue(event)}
+          renderInput={(params) => <TextField {...params} />}
+          color={fieldInfo.color}
+        />
+      </LocalizationProvider>
+    </div>)
+};
diff --git a/client/react/src/elements/IconFactory.js b/client/react/src/elements/IconFactory.js
@@ -16,6 +16,8 @@ import InvertColorsSharpIcon from '@mui/icons-material/InvertColorsSharp';
 import DeviceThermostatSharpIcon from '@mui/icons-material/DeviceThermostatSharp';
 import AvTimerSharpIcon from '@mui/icons-material/AvTimerSharp';
 import StraightenSharpIcon from '@mui/icons-material/StraightenSharp';
+import WaterDropOutlinedIcon from '@mui/icons-material/WaterDropOutlined';
+import DeleteOutlineSharpIcon from '@mui/icons-material/DeleteOutlineSharp';
 
 const IconFactory = ({ icon, color, size }) => {
   const sizeChart = {
@@ -80,6 +82,12 @@ const IconFactory = ({ icon, color, size }) => {
   case 'distance':
     IconComponent = StraightenSharpIcon;
     break;
+  case 'water':
+    IconComponent = WaterDropOutlinedIcon;
+    break;
+  case 'kill':
+    IconComponent = DeleteOutlineSharpIcon;
+    break;
   // Add more cases for other icons
   default:
     IconComponent = VisibilitySharpIcon; // Default to VisibilitySharpIcon if no valid 'icon' prop is provided

diff --git a/client/react/src/forms/update/UpdatePlantForm.js b/client/react/src/forms/update/UpdatePlantForm.js
diff --git a/client/react/src/hooks/usePlants.js b/client/react/src/hooks/usePlants.js
@@ -15,6 +15,7 @@ export const usePlants = (initialPlants) => {
       setIsLoading(true);
       setError(null);
       try {
+        console.log(initialPlants);
         if (!initialPlants) {
           const plantsResponse = await fetch(`${API_BASE_URL}/plants`);
           setPlants(await plantsResponse.json());
@@ -58,5 +59,58 @@ export const usePlants = (initialPlants) => {
     }
   };
 
-  return { plants, setPlants, genuses, systems, types, isLoading, error, addPlant };
-};
+  const killPlant = async (cause, when) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/plants/kill`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ids:  plants.map((plant) => plant.id), cause: cause, killed_on: when})
+      });
+      const data = await response.json();
+
+      return data;
+    } catch (error) {
+      console.error('Error killing plant:', error);
+      setError('Failed to kill plant. Please try again later.');
+      throw error;
+    }
+  };
+
+  const waterPlants = async (when) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/plants/water`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ids:  plants.map((plant) => plant.id), watered_on: when})
+      });
+      const data = await response.json();
+
+      return data;
+    } catch (error) {
+      console.error('Error watering plants:', error);
+      setError('Failed to water plants. Please try again later.');
+      throw error;
+    }
+  };
+
+  const updatePlant = async (id, updatedPlant) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/plants/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updatedPlant),
+      });
+      const data = await response.json();
+      setPlants(prevPlants => prevPlants.map(plant => 
+        plant.id === id ? { ...plant, ...data } : plant
+      ));
+
+      return data;
+    } catch (error) {
+      console.error('Error updating plant:', error);
+      throw error;
+    }
+  };
+
+  return { plants, setPlants, genuses, systems, types, isLoading, error, addPlant, killPlant, waterPlants, updatePlant};
+};
diff --git a/client/react/src/hooks/useTodos.js b/client/react/src/hooks/useTodos.js
@@ -38,9 +38,31 @@ export const useTodos = () => {
     }
   };
 
+  const createTodo = async (todoData) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_BASE_URL}/todo`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(todoData),
+      });
+      const data = await response.json();
+      setTodos(prevTodos => [...prevTodos, data]);
+
+      return data;
+    } catch (error) {
+      console.error('Error creating todo:', error);
+      setError('Failed to create todo. Please try again.');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   useEffect(() => {
     fetchTodos();
   }, []);
 
-  return { todos, isLoading, error, resolveTodo };
+  return { todos, isLoading, error, resolveTodo, createTodo };
 };