fix add plant

src/components/Modals.js

@@ -1,4 +1,3 @@
-import { classNames } from "../utilities/classNames"
 
 export const Modal = ({children, isOpen, customClose = false, ...props}) => {
 
@@ -26,3 +25,5 @@ export const Modal = ({children, isOpen, customClose = false, ...props}) => {
 export const ModalTitle = ({children, ...props}) => {
     return <div className="bg-green-700 text-white text-2xl font-bold text-center -mx-2 -mt-2 p-2 rounded-tl rounded-tr" {...props}>{children}</div>
 }
+
+export const isCloseModal = e => e.target.classList.contains("overlay") || e.target.classList.contains("close-button")

src/components/Plants.js

@@ -1,11 +1,14 @@
 import { Link } from "preact-router/match"
-import {getPicture} from "../utilities/pictures";
+import {getPicture} from "../utilities/pictures"
+import {InputField, TextAreaField} from "./Form"
+import {Button} from "./Button"
+import {useState} from "preact/hooks"
 
 export const PlantThumb = ({ plant, children }) => {
 
     return <Link href={`/plant/${plant.id}`} class="block h-48">
             <div className="bg-green-400 relative rounded shadow-lg flex flex-col">
-                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full rounded" />
+                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full min-h-48 min-w-48 rounded" />
                 <div className="bg-green-700 text-white p-2 text-center absolute bottom-0 w-full rounded-bl rounded-br">
                     {children}
                 </div>
@@ -15,3 +18,18 @@ export const PlantThumb = ({ plant, children }) => {
             </div>
     </Link>
 }
+
+export const PlantForm = ({children, plant, ...props}) => {
+
+    const [plantForm, setPlantForm] = useState(plant)
+
+    return <form onSubmit={e => props.onChange(e, plantForm)}>
+
+        <InputField name="name" className="mb-2 mt-5" value={plantForm.name} onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>Name</InputField>
+        <TextAreaField name="description" className="mb-5" value={plantForm.description}  onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>Description</TextAreaField>
+
+        <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
+            { children }
+        </Button>
+    </form>
+}

src/routes/Home.js

@@ -1,19 +1,17 @@
 import { createPortal } from "preact/compat"
 import { useContext, useState } from "preact/hooks"
-import { Button } from "../components/Button"
-import {Modal, ModalTitle} from "../components/Modals"
+import {isCloseModal, Modal, ModalTitle} from "../components/Modals"
 import { PageLayout } from "../components/PageLayout"
-import { PlantThumb } from "../components/Plants"
+import {PlantForm, PlantThumb} from "../components/Plants"
 import { PlantsContext } from "../Contexts"
-import {InputField, TextAreaField} from "../components/Form"
 import {Tasks} from "../components/Tasks"
 
 export const Home = () => {
   const [addModal, setAddModal] = useState(false)
-  const [plantForm, setPlantForm] = useState({})
   const { plants, addPlant } = useContext(PlantsContext)
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e, plantForm) => {
+      console.log(e)
     e.preventDefault()
     e.stopPropagation()
     addPlant(plantForm)
@@ -21,8 +19,7 @@ export const Home = () => {
   }
 
   const handleCloseAddModal = (e) => {
-    if (e.target.classList.contains("overlay") ||
-      e.target.classList.contains("close-button")) {
+    if (isCloseModal(e)) {
       setAddModal(false)
     }
   }
@@ -50,15 +47,7 @@ export const Home = () => {
             <ModalTitle>
                 Add Plant
             </ModalTitle>
-          <form onSubmit={handleSubmit}>
-
-            <InputField name="name" className="mb-2 mt-5" onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>Name</InputField>
-            <TextAreaField name="description" className="mb-5"  onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>Description</TextAreaField>
-
-            <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
-              Add
-            </Button>
-          </form>
+            <PlantForm plant={{}} onChange={handleSubmit}>Add</PlantForm>
         </Modal>,
         document.getElementById('app')
       )}

src/routes/Plant.js

@@ -1,19 +1,20 @@
 import {createPortal, useRef} from "preact/compat"
 import { useContext, useEffect, useState } from "preact/hooks"
 import {Button, SmallButton} from "../components/Button"
-import {Modal, ModalTitle} from "../components/Modals"
+import {isCloseModal, Modal, ModalTitle} from "../components/Modals"
 import { PageLayout } from "../components/PageLayout"
 import { PlantsContext } from "../Contexts"
-import {InputField, SelectField, TextAreaField} from "../components/Form"
+import {InputField, SelectField} from "../components/Form"
 import {getPicture, storePicture} from "../utilities/pictures"
-import {EditSVG, PlusSVG} from "../components/SVG";
-import {classNames} from "../utilities/classNames";
+import {EditSVG, PlusSVG} from "../components/SVG"
+import {classNames} from "../utilities/classNames"
+import {PlantForm} from "../components/Plants"
 
 const Plant = ({id}) => {
 
     const [addModal, setAddModal] = useState(false)
     const [editModal, setEditModal] = useState(false)
-    const [plantForm, setPlantForm] = useState({})
+    const [deleteModal, setDeleteModal] = useState(false)
     const {plants, editPlant, removePlant, addAction, doneTask, history} = useContext(PlantsContext)
     const [plant, setPlant] = useState({})
     const [actionForm, setActionForm] = useState({})
@@ -42,7 +43,7 @@ const Plant = ({id}) => {
         setAddModal(false)
       }
 
-      const handleEditSubmit = (e) => {
+      const handleEditSubmit = (e, plantForm) => {
           e.preventDefault()
           e.stopPropagation()
           editPlant(plantForm)
@@ -50,18 +51,10 @@ const Plant = ({id}) => {
           setPlant(plantForm)
       }
 
-    const isCloseModal = e => e.target.classList.contains("overlay") || e.target.classList.contains("close-button")
-
     const handleCloseAddModal = (e) => {
         if (isCloseModal(e)) {
             setAddModal(false)
         }
-      }
-
-    const handleOpenEditModal = () => {
-        setEditModal(true)
-        console.log(plant)
-        setPlantForm(plant)
     }
 
     const handleCloseEditModal = (e) => {
@@ -70,19 +63,29 @@ const Plant = ({id}) => {
         }
     }
 
+    const handleCloseDeleteModal = (e) => {
+        if (isCloseModal(e)) {
+            setDeleteModal(false)
+        }
+    }
+
+    const handleDeletePlant = () => removePlant(plant)
+
+    const handleOpenEditModal = () => setEditModal(true)
+
     const addPicture = e => storePicture(e, id)
 
     return <PageLayout>
         <div className="flex justify-between items-center">
             <h1 className="my-2 flex-1 text-center">{ plant.name }</h1>
             <div>
-                <Button className="bg-blue-500" onClick={() => handleOpenEditModal()}>Edit</Button>
-                {/*<Button className="bg-red-500" onClick={() => removePlant(plant)}>Delete</Button>*/}
+                <Button className="bg-blue-500 hover:bg-blue-700" onClick={() => handleOpenEditModal()}>Edit</Button>
+                <Button className="bg-red-500 hover:bg-red-700" onClick={() => setDeleteModal(true)}>Delete</Button>
             </div>
         </div>
         <div className="flex justify-around flex-wrap gap-5">
             <div className="relative">
-                <img id="picture" ref={picture} src={getPicture(id)} alt=""/>
+                <img id="picture" ref={picture} src={getPicture(id)} alt="" className="inline-block min-w-[300px] min-h-[200px] bg-gray-400"/>
                 <SmallButton className="absolute top-2 left-2 cursor-pointer bg-blue-500 hover:bg-blue-700 max-w-[300px]">
                     <label className="relative">
                         <EditSVG className="w-4 h-4 block z-10 cursor-pointer" />
@@ -90,7 +93,9 @@ const Plant = ({id}) => {
                     </label>
                 </SmallButton>
             </div>
-            <p className="flex-1">{ plant.description }</p>
+            <div className="flex-1">
+                <p>{ plant.description }</p>
+            </div>
         </div>
         <div>
             <div className="flex items-center gap-2">
@@ -138,15 +143,17 @@ const Plant = ({id}) => {
                 <ModalTitle>
                     Edit Plant
                 </ModalTitle>
-                <form onSubmit={handleEditSubmit}>
+                <PlantForm plant={plant} onChange={handleEditSubmit}>Add</PlantForm>
+            </Modal>,
+            app
+        )}
 
-                    <InputField name="name" className="mb-2 mt-5" value={plantForm.name} onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>Name</InputField>
-                    <TextAreaField name="description" className="mb-5" value={plantForm.description}  onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>Description</TextAreaField>
-
-                    <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
-                        Edit
-                    </Button>
-                </form>
+        {createPortal(
+            <Modal isOpen={deleteModal} onChange={handleCloseDeleteModal}>
+                <ModalTitle>
+                    Delete Plant ?
+                </ModalTitle>
+                <Button className="bg-red-500 hover:bg-red-700 mt-10" onClick={handleDeletePlant}>Confirm delete plant</Button>
             </Modal>,
             app
         )}

src/sw.js

@@ -1,3 +1,4 @@
-import { setupRouting } from 'preact-cli/sw'
+import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/'
 
 setupRouting()
+setupPrecaching(getFiles())

src/utilities/pictures.js

@@ -4,7 +4,7 @@ const pictureName = id => {
 }
 
 export const getPicture = id => {
-    return localStorage.getItem('picture-' + id ?? '')
+    return localStorage.getItem('picture-' + id ?? '') ?? ""
 }
 
 export const storePicture = (e, id) => {