Merge pull request #9 from denispan/module7-task1

Истина где-то на сервере

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "1.5.1",
+    "axios": "1.6.8",
     "dayjs": "1.11.10",
     "history": "5.3.0",
     "http-status-codes": "2.3.0",
     "leaflet": "1.7.1",
     "react": "18.2.0",
+    "react-content-loader": "6.0.3",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.16.0",

src/components/location-tab/location-tab.tsx

@@ -11,7 +11,7 @@ function LocationTab({cities = CITIES}: LocationTabProps) {
     cities.map((city) => (
       <NavLink
         key={city.slug}
-        to={AppRoute.Root + city.name}
+        to={AppRoute.Root + city.slug}
         className={({isActive}) =>
           classNames('locations__item-link tabs__item', isActive && 'tabs__item--active')}
       >

src/components/offer-card/offer-card.tsx

@@ -7,7 +7,7 @@ import Rating from '../rating/rating.tsx';
 interface PlaceCardProps {
   offer: OfferShortInfo;
   componentType: 'cities' | 'favorites' | 'near-places';
-  hoverHandler?: (offer?: OfferShortInfo) => void;
+  hoverHandler?: (offer: OfferShortInfo | null) => void;
 }
 
 function OfferCard ({offer, componentType, hoverHandler}: PlaceCardProps) {
@@ -38,7 +38,7 @@ function OfferCard ({offer, componentType, hoverHandler}: PlaceCardProps) {
   };
 
   const mouseOnHadnler = () => hoverHandler && hoverHandler(offer);
-  const mouseOfHadnler = () => hoverHandler && hoverHandler();
+  const mouseOfHadnler = () => hoverHandler && hoverHandler(null);
 
   return (
     <article

src/components/offer-loader/offer-loader.tsx

@@ -0,0 +1,24 @@
+import ContentLoader from 'react-content-loader';
+
+function OfferLoader () {
+
+  return (
+    <div className="cities__places-list places__list tabs__content">
+      <ContentLoader
+        speed={2}
+        width={285}
+        height={330}
+        viewBox="0 0 285 330"
+        backgroundColor="#f5f5f5"
+        foregroundColor="#ecebeb"
+      >
+        <rect x="2" y="0" rx="8" ry="8" width="270" height="200" />
+        <rect x="2" y="212" rx="8" ry="8" width="100" height="19" />
+        <rect x="2" y="238" rx="8" ry="8" width="73" height="12" />
+        <rect x="2" y="258" rx="8" ry="8" width="200" height="22" />
+      </ContentLoader>
+    </div>
+  );
+}
+
+export default OfferLoader;

src/components/offers-list-loader/offers-list-loader.tsx

@@ -0,0 +1,32 @@
+import ContentLoader from 'react-content-loader';
+import OfferLoader from '../offer-loader/offer-loader.tsx';
+import {OFFERS_LOADER_COUNT} from '../../const.ts';
+
+
+function OffersListLoader () {
+  const offerLoaders = Array.from({length: OFFERS_LOADER_COUNT}, (i: number) => i++);
+  return (
+    <section className="cities__places places">
+      <h2 className="visually-hidden">Places</h2>
+      <div style={{width: '100%'}}>
+        <ContentLoader
+          speed={2}
+          width={572}
+          height={120}
+          viewBox="0 0 572 120"
+          backgroundColor="#f5f5f5"
+          foregroundColor="#ecebeb"
+        >
+          <rect x="2" y="20" rx="8" ry="8" width="450" height="28"/>
+          <rect x="2" y="70" rx="4" ry="4" width="100" height="14"/>
+        </ContentLoader>
+      </div>
+
+      <div className="cities__places-list places__list tabs__content">
+        {offerLoaders.map((loader) => <OfferLoader key={loader}/>)}
+      </div>
+    </section>
+  );
+}
+
+export default OffersListLoader;

src/components/offers-list/offers-list.tsx

@@ -0,0 +1,57 @@
+import type {OfferShortInfo} from '../../types/offer.ts';
+import OfferCard from '../offer-card/offer-card.tsx';
+import {useActionCreators, useAppSelector} from '../../hooks/store.ts';
+import {offersActions, offersSelectors} from '../../store/slices/offers.ts';
+import {sortOffers} from '../../utils/sort.ts';
+import {SORT_OPTION_DEFAULT, SortOption} from '../sort/const.ts';
+import Sort from '../sort/sort.tsx';
+import {useState} from 'react';
+import {CITIES, RequestStatus} from '../../const.ts';
+import OffersListLoader from '../offers-list-loader/offers-list-loader.tsx';
+
+interface OffersListProps {
+  offersByCity: OfferShortInfo[];
+  city: typeof CITIES[number];
+}
+
+function OffersList ({offersByCity, city}: OffersListProps) {
+  const [activeSortOption, setActiveSortOption] = useState<SortOption>(SORT_OPTION_DEFAULT);
+
+  const {setActiveOffer} = useActionCreators(offersActions);
+  const status = useAppSelector(offersSelectors.status);
+
+  const offersSorted = sortOffers(activeSortOption, offersByCity);
+
+  if (status === RequestStatus.Loading) {
+    return (
+      <OffersListLoader />
+    );
+  }
+
+  return (
+    <section className="cities__places places">
+      <h2 className="visually-hidden">Places</h2>
+      <b className="places__found">
+        {offersByCity.length} place{offersByCity.length > 1 && 's'} to stay in {city?.name}
+      </b>
+      <Sort
+        activeSortOption={activeSortOption}
+        setActiveSortOption={setActiveSortOption}
+      />
+      <div className="cities__places-list places__list tabs__content">
+        {offersSorted.map((offer: OfferShortInfo) =>
+          (
+            <OfferCard
+              key={offer.id}
+              componentType={'cities'}
+              offer={offer}
+              hoverHandler={() => setActiveOffer(offer)}
+            />
+          ))}
+      </div>
+    </section>
+
+  );
+}
+
+export default OffersList;

src/const.ts

@@ -1,5 +1,7 @@
 import {BaseIconOptions} from 'leaflet';
 
+const OFFERS_LOADER_COUNT = 4;
+
 const RATING_STARS = {
   'perfect': 5,
   'good': 4,
@@ -36,6 +38,13 @@ const enum AppRoute {
   Offer = '/offer',
 }
 
+enum APIRoute {
+  Offers = '/offers',
+  Comments = '/comments',
+  Login = '/login',
+  Logout = '/logout',
+}
+
 const enum AuthorizationStatus {
   Auth = 'AUTH',
   NoAuth = 'NO_AUTH',
@@ -57,10 +66,19 @@ const MARKER_ACTIVE_OPTIONS: BaseIconOptions = {
   iconAnchor: [13, 39]
 };
 
+const enum RequestStatus {
+  Idle = 'idle',
+  Loading = 'loading',
+  Succeed = 'succeed',
+  Failed = 'failed',
+}
+
 export {
+  OFFERS_LOADER_COUNT,
   RATING_STARS,
   OFFER_TYPES,
   AppRoute,
+  APIRoute,
   AuthorizationStatus,
   CITIES,
   DEFAULT_CITY_SLUG,
@@ -70,4 +88,5 @@ export {
   MIN_LENGTH_COMMENT,
   MARKER_DEFAULT_OPTIONS,
   MARKER_ACTIVE_OPTIONS,
+  RequestStatus,
 };

src/hooks/store.ts

@@ -9,7 +9,7 @@ const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 const useActionCreators = <Actions extends ActionCreatorsMapObject>(actions: Actions) => {
   const dispatch = useAppDispatch();
 
-  return useMemo(() => bindActionCreators(actions, dispatch), []);
+  return useMemo(() => bindActionCreators(actions, dispatch), [actions, dispatch]);
 };
 
 export {useAppDispatch, useAppSelector, useActionCreators};