Skip to content

Commit

Permalink
feat: Added more state and callbacks to interact with server API
Browse files Browse the repository at this point in the history
  • Loading branch information
@samuelymh
samuelymh committed Jun 26, 2022
1 parent 882e058 commit 568c23f
Show file tree
Hide file tree
Showing 3 changed files with 205 additions and 74 deletions.
28 changes: 24 additions & 4 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,28 @@ class App extends Component {
imageUrl: '',
boxArray: [],
route: 'signin',
isSignedIn: false
isSignedIn: false,
user: {
id: '',
name: '',
email: '',
entries: 0,
joined: ''
}
}
}

loadUser = (data) => {
this.setState({
user : {
id: data.id,
name: data.name,
email: data.email,
entries: data.entries,
joined: data.joined
}
});
}

extractFaceLocations = (data) => {
console.log("Response:", data);
Expand Down Expand Up @@ -88,21 +107,22 @@ class App extends Component {

render() {
const { isSignedIn, imageUrl, route, boxArray } = this.state;
const { name, entries } = this.state.user;
return (
<div className="App">
<ParticlesWrapper />
<Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
{route === 'home'
? <div>
<Logo />
<Rank />
<Rank username={name} userentries={entries} />
<ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit} />
<FaceRecognition boxArray={boxArray} imageUrl={imageUrl} />
</div>
: (
route === "signin"
? <SignIn onRouteChange={this.onRouteChange} />
: <Register onRouteChange={this.onRouteChange} />
? <SignIn loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
: <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
)
}
</div>
Expand Down
134 changes: 97 additions & 37 deletions src/components/Register/Register.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,100 @@
import React from 'react';
import React, { Component } from 'react';

const Register = ({ onRouteChange }) => {
return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<div className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Register</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="name">Name</label>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="text" name="name" id="name" />
</div>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address" id="email-address" />
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password" id="password" />
</div>
</fieldset>
<div className="">
<input
// We do () => onRouteChange('home') instead of just onRouteChange('home')
// This is to avoid calling onRouteChange when rendering.
// So what we have below is an anonymous arrow function
onClick={() => onRouteChange('home')}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Register"
/>
</div>
</div>
</main>
</article>
);
}
class Register extends Component{
constructor(props){
super(props);
this.state = {
name: '',
email: '',
password: ''
}
}

onNameChange = (event) => {
this.setState({name: event.target.value});
}

onEmailChange = (event) => {
this.setState({email: event.target.value});
}

onPasswordChange = (event) => {
this.setState({password: event.target.value});
}

onSubmitSignIn = () => {
fetch('http://localhost:3001/register', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
name: this.state.name
})
})
.then(response => response.json())
.then(user => {
if(user){
this.props.loadUser(user);
this.props.onRouteChange('home');
}
});
}

render() {
return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<div className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Register</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="name">Name</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="text"
name="name"
id="name"
onChange={this.onNameChange}
/>
</div>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input
className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
// We do () => onRouteChange('home') instead of just onRouteChange('home')
// This is to avoid calling onRouteChange when rendering.
// So what we have below is an anonymous arrow function
onClick={this.onSubmitSignIn}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Register"
/>
</div>
</div>
</main>
</article>
);
}
}

export default Register;
117 changes: 84 additions & 33 deletions src/components/SignIn/SignIn.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,90 @@
import React from 'react';
import userEvent from '@testing-library/user-event';
import React, { Component } from 'react';

const SignIn = ({ onRouteChange }) => {
return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<div className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Sign In</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address" id="email-address" />
class SignIn extends Component {
constructor(props){
super(props);
this.state = {
signInEmail: '',
signInPassword: ''
}
}

onEmailChange = (event) => {
this.setState({signInEmail: event.target.value});
}

onPasswordChange = (event) => {
this.setState({signInPassword: event.target.value});
}

onSubmitSignIn = () => {
fetch('http://localhost:3001/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: this.state.signInEmail,
password: this.state.signInPassword
})
})
.then(response => response.json())
.then(user => {
if(user.id){
this.props.loadUser(user);
this.props.onRouteChange('home');
}
});
}

render(){
const { onRouteChange } = this.props;

return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<div className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Sign In</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email-address"
id="email-address"
onChange={this.onEmailChange}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input
className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
// We do () => onRouteChange('home') instead of just onRouteChange('home')
// This is to avoid calling onRouteChange when rendering.
// So what we have below is an anonymous arrow function
onClick={this.onSubmitSignIn}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password" id="password" />
<div className="lh-copy mt3">
<p onClick={() => onRouteChange('register')} href="#0" className="f6 link dim black db pointer ">Register</p>
</div>
</fieldset>
<div className="">
<input
// We do () => onRouteChange('home') instead of just onRouteChange('home')
// This is to avoid calling onRouteChange when rendering.
// So what we have below is an anonymous arrow function
onClick={() => onRouteChange('home')}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
/>
</div>
<div className="lh-copy mt3">
<p onClick={() => onRouteChange('register')} href="#0" className="f6 link dim black db pointer ">Register</p>
</div>
</div>
</main>
</article>
);
</main>
</article>
);
}
}

export default SignIn;

0 comments on commit 568c23f

Please sign in to comment.