From dd9fb868550f73191a9aae9ee64cf1f560aba423 Mon Sep 17 00:00:00 2001
From: denispan <6231990@gmail.com>
Date: Fri, 5 Apr 2024 10:25:40 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=83=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.tsx                                   |  4 +-
 .../comments-list/comments-list.tsx           | 37 ++++++++++++++++
 .../{login-form => form-login}/login-form.tsx |  0
 src/components/form-review/form-review.tsx    | 40 ++++++++++++++---
 src/components/header/header.tsx              |  2 +-
 src/components/rating-star/rating-star.tsx    | 12 +++--
 src/components/review/review.tsx              |  4 +-
 src/const.ts                                  |  4 +-
 src/hooks/favorites.ts                        |  7 +++
 src/pages/login/login.tsx                     |  2 +-
 src/pages/offer/offer.tsx                     | 27 +++++-------
 src/store/index.ts                            |  2 +
 src/store/slices/comments.ts                  | 19 ++++++--
 src/store/slices/favorites.ts                 | 44 +++++++++++++++++++
 src/store/thunks/comments.ts                  | 24 ++++++++++
 src/store/thunks/offers.ts                    |  9 ++--
 src/types/comment.ts                          |  9 +++-
 17 files changed, 203 insertions(+), 43 deletions(-)
 create mode 100644 src/components/comments-list/comments-list.tsx
 rename src/components/{login-form => form-login}/login-form.tsx (100%)
 create mode 100644 src/hooks/favorites.ts
 create mode 100644 src/store/slices/favorites.ts
 create mode 100644 src/store/thunks/comments.ts

diff --git a/src/app.tsx b/src/app.tsx
index f2d1a12..c6f73d4 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,7 @@
 import Main from './pages/main/main.tsx';
 import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 import NotFound from './pages/not-found/not-found.tsx';
-import {AppRoute, AuthStatus, CITIES, DEFAULT_CITY_SLUG} from './const.ts';
+import {AppRoute, CITIES, DEFAULT_CITY_SLUG} from './const.ts';
 import Favorites from './pages/favorites/favorites.tsx';
 import Offer from './pages/offer/offer.tsx';
 import PrivateRoute from './components/private-route/private-route.tsx';
@@ -51,7 +51,7 @@ function App() {
         />
         <Route
           path={`${AppRoute.Offer}/:offerId`}
-          element={<Offer userAuth={AuthStatus.Auth} />}
+          element={<Offer />}
         />
         <Route
           path="/*"
diff --git a/src/components/comments-list/comments-list.tsx b/src/components/comments-list/comments-list.tsx
new file mode 100644
index 0000000..9d3809a
--- /dev/null
+++ b/src/components/comments-list/comments-list.tsx
@@ -0,0 +1,37 @@
+import type {OfferFullInfo} from '../../types/offer.ts';
+import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
+import {useEffect} from 'react';
+import {commentsActions, commentsSelectors} from '../../store/slices/comments.ts';
+import Review from '../review/review.tsx';
+
+interface CommentsListProps {
+  offerId: OfferFullInfo['id'];
+}
+
+function CommentsList ({offerId}: CommentsListProps) {
+  const {fetchComments} = useActionCreators(commentsActions);
+  const postCommentStatus = useAppSelector(commentsSelectors.statusPostRequest);
+  const comments = useAppSelector(commentsSelectors.comments);
+  const commentsCount = comments.length;
+
+  useEffect(() => {
+    fetchComments(offerId);
+  }, [postCommentStatus, offerId]);
+
+  return (
+    <>
+      <h2 className="reviews__title">
+        Reviews &middot; <span className="reviews__amount">{commentsCount}</span>
+      </h2>
+      <ul className="reviews__list">
+        {
+          commentsCount > 0 &&
+          comments.map((comment) => <Review key={comment.id} review={comment}/>
+          )
+        }
+      </ul>
+    </>
+  );
+}
+
+export default CommentsList;
diff --git a/src/components/login-form/login-form.tsx b/src/components/form-login/login-form.tsx
similarity index 100%
rename from src/components/login-form/login-form.tsx
rename to src/components/form-login/login-form.tsx
diff --git a/src/components/form-review/form-review.tsx b/src/components/form-review/form-review.tsx
index b0145b6..c1e6120 100644
--- a/src/components/form-review/form-review.tsx
+++ b/src/components/form-review/form-review.tsx
@@ -1,18 +1,44 @@
 import {MIN_LENGTH_COMMENT, MIN_STARS_COMMENT, RATING_STARS} from '../../const.ts';
+import {StarTitle, StarValue} from '../rating-star/rating-star.tsx';
 import RatingStar from '../rating-star/rating-star.tsx';
-import type {StarTitle} from '../rating-star/rating-star.tsx';
-import {FormEvent, useState} from 'react';
+import {FormEvent, useRef, useState} from 'react';
+import {useActionCreators} from '../../hooks/store.ts';
+import {commentsActions} from '../../store/slices/comments.ts';
+import {OfferFullInfo} from '../../types/offer.ts';
 
-function FormReview() {
-  const [ratingStar, setRatingStar] = useState(0);
-  const [textAreaValue, setTextAreaValue] = useState('');
+type FormReviewProps = {
+  offerId: OfferFullInfo['id'];
+}
+
+type InitialForm = {
+  comment: string;
+  rating: StarValue;
+}
+
+const INITIAL_FORM_VALUE: InitialForm = {
+  comment: '',
+  rating: RATING_STARS['unknown'],
+}
+
+function FormReview({offerId}: FormReviewProps) {
+  const [textAreaValue, setTextAreaValue] = useState(INITIAL_FORM_VALUE.comment);
+  const [ratingStar, setRatingStar] = useState(INITIAL_FORM_VALUE.rating);
+  const {postComment} = useActionCreators(commentsActions);
+  const formRef = useRef(null);
 
   const onFormSubmit = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
+    postComment({offerId, body: {comment: textAreaValue, rating: ratingStar}})
+      .unwrap()
+      .then(() => {
+        setTextAreaValue(INITIAL_FORM_VALUE.comment);
+        setRatingStar(INITIAL_FORM_VALUE.rating);
+      });
   };
 
   return (
     <form
+      ref={formRef}
       onSubmit={(evt) => onFormSubmit(evt)}
       className="reviews__form form"
       action="#"
@@ -20,19 +46,21 @@ function FormReview() {
     >
       <label className="reviews__label form__label" htmlFor="review">Your review</label>
       <div className="reviews__rating-form form__rating">
-        {Object.entries(RATING_STARS).map(([starTitle, starValue]) =>
+        {Object.entries(RATING_STARS).slice(1).map(([starTitle, starValue]) =>
           (
             <RatingStar
               onClickHandle={setRatingStar}
               key={starTitle}
               starTitle={starTitle as StarTitle}
               starValue={starValue}
+              currentValue={ratingStar}
             />
           )
         )}
       </div>
       <textarea
         onChange={(evt) => setTextAreaValue(evt.target.value)}
+        value={textAreaValue}
         className="reviews__textarea form__textarea"
         id="review" name="review"
         placeholder="Tell how was your stay, what you like and what can be improved"
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index e10aefd..8fd4869 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -33,7 +33,7 @@ function Header() {
           className="header__nav-link"
           href="#"
           onClick={(e) => {
-            logoutHandler(e);
+            logoutHandler(e).catch((error: Error) => toast.warning(error.message));
           }}
         >
           <span className="header__signout">Sign out</span>
diff --git a/src/components/rating-star/rating-star.tsx b/src/components/rating-star/rating-star.tsx
index c05dffb..b2071f3 100644
--- a/src/components/rating-star/rating-star.tsx
+++ b/src/components/rating-star/rating-star.tsx
@@ -6,14 +6,20 @@ export type StarValue = (typeof RATING_STARS)[keyof typeof RATING_STARS]
 interface RatingStar {
   starTitle: StarTitle;
   starValue: StarValue;
-  onClickHandle: React.Dispatch<React.SetStateAction<number>>;
+  currentValue: StarValue
+  onClickHandle: React.Dispatch<React.SetStateAction<StarValue>>;
 }
 
-function RatingStar({starTitle, starValue, onClickHandle}: RatingStar) {
+function RatingStar({starTitle, starValue, onClickHandle, currentValue}: RatingStar) {
   return (
     <>
-      <input className="form__rating-input visually-hidden" name="rating" value={starValue} id={`${starValue}-stars`}
+      <input
+        className="form__rating-input visually-hidden"
+        name="rating"
+        value={starValue}
+        id={`${starValue}-stars`}
         type="radio"
+        checked={currentValue === starValue}
       />
       <label
         onClick={() => onClickHandle(starValue)}
diff --git a/src/components/review/review.tsx b/src/components/review/review.tsx
index 98fb20e..5146f8e 100644
--- a/src/components/review/review.tsx
+++ b/src/components/review/review.tsx
@@ -1,10 +1,10 @@
 import Rating from '../rating/rating.tsx';
-import {CommentInterface} from '../../types/comment.ts';
+import {Comment} from '../../types/comment.ts';
 import * as dayjs from 'dayjs';
 import {DATE_FORMAT, DATE_FORMAT_ATTRIBUTE} from '../../const.ts';
 
 interface ReviewProps {
-  review: CommentInterface;
+  review: Comment;
 }
 
 function Review({review}: ReviewProps) {
diff --git a/src/const.ts b/src/const.ts
index 4193076..d6e6dc1 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -8,11 +8,12 @@ const OFFERS_LOADER_COUNT = 4;
 const TOAST_AUTO_CLOSE_TIME = 2000;
 
 const RATING_STARS = {
+  'unknown': 0,
   'perfect': 5,
   'good': 4,
   'not bad': 3,
   'badly': 2,
-  'terribly': 1
+  'terribly': 1,
 } as const;
 
 const MIN_LENGTH_COMMENT = 50;
@@ -46,6 +47,7 @@ const enum AppRoute {
 enum APIRoute {
   Offers = '/offers',
   Comments = '/comments',
+  Favorite = '/favorite',
   Login = '/login',
   Logout = '/logout',
 }
diff --git a/src/hooks/favorites.ts b/src/hooks/favorites.ts
new file mode 100644
index 0000000..4315ea3
--- /dev/null
+++ b/src/hooks/favorites.ts
@@ -0,0 +1,7 @@
+import {useAppSelector} from './store.ts';
+import {favoritesSelectors} from '../store/slices/favorites.ts';
+
+export function useFavoritesCount() {
+  const favorites = useAppSelector(favoritesSelectors.favorites);
+  return favorites.length;
+}
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
index 54a6803..fa6abad 100644
--- a/src/pages/login/login.tsx
+++ b/src/pages/login/login.tsx
@@ -1,6 +1,6 @@
 import Logo from '../../components/logo/logo.tsx';
 import {useDocumentTitle} from '../../hooks/document-title.ts';
-import LoginForm from '../../components/login-form/login-form.tsx';
+import LoginForm from '../../components/form-login/login-form.tsx';
 
 interface LoginProps {
   title?: string;
diff --git a/src/pages/offer/offer.tsx b/src/pages/offer/offer.tsx
index 939eb57..26ab063 100644
--- a/src/pages/offer/offer.tsx
+++ b/src/pages/offer/offer.tsx
@@ -6,7 +6,6 @@ import FavoriteButton from '../../components/favorite-button/favorite-button.tsx
 import Rating from '../../components/rating/rating.tsx';
 import {capitalizeFirstLetter} from '../../utils/common.ts';
 import Host from '../../components/host/host.tsx';
-import Review from '../../components/review/review.tsx';
 import FormReview from '../../components/form-review/form-review.tsx';
 import {AuthStatus, CITIES} from '../../const.ts';
 import Map from '../../components/map/map.tsx';
@@ -16,31 +15,32 @@ import {offersActions} from '../../store/slices/offers.ts';
 import {useEffect} from 'react';
 import {offerFullInfoActions, offerFullInfoSelectors} from '../../store/slices/offer-full-info.ts';
 import {offersNearActions, offersNearSelectors} from '../../store/slices/offers-near.ts';
-import {commentsActions, commentsSelectors} from '../../store/slices/comments.ts';
+import {userSelectors} from '../../store/slices/user.ts';
+import CommentsList from '../../components/comments-list/comments-list.tsx';
 
 interface OfferProps {
   title?: string;
-  userAuth: AuthStatus;
 }
 
-function Offer({title = 'Offer', userAuth}: OfferProps) {
+function Offer({title = 'Offer'}: OfferProps) {
   useDocumentTitle(title);
   const {setActiveOffer} = useActionCreators(offersActions);
   const {fetchOfferFullInfo} = useActionCreators(offerFullInfoActions);
   const {fetchOffersNear} = useActionCreators(offersNearActions);
-  const {fetchComments} = useActionCreators(commentsActions);
+
+  const authStatus = useAppSelector(userSelectors.authStatus);
 
   const {offerId} = useParams();
 
   useEffect(() => {
     if (offerId) {
-      Promise.all([fetchOfferFullInfo(offerId), fetchOffersNear(offerId), fetchComments(offerId)]);
+      Promise.all([fetchOfferFullInfo(offerId), fetchOffersNear(offerId)]);
     }
-  }, [fetchOfferFullInfo, fetchOffersNear, fetchComments, offerId]);
+  }, [fetchOfferFullInfo, fetchOffersNear, offerId]);
 
   const offerFullInfo = useAppSelector(offerFullInfoSelectors.offerFullInfo);
   const offersNear = useAppSelector(offersNearSelectors.offersNear);
-  const comments = useAppSelector(commentsSelectors.comments);
+
 
   if (!offerFullInfo) {
     return <NotFound />;
@@ -122,15 +122,8 @@ function Offer({title = 'Offer', userAuth}: OfferProps) {
               </div>
               <Host host={host} description={description} />
               <section className="offer__reviews reviews">
-                <h2 className="reviews__title">Reviews &middot; <span className="reviews__amount">{comments.length}</span></h2>
-                <ul className="reviews__list">
-                  {
-                    comments.length > 0 &&
-                    comments.map((comment) => <Review key={comment.id} review={comment} />
-                    )
-                  }
-                </ul>
-                {userAuth === AuthStatus.Auth && <FormReview/>}
+                {offerId && <CommentsList offerId={offerId}/>}
+                {authStatus === AuthStatus.Auth && offerId && <FormReview offerId={offerId}/>}
               </section>
             </div>
           </div>
diff --git a/src/store/index.ts b/src/store/index.ts
index 0b06186..8bcf5a2 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,6 +5,7 @@ import {userSlice} from './slices/user.ts';
 import {offerFullInfoSlice} from './slices/offer-full-info.ts';
 import {commentsSlice} from './slices/comments.ts';
 import {offersNearSlice} from './slices/offers-near.ts';
+import {favoritesSlice} from './slices/favorites.ts';
 
 export const api = createAPI();
 
@@ -14,6 +15,7 @@ const reducer = combineReducers({
   [commentsSlice.name]: commentsSlice.reducer,
   [offersNearSlice.name]: offersNearSlice.reducer,
   [userSlice.name]: userSlice.reducer,
+  [favoritesSlice.name]: favoritesSlice.reducer,
 });
 
 export const store = configureStore({
diff --git a/src/store/slices/comments.ts b/src/store/slices/comments.ts
index e8a5bc4..09bb646 100644
--- a/src/store/slices/comments.ts
+++ b/src/store/slices/comments.ts
@@ -1,16 +1,18 @@
 import {createSlice} from '@reduxjs/toolkit';
 import {RequestStatus} from '../../const.ts';
-import {fetchCommentsAction} from '../thunks/offers.ts';
-import {CommentInterface} from '../../types/comment.ts';
+import {Comment} from '../../types/comment.ts';
+import {fetchCommentsAction, postCommentAction} from '../thunks/comments.ts';
 
 interface CommentsState {
-  comments: CommentInterface[];
+  comments: Comment[];
   status: RequestStatus;
+  statusPostRequest: RequestStatus;
 }
 
 const initialState: CommentsState = {
   comments: [],
   status: RequestStatus.Idle,
+  statusPostRequest: RequestStatus.Idle,
 };
 
 const commentsSlice = createSlice({
@@ -28,16 +30,27 @@ const commentsSlice = createSlice({
     builder.addCase(fetchCommentsAction.rejected, (state) => {
       state.status = RequestStatus.Failed;
     });
+    builder.addCase(postCommentAction.pending, (state) => {
+      state.statusPostRequest = RequestStatus.Loading;
+    });
+    builder.addCase(postCommentAction.fulfilled, (state) => {
+      state.statusPostRequest = RequestStatus.Succeed;
+    });
+    builder.addCase(postCommentAction.rejected, (state) => {
+      state.statusPostRequest = RequestStatus.Failed;
+    });
   },
   selectors: {
     comments: (state) => state.comments,
     status: (state) => state.status,
+    statusPostRequest: (state) => state.statusPostRequest,
   }
 });
 
 const commentsActions = {
   ...commentsSlice.actions,
   fetchComments: fetchCommentsAction,
+  postComment: postCommentAction,
 };
 const commentsSelectors = commentsSlice.selectors;
 
diff --git a/src/store/slices/favorites.ts b/src/store/slices/favorites.ts
new file mode 100644
index 0000000..294ee0a
--- /dev/null
+++ b/src/store/slices/favorites.ts
@@ -0,0 +1,44 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {RequestStatus} from '../../const.ts';
+import {fetchFavoritesAction} from '../thunks/offers.ts';
+import {OfferShortInfo} from '../../types/offer.ts';
+
+interface FavoritesState {
+  favorites: OfferShortInfo[];
+  status: RequestStatus;
+}
+
+const initialState: FavoritesState = {
+  favorites: [],
+  status: RequestStatus.Idle,
+};
+
+const favoritesSlice = createSlice({
+  name: 'favorites',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetchFavoritesAction.pending, (state) => {
+      state.status = RequestStatus.Loading;
+    });
+    builder.addCase(fetchFavoritesAction.fulfilled, (state, action) => {
+      state.favorites = action.payload;
+      state.status = RequestStatus.Succeed;
+    });
+    builder.addCase(fetchFavoritesAction.rejected, (state) => {
+      state.status = RequestStatus.Failed;
+    });
+  },
+  selectors: {
+    favorites: (state) => state.favorites,
+    status: (state) => state.status,
+  }
+});
+
+const favoritesActions = {
+  ...favoritesSlice.actions,
+  fetchFavorites: fetchFavoritesAction,
+};
+const favoritesSelectors = favoritesSlice.selectors;
+
+export { favoritesSlice, favoritesActions, favoritesSelectors };
diff --git a/src/store/thunks/comments.ts b/src/store/thunks/comments.ts
new file mode 100644
index 0000000..03ee404
--- /dev/null
+++ b/src/store/thunks/comments.ts
@@ -0,0 +1,24 @@
+import {createAsyncThunk} from '@reduxjs/toolkit';
+import {ThunkApi} from '../../types/store.ts';
+import {OfferFullInfo} from '../../types/offer.ts';
+import {APIRoute} from '../../const.ts';
+import {Comment, CommentPost} from '../../types/comment.ts';
+
+
+export const fetchCommentsAction = createAsyncThunk<Comment[], OfferFullInfo['id'], ThunkApi>(
+  'data/fetchComments',
+  async (offerId, {extra: api}) => {
+    const {data} = await api.get<Comment[]>(`${APIRoute.Comments}/${offerId}`);
+    return data;
+  },
+);
+
+export const postCommentAction =
+  createAsyncThunk<unknown, { offerId: OfferFullInfo['id']; body: CommentPost }, ThunkApi>(
+    'data/postComment',
+    async ({offerId, body}, {extra: api}) => {
+      const {data} = await api.post<CommentPost>(`${APIRoute.Comments}/${offerId}`, body);
+      return data;
+    },
+  );
+
diff --git a/src/store/thunks/offers.ts b/src/store/thunks/offers.ts
index 4e2f468..8708e8d 100644
--- a/src/store/thunks/offers.ts
+++ b/src/store/thunks/offers.ts
@@ -2,7 +2,6 @@ import {createAsyncThunk} from '@reduxjs/toolkit';
 import {ThunkApi} from '../../types/store.ts';
 import {OfferFullInfo, OfferShortInfo} from '../../types/offer.ts';
 import {APIRoute} from '../../const.ts';
-import {CommentInterface} from '../../types/comment.ts';
 
 export const fetchOffersAction = createAsyncThunk<OfferShortInfo[], undefined, ThunkApi>(
   'data/fetchOffers',
@@ -28,10 +27,10 @@ export const fetchOffersNearAction = createAsyncThunk<OfferShortInfo[], OfferFul
   },
 );
 
-export const fetchCommentsAction = createAsyncThunk<CommentInterface[], OfferFullInfo['id'], ThunkApi>(
-  'data/fetchComments',
-  async (offerId, {extra: api}) => {
-    const {data} = await api.get<CommentInterface[]>(`${APIRoute.Comments}/${offerId}`);
+export const fetchFavoritesAction = createAsyncThunk<OfferShortInfo[], undefined, ThunkApi>(
+  'data/fetchFavorites',
+  async (_arg, {extra: api}) => {
+    const {data} = await api.get<OfferShortInfo[]>(APIRoute.Favorite);
     return data;
   },
 );
diff --git a/src/types/comment.ts b/src/types/comment.ts
index ea8d02d..f446e51 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -1,4 +1,4 @@
-interface CommentInterface {
+type Comment = {
   'offerId'?: string;
   'id': string;
   'comment': string;
@@ -11,4 +11,9 @@ interface CommentInterface {
   };
 }
 
-export type {CommentInterface};
+type CommentPost = {
+  comment: string;
+  rating: number;
+}
+
+export type {Comment, CommentPost};

From da355d23f81bb7e3d5ffc11fc558b6bf55ce86f8 Mon Sep 17 00:00:00 2001
From: denispan <6231990@gmail.com>
Date: Fri, 5 Apr 2024 12:26:21 +0200
Subject: [PATCH 2/5] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=83=20=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=80=D0=B8=D0=B5=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form-review/form-review.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-review/form-review.tsx b/src/components/form-review/form-review.tsx
index c1e6120..3080723 100644
--- a/src/components/form-review/form-review.tsx
+++ b/src/components/form-review/form-review.tsx
@@ -8,17 +8,17 @@ import {OfferFullInfo} from '../../types/offer.ts';
 
 type FormReviewProps = {
   offerId: OfferFullInfo['id'];
-}
+};
 
 type InitialForm = {
   comment: string;
   rating: StarValue;
-}
+};
 
 const INITIAL_FORM_VALUE: InitialForm = {
   comment: '',
   rating: RATING_STARS['unknown'],
-}
+};
 
 function FormReview({offerId}: FormReviewProps) {
   const [textAreaValue, setTextAreaValue] = useState(INITIAL_FORM_VALUE.comment);

From d26f658a4d42c6a445c328faba7d927b05c4fbef Mon Sep 17 00:00:00 2001
From: denispan <6231990@gmail.com>
Date: Fri, 5 Apr 2024 19:58:40 +0200
Subject: [PATCH 3/5] favorites

---
 package-lock.json                             | 26 +------
 package.json                                  |  3 +-
 .../favorite-button/favorite-button.tsx       | 31 +++++++-
 src/components/form-login/login-form.tsx      |  2 -
 src/components/header/header.tsx              | 18 ++++-
 src/components/offer-card/offer-card.tsx      |  2 +-
 .../offers-list-loader/offers-list-loader.tsx |  3 +-
 src/components/rating-star/rating-star.tsx    |  2 +-
 src/index.tsx                                 |  2 +
 src/pages/favorites/favorites.tsx             | 75 ++++++++++++-------
 src/pages/offer/offer.tsx                     |  5 +-
 src/polyfills/gruop-by.ts                     | 15 ++++
 src/polyfills/index.ts                        |  1 +
 src/services/api.ts                           | 26 ++++++-
 src/store/slices/favorites.ts                 | 27 +++++--
 src/store/thunks/offers.ts                    | 10 ++-
 src/store/thunks/user.ts                      |  6 +-
 src/types/offer.ts                            | 11 ++-
 src/utils/common.ts                           |  7 +-
 19 files changed, 195 insertions(+), 77 deletions(-)
 create mode 100644 src/polyfills/gruop-by.ts
 create mode 100644 src/polyfills/index.ts

diff --git a/package-lock.json b/package-lock.json
index cfb2b28..5151008 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "history": "5.3.0",
         "http-status-codes": "2.3.0",
         "leaflet": "1.7.1",
-        "nanoid": "5.0.3",
         "react": "18.2.0",
         "react-content-loader": "6.0.3",
         "react-dom": "18.2.0",
@@ -44,7 +43,7 @@
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-react-refresh": "0.4.3",
         "jsdom": "22.1.0",
-        "typescript": "5.2.2",
+        "typescript": "5.4.2",
         "vite": "4.4.11",
         "vitest": "0.34.6"
       }
@@ -4704,23 +4703,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/nanoid": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.3.tgz",
-      "integrity": "sha512-I7X2b22cxA4LIHXPSqbBCEQSL+1wv8TuoefejsX4HFWyC6jc5JG7CEaxOltiKjc1M+YCS2YkrZZcj4+dytw9GA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -6161,9 +6143,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/package.json b/package.json
index d196163..6bb7b5e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "history": "5.3.0",
     "http-status-codes": "2.3.0",
     "leaflet": "1.7.1",
-    "nanoid": "5.0.3",
     "react": "18.2.0",
     "react-content-loader": "6.0.3",
     "react-dom": "18.2.0",
@@ -46,7 +45,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",
     "jsdom": "22.1.0",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "vite": "4.4.11",
     "vitest": "0.34.6"
   },
diff --git a/src/components/favorite-button/favorite-button.tsx b/src/components/favorite-button/favorite-button.tsx
index 410f19c..73508b7 100644
--- a/src/components/favorite-button/favorite-button.tsx
+++ b/src/components/favorite-button/favorite-button.tsx
@@ -1,12 +1,18 @@
 import {classNames} from '../../utils/class-names/class-names.ts';
 import {OfferShortInfo} from '../../types/offer.ts';
+import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
+import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
+import {useState} from 'react';
+import {RequestStatus} from '../../const.ts';
+import {toast} from 'react-toastify';
 
 interface FavoriteButtonProps {
   componentType: 'place-card' | 'offer';
   isFavorite: OfferShortInfo['isFavorite'];
+  offerId: OfferShortInfo['id'];
 }
 
-function FavoriteButton({componentType, isFavorite}: FavoriteButtonProps) {
+function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProps) {
   const sizes = {
     'place-card': {
       width: '18',
@@ -18,17 +24,34 @@ function FavoriteButton({componentType, isFavorite}: FavoriteButtonProps) {
     },
   } as const;
 
+  const [isFavoriteCurrent, setIsFavoriteCurrent] = useState(isFavorite);
+  const {toggleFavorite} = useActionCreators(favoritesActions);
+  const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite);
+
+  const onClickHandler = () => {
+    toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId})
+      .unwrap()
+      .then(() => setIsFavoriteCurrent(!isFavoriteCurrent)), {
+      pending: 'Запрос отправляется',
+    });
+  };
+
   return (
     <button
-      className={classNames(`
-      ${componentType}__bookmark-button button`, isFavorite && `${componentType}__bookmark-button--active`)}
+      className={
+        classNames(
+          `${componentType}__bookmark-button button`,
+          isFavoriteCurrent && `${componentType}__bookmark-button--active`)
+      }
       type="button"
+      onClick={onClickHandler}
+      disabled={statusToggleFavorite === RequestStatus.Loading}
     >
       <svg className={`${componentType}__bookmark-icon`} {...sizes[componentType]}>
         <use xlinkHref="#icon-bookmark"></use>
       </svg>
       <span className="visually-hidden">
-        {isFavorite ? 'In bookmarks' : 'To bookmarks'}
+        {isFavoriteCurrent ? 'In bookmarks' : 'To bookmarks'}
       </span>
     </button>
   );
diff --git a/src/components/form-login/login-form.tsx b/src/components/form-login/login-form.tsx
index bfc3da5..0317d91 100644
--- a/src/components/form-login/login-form.tsx
+++ b/src/components/form-login/login-form.tsx
@@ -12,8 +12,6 @@ function LoginForm() {
     e.preventDefault();
     toast.promise(login({email, password}).unwrap(), {
       pending: 'Loading',
-      success: 'Success',
-      error: 'Error',
     });
   };
 
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 8fd4869..8711cc5 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,14 +1,28 @@
 import Logo from '../logo/logo.tsx';
 import {Link} from 'react-router-dom';
-import {AppRoute, AuthStatus} from '../../const.ts';
+import {AppRoute, AuthStatus, RequestStatus} from '../../const.ts';
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
 import {userActions, userSelectors} from '../../store/slices/user.ts';
 import {toast} from 'react-toastify';
+import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
+import {useEffect} from 'react';
 
 function Header() {
   const authStatus = useAppSelector(userSelectors.authStatus);
   const userInfo = useAppSelector(userSelectors.userInfo);
   const {logout} = useActionCreators(userActions);
+  const {fetchFavorites} = useActionCreators(favoritesActions);
+  const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite);
+
+  useEffect(() => {
+    if (authStatus === AuthStatus.Auth &&
+      (statusToggleFavorite === RequestStatus.Succeed ||
+        statusToggleFavorite === RequestStatus.Idle)) {
+      fetchFavorites();
+    }
+  }, [statusToggleFavorite]);
+
+  const favoritesCount = useAppSelector(favoritesSelectors.favorites).length;
 
   const logoutHandler = async (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     e.preventDefault();
@@ -25,7 +39,7 @@ function Header() {
             {userInfo?.avatarUrl && <img src={userInfo.avatarUrl} alt="avatar"/>}
           </div>
           {userInfo?.name && <span className="header__user-name user__name">{userInfo.name}</span>}
-          <span className="header__favorite-count">3</span>
+          <span className="header__favorite-count">{favoritesCount}</span>
         </Link>
       </li>
       <li className="header__nav-item">
diff --git a/src/components/offer-card/offer-card.tsx b/src/components/offer-card/offer-card.tsx
index feed57b..36ffb72 100644
--- a/src/components/offer-card/offer-card.tsx
+++ b/src/components/offer-card/offer-card.tsx
@@ -67,7 +67,7 @@ function OfferCard ({offer, componentType, hoverHandler}: PlaceCardProps) {
             <b className="place-card__price-value">&euro;{price}</b>
             <span className="place-card__price-text">&#47;&nbsp;night</span>
           </div>
-          <FavoriteButton componentType={'place-card'} isFavorite={isFavorite} />
+          <FavoriteButton offerId={id} componentType={'place-card'} isFavorite={isFavorite} />
         </div>
         <Rating componentType={'place-card'} rating={rating} />
         <h2 className="place-card__name">
diff --git a/src/components/offers-list-loader/offers-list-loader.tsx b/src/components/offers-list-loader/offers-list-loader.tsx
index 8921a2c..cb79e5e 100644
--- a/src/components/offers-list-loader/offers-list-loader.tsx
+++ b/src/components/offers-list-loader/offers-list-loader.tsx
@@ -1,11 +1,10 @@
 import ContentLoader from 'react-content-loader';
 import OfferLoader from '../offer-loader/offer-loader.tsx';
 import {OFFERS_LOADER_COUNT} from '../../const.ts';
-import {nanoid} from 'nanoid';
 
 
 function OffersListLoader () {
-  const offerLoaders = Array.from({length: OFFERS_LOADER_COUNT}, () => nanoid());
+  const offerLoaders = Array.from({length: OFFERS_LOADER_COUNT}, () => crypto.randomUUID());
   return (
     <section className="cities__places places">
       <h2 className="visually-hidden">Places</h2>
diff --git a/src/components/rating-star/rating-star.tsx b/src/components/rating-star/rating-star.tsx
index b2071f3..745638c 100644
--- a/src/components/rating-star/rating-star.tsx
+++ b/src/components/rating-star/rating-star.tsx
@@ -6,7 +6,7 @@ export type StarValue = (typeof RATING_STARS)[keyof typeof RATING_STARS]
 interface RatingStar {
   starTitle: StarTitle;
   starValue: StarValue;
-  currentValue: StarValue
+  currentValue: StarValue;
   onClickHandle: React.Dispatch<React.SetStateAction<StarValue>>;
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index a6daca5..736ccdd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,7 @@ import {store} from './store';
 import {ToastContainer} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import {TOAST_AUTO_CLOSE_TIME} from './const.ts';
+import './polyfills';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -15,6 +16,7 @@ root.render(
   <React.StrictMode>
     <Provider store={store}>
       <ToastContainer
+        position="top-center"
         autoClose={TOAST_AUTO_CLOSE_TIME}
         hideProgressBar
       />
diff --git a/src/pages/favorites/favorites.tsx b/src/pages/favorites/favorites.tsx
index af3dba8..7851c1b 100644
--- a/src/pages/favorites/favorites.tsx
+++ b/src/pages/favorites/favorites.tsx
@@ -2,10 +2,15 @@ import Header from '../../components/header/header.tsx';
 import {useDocumentTitle} from '../../hooks/document-title.ts';
 import Footer from '../../components/footer/footer.tsx';
 import {Link} from 'react-router-dom';
-import {AppRoute} from '../../const.ts';
+import {AppRoute, RequestStatus} from '../../const.ts';
 import OfferCard from '../../components/offer-card/offer-card.tsx';
 import FavoritesEmpty from '../../components/favorites-empty/favorites-empty.tsx';
-import {OfferShortInfo} from '../../types/offer.ts';
+import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
+import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
+import {useEffect} from 'react';
+import {toast} from 'react-toastify';
+import {CityName, OffersByCity, OfferShortInfo} from '../../types/offer.ts';
+import {getCitySlug} from '../../utils/common.ts';
 
 interface FavoritesProps {
   title?: string;
@@ -14,12 +19,25 @@ interface FavoritesProps {
 function Favorites({title = 'Favorites'}: FavoritesProps) {
   useDocumentTitle(title);
 
-  const offersFavorites: OfferShortInfo[] = [];
+  const {fetchFavorites} = useActionCreators(favoritesActions);
+  const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite);
+  const offersFavorites = useAppSelector(favoritesSelectors.favorites);
 
-  if (!offersFavorites.length) {
+  useEffect(() => {
+    if (statusToggleFavorite === RequestStatus.Succeed || statusToggleFavorite === RequestStatus.Idle) {
+      toast.promise(fetchFavorites().unwrap(), {
+        pending: 'запрос отправляется',
+      }, {toastId: crypto.randomUUID()});
+    }
+  }, [fetchFavorites, statusToggleFavorite]);
+
+  if (offersFavorites.length === 0) {
     return <FavoritesEmpty />;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const offersFavoritesByCity: OffersByCity = Object.groupBy(offersFavorites, ({city}) => city.name) as OffersByCity;
+
   return (
     <div className="page">
       <Header />
@@ -28,32 +46,37 @@ function Favorites({title = 'Favorites'}: FavoritesProps) {
           <section className="favorites">
             <h1 className="favorites__title">Saved listing</h1>
             <ul className="favorites__list">
-              <li className="favorites__locations-items">
-                <div className="favorites__locations locations locations--current">
-                  <div className="locations__item">
-                    <Link className="locations__item-link" to={`${AppRoute.Root}`}>
-                      <span>Amsterdam</span>
-                    </Link>
-                  </div>
-                </div>
-                <div className="favorites__places">
-                  {
-                    offersFavorites.map((offer) =>
-                      (
-                        <OfferCard
-                          componentType={'favorites'}
-                          key={offer.id}
-                          offer={offer}
-                        />
-                      ))
-                  }
-                </div>
-              </li>
+              {
+                Object.keys(offersFavoritesByCity)?.map((cityName) =>
+                  (
+                    <li key={cityName} className="favorites__locations-items">
+                      <div className="favorites__locations locations locations--current">
+                        <div className="locations__item">
+                          <Link className="locations__item-link" to={`${AppRoute.Root}${getCitySlug(cityName as CityName)}`}>
+                            <span>{cityName}</span>
+                          </Link>
+                        </div>
+                      </div>
+                      <div className="favorites__places">
+                        {
+                          offersFavoritesByCity[cityName].map((offer: OfferShortInfo) => (
+                            <OfferCard
+                              componentType={'favorites'}
+                              key={offer.id}
+                              offer={offer}
+                            />)
+                          )
+                        }
+                      </div>
+                    </li>
+                  )
+                )
+              }
             </ul>
           </section>
         </div>
       </main>
-      <Footer />
+      <Footer/>
     </div>
   );
 }
diff --git a/src/pages/offer/offer.tsx b/src/pages/offer/offer.tsx
index 26ab063..6ea9891 100644
--- a/src/pages/offer/offer.tsx
+++ b/src/pages/offer/offer.tsx
@@ -34,7 +34,8 @@ function Offer({title = 'Offer'}: OfferProps) {
 
   useEffect(() => {
     if (offerId) {
-      Promise.all([fetchOfferFullInfo(offerId), fetchOffersNear(offerId)]);
+      fetchOfferFullInfo(offerId);
+      fetchOffersNear(offerId);
     }
   }, [fetchOfferFullInfo, fetchOffersNear, offerId]);
 
@@ -89,7 +90,7 @@ function Offer({title = 'Offer'}: OfferProps) {
                 <h1 className="offer__name">
                   {offerFullInfo.title}
                 </h1>
-                <FavoriteButton componentType={'offer'} isFavorite={isFavorite} />
+                <FavoriteButton offerId={offerId!} componentType={'offer'} isFavorite={isFavorite} />
               </div>
               <Rating componentType={'offer'} rating={rating} />
               <ul className="offer__features">
diff --git a/src/polyfills/gruop-by.ts b/src/polyfills/gruop-by.ts
new file mode 100644
index 0000000..710bb7b
--- /dev/null
+++ b/src/polyfills/gruop-by.ts
@@ -0,0 +1,15 @@
+if (!('groupBy' in Object)) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  Object.groupBy = <K extends PropertyKey, T>(items: Iterable<T>, getKey: (item: T, index: number) => K): Partial<Record<K, T[]>> =>
+    Array.from(items).reduce(
+      (result, item, index) => {
+        const key = getKey(item, index);
+        result[key] = result[key] ?? [];
+        result[key]!.push(item);
+
+        return result;
+      },
+      {} as Partial<Record<K, T[]>>
+    );
+}
diff --git a/src/polyfills/index.ts b/src/polyfills/index.ts
new file mode 100644
index 0000000..97ecf50
--- /dev/null
+++ b/src/polyfills/index.ts
@@ -0,0 +1 @@
+import './gruop-by.ts';
diff --git a/src/services/api.ts b/src/services/api.ts
index 5fe8d5e..9b1bde4 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,6 +1,12 @@
-import axios, {AxiosInstance, InternalAxiosRequestConfig} from 'axios';
+import axios, {AxiosError, AxiosInstance, InternalAxiosRequestConfig} from 'axios';
 import {getToken} from './token.ts';
 import {BACKEND_URL, REQUEST_TIMEOUT} from '../const.ts';
+import {toast} from 'react-toastify';
+
+type DetailMessageType = {
+  type: string;
+  message: string;
+}
 
 export const createAPI = (): AxiosInstance => {
   const api = axios.create({
@@ -17,6 +23,24 @@ export const createAPI = (): AxiosInstance => {
       }
 
       return config;
+    },
+    (error: AxiosError<DetailMessageType>) => {
+      if (error.response) {
+        toast.error(error.response.data.message);
+      }
+
+      throw error;
+    }
+  );
+
+  api.interceptors.response.use(
+    (response) => response,
+    (error: AxiosError<DetailMessageType>) => {
+      if (error.response && !error.response.config.headers['x-no-toast']) {
+        toast.error(error.response.data.message, {toastId: 'error'});
+      }
+
+      throw error;
     }
   );
 
diff --git a/src/store/slices/favorites.ts b/src/store/slices/favorites.ts
index 294ee0a..25ededb 100644
--- a/src/store/slices/favorites.ts
+++ b/src/store/slices/favorites.ts
@@ -1,16 +1,18 @@
 import {createSlice} from '@reduxjs/toolkit';
 import {RequestStatus} from '../../const.ts';
-import {fetchFavoritesAction} from '../thunks/offers.ts';
+import {fetchFavoritesAction, toggleFavoriteAction} from '../thunks/offers.ts';
 import {OfferShortInfo} from '../../types/offer.ts';
 
 interface FavoritesState {
   favorites: OfferShortInfo[];
-  status: RequestStatus;
+  statusFetchFavorites: RequestStatus;
+  statusToggleFavorite: RequestStatus;
 }
 
 const initialState: FavoritesState = {
   favorites: [],
-  status: RequestStatus.Idle,
+  statusFetchFavorites: RequestStatus.Idle,
+  statusToggleFavorite: RequestStatus.Idle,
 };
 
 const favoritesSlice = createSlice({
@@ -19,25 +21,36 @@ const favoritesSlice = createSlice({
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(fetchFavoritesAction.pending, (state) => {
-      state.status = RequestStatus.Loading;
+      state.statusFetchFavorites = RequestStatus.Loading;
     });
     builder.addCase(fetchFavoritesAction.fulfilled, (state, action) => {
       state.favorites = action.payload;
-      state.status = RequestStatus.Succeed;
+      state.statusFetchFavorites = RequestStatus.Succeed;
     });
     builder.addCase(fetchFavoritesAction.rejected, (state) => {
-      state.status = RequestStatus.Failed;
+      state.statusFetchFavorites = RequestStatus.Failed;
+    });
+    builder.addCase(toggleFavoriteAction.pending, (state) => {
+      state.statusToggleFavorite = RequestStatus.Loading;
+    });
+    builder.addCase(toggleFavoriteAction.fulfilled, (state) => {
+      state.statusToggleFavorite = RequestStatus.Succeed;
+    });
+    builder.addCase(toggleFavoriteAction.rejected, (state) => {
+      state.statusToggleFavorite = RequestStatus.Failed;
     });
   },
   selectors: {
     favorites: (state) => state.favorites,
-    status: (state) => state.status,
+    statusFetchFavorites: (state) => state.statusFetchFavorites,
+    statusToggleFavorite: (state) => state.statusToggleFavorite,
   }
 });
 
 const favoritesActions = {
   ...favoritesSlice.actions,
   fetchFavorites: fetchFavoritesAction,
+  toggleFavorite: toggleFavoriteAction,
 };
 const favoritesSelectors = favoritesSlice.selectors;
 
diff --git a/src/store/thunks/offers.ts b/src/store/thunks/offers.ts
index 8708e8d..95b5d13 100644
--- a/src/store/thunks/offers.ts
+++ b/src/store/thunks/offers.ts
@@ -1,6 +1,6 @@
 import {createAsyncThunk} from '@reduxjs/toolkit';
 import {ThunkApi} from '../../types/store.ts';
-import {OfferFullInfo, OfferShortInfo} from '../../types/offer.ts';
+import {PostFavorites, OfferFullInfo, OfferShortInfo} from '../../types/offer.ts';
 import {APIRoute} from '../../const.ts';
 
 export const fetchOffersAction = createAsyncThunk<OfferShortInfo[], undefined, ThunkApi>(
@@ -34,3 +34,11 @@ export const fetchFavoritesAction = createAsyncThunk<OfferShortInfo[], undefined
     return data;
   },
 );
+
+export const toggleFavoriteAction =
+  createAsyncThunk<unknown, PostFavorites, ThunkApi>(
+    'data/toggleFavorite',
+    async ({offerId, status}, {extra: api}) => {
+      await api.post(`${APIRoute.Favorite}/${offerId}/${status}`);
+    },
+  );
diff --git a/src/store/thunks/user.ts b/src/store/thunks/user.ts
index 9bc4c73..db69503 100644
--- a/src/store/thunks/user.ts
+++ b/src/store/thunks/user.ts
@@ -6,7 +6,11 @@ import {UserAuthData, UserInfo} from '../../types/user.ts';
 export const checkAuthAction = createAsyncThunk<UserInfo, undefined, ThunkApi>(
   'user/checkAuth',
   async (_arg, {extra: api}) => {
-    const {data} = await api.get<UserInfo>(APIRoute.Login);
+    const {data} = await api.get<UserInfo>(APIRoute.Login, {
+      headers: {
+        'x-no-toast': 'true',
+      },
+    });
     return data;
   },
 );
diff --git a/src/types/offer.ts b/src/types/offer.ts
index 3b5f3fe..6eaf3d4 100644
--- a/src/types/offer.ts
+++ b/src/types/offer.ts
@@ -43,4 +43,13 @@ interface Host {
   'avatarUrl': string;
 }
 
-export type {OfferShortInfo, OfferFullInfo, City, Location, CityName, Host, CitySlug};
+type PostFavorites = {
+  offerId: string;
+  status: 0 | 1;
+}
+
+interface OffersByCity {
+  [key: string]: OfferShortInfo[];
+}
+
+export type {OfferShortInfo, OfferFullInfo, City, Location, CityName, Host, CitySlug, PostFavorites, OffersByCity};
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 9a00b65..eed0abe 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,7 +1,10 @@
-import {OfferShortInfo} from '../types/offer.ts';
+import {CityName, OfferShortInfo} from '../types/offer.ts';
+import {CITIES} from '../const.ts';
 
 const getRatingValue = (rating: OfferShortInfo['rating']) => (rating * 100) / 5;
 
 const capitalizeFirstLetter = (string: string) => string.charAt(0).toUpperCase() + string.slice(1);
 
-export {getRatingValue, capitalizeFirstLetter};
+const getCitySlug = (cityName: CityName) => CITIES.find((city) => city.name === cityName)?.slug;
+
+export {getRatingValue, capitalizeFirstLetter, getCitySlug};

From a70bbaf877b4f0a1388eebd5685aec13d6c3c79c Mon Sep 17 00:00:00 2001
From: denispan <6231990@gmail.com>
Date: Sun, 7 Apr 2024 01:28:18 +0200
Subject: [PATCH 4/5] =?UTF-8?q?=D1=80=D0=BE=D1=83=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.tsx                                   | 11 +----
 src/components/access-route/access-route.tsx  | 44 +++++++++++++++++++
 src/components/header/header.tsx              |  2 +-
 src/components/loader/loader.module.css       | 40 +++++++++++++++++
 src/components/loader/loader.tsx              | 11 +++++
 .../private-route/private-route.tsx           | 21 ---------
 src/components/public-route/public-route.tsx  | 21 ---------
 src/index.tsx                                 |  4 ++
 src/pages/favorites/favorites.tsx             |  5 +--
 src/store/slices/user.ts                      |  9 +++-
 10 files changed, 110 insertions(+), 58 deletions(-)
 create mode 100644 src/components/access-route/access-route.tsx
 create mode 100644 src/components/loader/loader.module.css
 create mode 100644 src/components/loader/loader.tsx
 delete mode 100644 src/components/private-route/private-route.tsx
 delete mode 100644 src/components/public-route/public-route.tsx

diff --git a/src/app.tsx b/src/app.tsx
index c6f73d4..bf5bdb7 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,19 +4,10 @@ import NotFound from './pages/not-found/not-found.tsx';
 import {AppRoute, CITIES, DEFAULT_CITY_SLUG} from './const.ts';
 import Favorites from './pages/favorites/favorites.tsx';
 import Offer from './pages/offer/offer.tsx';
-import PrivateRoute from './components/private-route/private-route.tsx';
 import Login from './pages/login/login.tsx';
-import PublicRoute from './components/public-route/public-route.tsx';
-import {useActionCreators, useAppSelector} from './hooks/store.ts';
-import {userActions, userSelectors} from './store/slices/user.ts';
-import {useEffect} from 'react';
+import {PrivateRoute, PublicRoute} from './components/access-route/access-route.tsx';
 
 function App() {
-  const {checkAuth} = useActionCreators(userActions);
-  const authStatus = useAppSelector(userSelectors.authStatus);
-  useEffect(() => {
-    checkAuth();
-  }, [authStatus, checkAuth]);
 
   return (
     <BrowserRouter>
diff --git a/src/components/access-route/access-route.tsx b/src/components/access-route/access-route.tsx
new file mode 100644
index 0000000..7fb7bbd
--- /dev/null
+++ b/src/components/access-route/access-route.tsx
@@ -0,0 +1,44 @@
+import {AppRoute, AuthStatus} from '../../const.ts';
+import {Navigate, useLocation} from 'react-router-dom';
+import React from 'react';
+import {useAppSelector} from '../../hooks/store.ts';
+import {userSelectors} from '../../store/slices/user.ts';
+import Loader from '../loader/loader.tsx';
+
+type AccessRouteProps = {
+  children: React.JSX.Element;
+}
+
+type Redirect = {
+  from?: string;
+};
+
+const createAccessRoute = (status: AuthStatus, fallback: AppRoute) =>
+  function AccessRoute({children}: AccessRouteProps) {
+    const authStatus = useAppSelector(userSelectors.authStatus);
+    const location = useLocation();
+
+    if (authStatus === AuthStatus.Unknown) {
+      return <Loader/>;
+    }
+
+    const redirect = (location.state as Redirect ?? {}).from ?? fallback;
+
+    return (
+      authStatus === status
+        ? children
+        :
+        <Navigate
+          to={redirect}
+          state={{
+            from: location.pathname
+          }}
+        />
+    );
+  };
+
+const PrivateRoute = createAccessRoute(AuthStatus.Auth, AppRoute.Login);
+const PublicRoute = createAccessRoute(AuthStatus.NoAuth, AppRoute.Root);
+
+
+export {PrivateRoute, PublicRoute};
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 8711cc5..ef23b75 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -36,7 +36,7 @@ function Header() {
       <li className="header__nav-item user">
         <Link to={AppRoute.Favorites} className="header__nav-link header__nav-link--profile">
           <div className="header__avatar-wrapper user__avatar-wrapper">
-            {userInfo?.avatarUrl && <img src={userInfo.avatarUrl} alt="avatar"/>}
+            {userInfo?.avatarUrl && <img className="user__avatar" src={userInfo.avatarUrl} alt="avatar"/>}
           </div>
           {userInfo?.name && <span className="header__user-name user__name">{userInfo.name}</span>}
           <span className="header__favorite-count">{favoritesCount}</span>
diff --git a/src/components/loader/loader.module.css b/src/components/loader/loader.module.css
new file mode 100644
index 0000000..2a2fdf1
--- /dev/null
+++ b/src/components/loader/loader.module.css
@@ -0,0 +1,40 @@
+.container {
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  flex-direction: column;
+}
+.loader {
+  width: 90px;
+  height: 90px;
+  position: relative;
+}
+.loader::after,
+.loader::before {
+  content: '';
+  box-sizing: border-box;
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  border: 5px solid #4481c3;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: animloader 2s linear infinite;
+}
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
new file mode 100644
index 0000000..11c88aa
--- /dev/null
+++ b/src/components/loader/loader.tsx
@@ -0,0 +1,11 @@
+import styles from './loader.module.css';
+
+function Loader() {
+  return (
+    <div className={styles.container}>
+      <span className={styles.loader}></span>
+    </div>
+  );
+}
+
+export default Loader;
diff --git a/src/components/private-route/private-route.tsx b/src/components/private-route/private-route.tsx
deleted file mode 100644
index d61a158..0000000
--- a/src/components/private-route/private-route.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {AppRoute, AuthStatus} from '../../const.ts';
-import {Navigate} from 'react-router-dom';
-import React from 'react';
-import {useAppSelector} from '../../hooks/store.ts';
-import {userSelectors} from '../../store/slices/user.ts';
-
-type PrivateRouteProps = {
-  children: React.JSX.Element;
-}
-
-function PrivateRoute({children}: PrivateRouteProps) {
-  const authStatus = useAppSelector(userSelectors.authStatus);
-
-  return (
-    authStatus === AuthStatus.Auth
-      ? children
-      : <Navigate to={AppRoute.Login} />
-  );
-}
-
-export default PrivateRoute;
diff --git a/src/components/public-route/public-route.tsx b/src/components/public-route/public-route.tsx
deleted file mode 100644
index 3aa9f0e..0000000
--- a/src/components/public-route/public-route.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {AppRoute, AuthStatus} from '../../const.ts';
-import {Navigate} from 'react-router-dom';
-import React from 'react';
-import {useAppSelector} from '../../hooks/store.ts';
-import {userSelectors} from '../../store/slices/user.ts';
-
-type PublicRouteProps = {
-  children: React.JSX.Element;
-}
-
-function PublicRoute({children}: PublicRouteProps): React.JSX.Element {
-  const authStatus = useAppSelector(userSelectors.authStatus);
-
-  return (
-    authStatus === AuthStatus.Auth
-      ? <Navigate to={AppRoute.Root} />
-      : children
-  );
-}
-
-export default PublicRoute;
diff --git a/src/index.tsx b/src/index.tsx
index 736ccdd..ab40836 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,11 +7,15 @@ import {ToastContainer} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import {TOAST_AUTO_CLOSE_TIME} from './const.ts';
 import './polyfills';
+import {userActions} from './store/slices/user.ts';
+import {getToken} from './services/token.ts';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
+store.dispatch(userActions[getToken() ? 'checkAuth' : 'setNoAuthStatus']());
+
 root.render(
   <React.StrictMode>
     <Provider store={store}>
diff --git a/src/pages/favorites/favorites.tsx b/src/pages/favorites/favorites.tsx
index 7851c1b..58eb250 100644
--- a/src/pages/favorites/favorites.tsx
+++ b/src/pages/favorites/favorites.tsx
@@ -8,7 +8,6 @@ import FavoritesEmpty from '../../components/favorites-empty/favorites-empty.tsx
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
 import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
 import {useEffect} from 'react';
-import {toast} from 'react-toastify';
 import {CityName, OffersByCity, OfferShortInfo} from '../../types/offer.ts';
 import {getCitySlug} from '../../utils/common.ts';
 
@@ -25,9 +24,7 @@ function Favorites({title = 'Favorites'}: FavoritesProps) {
 
   useEffect(() => {
     if (statusToggleFavorite === RequestStatus.Succeed || statusToggleFavorite === RequestStatus.Idle) {
-      toast.promise(fetchFavorites().unwrap(), {
-        pending: 'запрос отправляется',
-      }, {toastId: crypto.randomUUID()});
+      fetchFavorites();
     }
   }, [fetchFavorites, statusToggleFavorite]);
 
diff --git a/src/store/slices/user.ts b/src/store/slices/user.ts
index 0e3ad3a..c5f855a 100644
--- a/src/store/slices/user.ts
+++ b/src/store/slices/user.ts
@@ -21,8 +21,15 @@ const initialState: UserState = {
 const userSlice = createSlice({
   name: 'user',
   initialState,
-  reducers: {},
+  reducers: {
+    setNoAuthStatus: (state) => {
+      state.authStatus = AuthStatus.NoAuth;
+    },
+  },
   extraReducers: (builder) => {
+    builder.addCase(checkAuthAction.pending, (state) => {
+      state.requestStatus = RequestStatus.Loading;
+    });
     builder.addCase(checkAuthAction.fulfilled, (state, action) => {
       state.userInfo = action.payload;
       state.authStatus = AuthStatus.Auth;

From cbfc32daa13958dc3b159bc14cb900f0159c0828 Mon Sep 17 00:00:00 2001
From: denispan <6231990@gmail.com>
Date: Mon, 8 Apr 2024 10:10:01 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D0=B0=20=D0=B8=20?=
 =?UTF-8?q?=D1=84=D0=B0=D0=B2=D0=BE=D1=80=D0=B8=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../comments-list/comments-list.tsx           |  4 +-
 .../favorite-button/favorite-button.tsx       | 26 ++++--
 src/components/form-review/const.ts           |  5 ++
 src/components/form-review/form-review.tsx    | 80 +++++++++++++------
 src/components/header/header.tsx              |  2 +-
 src/components/map/map.tsx                    | 15 +++-
 src/components/offers-list/offers-list.tsx    | 17 +++-
 src/components/rating-star/rating-star.tsx    |  8 +-
 src/components/rating/rating.tsx              |  5 +-
 src/const.ts                                  |  5 --
 src/pages/main/main.tsx                       |  8 +-
 src/pages/offer/offer.tsx                     | 26 +++---
 src/store/slices/comments.ts                  | 12 ++-
 src/utils/common.ts                           |  2 +-
 src/utils/sort.ts                             |  5 ++
 15 files changed, 151 insertions(+), 69 deletions(-)
 create mode 100644 src/components/form-review/const.ts

diff --git a/src/components/comments-list/comments-list.tsx b/src/components/comments-list/comments-list.tsx
index 9d3809a..89fad6e 100644
--- a/src/components/comments-list/comments-list.tsx
+++ b/src/components/comments-list/comments-list.tsx
@@ -8,10 +8,12 @@ interface CommentsListProps {
   offerId: OfferFullInfo['id'];
 }
 
+const MAX_COUNT_COMMENTS = 10;
+
 function CommentsList ({offerId}: CommentsListProps) {
   const {fetchComments} = useActionCreators(commentsActions);
   const postCommentStatus = useAppSelector(commentsSelectors.statusPostRequest);
-  const comments = useAppSelector(commentsSelectors.comments);
+  const comments = useAppSelector(commentsSelectors.sortedComments).slice(0, MAX_COUNT_COMMENTS);
   const commentsCount = comments.length;
 
   useEffect(() => {
diff --git a/src/components/favorite-button/favorite-button.tsx b/src/components/favorite-button/favorite-button.tsx
index 73508b7..2d5dfbf 100644
--- a/src/components/favorite-button/favorite-button.tsx
+++ b/src/components/favorite-button/favorite-button.tsx
@@ -3,8 +3,10 @@ import {OfferShortInfo} from '../../types/offer.ts';
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
 import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
 import {useState} from 'react';
-import {RequestStatus} from '../../const.ts';
+import {AppRoute, AuthStatus, RequestStatus} from '../../const.ts';
 import {toast} from 'react-toastify';
+import {useNavigate} from 'react-router-dom';
+import {userSelectors} from '../../store/slices/user.ts';
 
 interface FavoriteButtonProps {
   componentType: 'place-card' | 'offer';
@@ -27,12 +29,24 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp
   const [isFavoriteCurrent, setIsFavoriteCurrent] = useState(isFavorite);
   const {toggleFavorite} = useActionCreators(favoritesActions);
   const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite);
+  const authStatus = useAppSelector(userSelectors.authStatus);
+  const navigate = useNavigate();
+
+  const isAuth = authStatus === AuthStatus.Auth;
 
   const onClickHandler = () => {
-    toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId})
-      .unwrap()
-      .then(() => setIsFavoriteCurrent(!isFavoriteCurrent)), {
-      pending: 'Запрос отправляется',
+    if (!isAuth) {
+      navigate(AppRoute.Login);
+    }
+
+    toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId}).unwrap(), {
+      pending: 'Sending request',
+      success: {
+        render() {
+          setIsFavoriteCurrent(!isFavoriteCurrent);
+          return 'Success';
+        }
+      },
     });
   };
 
@@ -41,7 +55,7 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp
       className={
         classNames(
           `${componentType}__bookmark-button button`,
-          isFavoriteCurrent && `${componentType}__bookmark-button--active`)
+          isFavoriteCurrent && isAuth && `${componentType}__bookmark-button--active`)
       }
       type="button"
       onClick={onClickHandler}
diff --git a/src/components/form-review/const.ts b/src/components/form-review/const.ts
new file mode 100644
index 0000000..13dc888
--- /dev/null
+++ b/src/components/form-review/const.ts
@@ -0,0 +1,5 @@
+const MIN_LENGTH_COMMENT = 50;
+const MAX_LENGTH_COMMENT = 300;
+const MIN_STARS_COMMENT = 1;
+
+export {MAX_LENGTH_COMMENT, MIN_STARS_COMMENT, MIN_LENGTH_COMMENT};
diff --git a/src/components/form-review/form-review.tsx b/src/components/form-review/form-review.tsx
index 3080723..e8b30cc 100644
--- a/src/components/form-review/form-review.tsx
+++ b/src/components/form-review/form-review.tsx
@@ -1,45 +1,75 @@
-import {MIN_LENGTH_COMMENT, MIN_STARS_COMMENT, RATING_STARS} from '../../const.ts';
-import {StarTitle, StarValue} from '../rating-star/rating-star.tsx';
-import RatingStar from '../rating-star/rating-star.tsx';
-import {FormEvent, useRef, useState} from 'react';
+import {RATING_STARS} from '../../const.ts';
+import RatingStar, {StarTitle} from '../rating-star/rating-star.tsx';
+import {FormEvent, useState} from 'react';
 import {useActionCreators} from '../../hooks/store.ts';
 import {commentsActions} from '../../store/slices/comments.ts';
 import {OfferFullInfo} from '../../types/offer.ts';
+import {MAX_LENGTH_COMMENT, MIN_LENGTH_COMMENT} from './const.ts';
+import {toast} from 'react-toastify';
 
 type FormReviewProps = {
   offerId: OfferFullInfo['id'];
 };
 
-type InitialForm = {
-  comment: string;
-  rating: StarValue;
+type Form = HTMLFormElement & {
+  rating: RadioNodeList;
+  review: HTMLTextAreaElement;
 };
 
-const INITIAL_FORM_VALUE: InitialForm = {
-  comment: '',
-  rating: RATING_STARS['unknown'],
-};
+const verifyForm = (comment: string, rating: string) =>
+  comment.length <= MIN_LENGTH_COMMENT || comment.length > MAX_LENGTH_COMMENT || Number(rating) === RATING_STARS.unknown;
 
 function FormReview({offerId}: FormReviewProps) {
-  const [textAreaValue, setTextAreaValue] = useState(INITIAL_FORM_VALUE.comment);
-  const [ratingStar, setRatingStar] = useState(INITIAL_FORM_VALUE.rating);
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+  const [isFormDisabled, setIsFormDisabled] = useState(false);
   const {postComment} = useActionCreators(commentsActions);
-  const formRef = useRef(null);
+
+  const onChangeForm = (evt: FormEvent<HTMLFormElement>) => {
+    const form = evt.currentTarget as Form;
+    const rating = form.rating.value;
+    const comment = form.review.value;
+    setIsSubmitDisabled(verifyForm(comment, rating));
+  };
 
   const onFormSubmit = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
-    postComment({offerId, body: {comment: textAreaValue, rating: ratingStar}})
-      .unwrap()
-      .then(() => {
-        setTextAreaValue(INITIAL_FORM_VALUE.comment);
-        setRatingStar(INITIAL_FORM_VALUE.rating);
-      });
+    const form = evt.currentTarget as Form;
+
+    const clearForm = () => {
+      form.reset();
+      setIsSubmitDisabled(true);
+      setIsFormDisabled(false);
+    };
+
+    const commentToSend = {
+      offerId,
+      body: {
+        comment: form.review.value,
+        rating: Number(form.rating.value),
+      },
+    };
+    setIsFormDisabled(true);
+    toast.promise(postComment(commentToSend).unwrap(), {
+      pending: 'Sending comment',
+      success: {
+        render() {
+          clearForm();
+          return 'Comment sent';
+        }
+      },
+      error: {
+        render() {
+          setIsFormDisabled(false);
+          return 'Failed to send comment';
+        }
+      }
+    });
   };
 
   return (
     <form
-      ref={formRef}
       onSubmit={(evt) => onFormSubmit(evt)}
+      onChange={(evt) => onChangeForm(evt)}
       className="reviews__form form"
       action="#"
       method="post"
@@ -49,21 +79,19 @@ function FormReview({offerId}: FormReviewProps) {
         {Object.entries(RATING_STARS).slice(1).map(([starTitle, starValue]) =>
           (
             <RatingStar
-              onClickHandle={setRatingStar}
               key={starTitle}
               starTitle={starTitle as StarTitle}
               starValue={starValue}
-              currentValue={ratingStar}
+              isDisabled={isFormDisabled}
             />
           )
         )}
       </div>
       <textarea
-        onChange={(evt) => setTextAreaValue(evt.target.value)}
-        value={textAreaValue}
         className="reviews__textarea form__textarea"
         id="review" name="review"
         placeholder="Tell how was your stay, what you like and what can be improved"
+        disabled={isFormDisabled}
       />
       <div className="reviews__button-wrapper">
         <p className="reviews__help">
@@ -73,7 +101,7 @@ function FormReview({offerId}: FormReviewProps) {
         <button
           className="reviews__submit form__submit button"
           type="submit"
-          disabled={textAreaValue.length < MIN_LENGTH_COMMENT || ratingStar < MIN_STARS_COMMENT}
+          disabled={isSubmitDisabled || isFormDisabled}
         >
           Submit
         </button>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index ef23b75..35f7d0f 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -38,7 +38,7 @@ function Header() {
           <div className="header__avatar-wrapper user__avatar-wrapper">
             {userInfo?.avatarUrl && <img className="user__avatar" src={userInfo.avatarUrl} alt="avatar"/>}
           </div>
-          {userInfo?.name && <span className="header__user-name user__name">{userInfo.name}</span>}
+          {userInfo?.email && <span className="header__user-name user__name">{userInfo.email}</span>}
           <span className="header__favorite-count">{favoritesCount}</span>
         </Link>
       </li>
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 62c7b0e..5b25cae 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -4,7 +4,7 @@ import {Icon, layerGroup, Marker} from 'leaflet';
 import {CITIES, MARKER_ACTIVE_OPTIONS, MARKER_DEFAULT_OPTIONS} from '../../const';
 import 'leaflet/dist/leaflet.css';
 import useMap from '../../hooks/use-map.tsx';
-import {OfferShortInfo} from '../../types/offer.ts';
+import {OfferFullInfo, OfferShortInfo} from '../../types/offer.ts';
 import {useAppSelector} from '../../hooks/store.ts';
 import {offersSelectors} from '../../store/slices/offers.ts';
 
@@ -12,13 +12,13 @@ type MapProps = {
   city: typeof CITIES[number];
   offers: OfferShortInfo[];
   container: string;
+  currentOffer?: OfferFullInfo;
 };
 
 const defaultCustomIcon = new Icon(MARKER_DEFAULT_OPTIONS);
-
 const currentCustomIcon = new Icon(MARKER_ACTIVE_OPTIONS);
 
-function Map({container, city, offers}: MapProps) {
+function Map({container, city, offers, currentOffer}: MapProps) {
   const activeOffer = useAppSelector(offersSelectors.activeOffer);
 
   const mapRef = useRef(null);
@@ -40,6 +40,15 @@ function Map({container, city, offers}: MapProps) {
               : defaultCustomIcon
           )
           .addTo(markerLayer);
+
+        if (currentOffer) {
+          const currentOfferMarker = new Marker({
+            lat: currentOffer.location.latitude,
+            lng: currentOffer.location.longitude
+          });
+
+          currentOfferMarker.setIcon(currentCustomIcon).addTo(map);
+        }
       });
 
       map.flyTo([city.location.latitude, city.location.longitude], 12);
diff --git a/src/components/offers-list/offers-list.tsx b/src/components/offers-list/offers-list.tsx
index 8fd4e9d..2e0b47f 100644
--- a/src/components/offers-list/offers-list.tsx
+++ b/src/components/offers-list/offers-list.tsx
@@ -20,14 +20,27 @@ function OffersList ({offersByCity, city}: OffersListProps) {
   const {setActiveOffer} = useActionCreators(offersActions);
   const status = useAppSelector(offersSelectors.status);
 
-  const offersSorted = sortOffers(activeSortOption, offersByCity);
-
   if (status === RequestStatus.Loading) {
     return (
       <OffersListLoader />
     );
   }
 
+  if (offersByCity.length === 0) {
+    return (
+      <section className="cities__no-places">
+        <div className="cities__status-wrapper tabs__content">
+          <b className="cities__status">No places to stay available</b>
+          <p className="cities__status-description">
+            We could not find any property available at the moment in {city.name}
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  const offersSorted = sortOffers(activeSortOption, offersByCity);
+
   return (
     <section className="cities__places places">
       <h2 className="visually-hidden">Places</h2>
diff --git a/src/components/rating-star/rating-star.tsx b/src/components/rating-star/rating-star.tsx
index 745638c..44ddf79 100644
--- a/src/components/rating-star/rating-star.tsx
+++ b/src/components/rating-star/rating-star.tsx
@@ -6,11 +6,10 @@ export type StarValue = (typeof RATING_STARS)[keyof typeof RATING_STARS]
 interface RatingStar {
   starTitle: StarTitle;
   starValue: StarValue;
-  currentValue: StarValue;
-  onClickHandle: React.Dispatch<React.SetStateAction<StarValue>>;
+  isDisabled?: boolean;
 }
 
-function RatingStar({starTitle, starValue, onClickHandle, currentValue}: RatingStar) {
+function RatingStar({starTitle, starValue, isDisabled}: RatingStar) {
   return (
     <>
       <input
@@ -19,10 +18,9 @@ function RatingStar({starTitle, starValue, onClickHandle, currentValue}: RatingS
         value={starValue}
         id={`${starValue}-stars`}
         type="radio"
-        checked={currentValue === starValue}
+        disabled={isDisabled}
       />
       <label
-        onClick={() => onClickHandle(starValue)}
         htmlFor={`${starValue}-stars`}
         className="reviews__rating-label form__rating-label"
         title={starTitle}
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index b36d566..e304d19 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -1,12 +1,12 @@
 import {OfferShortInfo} from '../../types/offer.ts';
 import {getRatingValue} from '../../utils/common.ts';
 
-interface FavoriteButtonProps {
+interface RatingProps {
   componentType: 'place-card' | 'offer' | 'reviews';
   rating: OfferShortInfo['rating'];
 }
 
-function Rating({componentType, rating}: FavoriteButtonProps) {
+function Rating({componentType, rating}: RatingProps) {
 
   return (
     <div className={`${componentType}__rating rating`}>
@@ -14,6 +14,7 @@ function Rating({componentType, rating}: FavoriteButtonProps) {
         <span style={{width: `${getRatingValue(rating)}%`,}}></span>
         <span className="visually-hidden">Rating</span>
       </div>
+      {componentType === 'offer' && <span className="offer__rating-value rating__value">{rating}</span>}
     </div>
   );
 }
diff --git a/src/const.ts b/src/const.ts
index d6e6dc1..031f84f 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -16,9 +16,6 @@ const RATING_STARS = {
   'terribly': 1,
 } as const;
 
-const MIN_LENGTH_COMMENT = 50;
-const MIN_STARS_COMMENT = 1;
-
 const CITIES = [
   {name: 'Paris', location: {latitude: 48.85661, longitude: 2.351499, zoom: 13}, slug: 'paris'},
   {name: 'Cologne', location: {latitude: 50.938361, longitude: 6.959974, zoom: 13}, slug: 'cologne'},
@@ -94,8 +91,6 @@ export {
   DEFAULT_CITY_SLUG,
   DATE_FORMAT,
   DATE_FORMAT_ATTRIBUTE,
-  MIN_STARS_COMMENT,
-  MIN_LENGTH_COMMENT,
   MARKER_DEFAULT_OPTIONS,
   MARKER_ACTIVE_OPTIONS,
   RequestStatus,
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index 64ad5c0..61bd424 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -10,6 +10,7 @@ import {useEffect} from 'react';
 import OffersList from '../../components/offers-list/offers-list.tsx';
 import {toast} from 'react-toastify';
 import {AxiosError} from 'axios';
+import {classNames} from '../../utils/class-names/class-names.ts';
 
 export type MainProps = {
   title?: string;
@@ -40,8 +41,9 @@ function Main({title = 'Main', citySlug}: MainProps) {
   }
 
   const offersByCity = allOffers.filter((offer) => offer.city.name === activeCity.name);
+
   return (
-    <div className="page page--gray page--main">
+    <div className={classNames('page page--gray page--main', offersByCity.length === 0 && 'page__main--index-empty')}>
       <Header />
       <main className="page__main page__main--index">
         <h1 className="visually-hidden">Cities</h1>
@@ -53,11 +55,11 @@ function Main({title = 'Main', citySlug}: MainProps) {
           </section>
         </div>
         <div className="cities">
-          <div className="cities__places-container container">
+          <div className={classNames('cities__places-container container', offersByCity.length === 0 && 'cities__places-container--empty')}>
             <OffersList offersByCity={offersByCity} city={activeCity} />
             <div className="cities__right-section">
               {
-                activeCity && <Map container="cities" city={activeCity} offers={offersByCity} />
+                activeCity && offersByCity.length > 0 && <Map container="cities" city={activeCity} offers={offersByCity} />
               }
             </div>
           </div>
diff --git a/src/pages/offer/offer.tsx b/src/pages/offer/offer.tsx
index 6ea9891..8217f56 100644
--- a/src/pages/offer/offer.tsx
+++ b/src/pages/offer/offer.tsx
@@ -11,7 +11,6 @@ import {AuthStatus, CITIES} from '../../const.ts';
 import Map from '../../components/map/map.tsx';
 import OfferCard from '../../components/offer-card/offer-card.tsx';
 import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
-import {offersActions} from '../../store/slices/offers.ts';
 import {useEffect} from 'react';
 import {offerFullInfoActions, offerFullInfoSelectors} from '../../store/slices/offer-full-info.ts';
 import {offersNearActions, offersNearSelectors} from '../../store/slices/offers-near.ts';
@@ -22,9 +21,11 @@ interface OfferProps {
   title?: string;
 }
 
+const MAX_COUNT_IMAGES = 6;
+const MAX_COUNT_NEAR_OFFERS = 3;
+
 function Offer({title = 'Offer'}: OfferProps) {
   useDocumentTitle(title);
-  const {setActiveOffer} = useActionCreators(offersActions);
   const {fetchOfferFullInfo} = useActionCreators(offerFullInfoActions);
   const {fetchOffersNear} = useActionCreators(offersNearActions);
 
@@ -40,7 +41,7 @@ function Offer({title = 'Offer'}: OfferProps) {
   }, [fetchOfferFullInfo, fetchOffersNear, offerId]);
 
   const offerFullInfo = useAppSelector(offerFullInfoSelectors.offerFullInfo);
-  const offersNear = useAppSelector(offersNearSelectors.offersNear);
+  const offersNear = useAppSelector(offersNearSelectors.offersNear).slice(0, MAX_COUNT_NEAR_OFFERS);
 
 
   if (!offerFullInfo) {
@@ -72,11 +73,13 @@ function Offer({title = 'Offer'}: OfferProps) {
         <section className="offer">
           <div className="offer__gallery-container container">
             <div className="offer__gallery">
-              {images.map((image) => (
-                <div key={image} className="offer__image-wrapper">
-                  <img className="offer__image" src={image} alt="Photo studio"/>
-                </div>
-              ))}
+              {
+                images.slice(0, MAX_COUNT_IMAGES).map((image) => (
+                  <div key={image} className="offer__image-wrapper">
+                    <img className="offer__image" src={image} alt="Photo studio"/>
+                  </div>
+                ))
+              }
             </div>
           </div>
           <div className="offer__container container">
@@ -98,10 +101,10 @@ function Offer({title = 'Offer'}: OfferProps) {
                   {capitalizeFirstLetter(type)}
                 </li>
                 <li className="offer__feature offer__feature--bedrooms">
-                  {bedrooms} Bedrooms
+                  {`${bedrooms} Bedroom${bedrooms > 1 ? 's' : ''}`}
                 </li>
                 <li className="offer__feature offer__feature--adults">
-                  Max {maxAdults} adults
+                  {`Max ${maxAdults} adult${maxAdults > 1 ? 's' : ''}`}
                 </li>
               </ul>
               <div className="offer__price">
@@ -128,7 +131,7 @@ function Offer({title = 'Offer'}: OfferProps) {
               </section>
             </div>
           </div>
-          {cityFullInfo && <Map container="offer" city={cityFullInfo} offers={offersNear}/>}
+          {cityFullInfo && <Map container="offer" city={cityFullInfo} currentOffer={offerFullInfo} offers={offersNear}/>}
         </section>
         <div className="container">
           <section className="near-places places">
@@ -140,7 +143,6 @@ function Offer({title = 'Offer'}: OfferProps) {
                     key={nearOffer.id}
                     offer={nearOffer}
                     componentType="near-places"
-                    hoverHandler={() => setActiveOffer(nearOffer)}
                   />
                 )
               )}
diff --git a/src/store/slices/comments.ts b/src/store/slices/comments.ts
index 09bb646..74a2061 100644
--- a/src/store/slices/comments.ts
+++ b/src/store/slices/comments.ts
@@ -1,7 +1,8 @@
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
 import {RequestStatus} from '../../const.ts';
 import {Comment} from '../../types/comment.ts';
 import {fetchCommentsAction, postCommentAction} from '../thunks/comments.ts';
+import {sortCommentsByDate} from '../../utils/sort.ts';
 
 interface CommentsState {
   comments: Comment[];
@@ -52,6 +53,13 @@ const commentsActions = {
   fetchComments: fetchCommentsAction,
   postComment: postCommentAction,
 };
-const commentsSelectors = commentsSlice.selectors;
+const commentsSelectors = {
+  ...commentsSlice.selectors,
+  sortedComments:
+    createSelector(
+      commentsSlice.selectors.comments,
+      (comments) => comments.toSorted(sortCommentsByDate)
+    ),
+};
 
 export { commentsSlice, commentsActions, commentsSelectors };
diff --git a/src/utils/common.ts b/src/utils/common.ts
index eed0abe..699ae07 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,7 +1,7 @@
 import {CityName, OfferShortInfo} from '../types/offer.ts';
 import {CITIES} from '../const.ts';
 
-const getRatingValue = (rating: OfferShortInfo['rating']) => (rating * 100) / 5;
+const getRatingValue = (rating: OfferShortInfo['rating']) => (Math.round(rating) * 100) / 5;
 
 const capitalizeFirstLetter = (string: string) => string.charAt(0).toUpperCase() + string.slice(1);
 
diff --git a/src/utils/sort.ts b/src/utils/sort.ts
index 8dd14b1..29425ea 100644
--- a/src/utils/sort.ts
+++ b/src/utils/sort.ts
@@ -1,5 +1,6 @@
 import {OfferShortInfo} from '../types/offer.ts';
 import {SortOption} from '../components/sort/const.ts';
+import {Comment} from '../types/comment.ts';
 
 function sortOffers (sortType: SortOption, offers: OfferShortInfo[]) {
   switch (sortType) {
@@ -16,4 +17,8 @@ function sortOffers (sortType: SortOption, offers: OfferShortInfo[]) {
   }
 }
 
+export function sortCommentsByDate(commentA: Comment, commentB: Comment) {
+  return new Date(commentB.date).getTime() - new Date(commentA.date).getTime();
+}
+
 export {sortOffers};