React Pro - Real World App - Ch9. 11. Product Form - gestire EDIT e ADD - part. 1

// pages/cms/products/components/CMSProductForm.tsx
import clsx from 'clsx';
import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
import { Product } from '@/model/product';

export interface CMSProductFormProps {
  activeItem: Partial<Product> | null;
  onClose: () => void;
  onAdd: (product: Partial<Product>) => void;
  onEdit: (product: Partial<Product>) => void;
}

const initialState: Partial<Product> = {
  name: '', cost: 0, description: ''
}

export function CMSProductForm(props: CMSProductFormProps) {
  const [formData, setFormData] = useState(initialState);

  useEffect(() => {
    if (props.activeItem?.id) {
      setFormData({ ...props.activeItem })
    } else {
      setFormData(initialState)
    }
  }, [props.activeItem])

  function changeHandler(e: ChangeEvent<HTMLInputElement>) {
    const name = e.currentTarget.value;
    setFormData(s => ({ ...s, name }))
  }

  function saveHandler(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (props.activeItem?.id) {
      props.onEdit(formData);
    } else {
      props.onAdd(formData);
    }
  }

  const isNameValid = formData.name?.length;
  const isValid = isNameValid;

  return (
    <div className={clsx(
      'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all',
      {'-right-96': !props.activeItem, 'right-0': props.activeItem}
    )}>

      <form onSubmit={saveHandler}>
        <div className="flex justify-around h-16">
          <button
            className="text-white w-1/2 bg-green-500 hover:bg-green-600 disabled:opacity-30"
            disabled={!isValid}
            type="submit"
          >SAVE</button>
          <button
            className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
            onClick={props.onClose}
            type="button"
          >CLOSE</button>
        </div>

        <div className="flex flex-col gap-3 mx-3 mt-16">
          Product Name:
          <input
            className={clsx({ 'error': !isNameValid})}
            type="text" value={formData?.name} onChange={changeHandler}
          />
        </div>
      </form>

      {props.activeItem?.name}

    </div>
  )
}