Recently viewed vehicle Feature

src/frontend/package.json

@@ -27,7 +27,8 @@
     "react-player": "^2.15.1",
     "react-router-dom": "^6.22.2",
     "react-signature-canvas": "^1.0.6",
-    "reactjs-popup": "^2.0.6"
+    "reactjs-popup": "^2.0.6",
+    "swiper": "^11.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
@@ -39,6 +40,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.35",
+    "postcss-nesting": "^12.1.1",
     "tailwindcss": "^3.4.1",
     "vite": "^5.0.8"
   }

src/frontend/src/Pages/BrowsingPage.jsx

@@ -1,17 +1,57 @@
 import SearchBox from "../components/browsingPage/SearchBox";
 import VehicleList from "../components/browsingPage/VehicleList";
+import RecentlyViewed from "../components/swiper/recentlyViewed";
 
-import { createContext,useState  } from "react";
+import { createContext,useState ,useEffect } from "react";
 export const  branchContext = createContext(null);
 const BrowsingPage = () => {
     const [branchName, setBranchName] = useState("");
+
+    const [recentVehicle, setRecentVehicle] = useState([]);
+
+
+
+    useEffect(() => {
+
+
+        const fetchAll = async() => {
+            let vehicles = JSON.parse(localStorage.getItem("vehicles") || "[]");
+
+            if (vehicles.length ===4){
+                setRecentVehicle(vehicles);
+            }
+            else {
+
+                const response = await fetch(
+                    "http://localhost:3000/api/vehicles/vehicles",
+                    {
+                      method: "GET",
+                      headers: {
+                        "Content-Type": "application/json",
+                        //Authorization: `Bearer ${localStorage.getItem("token")}`,
+                      },
+                    }
+                  );            
+                const data = await response.json();
+                console.log(data)
+
+                localStorage.setItem("vehicles", JSON.stringify(data.slice(0,4)));
+
+                setRecentVehicle(data.slice(0,4));
+
+                }
+            };
+            fetchAll();
+        },[] )
+
 return (
 
     <>
-       <branchContext.Provider value={{branchName,setBranchName}}>
+    <branchContext.Provider value={{branchName,setBranchName}}>
     <SearchBox/>
     <VehicleList/>
     </branchContext.Provider>
+    <RecentlyViewed recentVehicle={recentVehicle}/>
     </>
 )
 }

src/frontend/src/Pages/Vehicle.jsx

@@ -73,6 +73,7 @@ export default function Vehicle() {
     fetchBranches();
   },[addingToBranch])
 
+
   const handleAddVehicleToBranch=async (event)=>{
     event && event.preventDefault();
     console.log("here we go");

src/frontend/src/components/reservation/MakeReservation.jsx

@@ -22,9 +22,13 @@ export default function MakeReservation() {
                 });
                 if (!response.ok) {
                     throw new Error("Failed to fetch vehicle");
+
                 }
+
                 const vehicleData = await response.json();
+                updateRecentlyViewedVehicle(vehicleData);
                 setSelectedVehicle(vehicleData);
+
             } catch (error) {
                 console.error("Error fetching vehicle:", error);
                 // Handle error (e.g., display error message)
@@ -35,6 +39,18 @@ export default function MakeReservation() {
         fetchVehicle();
     }, [vehicleId]); // Fetch when vehicleId changes
 
+    const updateRecentlyViewedVehicle = (vehicle) =>{
+
+        let vehicles = JSON.parse(localStorage.getItem("vehicles") || "[]");
+
+        vehicles.pop();
+
+        vehicles.unshift(vehicle);
+
+
+        localStorage.setItem("vehicles", JSON.stringify(vehicles));
+
+      }
 
     return (
         <div>

src/frontend/src/components/swiper/recentlyViewed.jsx

@@ -0,0 +1,64 @@
+import React , {useState, useEffect} from 'react';
+import { Link } from 'react-router-dom';
+
+import {Box} from "@mui/material";
+
+import {Swiper, SwiperSlide} from 'swiper/react';
+
+import {Navigation, FreeMode} from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
+
+import "./swiper.css"
+
+
+const RecentlyViewed = ({recentVehicle}) =>{
+
+
+    return (
+    <div>
+        <div className="recentlyViewedListings">
+            <p className="recentlyViewedText">Recently Viewed</p>
+          </div>
+          <div className="recent-listings">
+          <Swiper slidesPerView={1} spaceBetween={30} navigation={true} freeMode={true} modules={[Navigation, FreeMode]} >
+              {
+                recentVehicle?.map((vehicle, index) =>
+                  <SwiperSlide key={index}>
+                    <div className="recent-card">
+                      <Box sx={{ height: 400, width: 325, border: '1px dashed',color :"#D35400" }}>
+
+                            <Link to={`../reservation/book/${vehicle._id}`}>
+
+                            <img
+                                src={vehicle.Image}
+                                alt={"car"}
+                            className="rounded-lg h-full w-full object-cover object-center  group-hover:scale-105 group-hover:rotate-3 duration-200"
+                                />    
+                            </Link>
+
+
+
+                      </Box>
+                    </div>
+                    <div className="recent-card">
+
+                      <p>{vehicle.make} : {vehicle.price}<span style={{ color: "#D35400" }}> $</span></p>
+                    </div>
+                  </SwiperSlide>
+                )
+              }
+
+
+            </Swiper>
+            </div>
+
+    </div>
+
+    )
+}
+
+export default RecentlyViewed;

src/frontend/src/components/swiper/swiper.css

@@ -0,0 +1,31 @@
+.recentlyViewedListings {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.recentlyViewedText {
+    color: #273746;
+    font-family: "DMSans-Regular", Helvetica;
+    font-size: 40px;
+    font-weight: 400;
+    padding: 15px; 
+    justify-content: center;
+    letter-spacing: -0.5px;
+    line-height: 70px;
+    opacity: 0.8;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.recent-card{
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/frontend/tailwind.config.js

@@ -4,7 +4,7 @@ const colors = require('tailwindcss/colors');
 export default {
   content: [
     "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx,css}",
   ],
   theme: {
     extend: {
@@ -13,6 +13,8 @@ export default {
       }
     },
   },
-  plugins: [forms,require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'),],
+  plugins: [forms,require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'),  
+
+  require('tailwindcss/nesting')(require('postcss-nesting')),],
 }