Sort by name and price features, 404 page and About page completed

Author: philipjpark

client/src/App.js

@@ -1,11 +1,11 @@
 import './App.css';
 import React, { useState, useEffect } from 'react';
 import { useRoutes } from 'react-router-dom'
-// import { Link } from 'react-router-dom'
 import ReadSneakers from './pages/ReadSneakers'
 import SneakerDetails from './pages/SneakerDetails'
 import CreateComment from './pages/CreateComment'
 import About from './pages/About'
+import PageNotFound from './pages/PageNotFound'
 
 
 const App = () => {
@@ -39,20 +39,17 @@ const App = () => {
     {
       path:"/about",
       element: <About />
+    },
+    {
+      path:"/*",
+      element: <PageNotFound />
     }
   ]);
 
 
   return ( 
 
     <div className="App">
-
-      {/* <div className="header">
-        <h1>👟 Sneaker World</h1>
-        <Link to="/"><button className="headerBtn">Sneakers</button></Link>
-        <Link to="/order"><button className="headerBtn">Order</button></Link>
-      </div> */}
-
         {element}
     </div>
 

client/src/assets/sneaker.jpg

@@ -8,13 +8,9 @@
     margin-bottom: 15px;
     width:550px;
     height: 500px;
-    /* background-size: cover; 
-    background-position: 50% 50%; */
-    background-size: 45%;
-    background-repeat: no-repeat; 
-    background-position: center; 
+    background-size: cover; 
+    background-position: 50% 50%;
     text-align: center;
-    /* background-color: #DEE5ED; */
     background-blend-mode: multiply;
     color:#1A202C;
     font-size: 15px;

client/src/components/SneakersCard.css

@@ -1,28 +1,3 @@
-.About {
-    /* background-color: #fbfaf6; */
-    color: #242f37;
-    padding: 20px;
-    overflow: hidden; 
-    margin: 0 20px;
-  } 
-  
-  .AboutText {
-    margin-left: 25px; 
-    margin-top: 20px; 
-  }
-
-  .float-right {
-    float: right;
-    margin-left: 20px;
-    margin-top: 155px; 
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
-    width: 3px;
-    height: 3px;
-  }
-
-  .image-container {
-    background-position: cover;
-    width: 3px;
-    height: 3px;
-
-  }
+.About .About-paragraph {
+  color: #486284;
+}

client/src/pages/About.css

@@ -1,32 +1,24 @@
 import React from 'react'
 import './About.css'
-// import { Link } from 'react-router-dom'
 
 const About = () =>  {
 
-  const sneaker = 'https://static.nike.com/a/images/t_default/c2643901-9e8c-41b5-b17d-36802f3102e9/dunk-low-retro-mens-shoes-M0t9Sv.png';
+  const sneaker = 'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/9f5d3ab4-98b4-44fe-9823-3b409603b520/dunk-low-retro-mens-shoes-M0t9Sv.png';
 
   return (
-      <div>
-
-        <div className="float-right">
-            <div className="image-container">
-            <img src={ sneaker } alt="sneaker" style={{ width: "100%", height: "auto" }} /> 
-            </div>
-        </div>
-
-     <div className="About">
-        <div className="AboutText">
-          <p>We are beyond e-commerce: we are a labor of love.</p>
-          <h2>Welcome to Sneaker World!</h2>
-          <p>Sneaker World is  where sneaker culture and innovation come together. <br />
-          We're not just an online store;  <br />
+    <div className="About">
+    <div className="flex-container">
+      <div className="left-side">
+        <h2>👋 Welcome to <br /> Sneaker World!</h2>
+        <p className="About-paragraph">Sneaker World is  where sneaker culture and innovation come together. <br />
+          We're not just an online store:  
           we're your gateway to exclusive collaborations, curated collections, and a thriving sneaker community.</p>
-        </div>
-    </div>  
-
+      </div>
+      <div className="right-side" style={{ backgroundImage: `url(${sneaker})`, backgroundSize: "cover", backgroundPosition: "center" }}>
+      </div>
     </div>
+  </div>
   );
 };
 
-export default About;
+export default About;

client/src/pages/About.js

@@ -0,0 +1,25 @@
+.fof-container{
+    display: table;
+    width: 100%;
+    height: 60vh;
+    text-align: center;
+    color: #1A202C;
+}
+
+.fof{
+	  display: table-cell;
+	  vertical-align: middle;
+}
+
+.fof h1{
+    color:#1A202C;
+    font-size: 50px;
+    display: inline-block;
+    padding-right: 12px;
+    animation: type .6s alternate infinite;
+}
+
+@keyframes type{
+	  from{box-shadow: inset -3px 0px 0px #888;}
+	  to{box-shadow: inset -3px 0px 0px transparent;}
+}

client/src/pages/PageNotFound.css

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import './PageNotFound.css'
+
+const PageNotFound = () => { 
+    return (
+        <div className="PageNotFound">
+            <main className="fof-container">
+                <div class="fof">
+                    <h1>😮 404</h1> <br /> <br />
+                    <h6>Page Not Found</h6>  <br /> <br />
+
+                    <Link to="/"><button>Go To Sneakers</button></Link>
+
+                </div>
+            </main>
+        </div>
+    )
+}
+
+export default PageNotFound

client/src/pages/PageNotFound.js

@@ -10,6 +10,22 @@
     text-align: center;
 }
 
+.Sort {
+    display: flex;
+    align-items: center;
+  }
+  
+  .Sort p {
+    margin-right: 20px; 
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .Sort button {
+    margin-right: 20px; 
+  }
+
+
 .welcome-paragraph {
     margin-top: 20px;
     color: #486284;

client/src/pages/ReadSneakers.css

@@ -6,20 +6,62 @@ import './ReadSneakers.css';
 const ReadSneakers = (props) => {
 
     const [posts, setPosts] = useState([]);
-    
+    const [brandSortOrder, setBrandSortOrder] = useState('descending');
+    const [priceSortOrder, setPriceSortOrder] = useState('descending');
 
     useEffect(() => {
         setPosts(props.data);
     }, [props]);
 
+    
+    const handleBrandSort = () => {
+        const sortedSneakers = [...posts].sort((a, b) => {
+            if (brandSortOrder === 'ascending') {
+                return a.brand_name.localeCompare(b.brand_name);
+            } else {
+                return b.brand_name.localeCompare(a.brand_name);
+            }
+        });
+        setPosts([...sortedSneakers]);
+
+        setBrandSortOrder(brandSortOrder === 'descending' ? 'ascending' : 'descending');
+    };
+
+    const handlePriceSort = () => {
+        const sortedSneakers = [...posts].sort((a, b) => {
+            const priceA = parseFloat(a.price.replace('$', ''));
+            const priceB = parseFloat(b.price.replace('$', ''));
+
+            if (priceSortOrder === 'ascending') {
+                return priceA - priceB;
+            } else {
+                return priceB - priceA;
+            }
+        });
+        setPosts([...sortedSneakers]);
+
+        setPriceSortOrder(priceSortOrder === 'descending' ? 'ascending' : 'descending');
+    };
+
     return (
         <div>
 
         <div className="ReadSneakers">
-        <div className="banner">
-        <h3>Your Sneaker Journey</h3>
-        <p className="welcome-paragraph">Thank you for joining us on this exciting journey through sneaker culture, fashion, and innovation. <br /> We invite you to explore, discover, and be inspired as we continue to fuel our passion and yours.</p>
-        </div>
+            <div className="banner">
+            <h3>Your Sneaker Journey</h3>
+            <p className="welcome-paragraph">Thank you for joining us on this exciting journey through sneaker culture, fashion, and innovation. <br /> We invite you to explore, discover, and be inspired as we continue to fuel our passion and yours.</p>
+        </div><br /> 
+
+        <div className="Sort">
+                <p>Sort By:</p>
+                <button onClick={handleBrandSort}>
+                    Brand ({brandSortOrder === 'ascending' ? ' A-Z' : ' Z-A'})
+                </button> <br /><br />
+
+                <button onClick={handlePriceSort}>
+                    Price ({priceSortOrder === 'ascending' ? ' Low-High' : ' High-Low'})
+                </button>
+            </div>
 
             {
                 posts && posts.length > 0 ?