serverless-client withConntext

App.js

import React, { Component } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import Routes from "./Routes";
import Typography from "@material-ui/core/Typography";
import MainDrawer from "./components/MainDrawer";
import "./App.css";
import Header from "./components/Header";
import ContextProvider from "./Packages/Context/";
import UIToggleProvider from "./Packages/Context/UIToggleContext";
import {AuthenticationContext} from "./Packages/Context";
const {AuthContext} = AuthenticationContext;
class App extends Component {
  state = {
    isAuthenticated: false,
    isAuthenticating: true,
    anchorEl: null,
    drawer: false
  };

  handleDrawerOpen = () => {
    this.setState({ drawer: true });
  };

  handleDrawerClose = () => {
    this.setState({ drawer: false });
  };

  handleChangeAnchor = event => {
    this.setState({
      anchor: event.target.value
    });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };
  render() {
    const { anchorEl, drawer } = this.state;
    const open = Boolean(anchorEl);
    return (
      <div className="App">
        <AuthContext.Provider
          registerContext={{
            UIToggleContext: UIToggleProvider,
            AuthContext: AuthProvider
          }}
          {...this.props}
        >
          <Header openCallBack={this.handleDrawerOpen} anchorOpen={open} />
          <MainDrawer open={drawer} closeCallBack={this.handleDrawerClose} />
          <div className="container">{/* <Routes />*/}</div>
        </AuthContext.Provider>
      </div>
    );
  }
}

export default withRouter(App);

AuthenticationContext.js

// under context/AuthenticationContext.js

import React, { createContext, Component } from "react";
import { Auth } from "aws-amplify";
const AuthContext = createContext({
  isAuthenticated: false,
  isAuthenticating: true,
  isLogingIn: false,
  newUser: null
});
AuthContext.name = "AuthContext";

class AuthProvider extends Component {
  state = {
    isAuthenticated: false,
    isAuthenticating: true,
    isLogingIn: false,
    newUser: null
  };

  userHasAuthenticated = authenticated => {
    this.setState(
      { isAuthenticated: authenticated },
      () => authenticated && this.props.history.push("/")
    );
  };
  async componentDidMount() {
    try {
      if (await Auth.currentCredentials()) {
        this.userHasAuthenticated(true);
      }
      if (await Auth.currentSession()) {
        this.userHasAuthenticated(true);
      }
    } catch (e) {
      if (e !== "No current user") {
        alert(e);
      }
    }

    this.setState({ isAuthenticating: false });
  }
  handleSocialCallback = userToken => {
    this.userHasAuthenticated(true);
  };

  handleLogout = async event => {
    await Auth.signOut();

    this.userHasAuthenticated(false);

    this.props.history.push("/login");
  };
  handleSignup = async (event, email, password) => {
    event.preventDefault();

    this.setState({ isLoading: true });

    try {
      const newUser = await Auth.signUp({
        username: email,
        password: password
      });
      this.setState({
        newUser
      });
    } catch (e) {
      alert(e.message);
    }

    this.setState({ isLoading: false });
  };

  handleConfirmationSubmit = async (event, confirmationCode) => {
    event.preventDefault();

    this.setState({ isLoading: true });

    try {
      await Auth.confirmSignUp(this.state.email, confirmationCode);
      await Auth.signIn(this.state.email, this.state.password);

      this.userHasAuthenticated(true);
    } catch (e) {
      alert(e.message);
      this.setState({ isLoading: false });
    }
  };
  handleLogin = async (event, email, password) => {
    event.preventDefault();

    this.setState({ isLogingIn: true });

    try {
      await Auth.signIn(email, password);
      this.userHasAuthenticated(true);
      this.props.history.push("/");
    } catch (e) {
      alert(e.message);
      this.setState({ isLogingIn: false });
    }
  };
  render() {
    return (
      <AuthContext.Provider value={{ ...this }}>
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

export { AuthContext };
export default AuthProvider;

gistfile1.txt

// under context/index.js

import React, { Component } from "react";
import * as AuthenticationContext from 'context/AuthenticationContext.js'


function withContext(WrappedComponent, context) {
  return class extends React.Component {
    render() {
      console.log(WrappedComponent, context);
      console.log(context.name);
      return (
        <context.Consumer>
          {value => {
            console.log(this, arguments, value);
            return <WrappedComponent contextProps={{ ...value }} />;
          }}
        </context.Consumer>
      );
    }
  };
}

export { AuthenticationContext };

export default withContext;

Login.js

import React, { Component } from "react";
import { Auth } from "aws-amplify";
import Grid from "@material-ui/core/Grid";
import FacebookButton from "components/FacebookButton";
import LoaderButton from "components/LoaderButton";
import TextField from "@material-ui/core/TextField";
import Divider from "@material-ui/core/Divider";
import withContext, { AuthenticationContext } from "Packages/Context/";
import "./Login.css";

console.log(registerContext);

class Login extends Component {
  state = {
    email: "",
    password: ""
  };

  validateForm() {
    return this.state.email.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  };

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

    return (
      <Grid className="Login" container>
        <form
          onSubmit={e =>
            contextProps.handleLogin(e, this.state.email, this.state.password)
          }
        >
          <TextField
            id="email"
            autoFocus
            label="Email"
            shrink="false"
            type="email"
            value={this.state.email}
            onChange={this.handleChange}
            fullWidth
          />

          <TextField
            id="password"
            label="Password"
            margin="normal"
            value={this.state.password}
            shrink="false"
            onChange={this.handleChange}
            type="password"
            fullWidth
          />

          <LoaderButton
            disabled={!this.validateForm()}
            type="submit"
            isLoading={contextProps.state.isLogingIn}
            text="Login"
            loadingText="Logging in…"
          />
        </form>
        <Divider />
        <Grid className="Login" container>
          <FacebookButton
            buttonClass="fb-button-signup"
            callback={contextProps.handleSocialCallback}
          />
        </Grid>
      </Grid>
    );
  }
}

Login = withContext(Login, AuthenticationContext.AuthContext);

export default Login;