module5-task2 + fix

src/components/app/app.tsx

@@ -7,29 +7,29 @@ import OfferScreen from '../../pages/offer-screen/offer-screen.tsx';
 import PrivateRoute from '../private-route/private-route.tsx';
 import { AppRoute, AuthorizationStatus } from '../../const.ts';
 import { Offer } from '../../types/offer';
+import { OFFERS } from '../../mocks/offers.ts';
 
 type AppScreenProps = {
   placesCount: number;
-  offers: Offer[];
 }
 
-function App({placesCount, offers}: AppScreenProps): JSX.Element {
-  const favourites: Offer[] = offers.filter((o) => o.isFavorite);
+function App({placesCount}: AppScreenProps): JSX.Element {
+  const favourites: Offer[] = OFFERS.filter((o) => o.isFavorite);
   return (
     <BrowserRouter>
       <Routes>
         <Route path="*" element={<NotFoundScreen/>} />
-        <Route path={AppRoute.Main} element={<MainScreen placesCount={placesCount} offers={offers}/>} />
+        <Route path={AppRoute.Main} element={<MainScreen placesCount={placesCount} offers={OFFERS}/>} />
         <Route
           path={AppRoute.Favorites}
           element={
-            <PrivateRoute authorizationStatus={AuthorizationStatus.NoAuth} >
+            <PrivateRoute authorizationStatus={AuthorizationStatus.Auth} >
               <FavoritesScreen offers={favourites}/>
             </PrivateRoute>
           }
         />
         <Route path={AppRoute.Login} element={<LoginScreen/>} />
-        <Route path={AppRoute.Offer} element={<OfferScreen/>} />
+        <Route path={AppRoute.Offer} element={<OfferScreen offer={OFFERS[2]}/>} />
       </Routes>
     </BrowserRouter>
   );

src/components/city-card/city-card.tsx

@@ -3,11 +3,12 @@ import { Link } from 'react-router-dom';
 
 type OfferProps = {
   offer: Offer;
+  isStandartCardType: boolean;
 }
 
-function CityCard({offer}: OfferProps): JSX.Element {
+function CityCard({offer, isStandartCardType}: OfferProps): JSX.Element {
   return (
-    <article className="cities__card place-card">
+    <article className={(isStandartCardType) ? 'cities__card place-card' : 'near-places__card place-card'}>
       {offer.isPremium ? (
         <div className="place-card__mark">
           <span>Premium</span>

src/components/map/map.tsx

@@ -8,7 +8,7 @@ import 'leaflet/dist/leaflet.css';
 type MapProps = {
   city: City;
   points: Point[];
-  selectedPoint: Point | undefined;
+  selectedPoint?: Point;
 }
 
 function Map(props: MapProps): JSX.Element {

src/components/offer-list/offer-list.tsx

@@ -3,13 +3,14 @@ import CityCard from '../city-card/city-card';
 
 type OfferListProps = {
   offers: Offer[];
+  isStandartCardType: boolean
 };
 
-function OfferList({offers}: OfferListProps): JSX.Element {
+function OfferList({offers, isStandartCardType}: OfferListProps): JSX.Element {
   return (
-    <div className="cities__places-list places__list tabs__content">
+    <div className={(isStandartCardType) ? 'cities__places-list places__list tabs__content' : 'near-places__list places__list'}>
       {offers.map((offer) => (
-        <CityCard key={offer.id} offer={offer}/>
+        <CityCard key={offer.id} offer={offer} isStandartCardType={isStandartCardType}/>
       ))}
     </div>
   );

src/components/reviews-item/reviews-item.tsx

@@ -0,0 +1,33 @@
+import { Review } from '../../types/review';
+
+type ReviewProps = {
+  review: Review;
+}
+
+function ReviewItem({review}: ReviewProps): JSX.Element {
+  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.avatar} width="54" height="54" alt="Reviews avatar"/>
+    </div>
+    <span className="reviews__user-name">
+        {review.author}
+    </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>
+    </div>
+    <p className="reviews__text">
+        {review.comment}
+    </p>
+    <time className="reviews__time" dateTime="2019-04-24">{review.date}</time>
+    </div>
+    </li>
+  );
+}
+export default ReviewItem;

src/components/reviews-list/reviews-list.tsx

@@ -0,0 +1,23 @@
+import { Review } from '../../types/review';
+import ReviewItem from '../reviews-item/reviews-item';
+import CommentForm from '../../components/comment-form/comment-form';
+
+type ReviewsListProps = {
+  reviews: Review[];
+};
+
+function ReviewsList({ reviews }: ReviewsListProps): JSX.Element {
+  return (
+    <section className="offer__reviews reviews">
+    <h2 className="reviews__title">Reviews &middot; <span className="reviews__amount">{reviews.length}</span></h2>
+        <ul className="reviews__list">
+            {reviews.map((review) => (
+             <ReviewItem key={review.id} review={review} />
+            ))}
+         </ul>
+         <CommentForm />
+    </section>
+  );
+}
+
+export default ReviewsList;

src/hooks/use-map.tsx

@@ -10,7 +10,7 @@ function useMap(
   const isRenderedRef = useRef<boolean>(false);
 
   useEffect(() => {
-    if (mapRef.current !== null && !isRenderedRef.current) {
+    if (mapRef.current && !isRenderedRef.current) {
       const instance = new Map(mapRef.current, {
         center: {
           lat: city.lat,

src/index.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/app/app';
 import { Settings } from './const';
-import { offers } from './mocks/offers';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App placesCount={Settings.placesCount} offers={offers}/>
+    <App placesCount={Settings.placesCount}/>
   </React.StrictMode>
 );

src/mocks/offers.ts

@@ -1,7 +1,7 @@
 import { Offer } from '../types/offer';
-import { reviews } from './reviews';
+import { REVIEWS } from './reviews';
 
-export const offers: Offer[] = [
+export const OFFERS: Offer[] = [
   {
     id: '1',
     image: ['img/apartment-01.jpg'],
@@ -11,7 +11,7 @@ export const offers: Offer[] = [
     type: 'Apartment',
     isFavorite: false,
     rating: 4,
-    reviews: [reviews[0]]
+    reviews: [REVIEWS[0]]
   },
   {
     id: '2',
@@ -22,7 +22,7 @@ export const offers: Offer[] = [
     type: 'Room',
     isFavorite: true,
     rating: 4,
-    reviews: [reviews[1]]
+    reviews: [REVIEWS[1]]
   },
   {
     id: '3',
@@ -32,8 +32,8 @@ export const offers: Offer[] = [
     title: 'Canal View Prinsengracht',
     type: 'Apartment',
     isFavorite: false,
-    rating: 4,
-    reviews: [reviews[2]]
+    rating: 4.7,
+    reviews: [REVIEWS[2]]
   },
   {
     id: '4',
@@ -44,6 +44,6 @@ export const offers: Offer[] = [
     type: 'Apartment',
     isFavorite: true,
     rating: 5,
-    reviews: [reviews[3]]
+    reviews: [REVIEWS[3]]
   },
 ];

src/mocks/reviews.ts

@@ -1,6 +1,6 @@
 import { Review } from '../types/review';
 
-export const reviews: Review[] = [
+export const REVIEWS: Review[] = [
   {
     id: '1',
     avatar: 'img/avatar-angelina.jpg',

src/pages/main-screen/main-screen.tsx

@@ -102,7 +102,7 @@ function MainScreen({placesCount, offers}: MainScreenProps): JSX.Element {
                   <li className="places__option" tabIndex={0}>Top rated first</li>
                 </ul>
               </form>
-              <OfferList offers={offers} />
+              <OfferList offers={offers} isStandartCardType/>
             </section>
             <div className="cities__right-section">
               <section className="cities__map map">