Fixed 404 reloading router error

Aayush259 · Jul 20, 2024 · a6db5f2 · a6db5f2
1 parent 6b16e01
commit a6db5f2
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,21 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sound Sphere</title>
+
+    <script type="text/javascript">
+      (function (l) {
+        if (l.search[1] === "/") {
+          var decoded = l.search
+            .slice(1)
+            .split("&")
+            .map(function (s) {
+              return s.replace(/~and~/g, "&");
+            })
+            .join("?");
+          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+        }
+      })(window.location);
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <title>Sound Sphere</title>
+    <script type="text/javascript">
+      var pathSegmentsToKeep = 1;
+
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          "//" +
+          l.hostname +
+          (l.port ? ":" + l.port : "") +
+          l.pathname
+            .split("/")
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join("/") +
+          "/?/" +
+          l.pathname.slice(1).split("/").slice(pathSegmentsToKeep).join("/").replace(/&/g, "~and~") +
+          (l.search ? "&" + l.search.slice(1).replace(/&/g, "~and~") : "") +
+          l.hash
+      );
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,9 +16,6 @@ export default function App() {
   // State for product data.
   const [productData, setProductData] = useState([]);
 
-  // State for user cart.
-  const [cartItems, setCartItems] = useState([]);
-
   useEffect(() => {
 
     fetch('./data.json')

diff --git a/src/components/cart/Cart.jsx b/src/components/cart/Cart.jsx
@@ -16,7 +16,9 @@ export default function Cart() {
                         You haven't added anything in the cart yet.
                     </p>
                 ) : (
-                    <div>
+                    <div
+                        className="md:flex-row flex items-start justify-between px-5"
+                    >
                         <div className="flex flex-col gap-4 my-8">
                             {
                                 cartItems.map(item => (
@@ -25,7 +27,7 @@ export default function Cart() {
                             }
                         </div>
 
-                        <div>
+                        <div className="flex-grow max-w-[40vw]">
                             <PlaceOrderWindow />
                         </div>
                     </div>

diff --git a/src/components/cart/CartItem.jsx b/src/components/cart/CartItem.jsx
@@ -29,7 +29,7 @@ export default function CartItem({ item }) {
     const inWishlist = isItemInWishlist(itemName);
 
     return (
-        <div className="shadow-product-card-shadow overflow-hidden max-w-[90vw] m-auto rounded-2xl flex flex-row items-center justify-center gap-4 py-4 px-3">
+        <div className="shadow-product-card-shadow overflow-hidden max-w-[90vw] m-auto rounded-2xl flex flex-row items-center justify-center gap-4 py-4 px-3 flex-grow">
             <img src={itemImage} alt={itemName} className="w-24 md:w-32 max-h-full" />
 
             <div className="text-sm md:text-xl">