Skip to content
Snippets Groups Projects
Commit 8bbf9460 authored by ric's avatar ric
Browse files

updating home

parent f0df6ba8
No related branches found
No related tags found
No related merge requests found
...@@ -29,8 +29,9 @@ app.use(authRoutes); ...@@ -29,8 +29,9 @@ app.use(authRoutes);
io.on('connection', socket =>{ io.on('connection', socket =>{
console.log('user connected'); console.log('user connected');
socket.on('chat message', msg =>{ socket.on('msg', msg =>{
console.log(msg); console.log(msg);
io.emit('msg', msg);
}) })
}) })
......
...@@ -8,6 +8,10 @@ import RegistrationScreen from './Screens/registrationScreen' ...@@ -8,6 +8,10 @@ import RegistrationScreen from './Screens/registrationScreen'
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
class App extends React.Component { 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() { render() {
return ( return (
<NavigationContainer> <NavigationContainer>
......
...@@ -4,28 +4,39 @@ import {io} from "socket.io-client"; //socket.io-client ...@@ -4,28 +4,39 @@ import {io} from "socket.io-client"; //socket.io-client
class HomeScreen extends Component { class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
msg : ""
};
}
componentDidMount() { 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 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() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text>Second Page</Text>
<Button
title="Go to Home"
onPress={() =>
this.props.navigation.navigate('Login')
}
/>
<TextInput <TextInput
style={{width:200, height:40, borderWidth:2} } style={styles.input}
placeholder="Send a message" placeholder="Send a message"
autoCorrect={false} autoCorrect={false}
value={this.state.msg}
onSubmitEditing={() => this.sendMessage()}
onChangeText={msg => {
this.setState({ msg });
}}
/> />
</View> </View>
); );
...@@ -40,6 +51,15 @@ const styles = StyleSheet.create({ ...@@ -40,6 +51,15 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
input: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
alignSelf: "stretch",
height:40,
borderWidth:1
}
}); });
export default HomeScreen; export default HomeScreen;
\ No newline at end of file
...@@ -11,30 +11,35 @@ class LoginScreen extends Component { ...@@ -11,30 +11,35 @@ class LoginScreen extends Component {
} }
submitLogin() { submitLogin() {
//try to post something to the server
fetch('http://192.168.178.92:3000/signin', { //here we're going to post the username and password inserted in the
method: 'POST', //login page, in particulare this is a post request to the /signin route
headers: { //in the server that will response with status:200 if the credentials are in the
'Content-Type': 'application/json', //database and with status:422 if not
}, fetch('http://192.168.178.92:3000/signin', {
body: JSON.stringify({ method: 'POST',
username : this.state.username, headers: {
password : this.state.password 'Content-Type': 'application/json',
}), },
}) body: JSON.stringify({
.then(res =>{ username : this.state.username,
if (res.status !== 200){ password : this.state.password
alert('Invalid username or password'); }),
} }) //here we handle the status response of the server
else{ .then(res =>{
alert('Succesful login') if (res.status !== 200){
this.props.navigation.navigate('Home') alert('Invalid username or password');
} }
}) else{
alert('Succesful login')
this.setState({ username: "" }); this.props.navigation.navigate('Home')
this.setState({ password: "" }); }
})
//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() { render() {
......
...@@ -11,30 +11,31 @@ class RegistrationScreen extends Component { ...@@ -11,30 +11,31 @@ class RegistrationScreen extends Component {
} }
submitRegistration() { 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: "" }); //here we post the credentials to the signup route in the server
this.setState({ password: "" }); //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() { render() {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment