hw 7.11

htmlacademy-univer-javascript-3 · Nov 23, 2024 · 6688fe3 · 6688fe3
1 parent 1e40d2a
commit 6688fe3
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 48 deletions.
diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
@@ -26,6 +26,16 @@ export function App(): React.JSX.Element {
             path={AppRoute.Offer}
             element={<OfferScreen />}
           />
+          <Route
+            path={AppRoute.Favorites}
+            element={
+              <PrivateRoute
+                authorizationStatus={AuthorizationStatus.Auth}
+              >
+                <FavoriteScreen />
+              </PrivateRoute>
+            }
+          />
           <Route
             path='*'
             element={<NotFoundScreen />}

diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css
@@ -0,0 +1,17 @@
+/* Ключевые кадры для анимации вращения */
+@keyframes react-spinners-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Ключевые кадры для анимации отскока */
+@keyframes react-spinners-bounce {
+  0%, 100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.0);
+  }
+}
+
diff --git a/src/components/loading/loading.tsx b/src/components/loading/loading.tsx
@@ -0,0 +1,37 @@
+import './loading.css';
+import React, {JSX} from 'react';
+
+export function Loading() : JSX.Element {
+  // Жестко заданные параметры
+  const color : string = '#3069a6';
+  const size: number = 80;
+  const speedMultiplier : number = 1;
+
+  const wrapperStyle : React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100vw',
+    height: '100vh',
+    animation: `react-spinners-rotate ${2 / speedMultiplier}s 0s infinite linear`,
+  };
+
+  const dotStyle = (i: number) : React.CSSProperties => ({
+    position: 'relative',
+    top: i % 2 ? '0' : 'auto',
+    bottom: i % 2 ? 'auto' : '0',
+    height: `${size / 2}px`,
+    width: `${size / 2}px`,
+    backgroundColor: color,
+    borderRadius: '100%',
+    animation: `react-spinners-bounce ${2 / speedMultiplier}s ${i === 2 ? '1s' : '0s'} infinite linear`,
+  });
+
+  return (
+    <span style={wrapperStyle}>
+      <span style={dotStyle(1)} />
+      <span style={dotStyle(2)} />
+    </span>
+  );
+}
diff --git a/src/const.ts b/src/const.ts
@@ -111,5 +111,5 @@ export const apiRoute = {
   favorite: '/favorite',
   login: '/login',
   logout: '/logout',
-  reviews: '/comments/:offerId'
+  reviews: '/comments'
 };
diff --git a/src/pages/favorites-screen/favorite-screen.tsx b/src/pages/favorites-screen/favorite-screen.tsx
@@ -1,14 +1,12 @@
 import {JSX} from 'react';
 import {Helmet} from 'react-helmet-async';
-import {Offer} from '../../types/offer.ts';
 import {Link} from 'react-router-dom';
 import {AppRoute} from '../../const.ts';
+import {useAppSelector} from '../../hooks';
 
-type FavoriteScreenProps = {
-  offers: Offer[];
-}
 
-export function FavoriteScreen({offers} : FavoriteScreenProps) : JSX.Element {
+export function FavoriteScreen() : JSX.Element {
+  const offers = useAppSelector((state) => state.offers);
   const favorites = offers.filter((offer) => offer.isFavorite);
   const cities = Array.from(new Set(favorites.map((offer) => offer.city.name))).sort();
 
@@ -32,7 +30,7 @@ export function FavoriteScreen({offers} : FavoriteScreenProps) : JSX.Element {
                     <div className="header__avatar-wrapper user__avatar-wrapper">
                     </div>
                     <span className="header__user-name user__name">[email protected]</span>
-                    <span className="header__favorite-count">3</span>
+                    <span className="header__favorite-count">{favorites.length}</span>
                   </a>
                 </li>
                 <li className="header__nav-item">
@@ -72,7 +70,7 @@ export function FavoriteScreen({offers} : FavoriteScreenProps) : JSX.Element {
                               </div>}
                             <div className="favorites__image-wrapper place-card__image-wrapper">
                               <Link to={AppRoute.Offer.replace(':id', favorite.id)}>
-                                <img className="place-card__image" src={`/img/${favorite.imageSrc}`} width="150" height="110" alt="Place image"/>
+                                <img className="place-card__image" src={favorite.previewImage} width="150" height="110" alt="Place image"/>
                               </Link>
                             </div>
                             <div className="favorites__card-info place-card__info">

diff --git a/src/pages/not-found-screen/not-found-screen.tsx b/src/pages/not-found-screen/not-found-screen.tsx
@@ -6,7 +6,7 @@ import './not-found-screen.css';
 
 export function NotFoundScreen() : JSX.Element {
   return (
-    <body className="page-400">
+    <div className="page-400">
       <Helmet>
         <title>6 sities: Page Not Found</title>
       </Helmet>
@@ -15,6 +15,6 @@ export function NotFoundScreen() : JSX.Element {
         <h2 className="text-not-found">Page Not Found</h2>
         <Link to={AppRoute.Main} className="back-button">Go back to Home</Link>
       </div>
-    </body>
+    </div>
   );
 }
diff --git a/src/pages/offer-screen/offer-screen.tsx b/src/pages/offer-screen/offer-screen.tsx
@@ -1,26 +1,35 @@
-import {JSX} from 'react';
+import {JSX, useEffect} from 'react';
 import {Helmet} from 'react-helmet-async';
-import {DetailOffer} from '../../types/detail-offer.ts';
 import {Link, Navigate, useParams} from 'react-router-dom';
 import {AppRoute} from '../../const.ts';
-import {Review} from '../../types/review.ts';
 import ReviewForm from '../../components/review-form/review-form.tsx';
 import {Map} from '../../components/map/map.tsx';
-import {Offer} from '../../types/offer.ts';
 import {ReviewList} from '../../components/review-list/review-list.tsx';
 import {OffersList} from '../../components/offers-list/offers-list.tsx';
 import {useAppSelector} from '../../hooks';
-
-type OfferScreenProps = {
-  offers: DetailOffer[];
-  reviews: Review[];
-  nearOffers: Offer[];
-}
+import {store} from '../../store';
+import {setDetailOffer} from '../../store/action.ts';
+import {fetchDetailOffer, fetchNearOffers, fetchReviews} from '../../store/api-actions.ts';
+import {Loading} from '../../components/loading/loading.tsx';
 
 export function OfferScreen() : JSX.Element {
-  const detailOffers = useAppSelector(((state) => state.offers));
   const {id} = useParams();
-  const offer = detailOffers.find((item) => item.id === id);
+  useEffect(() => {
+    store.dispatch(setDetailOffer(null));
+    store.dispatch(fetchDetailOffer(id!));
+    store.dispatch(fetchNearOffers(id!));
+    store.dispatch(fetchReviews(id!));
+  }, [id]);
+
+  const offer = useAppSelector((state) => state.detailOffer);
+  const nearOffers = useAppSelector((state) => state.nearOffers).slice(
+    0,
+    3,
+  );
+  const reviews = useAppSelector((state) => state.reviews);
+  if (offer === null){
+    return (<Loading />);
+  }
 
   if (offer) {
     return (
@@ -61,24 +70,11 @@ export function OfferScreen() : JSX.Element {
           <section className="offer">
             <div className="offer__gallery-container container">
               <div className="offer__gallery">
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/room.jpg" alt="Photo studio"/>
-                </div>
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio"/>
-                </div>
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/apartment-02.jpg" alt="Photo studio"/>
-                </div>
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/apartment-03.jpg" alt="Photo studio"/>
-                </div>
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/studio-01.jpg" alt="Photo studio"/>
-                </div>
-                <div className="offer__image-wrapper">
-                  <img className="offer__image" src="img/apartment-01.jpg" alt="Photo studio"/>
-                </div>
+                {offer.images.map((image, index) => (
+                  <div key={image} className="offer__image-wrapper">
+                    <img className="offer__image" src={image} alt={`Photo ${index + 1}`}/>
+                  </div>
+                ))}
               </div>
             </div>
             <div className="offer__container container">
@@ -90,7 +86,10 @@ export function OfferScreen() : JSX.Element {
                   <h1 className="offer__name">
                     {offer.title}
                   </h1>
-                  <button className={`offer__bookmark-button ${offer.isFavorite && 'offer__bookmark-button--active'} button`} type="button">
+                  <button
+                    className={`offer__bookmark-button ${offer.isFavorite && 'offer__bookmark-button--active'} button`}
+                    type="button"
+                  >
                     <svg className="offer__bookmark-icon" width="31" height="33">
                       <use xlinkHref="#icon-bookmark"></use>
                     </svg>
@@ -112,7 +111,7 @@ export function OfferScreen() : JSX.Element {
                     {offer.bedrooms} Bedrooms
                   </li>
                   <li className="offer__feature offer__feature--adults">
-                    Max {offer.maxAdults} adults
+                      Max {offer.maxAdults} adults
                   </li>
                 </ul>
                 <div className="offer__price">
@@ -133,7 +132,9 @@ export function OfferScreen() : JSX.Element {
                   <h2 className="offer__host-title">Meet the host</h2>
                   <div className="offer__host-user user">
                     <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
-                      <img className="offer__avatar user__avatar" src={offer.host.avatarUrl} width="74" height="74" alt="Host avatar"/>
+                      <img className="offer__avatar user__avatar" src={offer.host.avatarUrl} width="74" height="74"
+                        alt="Host avatar"
+                      />
                     </div>
                     <span className="offer__user-name">
                       {offer.host.name}
@@ -157,15 +158,15 @@ export function OfferScreen() : JSX.Element {
             </div>
             <Map
               city={offer.city}
-              offers={nearThreeOffers}
+              offers={nearOffers}
               selectedOffer={undefined}
             />
           </section>
           <div className="container">
             <section className="near-places places">
               <h2 className="near-places__title">Other places in the neighbourhood</h2>
               <div className="near-places__list places__list">
-                <OffersList offers={nearThreeOffers} onChange={() => {}} />
+                <OffersList offers={nearOffers} onChange={() => {}} />
               </div>
             </section>
           </div>

diff --git a/src/store/action.ts b/src/store/action.ts
@@ -1,8 +1,15 @@
 import {createAction} from '@reduxjs/toolkit';
 import {City} from '../types/city.ts';
 import {Offer} from '../types/offer.ts';
+import {DetailOffer} from '../types/detail-offer.ts';
+import {Review} from '../types/review.ts';
 
 export const changeActiveCity = createAction<City>('offers/changeActiveCity');
 
 export const setOffers = createAction<Offer[]>('offers/setOffers');
 
+export const setDetailOffer = createAction<DetailOffer | null>('offers/setDetailOffer');
+
+export const setNearOffers = createAction<Offer[]>('offers/setNearOffers');
+
+export const setReviews = createAction<Review[]>('offers/setReviews');
diff --git a/src/store/api-actions.ts b/src/store/api-actions.ts
@@ -3,7 +3,9 @@ import {AppDispatch, State} from '../types/state.ts';
 import {AxiosInstance} from 'axios';
 import {Offer} from '../types/offer.ts';
 import {apiRoute} from '../const.ts';
-import {setOffers} from './action.ts';
+import {setOffers, setDetailOffer, setNearOffers, setReviews} from './action.ts';
+import {DetailOffer} from '../types/detail-offer.ts';
+import {Review} from '../types/review.ts';
 
 export const fetchOffers = createAsyncThunk<void, undefined, {
   dispatch: AppDispatch;
@@ -16,3 +18,39 @@ export const fetchOffers = createAsyncThunk<void, undefined, {
     dispatch(setOffers(data));
   }
 );
+
+export const fetchDetailOffer = createAsyncThunk<void, Offer['id'], {
+  dispatch: AppDispatch;
+  state: State;
+  extra: AxiosInstance;
+}>(
+  'data/fetchDetailOffer',
+  async (offerId, {dispatch, extra: api}) => {
+    const {data} = await api.get<DetailOffer>(`${apiRoute.offers}/${offerId}`);
+    dispatch(setDetailOffer(data));
+  }
+);
+
+export const fetchNearOffers = createAsyncThunk<void, Offer['id'], {
+  dispatch: AppDispatch;
+  state: State;
+  extra: AxiosInstance;
+}>(
+  'data/fetchNearOffers',
+  async (offerId, {dispatch, extra: api}) => {
+    const {data} = await api.get<Offer[]>(`${apiRoute.offers}/${offerId}/nearby`);
+    dispatch(setNearOffers(data));
+  }
+);
+
+export const fetchReviews = createAsyncThunk<void, Offer['id'], {
+  dispatch: AppDispatch;
+  state: State;
+  extra: AxiosInstance;
+}>(
+  'data/fetchReviews',
+  async (offerId, {dispatch, extra: api}) => {
+    const {data} = await api.get<Review[]>(`${apiRoute.reviews}/${offerId}`);
+    dispatch(setReviews(data));
+  }
+);
diff --git a/src/store/reducer.ts b/src/store/reducer.ts
@@ -1,17 +1,25 @@
 import {Paris} from '../const.ts';
 import {createReducer} from '@reduxjs/toolkit';
-import {changeActiveCity, setOffers} from './action.ts';
+import {changeActiveCity, setDetailOffer, setNearOffers, setOffers, setReviews} from './action.ts';
 import {City} from '../types/city.ts';
 import {Offer} from '../types/offer.ts';
+import {DetailOffer} from '../types/detail-offer.ts';
+import {Review} from '../types/review.ts';
 
 type InitialState = {
   activeCity: City;
   offers: Offer[];
+  detailOffer: DetailOffer | null;
+  nearOffers: Offer[];
+  reviews: Review[];
 }
 
 const initialState : InitialState = {
   activeCity: Paris,
-  offers: []
+  offers: [],
+  detailOffer: null,
+  nearOffers: [],
+  reviews: [],
 };
 
 export const reducer = createReducer(initialState, (builder) => {
@@ -21,5 +29,14 @@ export const reducer = createReducer(initialState, (builder) => {
     })
     .addCase(setOffers, (state, action) => {
       state.offers = action.payload;
+    })
+    .addCase(setDetailOffer, (state, action) => {
+      state.detailOffer = action.payload;
+    })
+    .addCase(setNearOffers, (state, action) => {
+      state.nearOffers = action.payload;
+    })
+    .addCase(setReviews, (state, action) => {
+      state.reviews = action.payload;
     });
 });