From 4ea87123a618cff0a2e79e0292412a1ce9f8c156 Mon Sep 17 00:00:00 2001
From: Rachit Sahu <129506267+RachitSahu26@users.noreply.github.com>
Date: Tue, 29 Oct 2024 22:19:43 +0530
Subject: [PATCH] feat: add redirect to homepage for invalid URLs (#381)

* Add redirect functionality to homepage for invalid URLs

* increased time of the redirect to home when
---
 frontend/package-lock.json      | 50 +++++++++++++++++++++++++++++++++
 frontend/src/App.jsx            |  7 ++---
 frontend/src/Pages/NotFound.jsx | 39 +++++++++++++++++++------
 3 files changed, 84 insertions(+), 12 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b8dea0a9..499c43ce 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,9 +16,11 @@
         "axios": "^1.6.3",
         "install": "^0.13.0",
         "jwt-decode": "^4.0.0",
+        "lucide-react": "^0.453.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.3.0",
+        "react-responsive": "^10.0.0",
         "react-router-dom": "^6.26.2",
         "react-toastify": "^9.1.3"
       },
@@ -3522,6 +3524,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4649,6 +4656,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="
+    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -5453,6 +5465,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -5462,6 +5482,14 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
+      "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6150,6 +6178,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz",
+      "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.4.2",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.26.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
@@ -6544,6 +6589,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a75aacdd..efd06a3b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-unused-vars
 import React from "react";
 import { useState, useEffect } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 import "./App.css";
 import Navbar from "./Components/Navbar.jsx";
 import ScrollToTop from "./Components/Scrolltotop.jsx";
@@ -85,10 +85,9 @@ function App() {
           <Route path="/recipe/:id" element={<OneRecipe />} />
           <Route path="/contributors" element={<Contributors />} />
           <Route path="/recipe-suggestions" element={<RecipeSuggestions />} />
-          <Route path="*" element={<NotFound />} />
-          {/* Add Contributors route */}
+          {/* Redirect all unknown routes to home */}
+          <Route path="*" element={<NotFound/>} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
-          {/* Added Privacy-policy route */}
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/frontend/src/Pages/NotFound.jsx b/frontend/src/Pages/NotFound.jsx
index 37d216cd..9510b5e9 100644
--- a/frontend/src/Pages/NotFound.jsx
+++ b/frontend/src/Pages/NotFound.jsx
@@ -1,8 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
 import food from "../assets/Images/food404.png";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const NotFound = () => {
+  const navigate = useNavigate(); // Hook to access the navigation function
+
+  const handleGoBack = () => {
+    navigate(-3); // Go back 3 steps in history
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      navigate("/"); // Redirect to homepage after 5 seconds
+    }, 3000); // 5000 ms = 5 seconds
+  
+    return () => clearTimeout(timeout); // Cleanup to prevent memory leaks
+  }, [navigate]);
+
   return (
     <div className="h-screen w-screen flex items-stretch">
       <div className="container flex flex-col items-center justify-center px-5 text-gray-700">
@@ -12,9 +26,8 @@ const NotFound = () => {
             <p className="text-2xl mt-8 mb-8 md:text-3xl font-[Merriweather] font-light leading-normal">
               Sorry! <br /> we couldn't find this page.
             </p>
-
             <p className="mt-8 mb-8 hidden md:block">
-              But don't worry, you can find plenty of other things on our homepage.
+              But don't worry, you'll be redirected to the homepage shortly.
             </p>
             <Link
               to="/"
@@ -22,6 +35,12 @@ const NotFound = () => {
             >
               Back To Homepage
             </Link>
+            <button
+              onClick={handleGoBack}
+              className="inline-flex items-center hidden md:inline ml-4 bg-gray-300 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-black transition-all"
+            >
+              Go Back
+            </button>
           </div>
 
           <div className="md:ml-8">
@@ -32,18 +51,22 @@ const NotFound = () => {
         {/* Text and Button for smaller screens, displayed below the image */}
         <div className="mt-8 text-center md:hidden">
           <p className="mt-8 mb-8">
-            But don't worry, you can find plenty of other things on our homepage.
+            But don't worry, you'll be redirected to the homepage shortly.
           </p>
-         <Link
+          <Link
             to="/"
             className="inline-flex items-center bg-red-700 border-0 py-1 px-3 focus:outline-none hover:bg-red-500 rounded text-white transition-all"
           >
             Back To Homepage
           </Link>
+          <button
+            onClick={handleGoBack}
+            className="inline-flex items-center mt-4 bg-gray-300 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-black transition-all"
+          >
+            Go Back
+          </button>
         </div>
-         
       </div>
-      
     </div>
   );
 };