исправляет замечания

htmlacademy-react · Apr 9, 2024 · 7504fb9 · 7504fb9
1 parent ad4dd6e
commit 7504fb9
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 66 deletions.
diff --git a/src/components/comments-list/comments-list.tsx b/src/components/comments-list/comments-list.tsx
@@ -13,8 +13,9 @@ const MAX_COUNT_COMMENTS = 10;
 function CommentsList ({offerId}: CommentsListProps) {
   const {fetchComments} = useActionCreators(commentsActions);
   const postCommentStatus = useAppSelector(commentsSelectors.statusPostRequest);
-  const comments = useAppSelector(commentsSelectors.sortedComments).slice(0, MAX_COUNT_COMMENTS);
+  const comments = useAppSelector(commentsSelectors.sortedComments);
   const commentsCount = comments.length;
+  const commentsPrepared = comments.slice(0, MAX_COUNT_COMMENTS);
 
   useEffect(() => {
     fetchComments(offerId);
@@ -28,7 +29,7 @@ function CommentsList ({offerId}: CommentsListProps) {
       <ul className="reviews__list">
         {
           commentsCount > 0 &&
-          comments.map((comment) => <Review key={comment.id} review={comment}/>
+          commentsPrepared.map((comment) => <Review key={comment.id} review={comment}/>
           )
         }
       </ul>

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -2,7 +2,7 @@ import {Link} from 'react-router-dom';
 import {AppRoute} from '../../const.ts';
 import {memo} from 'react';
 
-function Footer() {
+function Footer_() {
   return (
     <footer className="footer container">
       <Link className="footer__logo-link" to={AppRoute.Root}>
@@ -12,4 +12,6 @@ function Footer() {
   );
 }
 
-export default memo(Footer);
+const Footer = memo(Footer_);
+
+export default Footer;
diff --git a/src/components/form-login/login-form.tsx b/src/components/form-login/login-form.tsx
@@ -16,41 +16,44 @@ function LoginForm() {
   };
 
   return (
-    <form
-      onSubmit={(e) => onSubmitHandler(e)}
-      className="login__form form"
-      action="#"
-      method="post"
-    >
-      <div className="login__input-wrapper form__input-wrapper">
-        <label className="visually-hidden">E-mail</label>
-        <input
-          onChange={(evt) => setEmail(evt.target.value)}
-          className="login__input form__input"
-          type="email"
-          name="email"
-          placeholder="Email"
-          required
-        />
-      </div>
-      <div className="login__input-wrapper form__input-wrapper">
-        <label className="visually-hidden">Password</label>
-        <input
-          onChange={(evt) => setPassword(evt.target.value)}
-          className="login__input form__input"
-          type="password"
-          name="password"
-          placeholder="Password"
-          required
-        />
-      </div>
-      <button
-        className="login__submit form__submit button"
-        type="submit"
+    <section className="login">
+      <h1 className="login__title">Sign in</h1>
+      <form
+        onSubmit={(e) => onSubmitHandler(e)}
+        className="login__form form"
+        action="#"
+        method="post"
       >
+        <div className="login__input-wrapper form__input-wrapper">
+          <label className="visually-hidden">E-mail</label>
+          <input
+            onChange={(evt) => setEmail(evt.target.value)}
+            className="login__input form__input"
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+          />
+        </div>
+        <div className="login__input-wrapper form__input-wrapper">
+          <label className="visually-hidden">Password</label>
+          <input
+            onChange={(evt) => setPassword(evt.target.value)}
+            className="login__input form__input"
+            type="password"
+            name="password"
+            placeholder="Password"
+            required
+          />
+        </div>
+        <button
+          className="login__submit form__submit button"
+          type="submit"
+        >
         Sign in
-      </button>
-    </form>
+        </button>
+      </form>
+    </section>
   );
 }
 

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -7,7 +7,7 @@ import {toast} from 'react-toastify';
 import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts';
 import {memo, useEffect} from 'react';
 
-function Header() {
+function Header_() {
   const authStatus = useAppSelector(userSelectors.authStatus);
   const userInfo = useAppSelector(userSelectors.userInfo);
   const {logout} = useActionCreators(userActions);
@@ -84,4 +84,6 @@ function Header() {
   );
 }
 
-export default memo(Header);
+const Header = memo(Header_);
+
+export default Header;
diff --git a/src/components/location-tab/location-tab.tsx b/src/components/location-tab/location-tab.tsx
@@ -7,7 +7,7 @@ interface LocationTabProps {
   cities?: typeof CITIES;
 }
 
-function LocationTab({cities = CITIES}: LocationTabProps) {
+function LocationTab_({cities = CITIES}: LocationTabProps) {
   return (
     cities.map((city) => (
       <NavLink
@@ -22,4 +22,6 @@ function LocationTab({cities = CITIES}: LocationTabProps) {
   );
 }
 
-export default memo(LocationTab);
+const LocationTab = memo(LocationTab_);
+
+export default LocationTab;
diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx
@@ -2,7 +2,7 @@ import {Link, useLocation} from 'react-router-dom';
 import {AppRoute, CITIES} from '../../const.ts';
 import {memo} from 'react';
 
-function Logo() {
+function Logo_() {
   const location = useLocation();
   const logo = (
     <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
@@ -23,4 +23,6 @@ function Logo() {
   );
 }
 
-export default memo(Logo);
+const Logo = memo(Logo_);
+
+export default Logo;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
@@ -18,7 +18,7 @@ type MapProps = {
 const defaultCustomIcon = new Icon(MARKER_DEFAULT_OPTIONS);
 const currentCustomIcon = new Icon(MARKER_ACTIVE_OPTIONS);
 
-function Map({container, city, offers, currentOffer}: MapProps) {
+function Map_({container, city, offers, currentOffer}: MapProps) {
   const activeOffer = useAppSelector(offersSelectors.activeOffer);
 
   const mapRef = useRef(null);
@@ -62,4 +62,6 @@ function Map({container, city, offers, currentOffer}: MapProps) {
   return <section ref={mapRef} className={`${container}__map map`} />;
 }
 
-export default memo(Map);
+const Map = memo(Map_);
+
+export default Map;
diff --git a/src/components/offer-card/offer-card.tsx b/src/components/offer-card/offer-card.tsx
@@ -11,7 +11,7 @@ interface PlaceCardProps {
   onHoverCard?: (offer: OfferShortInfo | null) => void;
 }
 
-function OfferCard ({offer, componentType, onHoverCard}: PlaceCardProps) {
+function OfferCard_({offer, componentType, onHoverCard}: PlaceCardProps) {
   const {
     id,
     isPremium,
@@ -38,8 +38,8 @@ function OfferCard ({offer, componentType, onHoverCard}: PlaceCardProps) {
     },
   };
 
-  const mouseOnHandler = () => onHoverCard && onHoverCard(offer);
-  const mouseOfHandler = () => onHoverCard && onHoverCard(null);
+  const mouseOnHandler = () => onHoverCard?.(offer);
+  const mouseOfHandler = () => onHoverCard?.(null);
 
   return (
     <article
@@ -80,4 +80,6 @@ function OfferCard ({offer, componentType, onHoverCard}: PlaceCardProps) {
   );
 }
 
-export default memo(OfferCard);
+const OfferCard = memo(OfferCard_);
+
+export default OfferCard;
diff --git a/src/components/offer-loader/offer-loader.tsx b/src/components/offer-loader/offer-loader.tsx
@@ -1,7 +1,7 @@
 import ContentLoader from 'react-content-loader';
 import {memo} from 'react';
 
-function OfferLoader () {
+function OfferLoader_() {
 
   return (
     <div className="cities__places-list places__list tabs__content">
@@ -22,4 +22,6 @@ function OfferLoader () {
   );
 }
 
-export default memo(OfferLoader);
+const OfferLoader = memo(OfferLoader_);
+
+export default OfferLoader;
diff --git a/src/components/offers-list-loader/offers-list-loader.tsx b/src/components/offers-list-loader/offers-list-loader.tsx
@@ -4,7 +4,7 @@ import {OFFERS_LOADER_COUNT} from '../../const.ts';
 import {memo} from 'react';
 
 
-function OffersListLoader () {
+function OffersListLoader_ () {
   const offerLoaders = Array.from({length: OFFERS_LOADER_COUNT}, () => crypto.randomUUID());
   return (
     <section className="cities__places places">
@@ -30,4 +30,6 @@ function OffersListLoader () {
   );
 }
 
-export default memo(OffersListLoader);
+const OffersListLoader = memo(OffersListLoader_);
+
+export default OffersListLoader;
diff --git a/src/components/rating-star-inputs/rating-star-inputs.tsx b/src/components/rating-star-inputs/rating-star-inputs.tsx
@@ -6,7 +6,7 @@ interface RatingStarInputsProps {
   isDisabled?: boolean;
 }
 
-function RatingStarInputs({isDisabled}: RatingStarInputsProps) {
+function RatingStarInputs_({isDisabled}: RatingStarInputsProps) {
   return (
     <div className="reviews__rating-form form__rating">
       {Object.entries(RATING_STARS).slice(1).map(([starTitle, starValue]) =>
@@ -23,4 +23,6 @@ function RatingStarInputs({isDisabled}: RatingStarInputsProps) {
   );
 }
 
-export default memo(RatingStarInputs);
+const RatingStarInputs = memo(RatingStarInputs_);
+
+export default RatingStarInputs;
diff --git a/src/components/rating-star/rating-star.tsx b/src/components/rating-star/rating-star.tsx
@@ -10,7 +10,7 @@ interface RatingStar {
   isDisabled?: boolean;
 }
 
-function RatingStar({starTitle, starValue, isDisabled}: RatingStar) {
+function RatingStar_({starTitle, starValue, isDisabled}: RatingStar) {
   return (
     <>
       <input
@@ -34,4 +34,6 @@ function RatingStar({starTitle, starValue, isDisabled}: RatingStar) {
   );
 }
 
-export default memo(RatingStar);
+const RatingStar = memo(RatingStar_);
+
+export default RatingStar;
diff --git a/src/components/sort/sort.tsx b/src/components/sort/sort.tsx
@@ -8,7 +8,7 @@ interface Props {
   setActiveSortOption: (newSortOption: SortOption) => void;
 }
 
-function Sort({activeSortOption, setActiveSortOption}: Props) {
+function Sort_({activeSortOption, setActiveSortOption}: Props) {
   const {isOn, toggle, off} = useBoolean(false);
   const sortFormRef = useRef(null);
 
@@ -66,4 +66,6 @@ function Sort({activeSortOption, setActiveSortOption}: Props) {
   );
 }
 
-export default memo(Sort);
+const Sort = memo(Sort_);
+
+export default Sort;
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
@@ -24,10 +24,7 @@ function Login({title = 'Login'}: LoginProps) {
 
       <main className="page__main page__main--login">
         <div className="page__login-container container">
-          <section className="login">
-            <h1 className="login__title">Sign in</h1>
-            <LoginForm />
-          </section>
+          <LoginForm />
           <LoginCityLink />
         </div>
       </main>

diff --git a/src/utils/sort.ts b/src/utils/sort.ts
@@ -7,11 +7,11 @@ function sortOffers (sortType: SortOption, offers: OfferShortInfo[]) {
     case SortOption.Popular:
       return offers;
     case SortOption.PriceLowToHigh:
-      return [...offers].sort((offerA, offerB) => offerA.price - offerB.price);
+      return offers.toSorted((offerA, offerB) => offerA.price - offerB.price);
     case SortOption.PriceHighToLow:
-      return [...offers].sort((offerA, offerB) => offerB.price - offerA.price);
+      return offers.toSorted((offerA, offerB) => offerB.price - offerA.price);
     case SortOption.TopRatedFirst:
-      return [...offers].sort((offerA, offerB) => offerB.rating - offerA.rating);
+      return offers.toSorted((offerA, offerB) => offerB.rating - offerA.rating);
     default:
       return offers;
   }