Test

package-lock.json

@@ -12,11 +12,9 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "framer": "^2.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
-        "react-swipeable": "^7.0.1",
         "react-tinder-card": "^1.6.2",
         "web-vitals": "^2.1.4",
         "workbox-background-sync": "^6.6.0",
@@ -2281,23 +2279,6 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3155,80 +3136,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@juggle/resize-observer": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
-    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@motionone/animation": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
-      "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/easing": "^10.15.1",
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/dom": {
-      "version": "10.16.2",
-      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.16.2.tgz",
-      "integrity": "sha512-bnuHdNbge1FutZXv+k7xub9oPWcF0hsu8y1HTH/qg6av58YI0VufZ3ngfC7p2xhMJMnoh0LXFma2EGTgPeCkeg==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/animation": "^10.15.1",
-        "@motionone/generators": "^10.15.1",
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/easing": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
-      "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/generators": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
-      "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/types": "^10.15.1",
-        "@motionone/utils": "^10.15.1",
-        "tslib": "^2.3.1"
-      }
-    },
-    "node_modules/@motionone/types": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
-      "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==",
-      "peer": true
-    },
-    "node_modules/@motionone/utils": {
-      "version": "10.15.1",
-      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
-      "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/types": "^10.15.1",
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.3.1"
-      }
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -8473,11 +8385,6 @@
         }
       }
     },
-    "node_modules/fontfaceobserver": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
-      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg=="
-    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -8675,53 +8582,6 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
-    "node_modules/framer": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/framer/-/framer-2.3.0.tgz",
-      "integrity": "sha512-sVAwMEO3LEfHElJOueRjnlBEYN3X8ztbXwZ22RvBHUftOdDpBkrJfISdAds87O8FEWsn5T7Dp3sLfmrBKXXIaQ==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@juggle/resize-observer": "^3.3.1",
-        "eventemitter3": "^3.1.0",
-        "fontfaceobserver": "^2.1.0",
-        "hoist-non-react-statics": "^3.3.2",
-        "hsluv": "^0.0.3"
-      },
-      "peerDependencies": {
-        "framer-motion": "^7.6.12",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/framer-motion": {
-      "version": "7.10.3",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz",
-      "integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==",
-      "peer": true,
-      "dependencies": {
-        "@motionone/dom": "^10.15.3",
-        "hey-listen": "^1.0.8",
-        "tslib": "2.4.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      }
-    },
-    "node_modules/framer-motion/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-      "peer": true
-    },
-    "node_modules/framer/node_modules/eventemitter3": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
-    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -9103,25 +8963,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
-      "peer": true
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9173,11 +9014,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/hsluv": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
-      "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ=="
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -14951,14 +14787,6 @@
         }
       }
     },
-    "node_modules/react-swipeable": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
-      "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
-      "peerDependencies": {
-        "react": "^16.8.3 || ^17 || ^18"
-      }
-    },
     "node_modules/react-tinder-card": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",

package.json

@@ -7,11 +7,9 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "framer": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "react-swipeable": "^7.0.1",
     "react-tinder-card": "^1.6.2",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",

public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="EasyTravelApp" />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -21,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>EasyTravel</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.js

@@ -1,25 +1,43 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import './App.css';
 import Start from './components/Start/Start';
 import Second from './components/Second/Second';
 import Tinder from './components/Tinder/Tinder';
 import Map from './components/Map/Map';
+import axios from 'axios';
 
 function App() {
 
+  const options = {
+    method: 'GET',
+    url: 'https://easytravel.zetcraft.ru/v1/GetAllCards'
+  };
+  
   const [buttonValue, setButtonValue] = useState("");
+  const [fetchData, setFetchData] = useState([]);
 
   const handleButtonValue = (value) => {
     setButtonValue(value);
   };
 
+  useEffect(() => {
+    axios.request(options).then(function (response) {
+      console.log(response.data);
+      fetchData.push(response.data);
+      console.log(fetchData);
+    }).catch(function (error) {
+      console.error(error);
+      return null;
+    });
+  });
+
   let content = null;
   switch (buttonValue) {
     case '/':
       content = <Second getValue={handleButtonValue}/>
       break;
     case '/tinder':
-      content = <Tinder getValue={handleButtonValue}/>
+      content = <Tinder getValue={handleButtonValue} cardData={fetchData}/>
       break;
     case '/map':
       content = <Map/>

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 route = props.getValue;
-    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);
-        }
-    }, [])
 
     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>
+                <h1 className="main_text">Давайте знакомиться!</h1>
-                <p class="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
+                <p className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
               для вас мероприятия</p>
                </div>
                 
@@ -53,12 +38,9 @@ const Second = (props) => {
                 gap:20,
                 alignItems:'center',
                }}>
-                  <button class="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
+                  <button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
-                  <button class="btn_second" onClick={() => route('')}>Сам разберусь</button>
+                  <button className="btn_second" onClick={() => route('')}>Сам разберусь</button>
                </div>
-          
-        
-            
         </div>
     )
 }

src/components/Start/Start.js

@@ -10,11 +10,27 @@ const Start = (props) => {
             flexDirection: 'column',
             alignContent: 'center',
             flexWrap: 'wrap',
-            justifyContent: 'space-between',
+            justifyContent: 'space-evenly',
             height: '95vh',
         }}>
-            <img src="" alt="Icon"/>
+            <span style={{
-            <button onClick={() => route('/')}>Начать</button>
+                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>
     )
 };

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) {
+        // uniqueTags = cardId.filter(function(elem, pos) {
-            return cardId.indexOf(elem) === pos;
+        //     return cardId.indexOf(elem) === pos;
-        });
+        // });
 
-        allTags = allIds.filter(function(elem, pos){
+        // allTags = allIds.filter(function(elem, pos){
-            return allIds.indexOf(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>