add all

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-spring/web": "^9.7.2",
     "@bem-react/classname": "^1.6.0",
     "@bem-react/core": "^5.1.0",
     "@bem-react/di": "^5.0.0",
+    "@react-spring/web": "^9.7.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/client/config.ts

@@ -0,0 +1 @@
+export const origin = 'https://dev2.akarpov.ru/'

src/client/index.ts

@@ -0,0 +1,60 @@
+import axios from 'axios';
+import { origin } from './config';
+
+
+export const register = async (username: string, password: string) => {
+    await axios.post(
+        origin + 'api/auth/register/',
+        {
+            'username': username,
+            'email': username,
+            'password': password
+        }
+    )
+}
+
+export const signin = async (username: string, password: string) => {
+    const response = await axios.post(
+        origin + 'api/auth/token/',
+        {
+            'username': username,
+            'password': password
+        }
+    );
+    return response.data;
+}
+
+
+export const startTinder = async () => {
+    const data = await axios.get(
+        origin + 'api/tinder/start',
+        {
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }
+    );
+    return data.data;
+}
+
+export const swipe = async (itemId: string, type: string) => {
+    var url = origin + 'api/tinder/' + itemId + '/proceed/';
+    console.log(url, itemId)
+    try{
+        const data = await axios.post(
+            url,
+            {
+                'action': type,
+            },
+            {
+                headers: {
+                    'Authorization': 'Bearer ' + localStorage.getItem('token')
+                }
+            }
+        );
+        return data.data;
+    } catch {
+        return false
+    }
+
+}

src/elements/Card/index.tsx

@@ -12,14 +12,19 @@ export const Card: react.FC<ICard> = (props) => {
    return <div className={'card__container ' + props.className}>{props.children}</div>
 }
 
-export const TinderCardContent: react.FC = (props) => {
+
+interface ITinderCard{
+    title: string;
+    description: string;
+}
+
+export const TinderCardContent: react.FC<ITinderCard> = (props) => {
     return <Card className='tinder-card__card'>
         <img src='/sample.jpg' width={200} height={200}></img>
         <div className="tinder__content">
-            <span><strong>Отель:</strong> Ромашка</span>
-            <span><strong>Звезд:</strong> 4</span>
+            <span><strong>Название:</strong> {props.title}</span>
 
-            <span><strong>Описание: </strong>Очень хороший отель с видом на море</span>
+            <span><strong>Описание: </strong>{props.description}</span>
         </div>
     </Card>
 }

src/elements/Input/index.tsx

@@ -4,8 +4,18 @@ import './style.css'
 interface IInput{
     placeholder: string;
     className: string;
+    onChange?: (content: string) => void;
 }
 
 export const Input: react.FC<IInput> = (props) => {
-    return <input type="text" className={'input__container ' +props.className} placeholder={props.placeholder}/>
+    var onChange = props.onChange;
+    if (!onChange) {
+        onChange = (e: string) => {}
+    }
+    return <input 
+        type="text" 
+        className={'input__container ' +props.className} 
+        placeholder={props.placeholder}
+        onChange={(e) => (onChange as any)(e.target.value)}
+    />
 }

src/pages/EventMatch/index.tsx

@@ -4,23 +4,78 @@ import './style.css'
 import { Block } from '../../elements/Block'
 import { Card, TinderCardContent } from '../../elements/Card'
 import { Button } from '../../elements/Button'
+import { startTinder, swipe, } from '../../client'
+import {useNavigate} from 'react-router-dom';
+
+interface IEventData{
+    title: string;
+    description: string;
+    id: string;
+}
 
 
 export const EventMatch: react.FC = () => {
     const ref = useRef(null);
-    var [createNew, setCreateNew] = react.useState(true);
+    const navigate = useNavigate();
+    const started = useRef(false);
+    const swiping = useRef(false);
+    const [cardData, setCardData] = react.useState({title: "", description: "", id: ''} as IEventData);
+    const data  = react.useRef({title: "", description: "", id: ''} as IEventData)
+
+
+    if (!started.current) {
+        started.current = true;
+        startTinder().then((e) => {
+            
+            data.current = {
+                title: e.title,
+                description: e.description.split(' ').slice(0, 10).join(' '),
+                id: e.oid
+            };
+            setCardData({
+                title: e.title,
+                description: e.description.split(' ').slice(0, 10).join(' '),
+                id: e.oid
+            });
+        })
+    }
 
 
     return <div className='centered tin'>
     <Block className='tinder-block'>
-        <TinderCard ref={ref} onSwipe={() => {
+        <TinderCard ref={ref} onSwipe={(type) => {
             console.log("swipe");
-            setTimeout(() => {
-                (ref.current as any).restoreCard();
-            }, 2000);
+            if (swiping.current) return;
+            swiping.current = true;
+            swipe(data.current.id, type).then((e) => {
+                if (!e) {
+                    navigate('/');
+                    return;
+                }
+                data.current = {
+                    title: e.event.title,
+                    description: e.event.description.split(' ').slice(0, 10).join(' '),
+                    id: e.event.oid
+                };
+                setCardData(
+                    {
+                        title: e.event.title,
+                        description: e.event.description.split(' ').slice(0, 10).join(' '),
+                        id: e.event.oid
+                    }
+                );
+                setTimeout(() => {
+                    (ref.current as any).restoreCard();
+                    swiping.current = false;
+                }, 2000);
+            })
+            
         }}>
             <Card className=''>
-                <TinderCardContent></TinderCardContent>
+                <TinderCardContent
+                    title={data.current.title}
+                    description={data.current.description}
+                ></TinderCardContent>
             </Card>
         </TinderCard>
     </Block>

src/pages/Register/index.tsx

@@ -3,6 +3,8 @@ 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')
 
@@ -11,14 +13,25 @@ const clientID = '11e53cfa7add4c55b84168d408a22eb1';
 
 
 export const Register: react.FC = () => {
+    const navigate = useNavigate();
+    const [username, setUseranme] = react.useState('');
+    const [password, setPassword] = react.useState('');
+
 
     return <div className='centered'>
         <Block className='reg-block'>
             <h4>Регистрация</h4>
-            <Input placeholder='Почта' className='reg-input'/>
-            <Input placeholder='Пароль' className='reg-input'/>
+            <Input placeholder='Почта' className='reg-input' onChange={setUseranme}/>
+            <Input placeholder='Пароль' className='reg-input' onChange={setPassword}/>
             <Input placeholder='Пароль еще раз' className='reg-input'/>
-            <Button className=''>Зарегистрироваться</Button>
+            <Button className='' onClick={() => {
+                register(username, password).then((e) => {
+                    signin(username, password).then((e) => {
+                        localStorage.setItem('token', e.access);
+                        navigate('/event-match')
+                    });
+                });
+            }}>Зарегистрироваться</Button>
             <div className="separator">
                 <div className="sep-item"></div>
                 <span>или</span>