1+ import { useState , useEffect } from 'react'
2+ import { useParams } from 'react-router-dom'
3+ import './EditSneaker.css'
4+
5+ const EditSneaker = ( ) => {
6+
7+ const { id } = useParams ( )
8+ const [ sneaker , setSneaker ] = useState ( {
9+ id : 0 , name : '' ,
10+ brand : '' ,
11+ description : '' ,
12+ price : '' ,
13+ size : '' ,
14+ color : '' ,
15+ stock_quantity : '' ,
16+ category : '' ,
17+ target_audience : ''
18+ // image_urls:
19+ } )
20+
21+ useEffect ( ( ) => {
22+ const fetchSneakerById = async ( ) => {
23+ const response = await fetch ( '/api/sneakers/' + id )
24+ const data = await response . json ( )
25+ setSneaker ( data )
26+ }
27+
28+ fetchSneakerById ( )
29+ } , [ id ] )
30+
31+ const handleChange = ( event ) => {
32+ const { name, value } = event . target
33+
34+ setSneaker ( ( prev ) => {
35+ return {
36+ ...prev ,
37+ [ name ] :value ,
38+ }
39+ } )
40+ }
41+
42+ const updateSneaker = ( event ) => {
43+ event . preventDefault ( )
44+
45+ const options = {
46+ method : 'PATCH' ,
47+ headers : {
48+ 'Content-Type' : 'application/json'
49+ } ,
50+ body : JSON . stringify ( sneaker ) ,
51+ }
52+
53+ fetch ( `/api/sneakers/${ id } , options )
54+ window . location = '/'
55+ }
56+
57+
58+ const deleteSneaker = ( event ) => {
59+ event . preventDefault ( )
60+
61+ const options = {
62+ method : 'DELETE'
63+ }
64+
65+ fetch ( `/api/sneakers/${ id } , options )
66+ window . location = '/'
67+ }
68+
69+ return (
70+ < div className = 'EditSneaker' >
71+ < center > < h4 className = "AddEdit" > ✏️ Edit Sneaker</ h4 > </ center >
72+ < form >
73+ < label > Name</ label > < br />
74+ < input type = 'text' id = 'name' name = 'name' value = { sneaker . name } onChange = { handleChange } /> < br />
75+ < br />
76+
77+ < label > Brand</ label > < br />
78+ < input type = 'text' id = 'brand' name = 'brand' value = { sneaker . brand } onChange = { handleChange } /> < br />
79+ < br />
80+
81+ < label > Description</ label > < br />
82+ < textarea rows = '5' cols = '50' id = 'description' name = 'description' value = { sneaker . description } onChange = { handleChange } > </ textarea >
83+ < br />
84+
85+ < label > Price</ label > < br />
86+ < input type = 'text' id = 'price' name = 'price' value = { sneaker . price } onChange = { handleChange } /> < br />
87+ < br />
88+
89+ < label > Size</ label > < br />
90+ < input type = 'text' id = 'size' name = 'size' value = { sneaker . size } onChange = { handleChange } /> < br />
91+ < br />
92+
93+ < label > Color</ label > < br />
94+ < input type = 'text' id = 'color' name = 'color' value = { sneaker . color } onChange = { handleChange } /> < br />
95+ < br />
96+
97+ < label > Stock Quantity</ label > < br />
98+ < input type = 'text' id = 'stock_quantity' name = 'stockquantity' value = { sneaker . stock_quantity } onChange = { handleChange } /> < br />
99+ < br />
100+
101+ < label > Category</ label > < br />
102+ < input type = 'text' id = 'category' name = 'category' value = { sneaker . category } onChange = { handleChange } /> < br />
103+ < br />
104+
105+ < label > Target Audience</ label > < br />
106+ < input type = 'text' id = 'target_audience' name = 'target_audience' value = { sneaker . target_audience } onChange = { handleChange } /> < br />
107+ < br />
108+
109+ { /* <label>Image URL</label><br />
110+ <input type='text' id='image_urls' name='image_urls' value={sneaker.image_urls} onChange={handleChange} /> */ }
111+ < br />
112+
113+ < input className = 'submitButton' type = 'submit' value = 'Edit' onClick = { updateSneaker } />
114+ < button className = 'deleteButton' onClick = { deleteSneaker } > Delete</ button >
115+ </ form >
116+ </ div >
117+ )
118+ }
119+
120+ export default EditSneaker
0 commit comments