final (maybe) commmit

src/elements/GenerateCard/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from '../Button'
 import { Block } from '../Block'
 import './style.css'
+import { useNavigate } from "react-router-dom";
 
 
 
@@ -9,7 +10,8 @@ import './style.css'
 
 
 export const GenerateCard:React.FC = (props) =>{
-    
+    let navigate = useNavigate()
+
 
     return(
         <Block className='generatecard-block'>
@@ -19,8 +21,7 @@ export const GenerateCard:React.FC = (props) =>{
                 </div>                
             </div>
             <img src='generateTour.png'></img>
-            <Button className='generate-y'>Выбрать <img className="wand" src='magicWand.svg'></img></Button>
+            <Button onClick={()=>navigate('/event-match')} className='generate-y'>Выбрать <img className="wand" src='magicWand.svg'></img></Button>
-
         </Block>
     );
 

src/elements/Header/index.tsx

@@ -1,22 +1,23 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import './style.css'
 
 export const RusPassHeader:React.FC = () =>{
+    let navigate = useNavigate()
     return(
         <div className="padding">
             <div className="headerWrapper">
                 <div className="iconWrapper">
-                    <img className="headerIcon" src='/logo.svg'></img>
+                    <img className="headerIcon" src='/logo.svg' onClick={()=>navigate('/')}></img>
-                    <img className="headerIcon" src='/menu.svg'></img>
+                    <img className="headerIcon" src='/menu.svg' onClick={()=>navigate('/')}></img>
-                    <img className="headerIcon" src='/bonus.svg'></img>
+                    <img className="headerIcon" src='/bonus.svg' onClick={()=>navigate('/event-match')}></img>
-                    <img className="headerIcon" src='/search.svg'></img>
+                    <img className="headerIcon" src='/search.svg' onClick={()=>navigate('/')}></img>
-
                 </div>
                 <div className="iconWrapper">
                     <img className="headerIcon" src='/language.svg'></img>
                     <img className="headerIcon" src='/support.svg'></img>
-                    <img className="headerIcon" src='/favorites.svg'></img>
+                    <img className="headerIcon" src='/favorites.svg' onClick={()=>navigate('/favorites')}></img>
-                    <img className="headerIcon" src='/profile.svg'></img>
+                    <img className="headerIcon" src='/profile.svg'onClick={()=>navigate('/login')} ></img>
                 </div>
             </div>
         </div>

src/elements/Prefernces/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Carousel, Tabs } from 'antd';
+import { Carousel, Spin, Tabs } from 'antd';
 import type { TabsProps } from 'antd';
 import { Button } from "../Button";
 import './style.css'
@@ -9,6 +9,7 @@ import axios from "axios";
 import { backend } from "../../consts";
 import { HotelCard, HotelCardIE } from "../HotelCard";
 import { AttractionCard, AttractionCardIE } from "../AttractionCard";
+import { useNavigate } from "react-router-dom";
 export const Prefernces = () =>{
     const [activeTab, setActiveTab] = useState(1)
     const [cities, setCities] = useState([])
@@ -265,6 +266,7 @@ export const Prefernces = () =>{
                             <h2>Выберите понравившеися вам отели</h2>
                             <div className='hotelsCardWrapper'>
                                     {
+                                        hotels.length == 0? <Spin></Spin>:
                                         hotels.map((hotel:HotelCardIE)=><HotelCard key={hotel.title} {...hotel}></HotelCard>)
                                     }
                             </div>
@@ -296,7 +298,9 @@ export const Prefernces = () =>{
                         <div>
                             <h2>Выберите самое интересное</h2>
                             <div className='hotelsCardWrapper'>
+
                                     {
+                                        events.length == 0? <Spin></Spin>:
                                         events.map((event:AttractionCardIE)=>{
                                             return <AttractionCard key={event.oid} {...event}></AttractionCard>
                                         })
@@ -307,9 +311,15 @@ export const Prefernces = () =>{
           },
       ];
     
+    let navigate = useNavigate()
 
-
+    const onNextClick = () =>{
-
+        setActiveTab((activeTab+1)%5)
+        if (activeTab+1 == 5){
+            localStorage.setItem('firstAuth', 'false');
+            navigate('/')
+        }
+    }
     return(
         <div className="prefsbg">
             <div className="prefs">
@@ -318,7 +328,7 @@ export const Prefernces = () =>{
                     <div style={{color:'rgba(29, 29, 29, 0.5)'}}>Отметьте свои предпочтения, чтобы мы смогли предоставить лучшие рекомендации туров</div>
                 </div>
                 <Tabs activeKey={activeTab.toString()} items={items} onChange={(e)=>setActiveTab(Number(e))} />
-                <Button className="btn-y" onClick={()=> setActiveTab((activeTab+1)%5)}>Далее</Button>
+                <Button className="btn-y" onClick={()=> onNextClick()}>Далее</Button>
             </div>
         </div>
         

src/elements/Prefernces/style.css

@@ -20,9 +20,13 @@
 }
 
 .prefsbg{
+    position: absolute;
+    right: 0;
+    top:0;
     width: 100%;
     height: 100vh;
     background-color: rgba(0,0,0,0.2);
+    z-index: 1000000;
 }
 
 .hotelsCardWrapper{

src/elements/map/index.tsx

@@ -63,7 +63,7 @@ export const MyMap: React.FC<MapIE> = (props) =>{
           'line-cap': 'round'
         },
         paint: {
-          'line-color': '#3887be',
+          'line-color': '#FFCF08',
           'line-width': 5,
           'line-opacity': 0.75
         }

src/pages/Login/index.tsx

@@ -1,6 +1,44 @@
 import react from 'react'
+import { Block } from '../../elements/Block'
+import { Input } from '../../elements/Input'
+import './style.css'
+import { Button } from '../../elements/Button'
+import { register, signin } from '../../client'
+import { useNavigate } from "react-router-dom";
+
+const yandexConnect = require('react-yandex-login')
+
+const {YandexLogin, YandexLogout} = yandexConnect;
+const clientID = '11e53cfa7add4c55b84168d408a22eb1';
+
 
 export const Login: react.FC = () => {
+    const navigate = useNavigate();
+    const [username, setUseranme] = react.useState('');
+    const [password, setPassword] = react.useState('');
 
-   return <div>Login</div>
+
+    return <div className='centered'>
+        <Block className='reg-block'>
+            <h4>Вход</h4>
+            <Input placeholder='Почта' className='reg-input' onChange={setUseranme}/>
+            <Input placeholder='Пароль' className='reg-input' onChange={setPassword}/>
+            <Button className='' onClick={() => {
+                    signin(username, password).then((e) => {
+                        localStorage.setItem('token', e.access);
+                        localStorage.setItem('firstAuth', 'true');
+
+                        navigate('/')
+                    });
+            }}>Войти</Button>
+            <div className="separator">
+                <div className="sep-item"></div>
+                <span>или</span>
+                <div className="sep-item"></div>
+            </div>
+            <YandexLogin clientID={clientID} onSuccess={() => {}}>
+                <button className="btn-y">Yandex login</button>
+            </YandexLogin>
+        </Block>
+    </div>
 }

src/pages/Login/style.css

@@ -0,0 +1,31 @@
+.centered{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 50px;
+}
+
+.reg-block{
+    padding-left: 50px;
+    padding-right: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
+}
+
+.reg-input{
+    display: block;
+    width: 400px;
+}
+
+.btn-y{
+    width: 440px!important;
+    background-color: #FFCF08;
+    border-radius: 10px;
+    padding: 15px 50px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+}

src/pages/Main/index.tsx

@@ -13,12 +13,21 @@ import type { RangePickerProps } from 'antd/es/date-picker';
 import { Search } from '../../elements/Search';
 import { AttractionCard } from '../../elements/AttractionCard';
 import { EventCard, EventCardIE } from '../../elements/EventCard';
+import { Prefernces } from '../../elements/Prefernces';
 
 export const Main: react.FC = () => {
    const [events, setEvents] = useState([])
    const [favorites, setFavorites] = useState([])
+   let navigate = useNavigate()
+
+   let token = localStorage.getItem('token')
+
+   let firstAuth = localStorage.getItem('firstAuth')
 
    useEffect(()=>{
+      if (null == localStorage.getItem('token')){
+         navigate('/login')
+      }
       if (favorites.length == 0){
          backend.get('user/favorite').then((e)=>setFavorites(e.data))
       }
@@ -39,6 +48,9 @@ export const Main: react.FC = () => {
   
    return (
       <div className='mainWrapper'>
+         {
+            firstAuth == 'true'? <Prefernces></Prefernces>:null
+         }
          <RusPassHeader></RusPassHeader>
          <div className='headMainWrapper'>
             <img  className='backgroundIMG' src='background.png'></img>

src/pages/Register/index.tsx

@@ -27,8 +27,9 @@ export const Register: react.FC = () => {
             <Button className='' onClick={() => {
                 register(username, password).then((e) => {
                     signin(username, password).then((e) => {
+                        localStorage.setItem('firstAuth', 'true');
                         localStorage.setItem('token', e.access);
-                        navigate('/event-match')
+                        navigate('/')
                     });
                 });
             }}>Зарегистрироваться</Button>