Skip to content

Commit b772883

Browse files
philipjparkphilipjpark
committed
Created EditSneaker and CreateSneaker pages
1 parent d3e74c5 commit b772883

File tree

13 files changed

+324
-3
lines changed

13 files changed

+324
-3
lines changed

‎client/src/App.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import SneakerDetails from './pages/SneakerDetails'
66
import CreateComment from './pages/CreateComment'
77
import About from './pages/About'
88
import PageNotFound from './pages/PageNotFound'
9+
import CreateSneaker from './pages/CreateSneaker'
10+
import EditSneaker from './pages/EditSneaker'
911

1012

1113
const App = () => {
@@ -40,6 +42,14 @@ const App = () => {
4042
path:"/about",
4143
element: <About />
4244
},
45+
{
46+
path: '/new',
47+
element: <CreateSneaker />
48+
},
49+
{
50+
path: '/edit/:id',
51+
element: <EditSneaker data={sneakers} />
52+
},
4353
{
4454
path:"/*",
4555
element: <PageNotFound />

‎client/src/assets/more.png

13.6 KB
Loading

‎client/src/components/NavBar.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ function NavBar(){
1616
<Link to="/about">🔍 About</Link>
1717
<Link to="/">👟 Sneakers</Link>
1818
<Link to="/order">🗒️ Order </Link>
19+
<Link to="/new">➕ Add Sneaker </Link>
1920
</nav>
2021
</header>
2122

‎client/src/components/SneakersCard.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@
2323
position: relative;
2424
}
2525

26+
.more img{
27+
float: right;
28+
max-height: 40px;
29+
margin-top: 5px;
30+
margin-right: 10px;
31+
}
32+
33+
2634
.SneakersCard-info {
2735
padding-top: 0px;
2836
width: 100%;

‎client/src/components/SneakersCard.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import React from 'react'
22
import './SneakersCard.css'
33
import { Link } from 'react-router-dom'
4+
import more from '../assets/more.png'
45

56

67
const SneakersCard = (props) => {
78

9+
10+
811
return (
912
<div className="SneakersCard" style={{ backgroundImage:`url(${props.image_url})`}} >
13+
{/* <div className="top-container">
14+
<Link to={'/edit/' + props.id}> <img src={ more } alt="edit"/></Link>
15+
</div> */}
1016
<div className="SneakersCard-info">
1117
<h3 className="brand_name">{props.brand_name}</h3>
18+
<Link className="more" to={'/edit/' + props.id}> <img src={ more } alt="edit"/></Link>
19+
1220
{/* <p className="description">{props.description}</p> */}
1321
{/* <p className="sizes">{props.sizes}</p> */}
1422

‎client/src/pages/CreateSneaker.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.CreateSneaker {
2+
margin-left: 200px;
3+
margin-right:200px;
4+
5+
}
6+
7+
.AddSneaker {
8+
margin-top: 100px;
9+
margin-bottom: 50px;
10+
}
11+
12+
input {
13+
margin-top: 10px;
14+
width: 100%;
15+
height: 45px;
16+
border-radius: 8px;
17+
border: 1px solid ;
18+
font-size: 14px;
19+
padding-left: 10px;
20+
}
21+
22+
label {
23+
font-size: 18px;
24+
}
25+
26+
textarea {
27+
border-radius: 8px;
28+
width: 100%;
29+
border: 1px solid ;
30+
font-size: 14px;
31+
}
32+
33+
input[type=submit] {
34+
width: 100%;
35+
height: 50px;
36+
cursor: pointer;
37+
border-radius: 8px;
38+
border: 1px solid transparent;
39+
font-size: 20px;
40+
font-weight: 500;
41+
font-family: inherit;
42+
background-color: #0b3653;
43+
color:white;
44+
cursor: pointer;
45+
transition: border-color 0.25s;
46+
margin-top: 20px;
47+
margin-bottom: 50px;
48+
}
49+

‎client/src/pages/CreateSneaker.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { useState } from 'react'
2+
import './CreateSneaker.css'
3+
4+
const CreateSneaker = () => {
5+
6+
const [sneaker, setSneaker] = useState({
7+
id: 0, name: '',
8+
brand: '',
9+
description: '',
10+
price: '',
11+
size: '',
12+
color: '',
13+
stock_quantity: '',
14+
category: '',
15+
target_audience: ''
16+
// image_urls:
17+
})
18+
19+
const handleChange = (event) => {
20+
const { name, value } = event.target
21+
22+
setSneaker( (prev) => {
23+
return {
24+
...prev,
25+
[name]:value,
26+
}
27+
})
28+
}
29+
30+
const createSneaker = async (event) => {
31+
event.preventDefault()
32+
33+
const options = {
34+
method: 'POST',
35+
headers: {
36+
'Content-Type': 'application/json'
37+
},
38+
body: JSON.stringify(sneaker),
39+
};
40+
41+
await fetch('/api/sneakers/', options)
42+
window.location = '/'
43+
44+
}
45+
46+
47+
return (
48+
<div className='CreateSneaker'>
49+
<center><h4 className="AddSneaker">➕ Add a Sneaker</h4></center>
50+
<form>
51+
<label>Name</label> <br />
52+
<input type='text' id='name' name='name' value={sneaker.name} onChange={handleChange} /><br />
53+
<br/>
54+
55+
<label>Brand</label> <br />
56+
<input type='text' id='brand' name='brand' value={sneaker.brand} onChange={handleChange} /><br />
57+
<br/>
58+
59+
<label>Description</label><br />
60+
<textarea rows='5' cols='50' id='description' name='description' value={sneaker.description} onChange={handleChange} ></textarea>
61+
<br/>
62+
63+
<label>Price</label><br />
64+
<input type='text' id='price' name='price' value={sneaker.price} onChange={handleChange} /><br />
65+
<br/>
66+
67+
<label>Size</label><br />
68+
<input type='text' id='size' name='size' value={sneaker.size} onChange={handleChange} /><br />
69+
<br/>
70+
71+
<label>Color</label><br />
72+
<input type='text' id='color' name='color' value={sneaker.color} onChange={handleChange} /><br />
73+
<br/>
74+
75+
<label>Stock Quantity</label><br />
76+
<input type='text' id='stock_quantity' name='stock_quantity' value={sneaker.stock_quantity} onChange={handleChange} /><br />
77+
<br/>
78+
79+
<label>Category</label><br />
80+
<input type='text' id='category' name='category' value={sneaker.category} onChange={handleChange} /><br />
81+
<br/>
82+
83+
<label>Target Audience</label><br />
84+
<input type='text' id='target_audience' name='target_audience' value={sneaker.target_audience} onChange={handleChange} /><br />
85+
<br/>
86+
87+
{/* <label>Image URL</label><br />
88+
<input type='text' id='image_urls' name='image_urls' value={sneaker.image_urls} onChange={handleChange} /> */}
89+
<br/>
90+
91+
<input type='submit' value='Submit' onClick={createSneaker} />
92+
</form>
93+
</div>
94+
)
95+
}
96+
97+
export default CreateSneaker

‎client/src/pages/EditSneaker.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.EditSneaker {
2+
margin-left: 200px;
3+
margin-right:200px;
4+
5+
}
6+
7+
.AddEdit {
8+
margin-top: 100px;
9+
margin-bottom: 50px;
10+
}
11+
12+
.deleteButton {
13+
width: 100%;
14+
height: 50px;
15+
cursor: pointer;
16+
border-radius: 8px;
17+
border: 1px solid transparent;
18+
font-size: 20px;
19+
font-weight: 500;
20+
font-family: inherit;
21+
background-color: #a83434;
22+
color:white;
23+
cursor: pointer;
24+
margin-bottom: 50px;
25+
}

‎client/src/pages/EditSneaker.js

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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

‎client/src/pages/PageNotFound.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const PageNotFound = () => {
66
return (
77
<div className="PageNotFound">
88
<main className="fof-container">
9-
<div class="fof">
9+
<div className="fof">
1010
<h1>😮 404</h1> <br /> <br />
1111
<h6>Page Not Found</h6> <br /> <br />
1212

0 commit comments

Comments
 (0)