Joel/cart

README.md

@@ -19,11 +19,25 @@ Step and Stride is a premier online shoe store built using React, offering a wid
 
 - **Frontend**: Built with React, ensuring a smooth and dynamic user experience.
 - **Styling**: CSS-in-JS for easy and maintainable styling solutions.
-- **Payment Processing**: Integrated secure payment processing for a seamless checkout experience.
-- **Order Tracking**: Real-time order tracking functionality to keep customers informed.
-
-## Contact Us
-
-If you have any questions or need assistance, feel free to reach out to our customer support team at [email protected].
-
-Happy Shoe Shopping at Step and Stride!
+    ## In Progress
+    - **Payment Processing**: Integrated secure payment processing for a seamless checkout experience.
+    - **Order Tracking**: Real-time order tracking functionality to keep customers informed.
+## Getting started
+ - Clone this repository to your local machine.
+ - Run `npm install` to install the necessary dependencies.
+ - Start the development server with `npm start`.
+ - Run json server with `npm run start-server`
+
+## API Endpoints
+ - `POST /users` :Create a new user
+ - `GET /users/:id` :Retrieve a specific user
+ - `GET /sneakers/:id` :Retrieve a specific item
+ - `POST /orders` :Create a new order
+ - `GET /orders/:id` :Retrieve a specific order
+
+## Contributing
+ We welcome contributions from the community to enhance the Step and Stride Shoe Store. If you'd like to contribute, please fork this repository, make your changes, and submit a pull request.
+## License
+ This project is licensed under the MIT License - see the [LICENSE]('./LICENSE') file for details.
+
+    Happy Stepping!

db.json

@@ -11,42 +11,6 @@
       "email": "[email protected]",
       "password": "1234",
       "id": 2
-    },
-    {
-      "name": "leon",
-      "email": "[email protected]",
-      "password": "1234",
-      "id": 3
-    },
-    {
-      "email": "[email protected]",
-      "password": "1234",
-      "id": 4
-    },
-    {
-      "name": "joel",
-      "email": "[email protected]",
-      "password": "maina560",
-      "id": 5
-    },
-    {
-      "name": "joel",
-      "email": "[email protected]",
-      "password": "maina560",
-      "id": 6
-    },
-    {
-      "name": "joel",
-      "email": "[email protected]",
-      "password": "maina560",
-      "id": 7
-    },
-    {
-      "name": "joel",
-      "email": "[email protected]",
-      "password": "maina560",
-      "id": 8
-
     }
   ],
   "sneakers": [

src/App.js

@@ -12,9 +12,10 @@ import Contact from './components/Contact';
 import ShoppingCart from './components/cart';
 import Checkout from './components/Checkout'; 
 import { useCart } from './components/CartContext';
+import OrderTrack from './components/OrderTrack';
 
 function App() {
-  const { cart, addToCart, removeFromCart } = useCart();
+  const { cart,setCart, addToCart, removeFromCart } = useCart();
   useEffect(() => {
     document.title = 'Step & Stride'; 
   }, []);
@@ -27,8 +28,9 @@ function App() {
         <Route path="/login" element={<LoginSignup />} />
         <Route path="/products/:id" element={<ProductDetail />} />
         <Route path="/contact" element={<Contact />} />
-        <Route path="/cart" element={<ShoppingCart cart={cart} addToCart={addToCart} removeFromCart={removeFromCart}/>} />
+        <Route path="/cart" element={<ShoppingCart setCart={setCart} cart={cart} addToCart={addToCart} removeFromCart={removeFromCart}/>} />
         <Route path="/checkout" element={<Checkout />} /> 
+        <Route path="/orders" element={<OrderTrack />} />
       </Routes>
       <Footer />
     </div>

src/components/CartContext.js

@@ -19,7 +19,7 @@ const removeFromCart = (itemId) => {
     setCart((prevCart) => prevCart.filter(item => item.id !== itemId));
 };
   return (
-    <CartContext.Provider value={{ cart, addToCart ,removeFromCart}}>
+    <CartContext.Provider value={{ cart,setCart, addToCart ,removeFromCart}}>
       {children}
     </CartContext.Provider>
   );

src/components/CartItem.js

@@ -1,28 +1,27 @@
-
-import React from 'react';
-export default function CartItem ({item, handleDelete}){
-    return(
-     <div id="cartContainer">
-        <div id="cart1">
-             <div id="cartimage">
-                <img src={item.imageURL}alt={item.name}/>
-                <div id="cartname">
-                    <h3>{item.name}</h3>
-                    <p>
-                        {item.gender}
-                    </p>
-                </div>
-             </div>
-             <p><b>${item.price}</b></p>
-        </div>
-        <div id="cart2">
-            <div></div>
-            <button onClick={() => handleDelete(item.id)}id="btnCart">🗑️Remove</button>
-
-            </div>
-
-            </div>
-    )
-
-
-}
+
+import React from 'react';
+
+export default function CartItem({ item, handleDelete, handleIncrease, handleDecrease }) {
+  return (
+    <div id="cartContainer">
+      <div id="cart1">
+        <div id="cartimage">
+          <img src={item.imageURL} alt={item.name} />
+          <div id="cartname">
+            <h3>{item.name}</h3>
+            <p>{item.gender}</p>
+          </div>
+        </div>
+        <p><b>${item.price}</b></p>
+      </div>
+      <div id="cart2">
+        <div>
+          <button onClick={() => handleDecrease(item.id)} id="btnCart">-</button>
+          <span>{item.quantity}</span>
+          <button onClick={() => handleIncrease(item.id)} id="btnCart">+</button>
+        </div>
+        <button onClick={() => handleDelete(item.id)} id="btnCart">🗑️Remove</button>
+      </div>
+    </div>
+  );
+}

src/components/Checkout.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import { useNavigate} from "react-router-dom"
+import CartItem from './CartItem';
 
 const CheckoutContainer = styled.div`
   padding: 40px;
@@ -46,7 +48,7 @@ const SubmitButton = styled.button`
   }
 `;
 
-function Checkout() {
+function Checkout({emptyCart}) {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [address, setAddress] = useState("");
@@ -75,8 +77,16 @@ function Checkout() {
       console.error("An error occurred", error);
     }
   };
-
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+      navigate(-1);
+    };
+   const handleClick=()=>{
+     emptyCart();
+   } 
   return (
+    <>
+     <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"40px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
     <CheckoutContainer>
 
       <CheckoutForm onSubmit={handleSubmit}>
@@ -150,9 +160,10 @@ function Checkout() {
           </FormField>
         )}
 
-        <SubmitButton type="submit">Place Order</SubmitButton>
+        <SubmitButton type="submit" onClick={handleClick}>Place Order</SubmitButton>
       </CheckoutForm>
     </CheckoutContainer>
+    </>
   );
 }
 

src/components/Contact.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import {useNavigate} from "react-router-dom";
 
 const ContactContainer = styled.div`
   padding: 40px; 
@@ -98,7 +99,10 @@ function Contact() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
-
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+      navigate(-1);
+    };
   const handleSubmit = (event) => {
     event.preventDefault();
 
@@ -112,6 +116,8 @@ function Contact() {
   };
 
   return (
+    <>
+    <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"3px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
     <ContactContainer>
 
       <ContactForm onSubmit={handleSubmit}>
@@ -169,6 +175,7 @@ function Contact() {
         </ContactMethod>
       </ContactMethods>
     </ContactContainer>
+    </>
   );
 }
 

src/components/Navbar.js

@@ -10,7 +10,7 @@ const Nav = styled.nav`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 30px;
+  padding: 20px 30px;
   border-radius: 4px;
 `;
 
@@ -53,25 +53,32 @@ function Navbar({ cartLength }) {
   return (
     <Nav>
       <Logo>
-        <span>Step & Stride</span>
+        <NavLink to="/">Step & Stride</NavLink>
       </Logo>
       <LinksContainer>
         <List>
           <ListItem>
             <NavLink to="/">Home</NavLink>
           </ListItem>
           <ListItem>
-            <NavLink to="/contact">Contact</NavLink>
+          <NavLink to="/orders" >Orders</NavLink>
           </ListItem>
           <ListItem>
-            <NavLink to="/login">Login</NavLink>
+            <NavLink to="/contact">Contact</NavLink>
           </ListItem>
+
+
         </List>
+
       </LinksContainer>
+
+       <NavLink style={{padding:"20px"}} to="/login">Login</NavLink>
+
       <NavLink to="/cart" className="length">
         <CartIcon id="ca" icon={faShoppingCart} size="lg" />
         <p id="count">{cartLength}</p>
       </NavLink>
+
     </Nav>
   );
 }

src/components/OrderTrack.js

@@ -1,9 +1,12 @@
 import React, { useState } from "react";
-
+import {useNavigate} from "react-router-dom";
 export default function OrderTrack() {
     const [orderId, setOrderId] = useState("");
     const [order, setOrder] = useState({});
-
+    const navigate = useNavigate();
+    const handleGoBack = () => {
+      navigate(-1);
+    };
     function searchOrder() {
         fetch(`http://localhost:3030/orders/${orderId}`)
             .then(resp => resp.json())
@@ -13,7 +16,10 @@ export default function OrderTrack() {
     const status = ["Follow your Order", "We've got it", "On its way", "With your courier", "Delivered"];
 
     return (
+        <>
+              <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"40px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
         <div id="track">
+
             <h4>Search Order</h4>
             <input className="filter"
                 type="text"
@@ -43,5 +49,7 @@ export default function OrderTrack() {
 
             </div>
         </div>
+
+        </>
     );
 }

src/components/cart.css

@@ -46,7 +46,6 @@ align-items: center;
     border-radius: 4px;
   }
 .shopping-cart{
-
     width: 70%;
     padding-left:30px;
     margin-left: 10%;
@@ -70,29 +69,24 @@ align-items: center;
 
 }
 
-
 #cartimage{
     display: flex;
     justify-content: flex-end;
 }
-
 #cartimage img{
     width: 100px;
 
 }
-
 #cart img{
     display: flex;
     flex-direction: column;
 }
-
 #list{
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-
 #cartItem{
     /* border: 1px solid black; */
     display: flex;
@@ -116,4 +110,3 @@ align-items: center;
     border-radius: 4px;
     padding: 5px;
 }
-