diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx index e9121fa..4b90a80 100644 --- a/src/components/app/app.tsx +++ b/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 ( } /> - } /> + } /> + } /> } /> - } /> + } /> ); diff --git a/src/components/city-card/city-card.tsx b/src/components/city-card/city-card.tsx index bbb136d..4cf4c8e 100644 --- a/src/components/city-card/city-card.tsx +++ b/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 ( -
+
{offer.isPremium ? (
Premium diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx index 3d92139..12606b5 100644 --- a/src/components/map/map.tsx +++ b/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 { diff --git a/src/components/offer-list/offer-list.tsx b/src/components/offer-list/offer-list.tsx index 96d1f73..8df4174 100644 --- a/src/components/offer-list/offer-list.tsx +++ b/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 ( -
+
{offers.map((offer) => ( - + ))}
); diff --git a/src/components/reviews-item/reviews-item.tsx b/src/components/reviews-item/reviews-item.tsx new file mode 100644 index 0000000..72ca6e7 --- /dev/null +++ b/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 ( +
  • +
    +
    + Reviews avatar +
    + + {review.author} + +
    +
    +
    +
    + + Rating +
    +
    +

    + {review.comment} +

    + +
    +
    • + ); +} +export default ReviewItem; diff --git a/src/components/reviews-list/reviews-list.tsx b/src/components/reviews-list/reviews-list.tsx new file mode 100644 index 0000000..aade631 --- /dev/null +++ b/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 ( +
    +

    Reviews · {reviews.length}

    +
      + {reviews.map((review) => ( + + ))} +
    + +
    + ); +} + +export default ReviewsList; diff --git a/src/const.ts b/src/const.ts index 5f47f3c..194543a 100644 --- a/src/const.ts +++ b/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'] + ] +); diff --git a/src/hooks/use-map.tsx b/src/hooks/use-map.tsx index 55d6bea..ccacddd 100644 --- a/src/hooks/use-map.tsx +++ b/src/hooks/use-map.tsx @@ -10,7 +10,7 @@ function useMap( const isRenderedRef = useRef(false); useEffect(() => { - if (mapRef.current !== null && !isRenderedRef.current) { + if (mapRef.current && !isRenderedRef.current) { const instance = new Map(mapRef.current, { center: { lat: city.lat, diff --git a/src/index.tsx b/src/index.tsx index 83054b7..135d8c4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,7 +2,6 @@ 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 @@ -10,6 +9,6 @@ const root = ReactDOM.createRoot( root.render( - + ); diff --git a/src/mocks/offers.ts b/src/mocks/offers.ts index fd225fa..6cf9555 100644 --- a/src/mocks/offers.ts +++ b/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]] }, ]; diff --git a/src/mocks/reviews.ts b/src/mocks/reviews.ts index b6d9edc..56c60c1 100644 --- a/src/mocks/reviews.ts +++ b/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', diff --git a/src/pages/favorites-screen/favorites-screen.tsx b/src/pages/favorites-screen/favorites-screen.tsx index a4db42d..c52a6ed 100644 --- a/src/pages/favorites-screen/favorites-screen.tsx +++ b/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 {
    -
    - {offers.map((offer) => - - )} -
    + diff --git a/src/pages/main-screen/main-screen.tsx b/src/pages/main-screen/main-screen.tsx index b2d2ff7..22e0a69 100644 --- a/src/pages/main-screen/main-screen.tsx +++ b/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 {
  • Top rated first
    • - +
    diff --git a/src/pages/offer-screen/offer-screen.tsx b/src/pages/offer-screen/offer-screen.tsx index 6809959..ab72538 100644 --- a/src/pages/offer-screen/offer-screen.tsx +++ b/src/pages/offer-screen/offer-screen.tsx @@ -1,7 +1,18 @@ import { Link } from 'react-router-dom'; -import CommentForm from '../../components/comment-form/comment-form'; +import ReviewsList from '../../components/reviews-list/reviews-list'; +import { OFFERS } from '../../mocks/offers'; +import { Offer } from '../../types/offer'; +import { AMSTERDAM } from '../../mocks/cities'; +import { POINTS } from '../../mocks/points'; +import Map from '../../components/map/map'; +import OfferList from '../../components/offer-list/offer-list'; +import { typeOfCardList } from '../../const'; -function OfferScreen(): JSX.Element { +type OfferScreenProps = { + offer: Offer; +} + +function OfferScreen({offer}: OfferScreenProps): JSX.Element { return (
    @@ -61,12 +72,14 @@ function OfferScreen(): JSX.Element {
    -
    - Premium -
    + {offer.isPremium ? ( +
    + Premium +
    + ) : null}

    - Beautiful & luxurious studio at great location + {offer.title}

    - + Rating
    - 4.8 + {offer.rating}
    • - Apartment + {offer.type}
    • 3 Bedrooms @@ -94,7 +107,7 @@ function OfferScreen(): JSX.Element {
    - €120 + €{offer.price}  night
    @@ -149,146 +162,19 @@ function OfferScreen(): JSX.Element {

    A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.

    -

    - An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful. -

    -
    -

    Reviews · 1

    -
      -
    • -
      -
      - Reviews avatar -
      - - Max - -
      -
      -
      -
      - - Rating -
      -
      -

      - A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century. -

      - -
      -
      • -
    - -
    +
    -
    +
    + +

    Other places in the neighbourhood

    -
    - - - - - -
    +
    diff --git a/src/types/city.ts b/src/types/city.ts index ffb0eb8..a809991 100644 --- a/src/types/city.ts +++ b/src/types/city.ts @@ -1,5 +1,4 @@ +import { Point } from '../types/point'; export type City = { title: string; - lat: number; - lng: number; -}; +} & Point;