Advertisement
fabiobiondi

React Pro - Real World App - Ch9. 18. useCloudinary - custom hook e Promise

Mar 21st, 2023
1,008
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import clsx from 'clsx';
  2. import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
  3. import { Product } from '@/model/product';
  4. import { useCloudinary } from '../../../../shared/hooks/useCloudinary';
  5.  
  6. declare var cloudinary: any;
  7.  
  8. export interface CMSProductFormProps {
  9.   activeItem: Partial<Product> | null;
  10.   onClose: () => void;
  11.   onAdd: (product: Partial<Product>) => void;
  12.   onEdit: (product: Partial<Product>) => void;
  13. }
  14.  
  15. const initialState: Partial<Product> = {
  16.   name: '', cost: 0, description: '', tmb: '', img: ''
  17. }
  18.  
  19. export function CMSProductForm(props: CMSProductFormProps) {
  20.   const [formData, setFormData] = useState(initialState);
  21.   const [dirty, setDirty] = useState<boolean>(false);
  22.  
  23.   const { openWidget } = useCloudinary();
  24.  
  25.   useEffect(() => {
  26.     if (props.activeItem?.id) {
  27.       setFormData({ ...props.activeItem })
  28.     } else {
  29.       setFormData(initialState)
  30.     }
  31.   }, [props.activeItem])
  32.  
  33.   function changeHandler(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
  34.     const value = e.currentTarget.value;
  35.     const name = e.currentTarget.name;
  36.     setFormData(s => ({ ...s, [name]: value }));
  37.     setDirty(true);
  38.   }
  39.  
  40.   function saveHandler(e: FormEvent<HTMLFormElement>) {
  41.     e.preventDefault();
  42.     if (props.activeItem?.id) {
  43.       props.onEdit(formData);
  44.     } else {
  45.       props.onAdd(formData);
  46.     }
  47.   }
  48.  
  49.   function uploadHandler() {
  50.     openWidget()
  51.       .then(res => {
  52.         setFormData(s => ({ ...s, ...res }))
  53.       })
  54.  
  55.   }
  56.  
  57.   const isNameValid = formData.name?.length;
  58.   const isCostValid = formData.cost! > 0;
  59.   const isDescValid = formData.description?.length;
  60.  
  61.   const isValid = isNameValid && isCostValid && isDescValid;
  62.  
  63.   return (
  64.     <div className={clsx(
  65.       'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all overflow-auto',
  66.       {'-right-96': !props.activeItem, 'right-0': props.activeItem}
  67.     )}>
  68.  
  69.       <form onSubmit={saveHandler}>
  70.         <div className="flex justify-around h-16">
  71.           <button
  72.             className="text-white w-1/2 bg-green-500 hover:bg-green-600 disabled:opacity-30"
  73.             disabled={!isValid}
  74.             type="submit"
  75.           >SAVE</button>
  76.           <button
  77.             className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
  78.             onClick={props.onClose}
  79.             type="button"
  80.           >CLOSE</button>
  81.         </div>
  82.  
  83.         {
  84.           formData.img &&
  85.           <img src={formData.img} alt={formData.name} className="w-full" />
  86.         }
  87.  
  88.         <div className="flex flex-col gap-3 mx-3 mt-16">
  89.           Product Name:
  90.           <input
  91.             className={clsx({ 'error': !isNameValid && dirty})}
  92.             type="text" value={formData?.name} name="name" onChange={changeHandler}
  93.           />
  94.  
  95.           Product Cost:
  96.           <input
  97.             className={clsx({ 'error': !isCostValid && dirty})}
  98.             type="number" value={formData?.cost} name="cost" onChange={changeHandler}
  99.           />
  100.  
  101.           Description
  102.           <textarea
  103.             className={clsx({ 'error': !isDescValid && dirty})}
  104.             value={formData.description} name="description" onChange={changeHandler}
  105.           ></textarea>
  106.  
  107.           <button className="btn primary" type="button" onClick={uploadHandler}>
  108.             UPLOAD IMAGE
  109.           </button>
  110.         </div>
  111.       </form>
  112.  
  113.       <pre>{JSON.stringify(formData, null, 2)}</pre>
  114.  
  115.  
  116.     </div>
  117.   )
  118. }
  119.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement