SHOW:
|
|
- or go back to the newest paste.
1 | - | // ====================================================== |
1 | + | |
2 | import clsx from 'clsx'; | |
3 | - | // ====================================================== |
3 | + | import { ChangeEvent, FormEvent, useState } from 'react'; |
4 | import { Product } from '@/model/product'; | |
5 | ||
6 | export interface CMSProductFormProps { | |
7 | activeItem: Partial<Product> | null; | |
8 | onClose: () => void; | |
9 | } | |
10 | ||
11 | const initialState: Partial<Product> = { | |
12 | name: '', cost: 0, description: '' | |
13 | - | export function CMSProductForm( |
13 | + | |
14 | - | props: CMSProductFormProps |
14 | + | |
15 | - | ) { |
15 | + | export function CMSProductForm(props: CMSProductFormProps) { |
16 | const [formData, setFormData] = useState(initialState); | |
17 | ||
18 | function changeHandler(e: ChangeEvent<HTMLInputElement>) { | |
19 | const name = e.currentTarget.value; | |
20 | setFormData(s => ({ ...s, name })) | |
21 | } | |
22 | - | <div className="flex justify-around h-16"> |
22 | + | |
23 | - | <button |
23 | + | function saveHandler(e: FormEvent<HTMLFormElement>) { |
24 | - | className="text-white w-1/2 bg-green-500 hover:bg-green-600" |
24 | + | e.preventDefault(); |
25 | - | onClick={props.onClose} |
25 | + | console.log(formData) |
26 | - | >SAVE</button> |
26 | + | } |
27 | - | <button |
27 | + | |
28 | - | className="text-white w-1/2 bg-slate-500 hover:bg-slate-600" |
28 | + | const isNameValid = formData.name?.length; |
29 | - | onClick={props.onClose} |
29 | + | const isValid = isNameValid; |
30 | - | >CLOSE</button> |
30 | + | |
31 | - | </div> |
31 | + | |
32 | <div className={clsx( | |
33 | 'fixed bg-slate-200 z-10 text-black top-0 w-96 h-full transition-all', | |
34 | {'-right-96': !props.activeItem, 'right-0': props.activeItem} | |
35 | )}> | |
36 | ||
37 | <form onSubmit={saveHandler}> | |
38 | <div className="flex justify-around h-16"> | |
39 | <button | |
40 | className="text-white w-1/2 bg-green-500 hover:bg-green-600 disabled:opacity-30" | |
41 | disabled={!isValid} | |
42 | type="submit" | |
43 | >SAVE</button> | |
44 | - | // ====================================================== |
44 | + | <button |
45 | - | //pages/cms/products/CMSProductsPage.tsx |
45 | + | className="text-white w-1/2 bg-slate-500 hover:bg-slate-600" |
46 | - | // ====================================================== |
46 | + | onClick={props.onClose} |
47 | - | import { useEffect } from 'react'; |
47 | + | type="button" |
48 | - | import { useProductsService } from '@/services/products'; |
48 | + | >CLOSE</button> |
49 | - | import { ServerError, Spinner } from '@/shared/'; |
49 | + | </div> |
50 | - | import { CMSProductForm } from './components/CMSProductForm'; |
50 | + | |
51 | - | import { CMSProductsList } from './components/CMSProductsList'; |
51 | + | <div className="flex flex-col gap-3 mx-3 mt-16"> |
52 | Product Name: | |
53 | - | export function CMSProductsPage() { |
53 | + | <input |
54 | - | const { state, actions } = useProductsService(); |
54 | + | className={clsx({ 'error': !isNameValid})} |
55 | type="text" value={formData?.name} onChange={changeHandler} | |
56 | - | useEffect(() => { |
56 | + | /> |
57 | - | actions.getProducts() |
57 | + | </div> |
58 | - | }, []) |
58 | + | </form> |
59 | ||
60 | {props.activeItem?.name} | |
61 | - | <div> |
61 | + | |
62 | - | <h1 className="title">CMS</h1> |
62 | + | |
63 | ) | |
64 | - | {state.pending && <Spinner />} |
64 | + | |
65 | - | {state.error && <ServerError message={state.error} />} |
65 | + |