Match working on mobile

IgorGMoraes · Sep 17, 2019 · f28b5ef · f28b5ef
1 parent a0bd26d
commit f28b5ef
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 3 deletions.
diff --git a/Tindev/package.json b/Tindev/package.json
@@ -15,7 +15,8 @@
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.2.0",
     "react-navigation": "^4.0.0",
-    "react-navigation-stack": "^1.5.3"
+    "react-navigation-stack": "^1.5.3",
+    "socket.io-client": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

diff --git a/Tindev/src/assets/itsamatch.png b/Tindev/src/assets/itsamatch.png
diff --git a/Tindev/src/assets/[email protected] b/Tindev/src/assets/[email protected]
diff --git a/Tindev/src/assets/[email protected] b/Tindev/src/assets/[email protected]
diff --git a/Tindev/src/index.js b/Tindev/src/index.js
@@ -1,5 +1,9 @@
 import React from 'react';
+import { YellowBox } from 'react-native'
 import Routes from './routes'
+
+YellowBox.ignoreWarnings(['Unrecognized WebSocket', 'perform a React state'])
+
 export default function App () {
   return (
     <Routes/>

diff --git a/Tindev/src/pages/Main.js b/Tindev/src/pages/Main.js
@@ -1,17 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { Text, Image, SafeAreaView, StyleSheet, View } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
+import io from 'socket.io-client'
 
 import api from '../services/api';
 
 import logo from '../assets/logo.png'
 import like from '../assets/like.png'
 import dislike from '../assets/dislike.png'
+import itsamatch from '../assets/itsamatch.png'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
 export default function Main({ navigation }) {
     const id = navigation.getParam('user')
     const [users, setUsers] = useState([])
+    const [matchDev, setMatchDev] = useState(null)
 
 
     useEffect(() =>{
@@ -21,13 +24,22 @@ export default function Main({ navigation }) {
                     user: id,
                 }
             })
-
             setUsers(response.data)
         }
 
         loadUsers();
     }, [id]);
 
+    useEffect(() => {
+        const socket = io('http://192.168.1.106:5000', { 
+            query: { user: id}
+        })
+
+        socket.on('match', dev => {
+            setMatchDev(dev)
+        })
+    }, [id])
+
     async function handleLike(){
         const [user, ...rest] = users;
 
@@ -84,6 +96,16 @@ export default function Main({ navigation }) {
                     </TouchableOpacity>
                 </View>
             )}
+            { matchDev && (
+                <View style={styles.matchContainer}>
+                    <Image source={itsamatch}/>
+                    <Image style={styles.matchAvatar} source={{ uri: matchDev.avatar }}/>
+                    <Text style={styles.matchName}>{matchDev.name}</Text>
+                    <TouchableOpacity onPress={() => setMatchDev(null)} style={styles.matchImage}>
+                        <Text style={styles.matchClose}>FECHAR</Text>
+                    </TouchableOpacity>
+                </View>
+            )}
         </SafeAreaView>
     )
 }
@@ -171,6 +193,40 @@ const styles = StyleSheet.create({
             width: 0,
             height: 2,
         },
+    },
+
+    matchContainer:{
+        ... StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    },
+
+    matchImage:{
+        height: 60,
+        resizeMode: 'contain'
+    },
+
+    matchAvatar:{
+        width: 150,
+        height: 150,
+        borderRadius: 75,
+        borderWidth: 5,
+        borderColor: 'white',
+        marginVertical: 30,
+    },
+
+    matchName:{
+        fontSize: 32,
+        color: 'white',
+        fontWeight: 'bold'
+    },
+
+    matchClose:{
+        marginTop: 30,
+        fontSize: 24,
+        color: 'white',
+        fontWeight: 'bold',
     }
 
 })