diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx index 1eed2ec..b44fee7 100644 --- a/src/components/app/app.tsx +++ b/src/components/app/app.tsx @@ -2,7 +2,7 @@ import {Routes, Route} from 'react-router-dom'; import {AppRoute, RequestStatus} from '../../const'; import {useAppSelector} from '../../hooks/types'; import {getAllOffersStatus} from '../../store/app-data/app-data.selectors'; -import {getAuthStatus} from '../../store/user-process/user-process.selectors'; +import {getAuthStatus, getAuthorizationStatus} from '../../store/user-process/user-process.selectors'; import HistoryRouter from '../history-route/history-route'; import browserHistory from '../../browser-history'; import PrivateRoute from '../private-route/private-route'; @@ -12,10 +12,12 @@ import LoginPage from '../../pages/login-page/login-page'; import NotFoundPage from '../../pages/not-found-page/not-found-page'; import OfferPage from '../../pages/offer-page/offer-page'; import LoadingPage from '../../pages/loading-page/loading-page'; +import PublicRoute from '../public-route/public-route'; function App(): JSX.Element { const allOffersStatus = useAppSelector(getAllOffersStatus); const isUserAuth = useAppSelector(getAuthStatus); + const authorizationStatus = useAppSelector(getAuthorizationStatus); if (!isUserAuth || allOffersStatus === RequestStatus.Loading) { return ( @@ -42,7 +44,13 @@ function App(): JSX.Element { /> } + element={ + + + + } /> diff --git a/src/components/public-route/public-route.tsx b/src/components/public-route/public-route.tsx new file mode 100644 index 0000000..45823a8 --- /dev/null +++ b/src/components/public-route/public-route.tsx @@ -0,0 +1,19 @@ +import {Navigate} from 'react-router-dom'; +import {AppRoute, AuthorizationStatus} from '../../const'; + +type PublicRouteProps = { + authorizationStatus: AuthorizationStatus; + children: JSX.Element; +} + +function PublicRoute(props: PublicRouteProps): JSX.Element { + const {authorizationStatus, children} = props; + + return ( + authorizationStatus !== AuthorizationStatus.Auth + ? children + : + ); +} + +export default PublicRoute; diff --git a/src/components/random-city/random-city.tsx b/src/components/random-city/random-city.tsx new file mode 100644 index 0000000..0082449 --- /dev/null +++ b/src/components/random-city/random-city.tsx @@ -0,0 +1,28 @@ +import {CITIES} from '../../const'; +import {Link} from 'react-router-dom'; +import {changeActiveCity} from '../../store/app-process/app-process'; +import {useAppDispatch} from '../../hooks/types'; +import {getRandomInteger} from '../../utils'; +import {AppRoute} from '../../const'; + +function RandomCity(): JSX.Element { + const dispatch = useAppDispatch(); + const randomCityIndex = getRandomInteger(0, CITIES.length - 1); + const randomCity = CITIES[randomCityIndex]; + + return ( +
+
+ dispatch(changeActiveCity({activeCity: randomCity}))} + > + {randomCity.name} + +
+
+ ); +} + +export default RandomCity; diff --git a/src/components/reviews-form/reviews-form.tsx b/src/components/reviews-form/reviews-form.tsx index d6ae8cd..5210f02 100644 --- a/src/components/reviews-form/reviews-form.tsx +++ b/src/components/reviews-form/reviews-form.tsx @@ -1,4 +1,4 @@ -import {useState, Fragment, FormEvent} from 'react'; +import {useState, Fragment, FormEvent, ChangeEvent} from 'react'; import {FullOffer} from '../../types/offer'; import {reviewsActions} from '../../store/reviews-data/reviews-data'; import {useActionCreators} from '../../hooks/types'; @@ -33,7 +33,12 @@ function ReviewsForm({offerId}: ReviewsFormProps): JSX.Element { isformDisabled: false }); - const handleChange = (evt: {target: {name: string; value: string}}) => { + const handleRatingChange = (evt: ChangeEvent) => { + const {name, value} = evt.target; + setUserReview({...userReview, [name]: value}); + }; + + const handleTextChange = (evt: ChangeEvent) => { const {name, value} = evt.target; setUserReview({...userReview, [name]: value}); }; @@ -89,7 +94,7 @@ function ReviewsForm({offerId}: ReviewsFormProps): JSX.Element { value={value} id={`${value}-stars`} type="radio" - onChange={handleChange} + onInput={handleRatingChange} disabled={isformDisabled} />