render()

in ui-react/src/components/App.tsx [104:144]

• 31 lines of code
• 6 McCabe index (conditional complexity)

  render() {

    const {authState, pets, user, error, selectedPet, message, loading}: Readonly<State> = this.state;

    let username: string;
    let groups: string[] = [];
    if(user) {
      // using first name for display
      username = user.name || user.email;
      groups = user.groups;
    }
    return (
      <Fragment>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">

          <a className="navbar-brand" href="/">Amazon Cognito + AWS Amplify + React Demo</a>

          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                  aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"/>
          </button>


          <div className="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item active">
                <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
              </li>

            </ul>
            {[...groups].map(group =>
              <span className={`badge badge-${group.endsWith("admins") ? "success" : "info"} mr-2`}
                    key={group}>{group}</span>)}
            <div className="my-2 my-lg-0 navbar-nav">


              {authState === 'loading' && (<div>loading...</div>)}
              {authState === 'signedOut' &&
              <Fragment>
              <button className="btn btn-primary m-1" onClick={() => Auth.federatedSignIn({customProvider: "IdP"})}>Single Sign On</button>
              <button className="btn btn-primary m-1" onClick={() => Auth.federatedSignIn()}>Sign In / Sign Up</button>