Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { connect } from 'react-redux';
- import { authenticateUser, graphqlAuthenticate } from '../login/action';
- import React from 'react';
- import TextField from '../../components/TextField';
- import gql from 'graphql-tag';
- import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-client-preset';
- const client = new ApolloClient({
- link: new HttpLink({ uri: 'http://localhost:3001/graphql' }),
- cache: new InMemoryCache(),
- });
- const mapDispatchToProps = dispatch => {
- return {
- onHandleLogin: async (username, userpassword) => {
- dispatch(authenticateUser(username, userpassword));
- },
- onGraphQLLogin: value => {
- dispatch(graphqlAuthenticate(value));
- },
- };
- };
- function mapStateToProps(state, ownProps) {
- return {
- loginTypesProps: state,
- };
- }
- export class LoginPage extends React.Component {
- handleChange = event => {
- this.setState({
- [event.target.name]: event.target.value,
- });
- };
- handleLogin = () => ev => {
- ev.preventDefault();
- client
- .query({
- query: gql`
- query trialQuery($username: String, $password: String) {
- login(username: $username, password: $password)
- }
- `,
- variables: {
- username: this.state.username,
- password: this.state.userpassword,
- },
- })
- .then(response => {
- alert(response.data.login);
- this.props.onGraphQLLogin(response.data.login);
- });
- this.props.onHandleLogin(this.state.username, this.state.userpassword);
- };
- componentWillReceiveProps = nextProps => {
- console.log(nextProps.loginTypesProps);
- };
- render() {
- return (
- <div>
- Login Page
- <br />
- <b>UserName :</b>
- <div>
- <TextField
- textfieldname="username"
- handleChange={this.handleChange}
- />
- </div>
- <br />
- <b>Password :</b>
- <div>
- <TextField
- textfieldname="userpassword"
- handleChange={this.handleChange}
- />
- </div>
- <br />
- <input type="button" value="Login" onClick={this.handleLogin()} />
- </div>
- );
- }
- }
- export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
Add Comment
Please, Sign In to add comment