Последнее испытание (часть 1)

src/api/api.ts

@@ -33,11 +33,13 @@ export const createAPI = (): AxiosInstance => {
         (error.code === 'ECONNABORTED' || error.code === 'ERR_NETWORK')
       ) {
         toast.error(
-          'Сервер недоступен, проверте подключение к интернету или повторите попытку позже',
+          'Сервер недоступен, проверьте подключение к интернету или повторите попытку позже',
           {
             toastId: 'server-unreachable',
           },
         );
+      } else {
+        throw error;
       }
     },
   );

src/components/app.tsx

@@ -4,14 +4,12 @@ import { LoginPage } from '../pages/login-page/login-page.tsx';
 import { FavoritesPage } from '../pages/favorites-page/favorites-page.tsx';
 import { OfferPage } from '../pages/offer-page/offer-page.tsx';
 import { NotFoundPage } from '../pages/not-found-page/not-found-page.tsx';
-import {
-  AuthorizationWrapperForAuthorizedOnly,
-  AuthorizationWrapperForUnauthorizedOnly,
-} from './authorization-wrapper.tsx';
 import { AppRoute } from '../dataTypes/enums/app-route.ts';
 import { HelmetProvider } from 'react-helmet-async';
 import { Provider } from 'react-redux';
 import { store } from '../store/store.ts';
+import { AuthorizationWrapper } from './authorization-wrapper.tsx';
+import { AuthorizationStatus } from '../dataTypes/enums/authorization-status.ts';
 
 export function App(): React.JSX.Element {
   return (
@@ -23,21 +21,23 @@ export function App(): React.JSX.Element {
             <Route
               path={AppRoute.Login}
               element={
-                <AuthorizationWrapperForUnauthorizedOnly
+                <AuthorizationWrapper
                   fallbackUrl={AppRoute.MainPage}
+                  requiredStatus={AuthorizationStatus.Unauthorized}
                 >
                   <LoginPage />
-                </AuthorizationWrapperForUnauthorizedOnly>
+                </AuthorizationWrapper>
               }
             />
             <Route
               path={AppRoute.Favorites}
               element={
-                <AuthorizationWrapperForAuthorizedOnly
+                <AuthorizationWrapper
                   fallbackUrl={AppRoute.Login}
+                  requiredStatus={AuthorizationStatus.Authorized}
                 >
                   <FavoritesPage />
-                </AuthorizationWrapperForAuthorizedOnly>
+                </AuthorizationWrapper>
               }
             />
             <Route path={`${AppRoute.Offer}/:id`} element={<OfferPage />} />

src/components/authorization-wrapper.tsx

@@ -1,25 +1,28 @@
 import { Navigate } from 'react-router-dom';
 import { useAppSelector } from '../store/store.ts';
 import { AppRoute } from '../dataTypes/enums/app-route.ts';
-import { getIsAuthorized } from '../store/user/user.selectors.ts';
+import { getAuthorizationStatus } from '../store/user/user.selectors.ts';
+import { AuthorizationStatus } from '../dataTypes/enums/authorization-status.ts';
+import { Spinner } from './spinner/Spinner.tsx';
 
 interface AuthorizationWrapperProps {
   children: React.JSX.Element;
   fallbackUrl: AppRoute;
+  requiredStatus: AuthorizationStatus;
 }
 
-export function AuthorizationWrapperForAuthorizedOnly({
+export function AuthorizationWrapper({
   children,
   fallbackUrl,
+  requiredStatus,
 }: AuthorizationWrapperProps): React.JSX.Element {
-  const isAuthorized = useAppSelector(getIsAuthorized);
-  return isAuthorized ? children : <Navigate to={fallbackUrl} />;
-}
-
-export function AuthorizationWrapperForUnauthorizedOnly({
-  children,
-  fallbackUrl,
-}: AuthorizationWrapperProps): React.JSX.Element {
-  const isUnauthorized = !useAppSelector(getIsAuthorized);
-  return isUnauthorized ? children : <Navigate to={fallbackUrl} />;
+  const authorizationStatus = useAppSelector(getAuthorizationStatus);
+  if (authorizationStatus === AuthorizationStatus.Unknown) {
+    return <Spinner />;
+  }
+  return authorizationStatus === requiredStatus ? (
+    children
+  ) : (
+    <Navigate to={fallbackUrl} />
+  );
 }

src/components/cities-list.tsx

@@ -19,16 +19,16 @@ function CitiesListImpl({
           {CITIES.map((city: City) => (
             <li key={city.name} className="locations__item">
               {city.name === activeCityName ? (
-                <a className="locations__item-link tabs__item tabs__item--active">
+                <div className="locations__item-link tabs__item tabs__item--active">
                   <span>{city.name}</span>
-                </a>
+                </div>
               ) : (
-                <a
+                <div
                   className="locations__item-link tabs__item"
                   onClick={() => dispatch(changeCity(city))}
                 >
                   <span>{city.name}</span>
-                </a>
+                </div>
               )}
             </li>
           ))}

src/components/layout/user-info.tsx

@@ -43,9 +43,9 @@ function UserInfoImpl() {
           </Link>
         </li>
         <li className="header__nav-item">
-          <a className="header__nav-link" onClick={handleLogout}>
+          <div className="header__nav-link" onClick={handleLogout}>
             <span className="header__signout">Sign out</span>
-          </a>
+          </div>
         </li>
       </ul>
     </nav>

src/components/offer/offer-group.tsx

@@ -1,5 +1,10 @@
 import { Offer } from '../../dataTypes/offer.ts';
 import { OffersList } from './offers-list.tsx';
+import { Link } from 'react-router-dom';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
+import { useAppDispatch } from '../../store/store.ts';
+import { changeCity } from '../../store/offers/offers.slice.ts';
+import { CITIES } from '../../consts/cities.ts';
 
 interface OfferGroupProps {
   cityName: string;
@@ -10,13 +15,21 @@ export function OfferGroup({
   cityName,
   offers,
 }: OfferGroupProps): React.JSX.Element {
+  const dispatch = useAppDispatch();
   return (
     <li className="favorites__locations-items">
       <div className="favorites__locations locations locations--current">
         <div className="locations__item">
-          <a className="locations__item-link" href="#">
+          <Link
+            className="locations__item-link"
+            onClick={() =>
+              dispatch(
+                changeCity(CITIES.find((city) => city.name === cityName)!),
+              )}
+            to={AppRoute.MainPage}
+          >
             <span>{cityName}</span>
-          </a>
+          </Link>
         </div>
       </div>
       <div className="favorites__places">

src/index.tsx

@@ -13,9 +13,9 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
+store.dispatch(checkAuthorization());
 store.dispatch(fetchOffers());
 store.dispatch(fetchFavoriteOffers());
-store.dispatch(checkAuthorization());
 
 root.render(
   <React.StrictMode>

src/store/async-actions.ts

@@ -16,7 +16,7 @@ import {
   setReviewPostingStatus,
 } from './current-offer/current-offer.slice.ts';
 import { setAuthorizationStatus, setUserInfo } from './user/user-slice.ts';
-import { Bounce, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ReviewStatus } from '../dataTypes/enums/review-status.ts';
 
@@ -110,30 +110,9 @@ export const postReview = createAsyncThunk<
     ) {
       toast.error(
         `Error posting review, server responded with status ${error.response.status}. please try again later.`,
-        {
-          position: 'top-right',
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: 'light',
-          transition: Bounce,
-        },
       );
     } else {
-      toast.error('Error posting comment. please try again later', {
-        position: 'top-right',
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: 'light',
-        transition: Bounce,
-      });
+      toast.error('Error posting comment. please try again later');
     }
     dispatch(setReviewPostingStatus(ReviewStatus.Error));
   }

src/store/user/user.selectors.ts

@@ -6,4 +6,7 @@ type UserState = Pick<State, NameSpace.User>;
 
 export const getIsAuthorized = (state: UserState) =>
   state[NameSpace.User].authorizationStatus === AuthorizationStatus.Authorized;
+
+export const getAuthorizationStatus = (state: UserState) =>
+  state[NameSpace.User].authorizationStatus;
 export const getUserInfo = (state: UserState) => state[NameSpace.User].userInfo;