From 75bb2a3b5d98f5d5d1fd8e014e21ebc87fc27f56 Mon Sep 17 00:00:00 2001 From: mayonnaise <90057279+Mayanzev@users.noreply.github.com> Date: Sun, 7 Apr 2024 21:55:13 +0300 Subject: [PATCH 1/3] module5-task2 + fix --- src/components/app/app.tsx | 12 +- src/components/city-card/city-card.tsx | 5 +- src/components/map/map.tsx | 2 +- src/components/offer-list/offer-list.tsx | 7 +- src/components/reviews-item/reviews-item.tsx | 33 ++++ src/components/reviews-list/reviews-list.tsx | 23 +++ src/hooks/use-map.tsx | 2 +- src/index.tsx | 3 +- src/mocks/offers.ts | 14 +- src/mocks/reviews.ts | 2 +- src/pages/main-screen/main-screen.tsx | 2 +- src/pages/offer-screen/offer-screen.tsx | 165 +++---------------- src/types/city.ts | 5 +- 13 files changed, 108 insertions(+), 167 deletions(-) create mode 100644 src/components/reviews-item/reviews-item.tsx create mode 100644 src/components/reviews-list/reviews-list.tsx 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..8e733c4 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; + isStandartCardType: boolean; } -function CityCard({offer}: OfferProps): JSX.Element { +function CityCard({offer, isStandartCardType}: 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..f23d828 100644 --- a/src/components/offer-list/offer-list.tsx +++ b/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 ( -
+
{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..c99e810 --- /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..fb1defc --- /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; \ No newline at end of file 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/main-screen/main-screen.tsx b/src/pages/main-screen/main-screen.tsx index b2d2ff7..6bb828a 100644 --- a/src/pages/main-screen/main-screen.tsx +++ b/src/pages/main-screen/main-screen.tsx @@ -102,7 +102,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..b082c83 100644 --- a/src/pages/offer-screen/offer-screen.tsx +++ b/src/pages/offer-screen/offer-screen.tsx @@ -1,7 +1,17 @@ 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'; -function OfferScreen(): JSX.Element { +type OfferScreenProps = { + offer: Offer; +} + +function OfferScreen({offer}: OfferScreenProps): JSX.Element { return (
    @@ -61,12 +71,14 @@ function OfferScreen(): JSX.Element {
    + {offer.isPremium ? (
    Premium -
    +
    + ) : null}

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

    - + Rating
    - 4.8 + {offer.rating}
    • - Apartment + {offer.type}
    • 3 Bedrooms @@ -94,7 +106,7 @@ function OfferScreen(): JSX.Element {
    - €120 + €{offer.price}  night
    @@ -149,146 +161,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; From 45bce3f8e85ea36466f36d7fc15daa803bc12ade Mon Sep 17 00:00:00 2001 From: mayonnaise <90057279+Mayanzev@users.noreply.github.com> Date: Sun, 7 Apr 2024 22:07:07 +0300 Subject: [PATCH 2/3] fix2 --- src/components/offer-list/offer-list.tsx | 2 +- src/components/reviews-item/reviews-item.tsx | 38 ++++++++++---------- src/components/reviews-list/reviews-list.tsx | 16 ++++----- src/pages/offer-screen/offer-screen.tsx | 6 ++-- 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/offer-list/offer-list.tsx b/src/components/offer-list/offer-list.tsx index f23d828..2db7c33 100644 --- a/src/components/offer-list/offer-list.tsx +++ b/src/components/offer-list/offer-list.tsx @@ -3,7 +3,7 @@ import CityCard from '../city-card/city-card'; type OfferListProps = { offers: Offer[]; - isStandartCardType: boolean + isStandartCardType: boolean; }; function OfferList({offers, isStandartCardType}: OfferListProps): JSX.Element { diff --git a/src/components/reviews-item/reviews-item.tsx b/src/components/reviews-item/reviews-item.tsx index c99e810..72ca6e7 100644 --- a/src/components/reviews-item/reviews-item.tsx +++ b/src/components/reviews-item/reviews-item.tsx @@ -7,26 +7,26 @@ type ReviewProps = { function ReviewItem({review}: ReviewProps): JSX.Element { return (
  • -
    -
    - Reviews avatar -
    - - {review.author} - -
    -
    -
    -
    - - Rating +
    +
    + Reviews avatar
    -
    -

    - {review.comment} -

    - -
    + + {review.author} + +
    +
    +
    +
    + + Rating +
    +
    +

    + {review.comment} +

    + +
    • ); } diff --git a/src/components/reviews-list/reviews-list.tsx b/src/components/reviews-list/reviews-list.tsx index fb1defc..aade631 100644 --- a/src/components/reviews-list/reviews-list.tsx +++ b/src/components/reviews-list/reviews-list.tsx @@ -9,15 +9,15 @@ type ReviewsListProps = { function ReviewsList({ reviews }: ReviewsListProps): JSX.Element { return (
    -

    Reviews · {reviews.length}

    -
      - {reviews.map((review) => ( - - ))} -
    - +

    Reviews · {reviews.length}

    +
      + {reviews.map((review) => ( + + ))} +
    +
    ); } -export default ReviewsList; \ No newline at end of file +export default ReviewsList; diff --git a/src/pages/offer-screen/offer-screen.tsx b/src/pages/offer-screen/offer-screen.tsx index b082c83..c58939e 100644 --- a/src/pages/offer-screen/offer-screen.tsx +++ b/src/pages/offer-screen/offer-screen.tsx @@ -72,8 +72,8 @@ function OfferScreen({offer}: OfferScreenProps): JSX.Element {
    {offer.isPremium ? ( -
    - Premium +
    + Premium
    ) : null}
    @@ -163,7 +163,7 @@ function OfferScreen({offer}: OfferScreenProps): JSX.Element {

    - +
    From 5c51b30b0d47592ce802a10719746fabdb9b3173 Mon Sep 17 00:00:00 2001 From: mayonnaise <90057279+Mayanzev@users.noreply.github.com> Date: Mon, 8 Apr 2024 00:01:38 +0300 Subject: [PATCH 3/3] fix 3 --- src/components/city-card/city-card.tsx | 6 +++--- src/components/offer-list/offer-list.tsx | 10 ++++++---- src/const.ts | 14 ++++++++++++++ src/pages/favorites-screen/favorites-screen.tsx | 9 +++------ src/pages/main-screen/main-screen.tsx | 3 ++- src/pages/offer-screen/offer-screen.tsx | 3 ++- 6 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/components/city-card/city-card.tsx b/src/components/city-card/city-card.tsx index 8e733c4..4cf4c8e 100644 --- a/src/components/city-card/city-card.tsx +++ b/src/components/city-card/city-card.tsx @@ -3,12 +3,12 @@ import { Link } from 'react-router-dom'; type OfferProps = { offer: Offer; - isStandartCardType: boolean; + cardType: string; } -function CityCard({offer, isStandartCardType}: OfferProps): JSX.Element { +function CityCard({offer, cardType}: OfferProps): JSX.Element { return ( -
    +
    {offer.isPremium ? (
    Premium diff --git a/src/components/offer-list/offer-list.tsx b/src/components/offer-list/offer-list.tsx index 2db7c33..8df4174 100644 --- a/src/components/offer-list/offer-list.tsx +++ b/src/components/offer-list/offer-list.tsx @@ -1,16 +1,18 @@ +import { listToCard, typeOfCardList } from '../../const'; import { Offer } from '../../types/offer'; import CityCard from '../city-card/city-card'; type OfferListProps = { offers: Offer[]; - isStandartCardType: boolean; + listType: typeOfCardList; }; -function OfferList({offers, isStandartCardType}: OfferListProps): JSX.Element { +function OfferList({offers, listType}: OfferListProps): JSX.Element { + const type = listToCard.get(listType); return ( -
    +
    {offers.map((offer) => ( - + ))}
    ); 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/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 6bb828a..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 c58939e..ab72538 100644 --- a/src/pages/offer-screen/offer-screen.tsx +++ b/src/pages/offer-screen/offer-screen.tsx @@ -6,6 +6,7 @@ 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'; type OfferScreenProps = { offer: Offer; @@ -173,7 +174,7 @@ function OfferScreen({offer}: OfferScreenProps): JSX.Element {

    Other places in the neighbourhood

    - +