Login.js

...
import { connect } from 'react-redux';

...

// Redux //
import { createStructuredSelector } from 'reselect';
import { makeSelectIsAuthed, makeSelectCurrentUser } from 'data/auth/selectors';
import { loginRequest } from 'data/auth/actions';

...

// Components //
...

const Title = styled(Text)`
    margin-top: 16px;
    text-transform: capitalize;
`;

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);