optimize modal

src/components/Modals.js

@@ -26,4 +26,10 @@ 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")
+export const isCloseModal = e => e.target.classList.contains("overlay") || e.target.classList.contains("close-button")
+
+export const closeModal = (e, setter) => {
+    if (e.target.classList.contains("overlay") || e.target.classList.contains("close-button")) {
+        setter(false)
+    }
+}

src/routes/Home.js

@@ -1,6 +1,6 @@
 import { createPortal } from "preact/compat"
 import { useContext, useState } from "preact/hooks"
-import {isCloseModal, Modal, ModalTitle} from "../components/Modals"
+import {closeModal, Modal, ModalTitle} from "../components/Modals"
 import { PageLayout } from "../components/PageLayout"
 import {PlantForm, PlantThumb} from "../components/Plants"
 import { PlantsContext } from "../Contexts"
@@ -11,19 +11,12 @@ export const Home = () => {
   const { plants, addPlant } = useContext(PlantsContext)
 
   const handleSubmit = (e, plantForm) => {
-      console.log(e)
     e.preventDefault()
     e.stopPropagation()
     addPlant(plantForm)
     setAddModal(false)
   }
 
-  const handleCloseAddModal = (e) => {
-    if (isCloseModal(e)) {
-      setAddModal(false)
-    }
-  }
-
   return (
     <PageLayout class="relative">
 
@@ -43,7 +36,7 @@ export const Home = () => {
       </div>
 
       {typeof window !== "undefined" && createPortal(
-        <Modal isOpen={addModal} onChange={handleCloseAddModal}>
+        <Modal isOpen={addModal} onChange={e => closeModal(e, setAddModal)}>
             <ModalTitle>
                 Add Plant
             </ModalTitle>

src/routes/Plant.js

@@ -1,7 +1,7 @@
 import {createPortal, useRef} from "preact/compat"
 import { useContext, useEffect, useState } from "preact/hooks"
 import {Button, SmallButton} from "../components/Button"
-import {isCloseModal, Modal, ModalTitle} from "../components/Modals"
+import {closeModal, Modal, ModalTitle} from "../components/Modals"
 import { PageLayout } from "../components/PageLayout"
 import { PlantsContext } from "../Contexts"
 import {InputField, SelectField} from "../components/Form"
@@ -51,24 +51,6 @@ const Plant = ({id}) => {
           setPlant(plantForm)
       }
 
-    const handleCloseAddModal = (e) => {
-        if (isCloseModal(e)) {
-            setAddModal(false)
-        }
-    }
-
-    const handleCloseEditModal = (e) => {
-        if (isCloseModal(e)) {
-            setEditModal(false)
-        }
-    }
-
-    const handleCloseDeleteModal = (e) => {
-        if (isCloseModal(e)) {
-            setDeleteModal(false)
-        }
-    }
-
     const handleDeletePlant = () => removePlant(plant)
 
     const handleOpenEditModal = () => setEditModal(true)
@@ -79,7 +61,7 @@ const Plant = ({id}) => {
         <div className="flex justify-between items-center">
             <h1 className="my-2 flex-1 text-center">{ plant.name }</h1>
             <div>
-                <Button className="bg-blue-500 hover:bg-blue-700" onClick={() => handleOpenEditModal()}>Edit</Button>
+                <Button className="bg-blue-500 hover:bg-blue-700 mr-2" onClick={() => handleOpenEditModal()}>Edit</Button>
                 <Button className="bg-red-500 hover:bg-red-700" onClick={() => setDeleteModal(true)}>Delete</Button>
             </div>
         </div>
@@ -123,12 +105,12 @@ const Plant = ({id}) => {
         </div>
 
         {createPortal(
-        <Modal isOpen={addModal} onChange={handleCloseAddModal}>
+        <Modal isOpen={addModal} onChange={e => closeModal(e, setAddModal)}>
         <ModalTitle>Add Action</ModalTitle>
           <form onSubmit={handleSubmit}>
 
-            <SelectField name="action_type" className="mb-2 mt-5" options={action_types} onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>Name</SelectField>
-            <InputField name="frequency" className="mb-5" onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>Frequency</InputField>
+            <SelectField name="action_type" className="mb-2 mt-5" value={actionForm.action_type} options={action_types} onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>Name</SelectField>
+            <InputField name="frequency" className="mb-5" value={actionForm.frequency} onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>Frequency</InputField>
 
               <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
@@ -139,7 +121,7 @@ const Plant = ({id}) => {
       )}
 
         {createPortal(
-            <Modal isOpen={editModal} onChange={handleCloseEditModal}>
+            <Modal isOpen={editModal} onChange={e => closeModal(e, setEditModal)}>
                 <ModalTitle>
                     Edit Plant
                 </ModalTitle>
@@ -149,7 +131,7 @@ const Plant = ({id}) => {
         )}
 
         {createPortal(
-            <Modal isOpen={deleteModal} onChange={handleCloseDeleteModal}>
+            <Modal isOpen={deleteModal} onChange={e => closeModal(e, setDeleteModal)}>
                 <ModalTitle>
                     Delete Plant ?
                 </ModalTitle>