fmanimashaun · fmanimashaun · Feb 19, 2024 · Feb 18, 2024 · Feb 18, 2024 · Feb 19, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,16 +48,16 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
     "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.35",
     "stylelint": "^13.13.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,6 @@
     <title>BookCar App</title>
   </head>
   <body>
-    <div id="root" class="flex h-screen"></div>
+    <div id="root" class="flex h-screen overflow-hidden"></div>
   </body>
 </html>
diff --git a/src/app/redux/AppDataSlice.js b/src/app/redux/AppDataSlice.js
@@ -0,0 +1,49 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+export const fetchAppData = createAsyncThunk('cars/fetchAppData', async () => {
+  const response = await axios.get('http://localhost:4000/api/v1/initial_data');
+  return response.data;
+});
+
+const initialState = {
+  appData: {
+    cars: [],
+    cities: [],
+    engine_types: [],
+  },
+  loading: false,
+  error: null,
+};
+
+const appDataSlice = createSlice({
+  name: 'cars',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchAppData.pending, (state) => ({
+        ...state,
+        loading: true,
+        error: null,
+      }))
+      .addCase(fetchAppData.fulfilled, (state, action) => ({
+        ...state,
+        loading: false,
+        error: null,
+        appData: {
+          ...state.appData,
+          cars: action.payload.data.cars,
+          cities: action.payload.data.cities,
+          engine_type: action.payload.data.engine_types,
+        },
+      }))
+      .addCase(fetchAppData.rejected, (state, action) => ({
+        ...state,
+        loading: false,
+        error: action.error.message,
+      }));
+  },
+});
+
+export default appDataSlice.reducer;
diff --git a/src/app/redux/CarsSlice.js b/src/app/redux/CarsSlice.js
diff --git a/src/app/redux/carDetailsSlice.js b/src/app/redux/carDetailsSlice.js
@@ -0,0 +1,44 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// Async thunk for fetching car details
+export const fetchCarDetails = createAsyncThunk(
+  'carDetails/fetchCarDetails',
+  async (id) => {
+    const response = await axios.get(`http://localhost:4000/api/v1/cars/${id}`);
+    return response.data;
+  },
+);
+
+// Initial state
+const initialState = {
+  carDetails: null,
+  status: 'idle',
+  error: null,
+};
+
+// Slice
+const carDetailsSlice = createSlice({
+  name: 'carDetails',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchCarDetails.pending, (state) => ({
+        ...state,
+        status: 'loading',
+      }))
+      .addCase(fetchCarDetails.fulfilled, (state, action) => ({
+        ...state,
+        status: 'succeeded',
+        carDetails: action.payload.data,
+      }))
+      .addCase(fetchCarDetails.rejected, (state, action) => ({
+        ...state,
+        status: 'failed',
+        error: action.error.message,
+      }));
+  },
+});
+
+export default carDetailsSlice.reducer;
diff --git a/src/app/store.js b/src/app/store.js
@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
-import carsReducer from './redux/CarsSlice';
+import AppDataSlice from './redux/AppDataSlice';
+import carDetailsSlice from './redux/carDetailsSlice';
 
 const store = configureStore({
   reducer: {
-    cars: carsReducer,
+    appData: AppDataSlice,
+    carDetails: carDetailsSlice,
   },
 });
 

diff --git a/src/components/CarList.jsx b/src/components/CarList.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+function CarList({ cars }) {
+  return (
+    <div>
+      {cars?.map((car) => (
+        <Link key={car.id} to={`/cars/${car.id}`} className="block mb-4">
+          <img src={car.image_url} alt={car.name} className="w-full h-64 object-cover" />
+          <h2 className="text-xl font-bold mt-2">{car.name}</h2>
+          <p>{car.description}</p>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+CarList.propTypes = {
+  cars: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      image_url: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default CarList;
diff --git a/src/components/RequireAuth.jsx b/src/components/RequireAuth.jsx
@@ -2,12 +2,12 @@ import { Navigate, Outlet } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const RequireAuth = ({ allowedRoles }) => {
-  const isLogin = true;
-  const role = 'user';
+  const isLogin = false;
+  const role = '';
 
   if (!isLogin) {
     return <Navigate to="/login" />;
-  } if (allowedRoles && !allowedRoles.includes(role)) {
+  } if (!allowedRoles.includes(role)) {
     return <Navigate to="/unathorised" />;
   }
   return <Outlet />;

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -2,8 +2,8 @@ import { NavLink, Link } from 'react-router-dom';
 import Logo from 'assets/imgs/transparent-logo.png';
 
 const SideNavBar = () => {
-  const isLogin = true;
-  const role = 'admin';
+  const isLogin = false;
+  const role = '';
   return (
     <aside className="flex flex-col items-center w-60 text-dark-blue" aria-label="Sidebar">
       <div className="pb-12 pt-4">

diff --git a/src/index.js b/src/index.js
@@ -40,18 +40,26 @@ const router = createBrowserRouter(
           children: [
             {
               path: 'reservations',
-              element: <MyResevation />,
-            },
-            {
-              path: 'reservations/new',
-              element: <AddReserve />,
+              children: [
+                {
+                  index: true,
+                  element: <MyResevation />,
+                },
+                {
+                  path: 'new',
+                  element: <AddReserve />,
+                },
+              ],
             },
           ],
         },
         {
           path: 'cars',
-          element: <Home />,
           children: [
+            {
+              index: true,
+              element: <Home />,
+            },
             {
               path: ':id',
               element: <CarDetails />,