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/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>

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,16 +26,21 @@ 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="/"
               className="inline-flex items-center hidden md:inline 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 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>
   );
 };