Cards

src/App.js

@@ -3,6 +3,7 @@ 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';
 
 function App() {
 
@@ -18,7 +19,10 @@ function App() {
       content = <Second getValue={handleButtonValue}/>
       break;
     case '/tinder':
-      content = <Tinder />
+      content = <Tinder getValue={handleButtonValue}/>
+      break;
+    case '/map':
+      content = <Map/>
       break;
     default: content = <Start getValue={handleButtonValue}/>
   }

src/components/Map/Map.js

@@ -0,0 +1,9 @@
+const Map = () => {
+    return ( 
+        <div>
+            
+        </div>
+     );
+}
+ 
+export default Map;

src/components/Second/Map/Map.js

@@ -0,0 +1,9 @@
+const Map = () => {
+    return ( 
+        <div>
+            
+        </div>
+     );
+}
+ 
+export default Map;

src/components/Tinder/Tinder.css

@@ -1,6 +1,6 @@
 .tinder-container {
     margin-top: 30%;
-    height: 50vh;
+    height: 85vh;
     width: 100%;
     display: flex;
     justify-content: space-evenly;
@@ -13,13 +13,14 @@
   .card-container {
     position: relative;
     display: flex;
-    height: 80px;
-    width: 120px;
+    height: 100%;
+    width: 300px;
     flex-direction: column;
     background-color: #fff;
   }
   
   .swipe {
+    margin-top: 15%;
     position: absolute;
     width: 100%;
     max-width: 300px;
@@ -40,7 +41,8 @@
   
   
   .card {
-    width: 80px;
+    height: 400px;
+    width: 90%;
     max-width: 300px;
     max-height: 400px;
     border-radius: 10px;

src/components/Tinder/Tinder.js

@@ -25,26 +25,43 @@ const db = [
     }
   ];
 
-  const Tinder = () => {
+  const Tinder = (props) => {
+
+    const route = props.getValue;
+
     const characters = db;
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
+    const [allIds, setAllIds] = useState([]);
+    const [cardLenth, setCardLenth] = useState(false);
+
+    let uniqueTags = [];
+    let allTags = [];
 
     const swiped = (direction, id) => {
         setLastDirection(direction);
+        allIds.push(id);
         if (direction === 'right') {
             cardId.push(id);
         };
     };
 
-
-    let uniqueTags = [];
-
     const getId = () => {
+
         uniqueTags = cardId.filter(function(elem, pos) {
             return cardId.indexOf(elem) === pos;
         });
-        console.log(uniqueTags);
+
+        allTags = allIds.filter(function(elem, pos){
+            return allIds.indexOf(elem) === pos;
+        });
+
+        characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
+
+        if(cardLenth) {
+            route('/map')
+        }
+        
     }
   
     return (
@@ -58,7 +75,7 @@ const db = [
                 onSwipe={(dir) => {
                     swiped(dir, character.id);
                     getId();
-                    console.log(uniqueTags);
+                    // console.log(uniqueTags);
                 }}
                 >
                 <div className='card'>
@@ -72,11 +89,6 @@ const db = [
                 </TinderCard>
             ))}
             </div>
-            {lastDirection ? (
-            <h2 className='infoText'>You swiped {lastDirection}</h2>
-            ) : (
-            null
-            )}
         </div>
     );
   };