Merge pull request #9 from ktvtk/module7-task1

src/components/app/app.tsx

@@ -8,17 +8,8 @@ import {AppRoute, AuthorizationStatus} from '../../const.ts';
 import {PrivateRoute} from '../private-route/private-route.tsx';
 import {FavoriteScreen} from '../../pages/favorites-screen/favorite-screen.tsx';
 import {HelmetProvider} from 'react-helmet-async';
-import {Offer} from '../../types/offer.ts';
-import {DetailOffer} from '../../types/detail-offer.ts';
-import {Review} from '../../types/review.ts';
 
-type AppProps = {
-  offers: Offer[];
-  detailOffers: DetailOffer[];
-  reviews: Review[];
-}
-
-export function App({offers, detailOffers, reviews}: AppProps): React.JSX.Element {
+export function App(): React.JSX.Element {
   return (
     <HelmetProvider>
       <BrowserRouter>
@@ -33,15 +24,15 @@ export function App({offers, detailOffers, reviews}: AppProps): React.JSX.Elemen
           />
           <Route
             path={AppRoute.Offer}
-            element={<OfferScreen offers={detailOffers} reviews={reviews} nearOffers={offers}/>}
+            element={<OfferScreen />}
           />
           <Route
             path={AppRoute.Favorites}
             element={
               <PrivateRoute
                 authorizationStatus={AuthorizationStatus.Auth}
               >
-                <FavoriteScreen offers={offers} />
+                <FavoriteScreen />
               </PrivateRoute>
             }
           />

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);
+  }
+}
+

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>
+  );
+}

src/components/place-card/place-card.tsx

@@ -21,7 +21,7 @@ export function PlaceCard({offer, onMouseLeave, onMouseEnter}: PlaceCardProps):
         </div>}
       <div className="cities__image-wrapper place-card__image-wrapper">
         <Link to={AppRoute.Offer.replace(':id', offer.id)}>
-          <img className="place-card__image" src={`/img/${offer.imageSrc}`} width="260" height="200" alt="Place image"/>
+          <img className="place-card__image" src={offer.previewImage} width="260" height="200" alt="Place image"/>
         </Link>
       </div>
       <div className="place-card__info">

src/const.ts

@@ -105,3 +105,11 @@ export const sortOptions : SortOption[] = [
   'Price: high to low',
   'Top rated first',
 ];
+
+export const apiRoute = {
+  offers: '/offers',
+  favorite: '/favorite',
+  login: '/login',
+  logout: '/logout',
+  reviews: '/comments'
+};

src/index.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './components/app/app.tsx';
-import {offers} from './mocks/offers.ts';
-import {detailOffers} from './mocks/detail-offers.ts';
-import {reviews} from './mocks/reviews.ts';
 import {Provider} from 'react-redux';
 import {store} from './store';
+import {fetchOffers} from './store/api-actions.ts';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
+store.dispatch(fetchOffers());
+
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App offers={offers} detailOffers={detailOffers} reviews={reviews}/>
+      <App />
     </Provider>
   </React.StrictMode>
 );