updating home

backend/server.js

@@ -29,8 +29,9 @@ app.use(authRoutes);
 io.on('connection', socket =>{
     console.log('user connected');
 
-    socket.on('chat message', msg =>{
+    socket.on('msg', msg =>{
         console.log(msg);
+        io.emit('msg', msg);
     })
 })
 

mobile/App.js

@@ -8,6 +8,10 @@ import RegistrationScreen from './Screens/registrationScreen'
 const Stack = createNativeStackNavigator();
 
 class App extends React.Component {
+
+  //In the render here we define the application Screen routes
+  //with navigation, then in the classes we'll use the navigate 
+  //method to move from one page to another
   render() {
     return (
       <NavigationContainer>

mobile/Screens/homeScreen.js

@@ -4,28 +4,39 @@ import {io} from "socket.io-client"; //socket.io-client
 
 class HomeScreen extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      msg : ""
+    };
+  }
+
   componentDidMount() {
-    const socket = io("http://192.168.178.92:3000", {
+    this.socket = io("http://192.168.178.92:3000", {
       transports: ['websocket'] //this line is fundamental
     });
+    this.socket.on('msg', msg =>{
+      alert(msg);
+    })
+  }
+
+  sendMessage(){
+    this.socket.emit("msg", this.state.msg);
+    this.setState({ msg: "" });
   }
 
   render() {
     return (
       <View style={styles.container}>
-        <Text>Second Page</Text>
-
-        <Button
-          title="Go to Home"
-          onPress={() =>
-            this.props.navigation.navigate('Login')
-          }
-        />
         <TextInput
-            style={{width:200, height:40, borderWidth:2} }
+            style={styles.input}
             placeholder="Send a message"
             autoCorrect={false}
-
+            value={this.state.msg}
+            onSubmitEditing={() => this.sendMessage()}
+            onChangeText={msg => {
+            this.setState({ msg });
+          }}
             />
       </View>
     );
@@ -40,6 +51,15 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
     },
+    input: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignSelf: "stretch", 
+      height:40,
+      borderWidth:1
+    }
   });
 
 export default HomeScreen;
\ No newline at end of file

mobile/Screens/loginScreen.js

@@ -11,30 +11,35 @@ class LoginScreen extends Component {
       }
 
     submitLogin() {
-    //try to post something to the server
     
-    fetch('http://192.168.178.92:3000/signin', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        username : this.state.username,
-        password : this.state.password
-      }),
-    })
-    .then(res =>{
-      if (res.status !== 200){
-        alert('Invalid username or password');
-      }
-      else{
-        alert('Succesful login')
-        this.props.navigation.navigate('Home')
-      }
-    })
-
-    this.setState({ username: "" });
-    this.setState({ password: "" });
+      //here we're going to post the username and password inserted in the
+      //login page, in particulare this is a post request to the /signin route
+      //in the server that will response with status:200 if the credentials are in the 
+      //database and with status:422 if not
+      fetch('http://192.168.178.92:3000/signin', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          username : this.state.username,
+          password : this.state.password
+        }),
+      }) //here we handle the status response of the server
+      .then(res =>{
+        if (res.status !== 200){
+          alert('Invalid username or password');
+        }
+        else{
+          alert('Succesful login')
+          this.props.navigation.navigate('Home')
+        }
+      })
+      //here we set again username and password as blank
+      //probably in the future we'll need to send the credentials to the home page 
+      //to create the user for the socket.io chat
+      this.setState({ username: "" });
+      this.setState({ password: "" });
     }
 
     render() {

mobile/Screens/registrationScreen.js

@@ -11,30 +11,31 @@ class RegistrationScreen extends Component {
       }
 
     submitRegistration() {
-    //try to post something to the server
-    
-    fetch('http://192.168.178.92:3000/signup', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        username : this.state.username,
-        password : this.state.password
-      }),
-    })
-    .then(res =>{
-      if (res.status !== 200){
-        alert('Invalid username');
-      }
-      else{
-        alert('User registered');
-        this.props.navigation.navigate('Login');
-      }
-    })
 
-    this.setState({ username: "" });
-    this.setState({ password: "" });
+        //here we post the credentials to the signup route in the server
+        //and we wait for the response
+        fetch('http://192.168.178.92:3000/signup', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            username : this.state.username,
+            password : this.state.password
+        }),
+        })
+        .then(res =>{
+        if (res.status !== 200){
+            alert('Invalid username');
+        }
+        else{
+            alert('User registered');
+            this.props.navigation.navigate('Login');
+        }
+        })
+
+        this.setState({ username: "" });
+        this.setState({ password: "" });
     }
 
     render() {