Merge pull request #5 from NotAmigo/module5-task1

const.tsx

@@ -0,0 +1,2 @@
+export const DEFAULT_MAP_ICON = 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/pin.svg';
+export const CURRENT_MAP_ICON = 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/main-pin.svg';

src/components/app/app.tsx

@@ -5,11 +5,11 @@ import Login from '../../pages/login';
 import {AppRoute, AuthorizationStatus} from '../../../enums';
 import PrivateRoute from '../private-route/private-route';
 import Favorites from '../../pages/favorites';
-import OfferCard from '../../types/offer_card';
+import Hotel from '../../types/hotel.tsx';
 import Offer from '../../pages/offer_detailed';
 
 type AppScreenProps = {
-  offers: OfferCard[];
+  offers: Hotel[];
 }
 
 function App({offers}: AppScreenProps): JSX.Element {

src/components/comment/send_comment.tsx

@@ -1,5 +1,5 @@
 import {ChangeEvent, useState} from 'react';
-import {StarsDescription} from '../../../constatns';
+import {StarsDescription} from '../../../const_components.tsx';
 
 function SendComment(): JSX.Element {
   const [formState, setFormState] = useState({rating: '', review: ''});

src/components/map/map.tsx

@@ -0,0 +1,58 @@
+import 'leaflet/dist/leaflet.css';
+import {useEffect, useRef} from 'react';
+import {Icon, layerGroup, Marker} from 'leaflet';
+import {City} from '../../types/city.ts';
+import useMap from './useMap.tsx';
+import Hotel from '../../types/hotel.tsx';
+import {CURRENT_MAP_ICON, DEFAULT_MAP_ICON} from '../../../const.tsx';
+
+const defaultCustomIcon = new Icon({
+  iconUrl: DEFAULT_MAP_ICON,
+  iconSize: [40, 40],
+  iconAnchor: [20, 40]
+});
+
+const currentCustomIcon = new Icon({
+  iconUrl: CURRENT_MAP_ICON,
+  iconSize: [40, 40],
+  iconAnchor: [20, 40]
+});
+
+type MapProps = {
+  city: City;
+  hotels: Hotel[];
+  selectedHotel: Hotel | undefined;
+};
+
+export default function Map(props: MapProps) {
+  const {city, hotels, selectedHotel} = props;
+
+  const mapRef = useRef(null);
+  const map = useMap(mapRef, city);
+
+  useEffect(() => {
+    if (map) {
+      const markerLayer = layerGroup().addTo(map);
+      hotels.forEach((hotel) => {
+        const marker = new Marker({
+          lat: hotel.coordinates.latitude,
+          lng: hotel.coordinates.longitude
+        });
+
+        marker
+          .setIcon(
+            selectedHotel !== undefined && hotel.title === selectedHotel.title
+              ? currentCustomIcon
+              : defaultCustomIcon
+          )
+          .addTo(markerLayer);
+      });
+
+      return () => {
+        map.removeLayer(markerLayer);
+      };
+    }
+  }, [map, hotels, selectedHotel]);
+
+  return <section className="cities__map" ref={mapRef}></section>;
+}

src/components/map/useMap.tsx

@@ -0,0 +1,38 @@
+import {useRef, useState, useEffect, MutableRefObject} from 'react';
+import {Map, TileLayer} from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import {City} from '../../types/city.ts';
+
+function useMap(mapRef: MutableRefObject<HTMLElement | null>, city: City) {
+  const [map, setMap] = useState<Map | null>(null);
+  const isRenderedRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (mapRef.current !== null && !isRenderedRef.current) {
+      const instance = new Map(mapRef.current, {
+        center: {
+          lat: city.latitude,
+          lng: city.longitude
+        },
+        zoom: city.zoom
+      });
+
+      const layer = new TileLayer(
+        'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+        {
+          attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+        }
+      );
+
+      instance.addLayer(layer);
+
+      setMap(instance);
+      isRenderedRef.current = true;
+    }
+  }, [mapRef, city]);
+
+  return map;
+}
+
+export default useMap;

src/mocks/city_coords.ts

@@ -0,0 +1,8 @@
+import {City} from '../types/city';
+
+export const AMSTERDAM: City = {
+  title: 'Амстердам',
+  latitude: 52.374,
+  longitude: 4.88969,
+  zoom: 12
+};

src/mocks/offer_cards.tsx

@@ -1,7 +1,8 @@
-import OfferCard from '../types/offer_card';
+import Hotel from '../types/hotel.tsx';
 import {OfferType} from '../enums/offer_type_enums';
+import {AMSTERDAM} from './city_coords.ts';
 
-export const offerCards : OfferCard[] = [
+export const offerCards : Hotel[] = [
   {
     id: 1,
     title: 'Beautiful & luxurious studio at great location',
@@ -10,6 +11,11 @@ export const offerCards : OfferCard[] = [
     rating: 4,
     type: OfferType.Apartment,
     price: 210,
+    coordinates: {
+      latitude: 52.3909553943508,
+      longitude: 4.85309666406198
+    },
+    city: AMSTERDAM,
   },
   {
     id: 2,
@@ -19,6 +25,11 @@ export const offerCards : OfferCard[] = [
     rating: 1,
     type: OfferType.Apartment,
     price: 696969,
+    coordinates: {
+      latitude: 52.3609553943508,
+      longitude: 4.85309666406198
+    },
+    city: AMSTERDAM,
   },
   {
     id: 3,
@@ -28,6 +39,11 @@ export const offerCards : OfferCard[] = [
     rating: 3,
     type: OfferType.Apartment,
     price: 1337,
+    coordinates: {
+      latitude: 52.3909553943508,
+      longitude: 4.929309666406198,
+    },
+    city: AMSTERDAM,
   },
   {
     id: 4,
@@ -37,14 +53,10 @@ export const offerCards : OfferCard[] = [
     rating: 2,
     type: OfferType.Apartment,
     price: 420,
-  },
-  {
-    id: 5,
-    title: 'My type',
-    isPremium: true,
-    photo: 'img/room.jpg',
-    rating: 4,
-    type: OfferType.Apartment,
-    price: 42,
+    coordinates: {
+      latitude: 52.3809553943508,
+      longitude: 4.939309666406198,
+    },
+    city: AMSTERDAM,
   }
 ];

src/pages/favorites.tsx

@@ -1,13 +1,13 @@
-import OfferCard from '../types/offer_card';
+import Hotel from '../types/hotel.tsx';
 import {Link} from 'react-router-dom';
 import Logo from '../components/logo/logo';
 
 type FavoritesProps = {
-  offers: OfferCard[];
+  offers: Hotel[];
 }
 
 type FavoriteProps = {
-  offer: OfferCard;
+  offer: Hotel;
 }
 
 function FavoriteCard({offer}: FavoriteProps): JSX.Element {

src/pages/main.tsx

@@ -1,10 +1,12 @@
-import OfferCard from '../types/offer_card';
+import Hotel from '../types/hotel.tsx';
 import {useState} from 'react';
 import {Link} from 'react-router-dom';
 import Logo from '../components/logo/logo';
+import Map from '../components/map/map.tsx';
+import {AMSTERDAM} from '../mocks/city_coords.ts';
 
 type OfferCardsProps = {
-  offerCard: OfferCard;
+  offerCard: Hotel;
   onCardHovered: (id: number) => void;
 }
 
@@ -55,7 +57,7 @@ function OfferCard({offerCard, onCardHovered}: OfferCardsProps): JSX.Element {
 }
 
 type OffersListProps = {
-  offers: OfferCard[];
+  offers: Hotel[];
 }
 
 function OffersList({offers}: OffersListProps): JSX.Element {
@@ -70,7 +72,7 @@ function OffersList({offers}: OffersListProps): JSX.Element {
 }
 
 type MainScreenProps = {
-  offers: OfferCard[];
+  offers: Hotel[];
 }
 
 function MainScreen({offers}: MainScreenProps): JSX.Element {
@@ -164,7 +166,7 @@ function MainScreen({offers}: MainScreenProps): JSX.Element {
               <OffersList offers={offers}/>
             </section>
             <div className="cities__right-section">
-              <section className="cities__map map"></section>
+              <Map city={AMSTERDAM} hotels={offers} selectedHotel={undefined} />
             </div>
           </div>
         </div>

src/types/city.ts

@@ -0,0 +1,6 @@
+export type City = {
+  title: string;
+  latitude: number;
+  longitude: number;
+  zoom: number;
+};

src/types/offer_card.tsx → src/types/hotel.tsx

@@ -1,14 +1,17 @@
 import {OfferType} from '../enums/offer_type_enums';
+import Coords from './hotel_coords.ts';
+import {City} from './city.ts';
 
-type OfferCard = {
+type Hotel = {
   title: string;
   isPremium: boolean;
   photo: string;
   rating: number;
   type: OfferType;
   id: number;
   price: number;
-
+  coordinates: Coords;
+  city: City;
 }
 
-export default OfferCard;
+export default Hotel;

src/types/hotel_coords.ts

@@ -0,0 +1,6 @@
+type Coords = {
+  latitude: number;
+  longitude: number;
+}
+
+export default Coords;