Skip to content

Instantly share code, notes, and snippets.

@nparsons08 nparsons08/Login.js Secret forked from LukeSmetham/Login.js
Last active Sep 26, 2019

Embed
What would you like to do?
...
import { connect } from 'react-redux';
...
// Redux //
import { createStructuredSelector } from 'reselect';
import { makeSelectIsAuthed, makeSelectCurrentUser } from 'data/auth/selectors';
import { loginRequest } from 'data/auth/actions';
...
// Components //
import Button from 'Components/Button';
...
const Avatar = styled.div`
width: 160px;
height: 160px;
border-radius: 50%;
background-image: ${({ src }) => `url(${src})`};
background-size: cover;
margin-bottom: 16px;
`;
const CallBtn = styled(Button)`
margin-top: 32px;
`;
class Login extends Component {
get conferenceAlias() {
const { location } = this.props;
return location.state ? location.state.conferenceAlias : null;
}
get userName() {
const { user } = this.props;
return user.name.replace(/_/g, ' ');
}
startCall = () => {
const { history } = this.props;
const conferenceAlias = shortid();
history.push(`/${conferenceAlias}`);
};
handleLogin = (val) => {
const { loginRequest } = this.props;
loginRequest(val, this.conferenceAlias);
};
renderForm = () => {
return (
<Container>
<Title size={40} weight='600'>
Welcome.
</Title>
<Text size={16}>Enter a username to get started.</Text>
<LoginForm conferenceAlias={this.conferenceAlias} onSubmit={this.handleLogin} />
</Container>
);
};
renderWelcome = () => {
const { user } = this.props;
return (
<Container>
<Avatar src={user.image} />
<Title size={32} weight='600'>
Welcome back, {this.userName}.
</Title>
<CallBtn label='Start Video Call' onClick={this.startCall} />
</Container>
);
};
render() {
const { isAuthed } = this.props;
return (
<Root>
<Overlay />
<Header>
<Logo color='white' size={56} />
<Stream src={StreamLogo} />
</Header>
{isAuthed ? this.renderWelcome() : this.renderForm()}
</Root>
);
}
}
const mapStateToProps = createStructuredSelector({
isAuthed: makeSelectIsAuthed(),
user: makeSelectCurrentUser(),
});
export default connect(
mapStateToProps,
{ loginRequest },
)(Login);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.