plantes/src/routes/Plant.js

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 { PageLayout } from "../components/PageLayout"
import { PlantsContext } from "../Contexts"
import {InputField, SelectField, TextAreaField} from "../components/Form"
import {getPicture, storePicture} from "../utilities/pictures"
import {EditSVG, PlusSVG} from "../components/SVG";
import {classNames} from "../utilities/classNames";

const Plant = ({id}) => {

    const [addModal, setAddModal] = useState(false)
    const [editModal, setEditModal] = useState(false)
    const [plantForm, setPlantForm] = useState({})
    const {plants, editPlant, removePlant, addAction, doneTask, history} = useContext(PlantsContext)
    const [plant, setPlant] = useState({})
    const [actionForm, setActionForm] = useState({})
    const [image, setImage] = useState(localStorage.getItem("image" + id) ?? '')
    const pictureName = 'picture-' + id
    const picture = useRef(null)

    const action_types = ['watering', 'spraying', 'bathing']

    useEffect(() => {
        const plantFind = plants.find(plant => plant.id === Number(id))
        setPlant(plantFind)
    }, [])

    useEffect(() => {
        setImage(localStorage.getItem(pictureName))
    }, [picture])

    const handleSubmit = (e) => {
        e.preventDefault()
        e.stopPropagation()
        if (!actionForm.action_type) {
            actionForm.action_type = action_types[0]
        }
        addAction(plant, actionForm)
        setAddModal(false)
      }

      const handleEditSubmit = (e) => {
          e.preventDefault()
          e.stopPropagation()
          editPlant(plantForm)
          setEditModal(false)
          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) => {
        if (isCloseModal(e)) {
            setEditModal(false)
        }
    }

    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>*/}
            </div>
        </div>
        <div className="flex justify-around flex-wrap gap-5">
            <div className="relative">
                <img id="picture" ref={picture} src={getPicture(id)} alt=""/>
                <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" />
                        <input id="input-file" type="file" name="picture" className="absolute opacity-0 max-w-[300px] w-0 h-0 inline" onChange={addPicture}/>
                    </label>
                </SmallButton>
            </div>
            <p className="flex-1">{ plant.description }</p>
        </div>
        <div>
            <div className="flex items-center gap-2">
                <h2>Actions</h2>
                <SmallButton className="bg-blue-500 hover:bg-blue-700 mb-2 mt-5" onClick={() => setAddModal(true)}>
                    <PlusSVG className="w-4 h-4" />
                </SmallButton>
            </div>
            {plant.actions && plant.actions.map(action => {
                let isDone = false
                let lastTask = false
                if (history()[action.id]) {
                    lastTask = new Date(history()[action.id])
                    isDone = lastTask.addDays(Number(action.frequency)).toSQLDate() >= (new Date()).toSQLDate()
                }
                return <div key={action.action_type} className="flex items-center gap-2 my-2">
                    <span>
                        <Button className={classNames(isDone ? "bg-green-500 hover:bg-green-700" : "bg-blue-500 hover:bg-blue-700")} onClick={() => doneTask(action.id)}>Done</Button>
                    </span>
                    <span className="capitalize">{action.action_type}</span>
                    <span>every {action.frequency} days</span>
                    <span className="text-gray-500">last task {lastTask ? lastTask.toFrDate() : 'never'}</span>
                </div>
            })}
        </div>

        {createPortal(
        <Modal isOpen={addModal} onChange={handleCloseAddModal}>
        <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>

              <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>
        </Modal>,
        app
      )}

        {createPortal(
            <Modal isOpen={editModal} onChange={handleCloseEditModal}>
                <ModalTitle>
                    Edit Plant
                </ModalTitle>
                <form onSubmit={handleEditSubmit}>

                    <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>
            </Modal>,
            app
        )}
    </PageLayout>
}

export default Plant