added favorites page

package.json

@@ -18,6 +18,7 @@
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
     "sass": "^1.66.1",
     "web-vitals": "^2.1.3"
   },

src/components/CarCard/CarCard.jsx

@@ -1,4 +1,3 @@
-
 import {
   ItemCar,
   WraperImg,
@@ -17,11 +16,6 @@ import { toggleFavorite } from '../../redux/favoritesSlise';
 
 
 const CarCard = ({ data }) => {
-  const dispatch = useDispatch();
-  const isFavorite = useSelector(state =>
-    state.favorites.items.some(car => car.id === data.id)
-  );
-
   const {
     id,
     year,
@@ -34,9 +28,11 @@ const CarCard = ({ data }) => {
     rentalCompany,
     address,
   } = data;
-
+  const dispatch = useDispatch();
+  const isFavorite = useSelector(state =>
+    state.favorites.items.some(car => car.id === data.id)
+  );
   const shortAdress = address.substring(address.indexOf(",") + 2).trim();
-
   const handleToggleFavorite = () => {
     dispatch(toggleFavorite(data));
   };

src/components/CarCard/CarCard.styled.js

@@ -65,4 +65,6 @@ export const BtnLearneMore = styled.button`
   &:focus {
     background-color: ${colors.accentHoverColor};
   }
-`
+`
+
+

src/components/FavoritesList/FavoritesList.jsx

@@ -0,0 +1,25 @@
+import CarCard from 'components/CarCard/CarCard';
+import { useSelector,  } from 'react-redux';
+import { ListCar } from '../CarsList/CarsList.styled';
+
+
+const FavoritesList = () => {
+    const { favorites } = useSelector(state => state);
+
+
+    return <>
+        {favorites.items.length === 0
+            && <div> You have not added cars to your favorites list </div>}
+        <ListCar >
+            {favorites.items.map((data, index) => (
+                <CarCard
+                    key={index}
+                    data={data}
+                />
+            ))}
+        </ListCar>
+    </>
+};
+
+export default FavoritesList;
+

src/index.js

@@ -4,15 +4,19 @@ import App from 'components/App/App';
 import './index.scss';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from "react-redux";
-import { store } from "./redux/store";
+import { PersistGate } from 'redux-persist/integration/react';
+
+import { store, persistor } from "./redux/store";
 
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
-    <BrowserRouter basename="/auto-rent-app">
-      <App />
-      </BrowserRouter>
-      </Provider>
+      <PersistGate loading={null} persistor={persistor}>
+        <BrowserRouter basename="/auto-rent-app">
+          <App />
+        </BrowserRouter>
+      </PersistGate>
+    </Provider>
   </React.StrictMode>
 );

src/pages/Favorites.jsx

@@ -1,11 +1,14 @@
-import CarsList from 'components/CarsList/CarsList';
+import FavoritesList from 'components/FavoritesList/FavoritesList';
+import { CatalogSection } from 'components/Catalog/CatalogPage.styled';
+import { Container } from 'components/Shared/Container.styled';
 
 const FavoritesPage = () => {
   return (
-    <div>
-      <h2>FavoritesPage</h2>
-      <CarsList />
-    </div>
+    <CatalogSection>
+      <Container>
+        <FavoritesList />
+      </Container>
+    </CatalogSection>
   );
 };
 

src/redux/store.js

@@ -1,8 +1,41 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { reducer } from './reduser';
+import { carReducer } from "./carSlice.js";
+import { favoritesReducer } from "./favoritesSlise.js";
+
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+const PersistConfig = {
+  key: "favorites",
+  storage,
+};
+
 
 export const store = configureStore({
-  reducer
+  reducer: {
+    car: carReducer,
+    favorites: persistReducer(PersistConfig, favoritesReducer),
+  },
+  middleware(getDefaultMiddleware) {
+    return getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    });
+  },
 });
 
+export const persistor = persistStore(store);
+
+
+
 

src/styles/common/_base.scss

@@ -25,21 +25,6 @@ body {
   overflow-y: scroll;
   overflow-x: hidden;
 
-  @media screen and (min-width: 768px) {
-    //   font-size: 16px;
-    //   line-height: 1.37;
-  }
-
-  &.is-open {
-    //   padding-right: calc(-1 * (100vw - 100%));
-    overflow-y: hidden;
-  }
-
-  @media screen and (min-width: 1440px) {
-    // &.is-open {
-    //   padding-right: 10px;
-    // }
-  }
 }
 
 code {