optimize modal

size-plugin.json

@@ -0,0 +1 @@
+[{"timestamp":1642348996263,"files":[{"filename":"ssr-build/ssr-bundle.f564d.css","previous":5645,"size":0,"diff":-5645},{"filename":"ssr-build/ssr-bundle.js","previous":12645,"size":0,"diff":-12645},{"filename":"bundle.e3489.css","previous":0,"size":2808,"diff":2808},{"filename":"bundle.*****.esm.js","previous":0,"size":10272,"diff":10272},{"filename":"polyfills.*****.esm.js","previous":0,"size":2191,"diff":2191},{"filename":"route-Home.chunk.*****.esm.js","previous":0,"size":5325,"diff":5325},{"filename":"route-Plant.chunk.*****.esm.js","previous":0,"size":6411,"diff":6411},{"filename":"route-Profile.chunk.*****.esm.js","previous":0,"size":922,"diff":922},{"filename":"sw-esm.js","previous":0,"size":10767,"diff":10767},{"filename":"sw.js","previous":0,"size":10760,"diff":10760},{"filename":"bundle.e98ad.js","previous":0,"size":10911,"diff":10911},{"filename":"polyfills.03377.js","previous":0,"size":2291,"diff":2291},{"filename":"route-Home.chunk.58d66.js","previous":0,"size":5871,"diff":5871},{"filename":"route-Plant.chunk.b4421.js","previous":0,"size":7001,"diff":7001},{"filename":"route-Profile.chunk.5b010.js","previous":0,"size":1393,"diff":1393},{"filename":"index.html","previous":0,"size":1751,"diff":1751},{"filename":"200.html","previous":0,"size":908,"diff":908}]}]

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>
+            <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" onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>Frequency</InputField>
+            <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>