Feat(JS) Added redux

package.json

@@ -8,14 +8,19 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.12",
     "@mui/material": "^5.14.12",
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.4.5",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-select": "^5.7.7",
+    "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/CarItem/CarItem.jsx

@@ -12,57 +12,42 @@ import {
 } from './CarItem.styled';
 import HeartIcon from 'components/HeartIcon/HeartIcon';
 
-const car = {
-  id: 9587,
-  year: 2006,
-  make: 'HUMMER',
-  model: 'H2',
-  type: 'SUV',
-  img: 'https://res.cloudinary.com/ditdqzoio/image/upload/v1687252635/cars/hummer_h2.webp',
-  description:
-    'The HUMMER H2 is a rugged and powerful SUV that stands out with its imposing presence and off-road capabilities.',
-  fuelConsumption: '19.8',
-  engineSize: '6.0L V8',
-  accessories: [
-    'Heated leather seats',
-    'Bose premium sound system',
-    'Off-road package',
-  ],
-  functionalities: [
-    'Electronic locking front and rear differentials',
-    'Stabilitrak stability control',
-    'Tire pressure monitoring system',
-  ],
-  rentalPrice: '$55',
-  rentalCompany: 'Adventure Car Rentals',
-  address: '321 Example Road, Kharkiv, Ukraine',
-  rentalConditions:
-    "Minimum age: 25\nValid driver's license\nSecurity deposit required",
-  mileage: 4771,
-};
-
-export default function CarItem() {
+export default function CarItem({
+  data: {
+    img,
+    make,
+    model,
+    year,
+    rentalPrice,
+    address,
+    rentalCompany,
+    type,
+    mileage,
+    accessories,
+  },
+}) {
+  console.log(CarItem);
   return (
     <Wrapper>
       <ImageWrap>
         <HeartIcon />
-        <Image src={car.img} alt="Car" />
+        <Image src={img} alt="Car" />
       </ImageWrap>
       <TitleWrap>
         <Title>
-          {car.make} {''}
-          <Span>{car.model}</Span>, {car.year}
+          {make} {''}
+          <Span>{model}</Span>, {year}
         </Title>
-        <Text> {car.rentalPrice}</Text>
+        <Text> {rentalPrice}</Text>
       </TitleWrap>
       <List>
-        <Item>{car.address.split(',')[1]}</Item>
-        <Item>{car.address.split(',')[2]}</Item>
-        <Item>{car.rentalCompany}</Item>
-        <Item>{car.type}</Item>
-        <Item>{car.model}</Item>
-        <Item>{car.mileage}</Item>
-        <Item>{car.accessories[0]}</Item>
+        <Item>{address.split(',')[1]}</Item>
+        <Item>{address.split(',')[2]}</Item>
+        <Item>{rentalCompany}</Item>
+        <Item>{type}</Item>
+        <Item>{model}</Item>
+        <Item>{mileage}</Item>
+        <Item>{accessories[0]}</Item>
       </List>
       <Button text="Learn more" width="274px" />
     </Wrapper>