Skip to content

Commit

Permalink
Added the ability to add socks to the database
Browse files Browse the repository at this point in the history
  • Loading branch information
@IGuy37
IGuy37 committed Jun 28, 2024
1 parent 9935578 commit 6ce2945
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 27 deletions.
20 changes: 6 additions & 14 deletions react-client/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react'
import promo_data from "./assets/promo.json";
import Promotion from "./components/Promotion";
import Footer from "./components/Footer";
import Search from "./components/Search";
import Home from "./components/Home";
import About from "./components/About";
import Featured from "./components/Featured"
import Featured from "./components/Featured";
import AddSock from "./components/AddSock";

import {
BrowserRouter as Router,
Expand Down Expand Up @@ -71,19 +71,10 @@ export default function App() {
About
</Link>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul className="dropdown-menu">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><hr className="dropdown-divider" /></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li className="nav-item">
<a className="nav-link disabled" aria-disabled="true">Disabled</a>
<Link className='nav-link' to="/add-sock">
Add a Sock
</Link>
</li>
</ul>
<Search setData = {setData}/>
Expand All @@ -99,6 +90,7 @@ export default function App() {
<Routes>
<Route exact path="/" element={<Home data={data} handleDelete={handleDelete} /> }/>
<Route path="/about" element={<About/>}/>
<Route path="/add-sock" element={<AddSock setData={setData}/>}/>
</Routes>

<Footer environment={import.meta.env.VITE_ENVIRONMENT}/>
Expand Down
71 changes: 58 additions & 13 deletions react-client/src/components/AddSock.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,71 @@
import Reacrt, {useState} from 'react'
import React, {useState} from 'react'

export default function AddSock(props){

const [sock, setSock] = useState({});
const defaultSock = {
sockDetails: {
size: "Small",
color: "Blue",
pattern: "Striped",
material: "Wool",
condition: "Used",
forFoot: "Left"
},
additionalFeatures: {
waterResistant: false,
padded: false,
antiBacterial: false
}
}
const [sock, setSock] = useState(defaultSock);

const handleSubmit = (e) => {
e.preventDefault();
if(!sock.userId){
alert("Please provide a user ID and try again.");
return;
}
sock.addedTimestamp = new Date().toLocaleString("en-US");
setSock(sock);
fetch(`${import.meta.env.VITE_SOCKS_API_URL}`, {
method: "POST",
body: JSON.stringify(sock),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data) => {
// Handle the response data
props.setData(data);
console.log(data);
.then((response) => {
console.log(response);
alert("Sock submitted succesfully!");
})
.catch((error) => {
// Handle any errors
console.error(error);
});e.preventDefault();
console.log('ock submitted');
});

};

const handleChange = (e) => {
//setSock(e.target.value);
console.log(e);
const field = e.target.name;

const val = e.target.value;
if(field === "userId"){
sock[field] = val;
} else {
sock.sockDetails[field] = val;
}

setSock(sock);
console.log(sock);
};

const handleCheck = (e) => {
const field = e.target.name;
const isChecked = e.target.checked;
sock.additionalFeatures[field] =isChecked;
setSock(sock);
console.log(sock);
}

return(
<form className="p-3" onSubmit={handleSubmit}>
<div className="form-group">
Expand All @@ -40,6 +75,7 @@ export default function AddSock(props){
className="form-control"
id="userId"
name="userId"
onChange = {handleChange}
/>
</div>
<div className="form-group">
Expand All @@ -48,6 +84,7 @@ export default function AddSock(props){
className="form-control"
id="size"
name="size"
onChange={handleChange}
>
<option>Small</option>
<option>Medium</option>
Expand All @@ -61,6 +98,7 @@ export default function AddSock(props){
className="form-control"
id="color"
name="color"
onChange={handleChange}
/>
</div>
<div className="form-group">
Expand All @@ -70,6 +108,7 @@ export default function AddSock(props){
className="form-control"
id="pattern"
name="pattern"
onChange = {handleChange}
/>
</div>
<div className="form-group">
Expand All @@ -79,6 +118,7 @@ export default function AddSock(props){
className="form-control"
id="material"
name="material"
onChange={handleChange}
/>
</div>
<div className="form-group">
Expand All @@ -87,6 +127,7 @@ export default function AddSock(props){
className="form-control"
id="condition"
name="condition"
onChange={handleChange}
>
<option>Used</option>
<option>New</option>
Expand All @@ -98,6 +139,7 @@ export default function AddSock(props){
className="form-control"
id="forFoot"
name="forFoot"
onChange={handleChange}
>
<option>Left</option>
<option>Right</option>
Expand All @@ -111,6 +153,7 @@ export default function AddSock(props){
type="checkbox"
id="waterResistant"
name="waterResistant"
onChange={handleCheck}
/>
<label className="form-check-label" htmlFor="waterResistant">
Water Resistant
Expand All @@ -122,6 +165,7 @@ export default function AddSock(props){
type="checkbox"
id="padded"
name="padded"
onChange={handleCheck}
/>
<label className="form-check-label" htmlFor="padded">
Padded
Expand All @@ -133,13 +177,14 @@ export default function AddSock(props){
type="checkbox"
id="antiBacterial"
name="antiBacterial"
onChange={handleCheck}
/>
<label className="form-check-label" htmlFor="antiBacterial">
Anti Bacterial
</label>
</div>
</div>
<button type="submit" className="btn btn-primary">
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>
Submit
</button>
</form>
Expand Down

0 comments on commit 6ce2945

Please sign in to comment.