task-17-lct/frontend
1
0
Fork 0
mirror of https://github.com/task-17-lct/frontend.git synced 2024-11-22 02:56:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

add tinder

Browse Source
This commit is contained in:
= 2023-05-29 10:57:38 +03:00
parent f4aa746dc9
commit c6e547f4d6
3 changed files with 258 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/client/index.ts
View File

@ -1,60 +1,103 @@
import axios from 'axios'; import axios from 'axios';
import { origin } from './config'; import { origin } from './config';
export const register = async (username: string, password: string) => { export const register = async (username: string, password: string) => {
await axios.post( await axios.post(
origin + 'api/auth/register/', origin + 'api/auth/register/',
{ {
'username': username, 'username': username,
'email': username, 'email': username,
'password': password 'password': password
} }
) )
} }
export const signin = async (username: string, password: string) => { export const signin = async (username: string, password: string) => {
const response = await axios.post( const response = await axios.post(
origin + 'api/auth/token/', origin + 'api/auth/token/',
{ {
'username': username, 'username': username,
'password': password 'password': password
} }
); );
return response.data; return response.data;
} }
export const startTinder = async () => { export const startTinder = async () => {
const data = await axios.get( const data = await axios.get(
origin + 'api/tinder/start', origin + 'api/tinder/start',
{ {
headers: { headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token') 'Authorization': 'Bearer ' + localStorage.getItem('token')
} }
} }
); );
return data.data; return data.data;
} }
export const swipe = async (itemId: string, type: string) => { export const swipe = async (itemId: string, type: string) => {
var url = origin + 'api/tinder/' + itemId + '/proceed/'; var url = origin + 'api/tinder/' + itemId + '/proceed/';
console.log(url, itemId) console.log(url, itemId)
try{ try{
const data = await axios.post( const data = await axios.post(
url, url,
{ {
'action': type, 'action': type,
}, },
{ {
headers: { headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token') 'Authorization': 'Bearer ' + localStorage.getItem('token')
} }
} }
); );
return data.data; return data.data;
} catch { } catch {
return false return false
} }
}
export const dailySelectionGenerate = async () => {
var data = await axios.get(
origin + 'api/recommendations/get_daily_selection/',
{
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
}
);
return data.data;
}
export const dailySelectionBuild = async (buildData: any) => {
var data = await axios.post(
origin + 'api/recommendations/generate_daily_selection/',
{nodes: buildData},
{
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
}
);
return data.data;
}
export const saveTinderPath = async (tinderData: any) => {
await axios.post(
origin + 'api/route/save', {
"points": [{
date: '2000-01-01',
paths: tinderData
},]
},
{
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
}
)
} }

202
src/pages/EventMatch/index.tsx
View File

@ -1,93 +1,111 @@
import react, { useRef } from 'react' import react, { useRef, useState } from 'react'
import TinderCard from 'react-tinder-card' import TinderCard from 'react-tinder-card'
import './style.css' import './style.css'
import { Block } from '../../elements/Block' import { Block } from '../../elements/Block'
import { Card, TinderCardContent } from '../../elements/Card' import { Card, TinderCardContent } from '../../elements/Card'
import { Button } from '../../elements/Button' import { Button } from '../../elements/Button'
import { startTinder, swipe, } from '../../client' import { dailySelectionBuild, dailySelectionGenerate, saveTinderPath, startTinder, swipe, } from '../../client'
import {useNavigate} from 'react-router-dom'; import {useNavigate} from 'react-router-dom';
import { MyMap } from '../../elements/map'
interface IEventData{
title: string; interface IEventData{
description: string; title: string;
id: string; description: string;
} id: string;
}
export const EventMatch: react.FC = () => {
const ref = useRef(null); export const EventMatch: react.FC = () => {
const navigate = useNavigate(); const ref = useRef(null);
const started = useRef(false); const navigate = useNavigate();
const swiping = useRef(false); const started = useRef(false);
const [cardData, setCardData] = react.useState({title: "", description: "", id: ''} as IEventData); const [dailyData, setDailyData] = useState([]);
const data = react.useRef({title: "", description: "", id: ''} as IEventData) const [resData, setResData] = useState<any[]>([]);
const queried = useRef(false);
const [answerData, setAnswerData] = useState([]);
if (!started.current) {
started.current = true; if (!started.current) {
startTinder().then((e) => { started.current = true;
dailySelectionGenerate().then((e) => {
data.current = { console.log(e)
title: e.title, setDailyData(e.events);
description: e.description.split(' ').slice(0, 10).join(' '), })
id: e.oid }
};
setCardData({ return <div className='centered tin'>
title: e.title, <Block className='tinder-block'>
description: e.description.split(' ').slice(0, 10).join(' '), {
id: e.oid dailyData.map((e) => {
}); return <TinderCard
}) ref={ref}
} className='card'
onSwipe={(type) => {
console.log(dailyData.indexOf(e))
return <div className='centered tin'> if (dailyData.indexOf(e) == 0) {
<Block className='tinder-block'> if (!resData.length) return;
<TinderCard ref={ref} onSwipe={(type) => { if (!queried.current) {
console.log("swipe"); dailySelectionBuild(resData).then((e) => {
if (swiping.current) return; setAnswerData(e.path);
swiping.current = true; });
swipe(data.current.id, type).then((e) => { queried.current = true;
if (!e) { }
navigate('/'); }
return;
} if (type == 'right') {
data.current = { setResData(resData.concat([
title: e.event.title, {
description: e.event.description.split(' ').slice(0, 10).join(' '), 'action': 'right',
id: e.event.oid 'oid': (e as any).oid
}; } as any
setCardData( ]))
{ }
title: e.event.title,
description: e.event.description.split(' ').slice(0, 10).join(' '), }}
id: e.event.oid >
}
); <Card className=''>
setTimeout(() => { <TinderCardContent
(ref.current as any).restoreCard(); title={dailyData.length ? (e as any).title : ""}
swiping.current = false; description={dailyData.length ? (e as any).description.slice(0, 70) : ""}
}, 2000); ></TinderCardContent>
}) </Card>
</TinderCard>
}}> })
<Card className=''> }
<TinderCardContent <div className='cont-span'>
title={data.current.title} {
description={data.current.description} dailyData.length && !answerData.length ?
></TinderCardContent> (!queried.current ?
</Card> <div className='span-cont'><span className='span-er'>Вы не выбрали ни одного события, Мы не можем сгенерировать вам маршрут. Возвращяйтесь к нам завтра. <a
</TinderCard> href="" onClick={() => {
</Block> navigate('/');
}}
<Block className='tin-dir'> >Вернуться на главную</a></span></div> : <span>Подождите немного, мы генерируем для вас ежедневный маршрут</span>) : answerData.length ? <MyMap points={
<Button className='' onClick={() => { answerData.filter((e: any) => e.type == 'point').map((e: any) => {return {
(ref.current as any).swipe('left') cords: [e.point.lat, e.point.lon],
}}>Не нравится</Button> title: e.point.title,
<Button className='main-btn'>На главную</Button> description: ""
<Button className='' onClick={() => { }})
(ref.current as any).swipe('right')
}}>Нравится</Button> }></MyMap> : <></>
</Block> }
</div> {
answerData.length ? <div className='btns'>
<Button onClick={() => {
saveTinderPath(answerData);
navigate('/');
}} className=''>
Сохранить
</Button>
<Button onClick={() => {
navigate('/');
}} className=''>
На главную
</Button>
</div> : <></>
}
</div>
</Block>
</div>
} }

54
src/pages/EventMatch/style.css
View File

@ -1,9 +1,47 @@
.tinder-block{ .tinder-block{
width: 700px; width: 700px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.main-btn{ .main-btn{
background-color: #FFCF08; background-color: #FFCF08;
}
.tinder-block{
height: 600px;
}
.card{
position: absolute;
}
.span-er{
width: 250px;
text-align: center;
}
a{
color: black;
}
a:visited{
color: black;
}
.btns{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.cont-span{
display: flex;
justify-content: center;
flex-direction: column;
width: 500px;
}
.span-cont{
display: flex;
justify-content: center;
} }