From 8bbf9460f721149c28110d8b74f7fb0a3a00e0d8 Mon Sep 17 00:00:00 2001
From: ric <s1094610@studenti.univpm.it>
Date: Sat, 4 Dec 2021 17:25:48 +0100
Subject: [PATCH] updating home
---
backend/server.js | 3 +-
mobile/App.js | 4 +++
mobile/Screens/homeScreen.js | 42 +++++++++++++++++------
mobile/Screens/loginScreen.js | 51 +++++++++++++++-------------
mobile/Screens/registrationScreen.js | 47 ++++++++++++-------------
5 files changed, 89 insertions(+), 58 deletions(-)
diff --git a/backend/server.js b/backend/server.js
index a00ed90..dad652a 100644
--- a/backend/server.js
+++ b/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);
})
})
diff --git a/mobile/App.js b/mobile/App.js
index 18e801d..922835a 100644
--- a/mobile/App.js
+++ b/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>
diff --git a/mobile/Screens/homeScreen.js b/mobile/Screens/homeScreen.js
index 8038a3a..7fe59a1 100644
--- a/mobile/Screens/homeScreen.js
+++ b/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
diff --git a/mobile/Screens/loginScreen.js b/mobile/Screens/loginScreen.js
index 7515fe1..4095ae5 100644
--- a/mobile/Screens/loginScreen.js
+++ b/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() {
diff --git a/mobile/Screens/registrationScreen.js b/mobile/Screens/registrationScreen.js
index 80fdbb4..637d4fc 100644
--- a/mobile/Screens/registrationScreen.js
+++ b/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() {
--
GitLab