add buy of tour

src/elements/Header/index.tsx

@@ -14,7 +14,7 @@ export const RusPassHeader:React.FC = () =>{
                     <img className="headerIcon delete600" src='/search.svg' onClick={()=>navigate('/')}></img>
                 </div>
                 <div className="iconWrapper">
-                    <img className="headerIcon delete600" src='/language.svg'></img>
+                    <img className="headerIcon delete600" onClick={()=>navigate('/buyed')} src='/language.svg'></img>
                     <img className="headerIcon" src='/favorites.svg' onClick={()=>navigate('/favorites')}></img>
                     <img className="headerIcon" src='/profile.svg'onClick={()=>navigate('/login')} ></img>
                 </div>

src/elements/RouteCard/index.tsx

@@ -7,6 +7,7 @@ import Sidebar from "react-sidebar";
 import { PlaceCard } from "../TourCard";
 import { Collapse, Tabs, TabsProps } from "antd";
 import { backend } from "../../consts";
+import { useNavigate } from "react-router-dom";
 
 export interface RouteCardIE{
     rawProps:any,
@@ -36,7 +37,7 @@ export const RouteCard:React.FC<RouteCardIE> = (props) =>{
     const [showMap, setShowMap] = useState(false)
     const [selectedDay, setSelectedDay] = useState('0')
     const [liked, setLiked] = useState(false)
-
+    let navigate = useNavigate()
     let cntPlaces = 0
     props.options.forEach((route)=>{
         cntPlaces += route.paths.length
@@ -92,9 +93,17 @@ export const RouteCard:React.FC<RouteCardIE> = (props) =>{
         // backend.get('route/list').then((e)=>console.log(e.data))
         backend.post('route/save', {
             points: props.rawProps.path
-        })
+        }).then((e)=>console.log(e.data))
         setLiked(!liked)
     }
+
+    const onBuy = () =>{
+        backend.post('route/save', {
+            points: props.rawProps.path
+        }).then((e)=>backend.get('buy/' + e.data.id + '/add_to_buy/'))
+        
+        navigate('/buyed')
+    }
     return(
         <div key={props.city + props.options[0].paths[0].point.oid}>
             <Sidebar
@@ -102,6 +111,7 @@ export const RouteCard:React.FC<RouteCardIE> = (props) =>{
                     <div className='sidebarContent'>
                         <MyMap points={points}></MyMap>
                         <Tabs defaultActiveKey="0" items={colapseItems} onChange={(e:string)=>setSelectedDay(e)} />
+                        <Button className='' onClick={()=>onBuy()}>КУПИТЬ</Button>
                         <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
                     </div> 
                     }

src/elements/map/index.tsx

@@ -37,7 +37,7 @@ export const MyMap: React.FC<MapIE> = (props) =>{
     useEffect(()=>{
       setTimeout(()=> axios.get('https://api.mapbox.com/directions/v5/mapbox/walking/'+pathString+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
         (data:any) => setRoute(data.data.routes[0].geometry)
-      ), 1000)
+      ).catch((err)=>console.log('ERRRRRRRR')), 1000)
      
     })
     

src/pages/Buyed/index.tsx

@@ -0,0 +1,88 @@
+import { Spin } from "antd";
+import React, { useEffect, useState } from "react";
+import { backend } from "../../consts";
+import { RusPassHeader } from "../../elements/Header";
+import { RouteCard } from "../../elements/RouteCard";
+
+export const Buyed:React.FC = () =>{
+    const [data, setData] = useState([])
+    
+    useEffect(()=>{
+        backend.get('/buy/').then((e)=>setData(e.data))
+    })
+    let newData;
+    
+    if (data.length != 0){
+        newData = data.map((tour:any, index)=>{
+
+            let newPath = tour.points.map((path:any)=>{
+                let newPaths = path.paths
+                for (let i = 0; i < newPaths.length; i++) { 
+                    if (newPaths[i].type == 'transition') { 
+                      newPaths.splice(i, 1); 
+                      i--; 
+                    }
+                }
+
+                return {
+                    date:path.date,
+                    paths: newPaths
+                }
+            })
+
+
+            return {
+                city: 'Тур №' + (index+1),
+                path: newPath
+            }
+        })
+    }
+
+    
+
+    
+    
+    
+
+
+
+ 
+    return(
+        <div className="mainWrapper">
+            <RusPassHeader></RusPassHeader>
+           
+            <h1>Ваши купленные туры</h1>
+
+            {
+                data.length == 0 || newData == undefined?
+                
+                <Spin />:
+                <div className='mainCard'>
+                <h2>Рекомендованные Туры</h2>
+
+                <div className='cardWrapper'>
+                    {
+                        newData.map((tour:any, index:number)=>
+                            <RouteCard city={tour.city} rawProps={data[index]} options={tour.path}></RouteCard>
+                        )
+                    }
+
+                </div>
+            </div>
+            }
+
+
+                    <a href='https://1drv.ms/w/s!AuaFmGWFNV5Np0OhMmVtxPXlG2Ob?e=f7NDCp'>Документация</a>
+
+                    <div className='mainIconWrapper'>
+                        <img className='mainIcon' src='/icons/yt.svg'></img>
+                        <img className='mainIcon' src='/icons/vk.svg'></img>
+                        <img className='mainIcon' src='/icons/dz.svg'></img>
+                        <img className='mainIcon' src='/icons/tg.svg'></img>
+                        <img className='mainIcon' src='/icons/ok.svg'></img>
+                    </div>
+
+                    <div className='grey'>© 2023 A project of the Government of Moscow</div>
+                </div>
+    );
+}

src/router.tsx

@@ -11,6 +11,7 @@ import { SearchPage } from './pages/SearchPage';
 import { Prefernces } from './elements/Prefernces';
 import { Favorites } from './pages/Favorites';
 import { Weather } from './pages/Weather';
+import { Buyed } from './pages/Buyed';
 
 
 const routes = [
@@ -53,6 +54,10 @@ const routes = [
     {
         path: '/route/:routeChangeId/change',
         element: <Weather></Weather>
+    },
+    {
+        path: '/buyed',
+        element: <Buyed></Buyed>
     }
 
 ]