Update changes after check

tan12082001 · Dec 10, 2023 · 2155091 · 2155091
1 parent 6cfa7ec
commit 2155091
Show file tree

Hide file tree

Showing 38 changed files with 411 additions and 482 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,35 +1,35 @@
 {
-    "env": {
-      "browser": true,
-      "es6": true,
-      "jest": true
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "ecmaFeatures": {
-        "jsx": true
-      },
-      "ecmaVersion": 2018,
-      "sourceType": "module"
-    },
-    "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended"],
-    "plugins": ["react"],
-    "rules": {
-      "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
-      "react/react-in-jsx-scope": "off",
-      "import/no-unresolved": "off",
-      "no-shadow": "off"
-    },
-    "overrides": [
-      {
-         // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.js' or 'redux/**/*Slice.js'
-        "files": ["src/**/*Slice.js"],
-        // avoid state param assignment
-        "rules": { "no-param-reassign": ["error", { "props": false }] }
-      }
-    ],
-    "ignorePatterns": [
-      "dist/",
-      "build/"
-    ]
-  }
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off",
+    "no-shadow": "off"
+  },
+  "overrides": [
+    {
+       // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.js' or 'redux/**/*Slice.js'
+      "files": ["src/**/*Slice.js"],
+      // avoid state param assignment
+      "rules": { "no-param-reassign": ["error", { "props": false }] }
+    }
+  ],
+  "ignorePatterns": [
+    "dist/",
+    "build/"
+  ]
+}
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import './styles/App.css';
-import React, {useEffect} from 'react';
-import Router from './routes/routes';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import Router from './routes/routes';
 import { fetchCarReservations, fetchCars } from './redux/thunk';
 
 function App() {

diff --git a/src/components/Card/DisplayCartCard.js b/src/components/Card/DisplayCartCard.js
@@ -4,7 +4,9 @@ import styled from '@emotion/styled';
 import { FaFacebook, FaTwitter, FaInstagram } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 
-const DisplayCartCard = ({ id, imgSrc, name, shortNote }) => (
+const DisplayCartCard = ({
+  id, imgSrc, name, shortNote,
+}) => (
   <Container to={`/u/dashboard/item-details/${id}`}>
     <Image src={imgSrc} alt={name} />
     <Content>
@@ -26,7 +28,8 @@ const DisplayCartCard = ({ id, imgSrc, name, shortNote }) => (
 );
 
 DisplayCartCard.propTypes = {
-  imageName: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  imgSrc: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   shortNote: PropTypes.string.isRequired,
 };

diff --git a/src/components/Card/DisplayItemCard.js b/src/components/Card/DisplayItemCard.js
@@ -2,86 +2,89 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { FaCog, FaArrowRight, FaSyncAlt } from 'react-icons/fa';
-import colorWheel from '../../components/asset/small_color_wheel.png';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import colorWheel from '../asset/small_color_wheel.png';
 import { RESERVE_CARS, USERS_DASHBOARD } from '../../routes/routeConstants';
 
-const DisplayItemCard = ({ id, name, description, pricePerHr, seating_capacity, imgSrc }) => {
+const DisplayItemCard = ({
+  id, name, description, pricePerHr, seatingCapacity, imgSrc,
+}) => {
   const username = useSelector((state) => state.authentication.authenticatedUser.username);
   const navigate = useNavigate();
   const [rotation, setRotation] = useState(0);
 
   const handleReserveClick = () => {
     navigate(`${USERS_DASHBOARD}/${RESERVE_CARS}`, {
-      state: { id, username, name }
+      state: { id, username, name },
     });
-  }
+  };
 
   const handleRotate = () => {
     setRotation((prevRotation) => (prevRotation + 90) % 360);
   };
   return (
     <Container>
-        <Image>
-          <Image1 src={imgSrc} alt={name} rotation={rotation} />
-          <RotateButton onClick={handleRotate}>
-            <Rotate>
-              <FaSyncAlt />
-              Rotate vehicle
-            </Rotate>
-          </RotateButton>
-        </Image>
-        <Content>
+      <Image>
+        <Image1 src={imgSrc} alt={name} rotation={rotation} />
+        <RotateButton onClick={handleRotate}>
+          <Rotate>
+            <FaSyncAlt />
+            Rotate vehicle
+          </Rotate>
+        </RotateButton>
+      </Image>
+      <Content>
         <Name>{name}</Name>
         <Description>
-            {description}
+          {description}
         </Description>
         <Table>
-            <TableRow color="#ccc">
+          <TableRow color="#ccc">
             <TableData>Rent Price per Hour</TableData>
             <TableData>{pricePerHr}</TableData>
-            </TableRow>
-            <TableRow color="#fff">
+          </TableRow>
+          <TableRow color="#fff">
             <TableData>Seating Capacity</TableData>
-            <TableData>{seating_capacity}</TableData>
-            </TableRow>
-            <TableRow color="#ccc">
+            <TableData>{seatingCapacity}</TableData>
+          </TableRow>
+          <TableRow color="#ccc">
             <TableData>Currently available for booking?</TableData>
             <TableData>Yes</TableData>
-            </TableRow>
-            <TableRow color="#fff">
+          </TableRow>
+          <TableRow color="#fff">
             <TableData>Minimum Rental Duration</TableData>
             <TableData>4 hrs</TableData>
-            </TableRow>
+          </TableRow>
         </Table>
         <BoldText>
-            5.9% APR Representative
+          5.9% APR Representative
         </BoldText>
         <ColorWheel>
           DISCOVER MORE MODEL
-          <img src={colorWheel} alt='Color Wheel'/>
+          <img src={colorWheel} alt="Color Wheel" />
         </ColorWheel>
-        <ConfigureButton onClick={handleReserveClick} >
-            <SettingIcon>
+        <ConfigureButton onClick={handleReserveClick}>
+          <SettingIcon>
             <FaCog />
-            </SettingIcon>
-            Reserve
-            <ArrowIcon>
+          </SettingIcon>
+          Reserve
+          <ArrowIcon>
             <FaArrowRight />
-            </ArrowIcon>
+          </ArrowIcon>
         </ConfigureButton>
-        </Content>
+      </Content>
     </Container>
-)};
+  );
+};
 
 DisplayItemCard.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   pricePerHr: PropTypes.number.isRequired,
-  seating_capacity: PropTypes.number.isRequired,
-  imgSrc: PropTypes.string.isRequired
+  seatingCapacity: PropTypes.number.isRequired,
+  imgSrc: PropTypes.string.isRequired,
 };
 
 const Container = styled.div`

diff --git a/src/components/DeleteCars/DeleteList.js b/src/components/DeleteCars/DeleteList.js
@@ -1,45 +1,45 @@
 import React from 'react';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 import EachCarDelete from './EachCarDelete';
 
 const DeleteList = () => {
-  const cars = useSelector((state) => state.cars.cars)
-//   const mockData = [
-//     {
-//         "id": 3,
-//         "name": "Car1",
-//         "description": "Description for Car1",
-//         "removed": false
-//     },
-//     {
-//         "id": 4,
-//         "name": "Car1111",
-//         "description": "Description for Car1",
-//         "removed": false
-//     }
-// ];
-// const cars = mockData;
+  const cars = useSelector((state) => state.cars.cars);
+  //   const mockData = [
+  //     {
+  //         "id": 3,
+  //         "name": "Car1",
+  //         "description": "Description for Car1",
+  //         "removed": false
+  //     },
+  //     {
+  //         "id": 4,
+  //         "name": "Car1111",
+  //         "description": "Description for Car1",
+  //         "removed": false
+  //     }
+  // ];
+  // const cars = mockData;
 
   return (
     <>
       <div>
         <h1>Cars List</h1>
         <table>
-            <thead>
-                <tr>
-                    <th>Car Title</th>
-                    <th>Status</th>
-                </tr>
-            </thead>
-            <tbody>
-                {cars.map((car) => (
-                    <EachCarDelete key={car.id} car={car} />
-                ))}
-            </tbody>
+          <thead>
+            <tr>
+              <th>Car Title</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cars.map((car) => (
+              <EachCarDelete key={car.id} car={car} />
+            ))}
+          </tbody>
         </table>
       </div>
     </>
   );
 };
 
-export default DeleteList;
+export default DeleteList;
diff --git a/src/components/DeleteCars/EachCarDelete.js b/src/components/DeleteCars/EachCarDelete.js
@@ -1,38 +1,37 @@
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from "react-redux";
-import { deleteCar } from "../../redux/thunk";
-import { markCarDelete } from "../../redux/cars/carsSlice";
+import { useDispatch } from 'react-redux';
+import { deleteCar } from '../../redux/thunk';
+import { removeMarkStatus } from '../../redux/cars/carsSlice';
 
-const EachCarDelete = ({car}) => {
-    const {
-        name,
-        id,
-        removed
-    } = car;
-    const dispatch = useDispatch();
-    const handleDelete = () => {
-        dispatch(deleteCar(id));
-        if(!removed) {
-            dispatch(markCarDelete(id))
-        }
+const EachCarDelete = ({ car }) => {
+  const {
+    name,
+    id,
+    removed,
+  } = car;
+  const dispatch = useDispatch();
+  const handleDelete = () => {
+    if (removed) {
+      return;
     }
 
-
-
-    return (
-        <tr>
-            <td>{name}</td>
-            <td><button type='button' className={removed ? 'removed-mark' : 'remove-mark'} onClick={handleDelete}>{removed ? 'removed' : 'DELETE'}</button></td>
-        </tr>
-    )
-}
+    dispatch(deleteCar(id));
+    dispatch(removeMarkStatus(id));
+  };
+  return (
+    <tr>
+      <td>{name}</td>
+      <td><button type="button" className={removed ? 'removed-mark' : 'remove-mark'} onClick={handleDelete} disabled={removed}>{removed ? 'removed' : 'DELETE'}</button></td>
+    </tr>
+  );
+};
 
 EachCarDelete.propTypes = {
-    car: PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        id: PropTypes.number.isRequired,
-        removed: PropTypes.bool.isRequired,
-    }).isRequired,
+  car: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+    removed: PropTypes.bool.isRequired,
+  }).isRequired,
 };
 
 export default EachCarDelete;
diff --git a/src/components/Form/FormComponent2.js b/src/components/Form/FormComponent2.js
@@ -25,17 +25,17 @@ FormComponent2.propTypes = {
     name: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     pricePerHr: PropTypes.string.isRequired,
-    sitting_capacity: PropTypes.number.isRequired,
+    seating_capacity: PropTypes.number.isRequired,
     rental_duration: PropTypes.number.isRequired,
-    image: PropTypes.string.isRequired,
+    // image: PropTypes.string.isRequired,
   }).isRequired,
   schema: PropTypes.shape({
     name: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     pricePerHr: PropTypes.string.isRequired,
-    sitting_capacity: PropTypes.number.isRequired,
+    seating_capacity: PropTypes.number.isRequired,
     rental_duration: PropTypes.number.isRequired,
-    image: PropTypes.string.isRequired,
+    // image: PropTypes.string.isRequired,
   }).isRequired,
   onSubmit: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired,