Merge pull request #6 from Mayanzev/module5-task2

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;
+  cardType: string;
 }
 
-function CityCard({offer}: OfferProps): JSX.Element {
+function CityCard({offer, cardType}: OfferProps): JSX.Element {
   return (
-    <article className="cities__card place-card">
+    <article className={cardType}>
       {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

@@ -1,15 +1,18 @@
+import { listToCard, typeOfCardList } from '../../const';
 import { Offer } from '../../types/offer';
 import CityCard from '../city-card/city-card';
 
 type OfferListProps = {
   offers: Offer[];
+  listType: typeOfCardList;
 };
 
-function OfferList({offers}: OfferListProps): JSX.Element {
+function OfferList({offers, listType}: OfferListProps): JSX.Element {
+  const type = listToCard.get(listType);
   return (
-    <div className="cities__places-list places__list tabs__content">
+    <div className={(listType)}>
       {offers.map((offer) => (
-        <CityCard key={offer.id} offer={offer}/>
+        <CityCard key={offer.id} offer={offer} cardType={(type !== undefined) ? type : 'cities__card place-card'}/>
       ))}
     </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/const.ts

@@ -14,3 +14,17 @@ export enum AuthorizationStatus {
   NoAuth = 'NO_AUTH',
   Unknown = 'UNKNOWN',
 }
+
+export enum typeOfCardList {
+  favourites = 'favorites__places',
+  nearest = 'near-places__list places__list',
+  standart = 'cities__places-list places__list tabs__content',
+}
+
+export const listToCard = new Map(
+  [
+    [typeOfCardList.favourites, 'favorites__card place-card'],
+    [typeOfCardList.nearest, 'near-places__card place-card'],
+    [typeOfCardList.standart, 'cities__card place-card']
+  ]
+);

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/favorites-screen/favorites-screen.tsx

@@ -1,6 +1,7 @@
 import { Offer } from '../../types/offer';
-import Card from '../../components/city-card/city-card';
 import { Link } from 'react-router-dom';
+import { typeOfCardList } from '../../const';
+import OfferList from '../../components/offer-list/offer-list';
 
 type FavoritesScreenProps = {
   offers: Offer[];
@@ -51,11 +52,7 @@ function FavoritesScreen({offers}: FavoritesScreenProps): JSX.Element {
                     </a>
                   </div>
                 </div>
-                <div className="favorites__places">
-                  {offers.map((offer) =>
-                    <Card key={offer.id} offer={offer}/>
-                  )}
-                </div>
+                <OfferList offers={offers} listType={typeOfCardList.favourites} />
               </li>
             </ul>
           </section>

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

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import Map from '../../components/map/map';
 import { POINTS } from '../../mocks/points';
 import { AMSTERDAM } from '../../mocks/cities';
+import { typeOfCardList } from '../../const';
 
 type MainScreenProps = {
     placesCount: number;
@@ -102,7 +103,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} listType={typeOfCardList.standart}/>
             </section>
             <div className="cities__right-section">
               <section className="cities__map map">