fix cards

src/components/Tinder/Tinder.js

@@ -1,100 +1,80 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
+import axios from 'axios';
 
-const db = [
-    {
-        id: 1,
-        name: 'Richard Hendricks',
-    },
-    {
-        id: 2,
-        name: 'Erlich Bachman',
-    },
-    {
-        id: 3,
-        name: 'Monica Hall',
-    },
-    {
-        id: 4,
-        name: 'Jared Dunn',
-    },
-    {
-        id: 5,
-        name: 'Dinesh Chugtai',
-    }
-  ];
-
-  const Tinder = (props) => {
+const Tinder = (props) => {
 
     const route = props.getValue;
 
-    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);
+    const [cardInfo, setCardInfo] = useState([]);
 
-    let uniqueTags = [...characters];
-    let allTags = [];
+    useEffect(() => {
+        const fetchData = () => {
+          axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
+            .then(response => {
+              setCardInfo(response.data);
+
+              console.log(cardInfo.length);
+            })
+            .catch(error => {
+              console.error('Error fetching data:', error);
+            });
+        }
+        fetchData();
+      }, []);
 
     const swiped = (direction, id) => {
         setLastDirection(direction);
         allIds.push(id);
-        if (direction === 'right') {
+        console.log(allIds.length);
+        if (direction === 'right' || direction === 'up') {
             cardId.push(id);
         };
     };
 
-    const getId = () => {
-
-        // uniqueTags = cardId.filter(function(elem, pos) {
-        //     return cardId.indexOf(elem) === pos;
-        // });
-
-        // allTags = allIds.filter(function(elem, pos){
-        //     return allIds.indexOf(elem) === pos;
-        // });
-
-        // characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
-
-        // if(cardLenth) {
-        //     route('/map')
-        // }
-        console.log(uniqueTags);
-    }
-  
     return (
-      <div className='tinder-container'>
+        <div className='tinder-container'>
             <h1>Card</h1>
             <div className='card-container'>
-            {characters.map((character) => (
-                <TinderCard
-                className='swipe'
-                key={character.id}
-                onSwipe={(dir) => {
-                    swiped(dir, character.id);
-                    getId();
-                    // console.log(uniqueTags);
-                }}
-                >
-                <div className='card'>
-                    <div
-                    className='card-content'
-                    // style={{ backgroundImage: url(${character.url}) }}
+                {cardInfo.map((card) => (
+                    <TinderCard
+                        className='swipe'
+                        key={card.id}
+                        onSwipe={(dir) => {
+                            swiped(dir, card.id);
+                            var unique = [...new Set(cardId)]
+                            var uniqueIds = [...new Set(allIds)];
+                            if(uniqueIds.length === cardInfo.length) {
+                                route('/map');
+
+                                console.log(unique);
+                            }
+                        }}
                     >
-                    <h3>{props.character.question}</h3>
-                    </div>
-                </div>
-                </TinderCard>
-            ))}
+                        <div className='card'>
+                        <div
+                            className='card-content'
+                            style={{
+                                backgroundImage: `url(${card.imageURL})`,
+                                width: '300px',
+                                height: '400px',
+                                borderRadius: '10px',
+                                backgroundRepeat: 'no-repeat',
+                                backgroundPosition: 'center',
+                            }}
+                        >
+                                <h3>{card.question}</h3>
+                            </div>
+                        </div>
+                    </TinderCard>
+                ))}
             </div>
         </div>
     );
-  };
-  
-  export default Tinder;
+}
+
+export default Tinder;