Обратная сторона реальности

src/components/app.tsx

@@ -6,30 +6,31 @@ import { Route, Routes } from 'react-router-dom';
 import { AppRoute, authorizationStatus } from '../const';
 import NotFoundPage from '../pages/not-found-page';
 import ProtectedRoute from './protected-route';
+import { Offer } from '../types/offer';
 
 type TAppProps = {
-  count: number;
+  offers: Offer[];
 }
 
-export default function App({ count }: TAppProps) {
+export default function App({ offers }: TAppProps) {
   return (
     <Routes>
       <Route path='/'>
         <Route
           index
-          element={<MainPage count={count} />}
+          element={<MainPage offers={offers} />}
         />
         <Route
-          path={AppRoute.Offer}
-          element={<OfferPage />}
+          path={`/${AppRoute.Offer}/:offerId`}
+          element={<OfferPage offers={offers} />}
         />
         <Route
           path={AppRoute.Favorites}
-          element={<ProtectedRoute hasAccess={authorizationStatus.Auth}><FavoritePage /></ProtectedRoute>}
+          element={<ProtectedRoute hasAccess={authorizationStatus.AUTH}> <FavoritePage offers={offers} /></ProtectedRoute>}
         />
         <Route
           path={AppRoute.Login}
-          element={<LoginPage />}
+          element={<LoginPage navigation={false} />}
         />
         <Route
           path='*'

src/components/card.tsx

@@ -1,26 +1,34 @@
+import { Link } from 'react-router-dom';
+import { OfferPreviews } from '../types/offer-preview';
 import Rating from './rating';
+import { AppRoute } from '../const';
 type TCardProps = {
-  cardClass?: string;
-  cardPremium?: boolean;
+  offer: OfferPreviews;
+  optionCard: {
+    classCard: string;
+    width: string;
+    height: string;
+  };
 }
 
-export default function Card({ cardClass, cardPremium = false }: TCardProps) {
+export default function Card({ offer, optionCard }: TCardProps) {
+  const { width, height, classCard } = optionCard;
   return (
-    <article className={`${cardClass} place-card`}>
-      {cardPremium &&
+    <article className={`${classCard} place-card`}>
+      {offer.isPremium &&
         <div className="place-card__mark">
           <span>Premium</span>
         </div>}
 
       <div className="cities__image-wrapper place-card__image-wrapper">
-        <a href="#">
-          <img className="place-card__image" src="img/apartment-01.jpg" width="260" height="200" alt="Place image" />
-        </a>
+        <Link to={`/${AppRoute.Offer}/${offer.id}`}>
+          <img className="place-card__image" src={`${offer.previewImage}`} width={width} height={height} alt="Place image" />
+        </Link>
       </div>
       <div className="place-card__info">
         <div className="place-card__price-wrapper">
           <div className="place-card__price">
-            <b className="place-card__price-value">&euro;120</b>
+            <b className="place-card__price-value">&euro;{offer.price}</b>
             <span className="place-card__price-text">&#47;&nbsp;night</span>
           </div>
           <button className="place-card__bookmark-button button" type="button">
@@ -30,11 +38,11 @@ export default function Card({ cardClass, cardPremium = false }: TCardProps) {
             <span className="visually-hidden">To bookmarks</span>
           </button>
         </div>
-        <Rating ratingClass="place-card" />
+        <Rating ratingClass="place-card" rating={offer.rating} />
         <h2 className="place-card__name">
-          <a href="#">Beautiful &amp; luxurious apartment at great location</a>
+          <Link to={`/${AppRoute.Offer}/${offer.id}`} state={offer}>{offer.title}</Link>
         </h2>
-        <p className="place-card__type">Apartment</p>
+        <p className="place-card__type">{offer.type}</p>
       </div>
     </article>
   );

src/components/comments-template.tsx

@@ -0,0 +1,44 @@
+import { ChangeEvent, useState } from 'react';
+import Star from './star';
+
+type CommentsTemplateProps = {
+  countStar: number;
+}
+
+export default function CommentsTemplate({ countStar }: CommentsTemplateProps) {
+  const [review, setReview] = useState({ text: '', star: 0 });
+
+  const createStars = () => {
+    const stars: JSX.Element[] = [];
+    for (let i = countStar; i > 0; i--) {
+      stars.push(Star(i));
+    }
+
+    return stars;
+  };
+
+  const onInputCommentKeyDown = ({ target }: ChangeEvent<HTMLTextAreaElement>) => {
+    if (target.closest('.form__rating-input')) {
+      setReview({ ...review, star: +target.defaultValue });
+      return;
+    }
+
+    setReview({ ...review, text: target.value });
+  };
+
+  return (
+    <form className="reviews__form form" action="#" method="post">
+      <label className="reviews__label form__label" htmlFor="review">Your review</label>
+      <div className="reviews__rating-form form__rating" onChange={onInputCommentKeyDown}>
+        {createStars()}
+      </div>
+      <textarea className="reviews__textarea form__textarea" id="review" name="review" placeholder="Tell how was your stay, what you like and what can be improved" defaultValue={''} onChange={onInputCommentKeyDown} />
+      <div className="reviews__button-wrapper">
+        <p className="reviews__help">
+          To submit review please make sure to set <span className="reviews__star">rating</span> and describe your stay with at least <b className="reviews__text-amount">50 characters</b>.
+        </p>
+        <button className="reviews__submit form__submit button" type="submit" disabled>Submit</button>
+      </div>
+    </form>
+  );
+}

src/components/container.tsx

@@ -6,12 +6,13 @@ type TContainerProps = {
   children: ReactNode;
   pageClass?: string;
   mainClass: string;
+  navigation?: boolean;
 }
 
-export default function Container({ children, pageClass, mainClass }: TContainerProps) {
+export default function Container({ children, pageClass, mainClass, navigation = true }: TContainerProps) {
   return (
     <div className={clsx('page', pageClass && pageClass)}>
-      <Header navigation />
+      <Header navigation={navigation} />
       <main className={clsx('page__main page__main--', mainClass && mainClass)}>
         {children}
       </main>

src/components/favorite-items.tsx

@@ -1,15 +1,17 @@
 import { ReactNode } from 'react';
+import { OfferPreviews } from '../types/offer-preview';
 
 type TFavoriteItemsProps = {
   children: ReactNode;
+  offer: OfferPreviews;
 }
-export default function FavoriteItems({ children }: TFavoriteItemsProps) {
+export default function FavoriteItems({ children, offer }: TFavoriteItemsProps) {
   return (
     <li className="favorites__locations-items">
       <div className="favorites__locations locations locations--current">
         <div className="locations__item">
           <a className="locations__item-link" href="#">
-            <span>Cologne</span>
+            <span>{offer.city.name}</span>
           </a>
         </div>
       </div>

src/components/header.tsx

@@ -20,17 +20,17 @@ export default function Header({ navigation }: THeaderProps) {
               <nav className="header__nav">
                 <ul className="header__nav-list">
                   <li className="header__nav-item user">
-                    <a className="header__nav-link header__nav-link--profile" href="#">
+                    <Link to={AppRoute.Favorites} className="header__nav-link header__nav-link--profile">
                       <div className="header__avatar-wrapper user__avatar-wrapper">
                       </div>
                       <span className="header__user-name user__name">Oliver.conner@gmail.com</span>
                       <span className="header__favorite-count">3</span>
-                    </a>
+                    </Link>
                   </li>
                   <li className="header__nav-item">
-                    <a className="header__nav-link" href="#">
+                    <Link to={AppRoute.Login} className="header__nav-link">
                       <span className="header__signout">Sign out</span>
-                    </a>
+                    </Link>
                   </li>
                 </ul>
               </nav>

src/components/list-cards.tsx

@@ -0,0 +1,25 @@
+// import { MouseEvent, useState } from 'react';
+import { optionCard } from '../const';
+import { Offer } from '../types/offer';
+import Card from './card';
+
+type TListCardsProps = {
+  offers: Offer[];
+}
+
+export default function ListCards({ offers }: TListCardsProps) {
+  // const [card, setCard] = useState({ id: '' });
+
+  // const onPointingCardMouseOver = ({ target }: MouseEvent<HTMLDivElement>) => {
+  //   if (target.closest('.place-card')) {
+  //   setCard(...card, id: target)
+  //   }
+  // onMouseOver={onPointingCardMouseOver}
+  // };
+
+  return (
+    <div className="cities__places-list places__list tabs__content">
+      {offers.map((offer) => <Card key={offer.id} optionCard={optionCard.CITIES_CARD} offer={offer} />)}
+    </div>
+  );
+}

src/components/rating.tsx

@@ -1,17 +1,18 @@
 type TRating = {
   ratingClass: string;
   isRatingValue?: boolean;
+  rating: number;
 }
 
-export default function Rating({ ratingClass, isRatingValue }: TRating) {
+export default function Rating({ ratingClass, isRatingValue, rating }: TRating) {
   return (
     <div className={`${ratingClass}__rating rating`}>
       <div className={`${ratingClass}__stars rating__stars`}>
-        <span style={{ width: '80%' }}></span>
+        <span style={{ width: `${rating * 20}%` }}></span>
         <span className="visually-hidden">Rating</span>
       </div>
       {isRatingValue &&
-        <span className="offer__rating-value rating__value">4.8</span>}
+        <span className="offer__rating-value rating__value">{rating}</span>}
     </div>
 
 

src/components/star.tsx

@@ -0,0 +1,12 @@
+export default function Star(countStar: number) {
+  return (
+    <>
+      <input className="form__rating-input visually-hidden" name="rating" defaultValue={countStar} id={`${countStar}-stars`} type="radio" />
+      <label htmlFor={`${countStar}-stars`} className="reviews__rating-label form__rating-label" title="perfect">
+        <svg className="form__star-image" width={37} height={33}>
+          <use xlinkHref="#icon-star" />
+        </svg>
+      </label>
+    </>
+  );
+}

src/const.ts

@@ -1,12 +1,28 @@
-export enum AppRoute {
+enum AppRoute {
   Login = 'login',
   Main = '/',
   Favorites = 'favorites',
-  Offer = 'offer',
+  Offer = 'offer/:id',
 }
 
-export const authorizationStatus = {
-  Auth: true,
-  NoAuth: false,
+const AuthorizationStatus = {
+  AUTH: true,
+  NO_AUTH: false,
 };
 
+const optionCard = {
+  CITIES_CARD: {
+    classCard: 'cities__card',
+    width: '260',
+    height: '200'
+  },
+  FAVORITES_CARD: {
+    classCard: 'favorites__card',
+    width: '150',
+    height: '110'
+  }
+};
+
+const CountStar: number = 5;
+
+export { CountStar, AppRoute, AuthorizationStatus as authorizationStatus, optionCard };

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './components/app';
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
+import { offers } from './mocks/offers';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -12,7 +13,7 @@ root.render(
   <React.StrictMode>
     <HelmetProvider>
       <BrowserRouter>
-        <App count={5} />
+        <App offers={offers} />
       </BrowserRouter>
     </HelmetProvider>
   </React.StrictMode>

src/mocks/comments.ts

@@ -0,0 +1,15 @@
+import { Comment } from '../types/comment';
+
+export const Comments: Comment[] = [
+  {
+    id: 'b67ddfd5-b953-4a30-8c8d-bd083cd6b62a',
+    date: '2019-05-08T14:13:56.569Z',
+    user: {
+      name: 'Oliver Conner',
+      avatarUrl: 'https://url-to-image/image.png',
+      isPro: false
+    },
+    comment: 'A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam.',
+    rating: 4
+  }
+];