Добро пожаловать, или посторонним вход воспрещён (часть 2)

src/components/CommentForm/index.tsx

@@ -1,4 +1,7 @@
-import React, { useState } from 'react';
+import React, { FormEvent, useState } from 'react';
+import { useActions, useAppSelector } from '../../store/hooks';
+import { getAuthorizationStatus } from '../../store/selectors';
+import { AuthorizationStatus } from '../../types/auth';
 
 const CommentRating = {
   '5': 'perfect',
@@ -8,37 +11,60 @@ const CommentRating = {
   '1': 'terribly'
 } as const;
 
-const CommentForm: React.FC = () => {
-  type State = Partial<{
-    comment: string;
-    rating: number;
-  }>;
+type CommentFormProps = {
+  offerId: string;
+}
 
-  const [state, _setState] = useState({
-    comment: '',
-    rating: 0
-  });
-  const setState = (data: State) => _setState({...state, ...data});
+const CommentForm: React.FC<CommentFormProps> = ({ offerId }) => {
+  const [comment, setComment] = useState('');
+  const [rating, setRating] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { postComment } = useActions();
+  const authorizationStatus = useAppSelector(getAuthorizationStatus);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // eslint-disable-next-line no-console
-    console.log(state);
+  const handleSubmit = (evt: FormEvent) => {
+    evt.preventDefault();
+
+    if (comment.length >= 50 && rating > 0) {
+      setIsSubmitting(true);
+      try {
+        postComment({
+          offerId,
+          commentData: { comment, rating }
+        });
+        setComment('');
+        setRating(0);
+      } catch (error) {
+        // console.error('Failed to post comment:', error);
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
   };
 
+  if (authorizationStatus !== AuthorizationStatus.Auth) {
+    return null;
+  }
+
   return (
-    <form className="reviews__form form" onSubmit={handleSubmit}>
+    <form
+      className="reviews__form form"
+      action="#"
+      method="post"
+      onSubmit={handleSubmit}
+    >
       <label className="reviews__label form__label" htmlFor="review">Your review</label>
       <div className="reviews__rating-form form__rating">
-        {Object.keys(CommentRating).map((star) => (
+        {Object.keys(CommentRating).reverse().map((star) => (
           <React.Fragment key={star}>
             <input
               className="form__rating-input visually-hidden"
               name="rating"
               value={star}
               id={`${star}-stars`}
               type="radio"
-              onChange={() => setState({rating: Number.parseInt(star, 10)})}
+              checked={rating === Number(star)}
+              onChange={() => setRating(Number(star))}
             />
             <label
               htmlFor={`${star}-stars`}
@@ -58,8 +84,8 @@ const CommentForm: React.FC = () => {
         id="review"
         name="review"
         placeholder="Tell how was your stay, what you like and what can be improved"
-        value={state.comment}
-        onChange={(e) => setState({comment: e.target.value})}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
       />
 
       <div className="reviews__button-wrapper">
@@ -69,7 +95,7 @@ const CommentForm: React.FC = () => {
         <button
           className="reviews__submit form__submit button"
           type="submit"
-          disabled={state.comment.length < 50 || state.rating === 0}
+          disabled={comment.length < 50 || rating === 0 || isSubmitting}
         >
           Submit
         </button>

src/components/Header/index.tsx

@@ -14,7 +14,7 @@ const Header: React.FC = () => {
     try {
       logoutAction();
     } catch (error) {
-      // console.error('Logout failed:', error);
+    //   console.error('Logout failed:', error);
     }
   };
 
@@ -33,6 +33,12 @@ const Header: React.FC = () => {
               </span>
             </Link>
           </li>
+          <Link
+            className="header__nav-link"
+            to={Endpoints.favorites}
+          >
+            <span className="header__favorite-count" style={{ marginLeft: '0px', marginRight: '25px' }}>3</span>
+          </Link>
           <li className="header__nav-item">
             <Link
               className="header__nav-link"
@@ -53,6 +59,7 @@ const Header: React.FC = () => {
           to={Endpoints.login}
         >
           <div className="header__avatar-wrapper user__avatar-wrapper" />
+
           <span className="header__login">Sign in</span>
         </Link>
       </li>

src/components/PrivateRoute/index.tsx

@@ -12,10 +12,15 @@ type PrivateRouteProps = {
 const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
   const authorizationStatus = useAppSelector(getAuthorizationStatus);
 
+  // Wait until we know the auth status for sure
+  if (authorizationStatus === AuthorizationStatus.Unknown) {
+    return null;
+  }
+
   return authorizationStatus === AuthorizationStatus.Auth ? (
     children
   ) : (
-    <Navigate to={Endpoints.login} />
+    <Navigate to={Endpoints.root} />
   );
 };
 

src/components/Review/index.tsx

@@ -1,37 +1,45 @@
 import React from 'react';
-import type { Review as ReviewType } from '../../types';
+import type { Comment } from '../../types/comment';
 
 type ReviewProps = {
-    review: ReviewType;
+  review: Comment;
 }
 
-const Review: React.FC<ReviewProps> = ({ review }) => (
-  <li className="reviews__item">
-    <div className="reviews__user user">
-      <div className="reviews__avatar-wrapper user__avatar-wrapper">
-        <img
-          className="reviews__avatar user__avatar"
-          src={review.user.avatarUrl}
-          width="54"
-          height="54"
-          alt="Reviews avatar"
-        />
+const Review: React.FC<ReviewProps> = ({ review }) => {
+  const date = new Date(review.date);
+  const formattedDate = date.toLocaleString('en-US', {
+    month: 'long',
+    year: 'numeric'
+  });
+
+  return (
+    <li className="reviews__item">
+      <div className="reviews__user user">
+        <div className="reviews__avatar-wrapper user__avatar-wrapper">
+          <img
+            className="reviews__avatar user__avatar"
+            src={review.user.avatarUrl}
+            width="54"
+            height="54"
+            alt="Reviews avatar"
+          />
+        </div>
+        <span className="reviews__user-name">{review.user.name}</span>
       </div>
-      <span className="reviews__user-name">{review.user.name}</span>
-    </div>
-    <div className="reviews__info">
-      <div className="reviews__rating rating">
-        <div className="reviews__stars rating__stars">
-          <span style={{ width: `${(review.rating / 5) * 100}%` }}></span>
-          <span className="visually-hidden">Rating</span>
+      <div className="reviews__info">
+        <div className="reviews__rating rating">
+          <div className="reviews__stars rating__stars">
+            <span style={{ width: `${(review.rating / 5) * 100}%` }}></span>
+            <span className="visually-hidden">Rating</span>
+          </div>
         </div>
+        <p className="reviews__text">{review.comment}</p>
+        <time className="reviews__time" dateTime={review.date}>
+          {formattedDate}
+        </time>
       </div>
-      <p className="reviews__text">{review.comment}</p>
-      <time className="reviews__time" dateTime={review.date}>
-        {new Date(review.date).toLocaleString('en-US', { month: 'long', year: 'numeric' })}
-      </time>
-    </div>
-  </li>
-);
+    </li>
+  );
+};
 
 export default Review;

src/components/ReviewsList/index.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import type { Review as ReviewType } from '../../types';
+import { useAppSelector } from '../../store/hooks';
+import { getCommentsLoadingSelector, getCommentsSelector } from '../../store/selectors';
 import Review from '../Review';
+import Spinner from '../Spinner';
 
-type ReviewsListProps = {
-  reviews: ReviewType[];
-}
+const ReviewsList: React.FC = () => {
+  const reviews = useAppSelector(getCommentsSelector);
+  const isLoading = useAppSelector(getCommentsLoadingSelector);
 
-const ReviewsList: React.FC<ReviewsListProps> = ({ reviews }) => (
-  <section className="reviews">
-    <h2 className="reviews__title">
-      Reviews &middot; <span className="reviews__amount">{reviews.length}</span>
-    </h2>
-    <ul className="reviews__list">
-      {reviews.map((review) => (
-        <Review key={review.id} review={review} />
-      ))}
-    </ul>
-  </section>
-);
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <section className="reviews">
+      <h2 className="reviews__title">
+        Reviews &middot; <span className="reviews__amount">{reviews?.length || 0}</span>
+      </h2>
+      <ul className="reviews__list">
+        {Array.isArray(reviews) && reviews.map((review) => (
+          <Review key={review.id} review={review} />
+        ))}
+      </ul>
+    </section>
+  );
+};
 
 export default ReviewsList;

src/pages/Favorites/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Link, NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import Header from '../../components/Header';
 import { useAppSelector } from '../../store/hooks';
 import { getAllOffersSelector } from '../../store/selectors';
 import type { Offer } from '../../types';
@@ -19,33 +20,7 @@ const FavoritesPage: React.FC = () => {
 
   return (
     <div className="page">
-      <header className="header">
-        <div className="container">
-          <div className="header__wrapper">
-            <div className="header__left">
-              <NavLink className="header__logo-link" to="/">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
-              </NavLink>
-            </div>
-            <nav className="header__nav">
-              <ul className="header__nav-list">
-                <li className="header__nav-item user">
-                  <Link className="header__nav-link header__nav-link--profile" to="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper"></div>
-                    <span className="header__user-name user__name">[email protected]</span>
-                    <span className="header__favorite-count">3</span>
-                  </Link>
-                </li>
-                <li className="header__nav-item">
-                  <Link className="header__nav-link" to="#">
-                    <span className="header__signout">Sign out</span>
-                  </Link>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </header>
+      <Header />
 
       <main className="page__main page__main--favorites">
         <div className="page__favorites-container container">

src/pages/Login/index.tsx

@@ -21,6 +21,7 @@ const LoginPage: React.FC = () => {
           password: passwordRef.current.value,
         });
       } catch (error) {
+        // Handle error
         // console.error('Login failed:', error);
       }
     }