Merge pull request #11 from Shepard-m/module7-task3

package.json

@@ -10,7 +10,7 @@
     "test": "vitest --passWithNoTests"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.9.7",
+    "@reduxjs/toolkit": "2.2.1",
     "axios": "1.5.1",
     "clsx": "2.1.0",
     "dayjs": "1.11.10",
@@ -20,20 +20,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
-    "react-redux": "8.1.3",
+    "react-redux": "9.1.0",
     "react-router-dom": "6.16.0",
     "react-toastify": "10.0.5"
   },
   "devDependencies": {
-    "@jedmao/redux-mock-store": "3.0.5",
     "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
     "@types/faker": "5.5.9",
     "@types/leaflet": "1.9.3",
     "@types/react": "18.2.25",
     "@types/react-dom": "18.2.11",
-    "@types/react-redux": "7.1.27",
+    "@types/react-redux": "7.1.33",
     "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
@@ -61,4 +60,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/app.tsx

@@ -3,7 +3,7 @@ import OfferPage from '../pages/offer-page';
 import FavoritePage from '../pages/favorite-page';
 import LoginPage from '../pages/login-page';
 import { Route, Routes } from 'react-router-dom';
-import { AppRoute, AuthorizationStatus } from '../const';
+import { AppRoute } from '../const';
 import NotFoundPage from '../pages/not-found-page/not-found-page';
 import ProtectedRoute from './protected-route';
 import HistoryRouter from './history-route';
@@ -24,11 +24,11 @@ export default function App() {
           />
           <Route
             path={AppRoute.Favorites}
-            element={<ProtectedRoute authorizationStatus={AuthorizationStatus.UN_KNOWN}> <FavoritePage /></ProtectedRoute>}
+            element={<ProtectedRoute> <FavoritePage /></ProtectedRoute>}
           />
           <Route
             path={AppRoute.Login}
-            element={<LoginPage navigation={false} />}
+            element={<ProtectedRoute onlyUnAuth><LoginPage navigation={false} /></ProtectedRoute>}
           />
           <Route
             path='*'

src/components/card.tsx

@@ -2,8 +2,6 @@ import { Link } from 'react-router-dom';
 import { OfferPreviews } from '../types/offer-preview';
 import Rating from './rating';
 import { AppRoute } from '../const';
-import { chooseId } from '../store/action';
-import { useAppDispatch } from '../hooks';
 
 type TCardProps = {
   offer: OfferPreviews;
@@ -17,11 +15,6 @@ type TCardProps = {
 
 export default function Card({ offer, optionCard, handelPointCardMouseOver }: TCardProps) {
   const { width, height, classCard } = optionCard;
-  const dispatch = useAppDispatch();
-
-  const onTransmissionDataClick = () => {
-    dispatch(chooseId(offer.id));
-  };
 
   const onPointCardMouseOver = () => {
     handelPointCardMouseOver(offer);
@@ -39,7 +32,7 @@ export default function Card({ offer, optionCard, handelPointCardMouseOver }: TC
         </div>}
 
       <div className="cities__image-wrapper place-card__image-wrapper">
-        <Link to={`/${AppRoute.Offer}/${offer.id}`} onClick={onTransmissionDataClick}>
+        <Link to={`/${AppRoute.Offer}/${offer.id}`}>
           <img className="place-card__image" src={`${offer.previewImage}`} width={width} height={height} alt="Place image" />
         </Link>
       </div>
@@ -58,7 +51,7 @@ export default function Card({ offer, optionCard, handelPointCardMouseOver }: TC
         </div>
         <Rating ratingClass="place-card" rating={offer.rating} />
         <h2 className="place-card__name" >
-          <Link to={`/${AppRoute.Offer}/${offer.id}`} state={offer} onClick={onTransmissionDataClick}>{offer.title}</Link>
+          <Link to={`/${AppRoute.Offer}/${offer.id}`} state={offer}>{offer.title}</Link>
         </h2>
         <p className="place-card__type" >{offer.type}</p>
       </div>

src/components/header.tsx

@@ -5,20 +5,22 @@ import { useEffect } from 'react';
 import { checkAuthAction, fetchUserAction } from '../store/api-action';
 import { logoutAction } from '../store/api-action';
 import { AuthorizationStatus } from '../const';
+import { userSelector } from '../store/slice/user';
 
 type THeaderProps = {
   navigation: boolean;
 }
 
 export default function Header({ navigation }: THeaderProps) {
   const dispatch = useAppDispatch();
-  const favorite = useAppSelector((state) => state.favorite);
+  // const favorite = useAppSelector((state) => state.favorite);
+  const favorite = [];
   useEffect(() => {
     dispatch(fetchUserAction());
     dispatch(checkAuthAction());
   }, [dispatch]);
-  const authorizationStatus = useAppSelector((state) => state.authorizationStatus);
-  const user = useAppSelector((state) => state.dataUser);
+  const authorizationStatus = useAppSelector(userSelector.authorizationStatus);
+  const user = useAppSelector(userSelector.dataUser);
 
   const logoutAccount = () => {
     dispatch(logoutAction());