Merge pull request #179 from kubapoke/fix/reloading-offer-page

Fix/reloading offer page

car-search/frontend/car-search/src/App/App.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import MainLayout from "../Layouts/MainLayout.tsx";
 import HomePage from "../Pages/HomePage.tsx";
-import NotFoundPage from "../Pages/NotFoundPage.tsx";
+import ErrorPage from "../Pages/ErrorPage.tsx";
 import BrowseOffersPage from "../Pages/BrowseOffersPage.tsx";
 import OfferPage from "../Pages/OfferPage.tsx";
 import NewUserForm from "../Pages/NewUserForm.tsx";
@@ -44,8 +44,9 @@ function MainRouter() {
                 <Route path='/new-user-form' element={<NewUserForm/>}/>
                 <Route path='/offers/:id' element={<OfferPage/>}/>
                 <Route path='/offers/rent-confirmation' element={<RentConfirmationPage/>}/>
-                <Route path="/user-rents" element={isLoggedIn ? <UserRentsPage/> : <NotFoundPage/>}/>
-                <Route path="*" element={<NotFoundPage/>}/>
+                <Route path="/user-rents" element={isLoggedIn ? <UserRentsPage/> : <ErrorPage/>}/>
+                <Route path="*" element={<ErrorPage/>}/>
+                <Route path="/error" element={<ErrorPage/>}/>
                 <Route path="/new-rent-confirm" element={<RentConfirmedPage/>}/>
             </Route>
         )

car-search/frontend/car-search/src/Pages/ErrorPage.tsx

@@ -0,0 +1,27 @@
+import { Link, useLocation } from 'react-router-dom';
+import { FaExclamationTriangle } from "react-icons/fa";
+
+const ErrorPage = () => {
+    const location = useLocation();
+    const { message, status } = location.state || {};
+
+    return (
+        <section className="text-center flex flex-col justify-center items-center h-96">
+            <FaExclamationTriangle className="fas text-yellow-400 text-6xl mb-4" />
+            <h1 className="text-6xl font-bold mb-4">
+                Error {status || 404}
+            </h1>
+            <p className="text-xl mb-5">
+                {message || "This page does not exist"}
+            </p>
+            <Link
+                to="/"
+                className="text-white bg-blue-700 hover:bg-blue-900 rounded-md px-3 py-2 mt-4"
+            >
+                Go Back
+            </Link>
+        </section>
+    );
+};
+
+export default ErrorPage;

car-search/frontend/car-search/src/Pages/OfferPage.tsx

@@ -1,24 +1,34 @@
 import {Link, useNavigate, useParams} from "react-router-dom";
 import {FaArrowLeft, FaMapMarker} from "react-icons/fa";
-import notFoundPage from "./NotFoundPage.tsx";
+import notFoundPage from "./ErrorPage.tsx";
 import {useOffers, Offer} from "../Context/OffersContext.tsx";
 import {calculateDaysBetweenDates} from "../Components/CarOffer.tsx";
+import {useEffect} from "react";
 
 const OfferPage = () => {
     const navigate = useNavigate();
     const { id } = useParams();
-    if (!id) {
-        throw new Response("Offer ID is missing", { status: 400 });
-    }
 
     // get offers from the context
     const { offers } = useOffers();
 
-    // find appropriate offer
-    const offer = offers.find((offer) => offer.offerId === id);
+    useEffect(() => {
+        if (!id) {
+            navigate("/error", { state: { message: "Offer ID is missing", status: 400 } });
+        }
+    }, [id, navigate]);
+
+    // find and save appropriate offer
+    const offerData = sessionStorage.getItem("offerData");
+    let offer: Offer | null = null;
+
+    if (offerData) {
+        offer = JSON.parse(offerData);
+    }
 
     if (!offer) {
-        throw new Response("Offer not found", { status: 404 });
+        offer = offers.find((offer) => offer.offerId === id) || null;
+        sessionStorage.setItem("offerData", JSON.stringify(offer));
     }
 
     const onRentClick = async (offer: Offer) => {