View difference between Paste ID: P07CLKFF and cdV8caTw

-// pages/cms/products/CMSProductsPage.tsx
+// pages/cms/products/components/CMSProductForm.tsx
-import { useEffect } from 'react';
+import clsx from 'clsx';
-import { useProductsService } from '@/services/products';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
-import { ServerError, Spinner } from '@/shared/';
+import { Product } from '@/model/product';
-import { CMSProductForm } from './components/CMSProductForm';
+
-import { CMSProductsList } from './components/CMSProductsList';
+export interface CMSProductFormProps {
   activeItem: Partial<Product> | null;
-export function CMSProductsPage() {
+  onClose: () => void;
-  const { state, actions } = useProductsService();
+  onAdd: (product: Partial<Product>) => void;
   onEdit: (product: Partial<Product>) => void;
 }
-    actions.getProducts()
+
-  }, [])
+const initialState: Partial<Product> = {
   name: '', cost: 0, description: ''
 }
-    <div>
+
-      <h1 className="title">CMS</h1>
+export function CMSProductForm(props: CMSProductFormProps) {
   const [formData, setFormData] = useState(initialState);
-      {state.pending && <Spinner />}
+
-      {state.error && <ServerError message={state.error} />}
+
     if (props.activeItem?.id) {
-      <CMSProductForm
+      setFormData({ ...props.activeItem })
-        activeItem={state.activeItem}
+    } else {
-        onClose={actions.resetActiveItem}
+      setFormData(initialState)
-        onAdd={actions.addProduct}
+    }
-        onEdit={actions.editProduct}
+  }, [props.activeItem])
-      />
+
   function changeHandler(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-      <CMSProductsList
+    const value = e.currentTarget.value;
-        items={state.products}
+    const name = e.currentTarget.name;
-        activeItem={state.activeItem}
+    setFormData(s => ({ ...s, [name]: value }))
-        onEditItem={actions.setActiveItem}
+  }
-        onDeleteItem={actions.deleteProduct}
+
-      />
+  function saveHandler(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
-      <button
+    if (props.activeItem?.id) {
-        className="btn primary"
+      props.onEdit(formData);
-        onClick={() => actions.setActiveItem({})}
+    } else {
-      >
+      props.onAdd(formData);
-        ADD NEW
+    }
-      </button>
+  }
 
   const isNameValid = formData.name?.length;
   const isCostValid = formData.cost! > 0;
   const isDescValid = formData.description?.length;
 
   const isValid = isNameValid && isCostValid && isDescValid;
 
   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} name="name" onChange={changeHandler}
           />
 
           Product Cost:
           <input
             className={clsx({ 'error': !isCostValid})}
             type="number" value={formData?.cost} name="cost" onChange={changeHandler}
           />
 
           Description
           <textarea
             className={clsx({ 'error': !isDescValid})}
             value={formData.description} name="description" onChange={changeHandler}
           ></textarea>
 
         </div>
       </form>
 
 
     </div>
   )
 }