Task

htmlacademy-univer-javascript-3 · Nov 16, 2024 · 1c18580 · 1c18580
1 parent 51b8064
commit 1c18580
Show file tree

Hide file tree

Showing 18 changed files with 496 additions and 428 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,45 +3,22 @@ import MainPage from './components/MainPage/MainPage';
 import Favorite from './components/Favorites/Favorite';
 import LoginPage from './components/Login/LoginPage';
 import Offer from './components/Offer/Offer';
+import { useAppSelector } from './hooks';
+import { REVIEWERS } from './mock/reviewers';
 
-type Offer = {
-  id: number;
-  title: string;
-  price: number;
-  rating: number;
-  type: string;
-  isPremium: boolean;
-  isFavorite: boolean;
-  NumberOfPlaces: number;
-  previewImage: string;
-  city: {
-    name: string;
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-  };
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-};
-
-type AppProps = {
-  offers: Offer[];
-};
 
-export default function App({ offers }: AppProps) {
+export const App: React.FC = () => {
+  const currentCity = useAppSelector((state) => state.currentCity);
+  const offers = useAppSelector((state) => state.offers);
+  const cities = useAppSelector((state) => state.cities);
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<MainPage offers={offers} />} />
+        <Route path="/" element={<MainPage offers={offers} currentCity={currentCity} cities={cities}/>} />
         <Route path="/login" element={<LoginPage />} />
-        <Route path="/offer/:id" element={<Offer />} />
+        <Route path="/offer/:id" element={<Offer reviews={REVIEWERS} offers={offers} currentCity={currentCity}/>} />
         <Route path="/favorites" element={<Favorite offers={offers} />} />
       </Routes>
     </Router>
   );
-}
+};
diff --git a/src/action.ts b/src/action.ts
@@ -0,0 +1,5 @@
+import { createAction } from '@reduxjs/toolkit';
+import { OfferObject } from './types/types';
+export const changeCity = createAction<string>('ChangeCity');
+
+export const AddOffer = createAction<OfferObject[]>('AddOffer');
diff --git a/src/components/CityList/CityList.tsx b/src/components/CityList/CityList.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { City } from '../../types/types';
+
+const CITY_ACTIVE = 'tabs__item--active';
+
+type CitiesListProps = {
+  currentCity: string;
+  cities: City[];
+  onSelect: (cityName: string) => void;
+}
+
+export const ListCities: React.FC<CitiesListProps> = ({
+  currentCity,
+  cities,
+  onSelect,
+}) => (
+  <ul className="locations__list tabs__list">
+    {cities.map((city) => (
+      <li
+        className="locations__item"
+        key={city.title}
+        onClick={() => {
+          onSelect(city.title);
+        }}
+      >
+        <div className={`
+          locations__item-link
+          tabs__item
+          ${currentCity === city.title ? CITY_ACTIVE : ''}
+          `}
+        >
+          <span>{city.title}</span>
+        </div>
+      </li>
+    )
+    )}
+  </ul>
+);
diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx
@@ -1,41 +1,39 @@
 import {FC} from 'react';
+import { useNavigate } from 'react-router-dom';
 import OfferList from '../Offer/OfferList';
+import { useAppDispatch } from '../../hooks';
+import { OfferObject,AppRoute, City, CardCssNameList } from '../../types/types';
+import { changeCity } from '../../action';
+import { ListCities } from '../../components/CityList/CityList';
 import Map from '../Map/Map';
-type Offer = {
-  id: number;
-  title: string;
-  price: number;
-  rating: number;
-  type: string;
-  isPremium: boolean;
-  isFavorite: boolean;
-  NumberOfPlaces: number;
-  previewImage: string;
-  city: {
-    name: string;
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-  };
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-};
 type MainPageProps = {
-  offers: Offer[];
+  offers: OfferObject[];
+  currentCity: City;
+  cities: City[];
 };
-export const MainPage : FC<MainPageProps> = ({ offers }) =>
-  (
+export const MainPage : FC<MainPageProps> = ({
+  offers,
+  currentCity,
+  cities,
+}:MainPageProps) => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  const handleUserSelectCity = (cityName: string) => {
+    dispatch(changeCity(cityName));
+    // dispatch(fillOffers());
+  };
+
+  return (
     <div className="page page--gray page--main">
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
+              <a className="header__logo-link header__logo-link--active"
+                onClick={() =>
+                  navigate(AppRoute.Main)}
+              >
                 <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
               </a>
             </div>
@@ -64,45 +62,14 @@ export const MainPage : FC<MainPageProps> = ({ offers }) =>
         <h1 className="visually-hidden">Cities</h1>
         <div className="tabs">
           <section className="locations container">
-            <ul className="locations__list tabs__list">
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item" href="#">
-                  <span>Paris</span>
-                </a>
-              </li>
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item" href="#">
-                  <span>Cologne</span>
-                </a>
-              </li>
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item" href="#">
-                  <span>Brussels</span>
-                </a>
-              </li>
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item tabs__item--active">
-                  <span>Amsterdam</span>
-                </a>
-              </li>
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item" href="#">
-                  <span>Hamburg</span>
-                </a>
-              </li>
-              <li className="locations__item">
-                <a className="locations__item-link tabs__item" href="#">
-                  <span>Dusseldorf</span>
-                </a>
-              </li>
-            </ul>
+            <ListCities currentCity={currentCity.title} cities={cities} onSelect={handleUserSelectCity}/>
           </section>
         </div>
         <div className="cities">
           <div className="cities__places-container container">
             <section className="cities__places places">
               <h2 className="visually-hidden">Places</h2>
-              <b className="places__found">{offers.length} places to stay in Amsterdam</b>
+              <b className="places__found">{offers.filter((a) =>a.city.name === currentCity.title).length} places to stay in {currentCity.title}</b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
                 <span className="places__sorting-type" tabIndex={0}>
@@ -119,17 +86,18 @@ export const MainPage : FC<MainPageProps> = ({ offers }) =>
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">
-                <OfferList offers={offers} />
+                <OfferList offers={offers.filter((a) =>a.city.name === currentCity.title)} cardcssname={CardCssNameList.citiesList}/>
               </div>
             </section>
             <div className="cities__right-section">
               <section className="cities__map map">
-                <Map offers={offers} selectedPoint={offers[3]} />
+                <Map offers={offers.filter((a) =>a.city.name === currentCity.title)} selectedPoint={offers[3]} currentCity={currentCity} />
               </section>
             </div>
           </div>
         </div>
       </main>
     </div>
   );
+};
 export default MainPage;
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -1,31 +1,8 @@
 import {useRef, useEffect} from 'react';
 import {Icon, Marker, layerGroup} from 'leaflet';
 import useMap from '../../hooks/use-map';
+import { OfferObject, City } from '../../types/types';
 import 'leaflet/dist/leaflet.css';
-type Offer = {
-  id: number;
-  title: string;
-  price: number;
-  rating: number;
-  type: string;
-  isPremium: boolean;
-  isFavorite: boolean;
-  NumberOfPlaces: number;
-  previewImage: string;
-  city: {
-    name: string;
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-  };
-    location: {
-      latitude: number;
-      longitude: number;
-      zoom: number;
-    };
-};
 const defaultCustomIcon = new Icon({
   iconUrl: 'https://assets.htmlacademy.ru/content/intensive/javascript-1/demo/interactive-map/pin.svg',
   iconSize: [40, 40],
@@ -38,15 +15,16 @@ const currentCustomIcon = new Icon({
   iconAnchor: [20, 40]
 });
 type MainPageProps = {
-  offers: Offer[];
-  selectedPoint :Offer;
+  offers: OfferObject[];
+  currentCity: City;
+  selectedPoint: OfferObject;
 };
 
 function Map(props: MainPageProps): JSX.Element {
-  const {offers, selectedPoint} = props;
+  const {offers, currentCity,selectedPoint} = props;
 
   const mapRef = useRef(null);
-  const map = useMap(mapRef, 'Амстердам');
+  const map = useMap(mapRef, currentCity.title);
 
   useEffect(() => {
     if (map) {