Test

src/components/Second/Second.js

@@ -1,26 +1,11 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 import './style.css'
 import Icon from './images/Vector.svg'
 
 
 const Second = (props) => {
 
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth)
-    const [windowHeight, setWindowHeight] = useState(window.innerHeight)
-
-    const handleResize = () => {
-        setWindowWidth(window.innerWidth)
-        setWindowHeight(window.innerHeight)
-    }
-
-    const route = props.getValue
-
-    useEffect(() => {
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        }
-    }, [])
+    const route = props.getValue;
 
     return (
         <div style={{
@@ -29,11 +14,11 @@ const Second = (props) => {
             alignContent: 'center',
             flexWrap: 'wrap',
             justifyContent: 'space-between',
-            height:{windowHeight} ,
+            height: '95vh' ,
             background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
             filter: 'blur 2',
             paddingBottom:10,
-
+            overflow: 'hidden',
         }}>
                <img src={Icon} alt='#'/>
                <div style={{
@@ -42,8 +27,8 @@ const Second = (props) => {
                 gap:20,
                 alignItems:'center',
                }}>
-                <h1 class="main_text">Давайте знакомиться!</h1>
-                <p class="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
+                <h1 className="main_text">Давайте знакомиться!</h1>
+                <p className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
               для вас мероприятия</p>
                </div>
                 
@@ -53,14 +38,11 @@ const Second = (props) => {
                 gap:20,
                 alignItems:'center',
                }}>
-                  <button class="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
-                  <button class="btn_second" onClick={() => route('')}>Сам разберусь</button>
+                  <button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
+                  <button className="btn_second" onClick={() => route('')}>Сам разберусь</button>
                </div>
-          
-        
-            
         </div>
     )
 }
 
-export default Second;
+export default Second;

src/components/Start/Start.js

@@ -10,13 +10,29 @@ const Start = (props) => {
             flexDirection: 'column',
             alignContent: 'center',
             flexWrap: 'wrap',
-            justifyContent: 'space-between',
+            justifyContent: 'space-evenly',
             height: '95vh',
         }}>
-            <img src="" alt="Icon"/>
-            <button onClick={() => route('/')}>Начать</button>
+            <span style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                fontWeight: 700,
+                fontFamily: 'Raleway',
+                fontSize: '40px',
+            }}>Путешествия <p>просто!</p></span>
+            <button onClick={() => route('/')} style={{
+                height: 70,
+                borderRadius: '32px',
+                backgroundColor: '#0094FF',
+                border: 'none',
+                fontFamily: 'Raleway',
+                fontSize: '30px',
+                fontWeight: 700,
+                color: '#fff',
+            }}>Начать</button>
         </div>
     )
 };
 
-export default Start;
+export default Start;

src/components/Tinder/Tinder.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
 
@@ -29,13 +29,17 @@ const db = [
 
     const route = props.getValue;
 
-    const characters = db;
+    useEffect(() => {
+        console.log(characters[0])
+    });
+
+    const characters = props.cardData;
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
     const [allIds, setAllIds] = useState([]);
     const [cardLenth, setCardLenth] = useState(false);
 
-    let uniqueTags = [];
+    let uniqueTags = [...characters];
     let allTags = [];
 
     const swiped = (direction, id) => {
@@ -48,20 +52,20 @@ const db = [
 
     const getId = () => {
 
-        uniqueTags = cardId.filter(function(elem, pos) {
-            return cardId.indexOf(elem) === pos;
-        });
+        // uniqueTags = cardId.filter(function(elem, pos) {
+        //     return cardId.indexOf(elem) === pos;
+        // });
 
-        allTags = allIds.filter(function(elem, pos){
-            return allIds.indexOf(elem) === pos;
-        });
+        // allTags = allIds.filter(function(elem, pos){
+        //     return allIds.indexOf(elem) === pos;
+        // });
 
-        characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
+        // characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
 
-        if(cardLenth) {
-            route('/map')
-        }
-        
+        // if(cardLenth) {
+        //     route('/map')
+        // }
+        console.log(uniqueTags);
     }
   
     return (
@@ -81,9 +85,9 @@ const db = [
                 <div className='card'>
                     <div
                     className='card-content'
-                    // style={{ backgroundImage: `url(${character.url})` }}
+                    // style={{ backgroundImage: url(${character.url}) }}
                     >
-                    <h3>{character.name}</h3>
+                    <h3>{props.character.question}</h3>
                     </div>
                 </div>
                 </TinderCard>
@@ -93,4 +97,4 @@ const db = [
     );
   };
   
-  export default Tinder;
+  export default Tinder;