react-icons/fi#FiLogOut TypeScript Examples

Logout: React.FC = () => {
    const { t } = useTranslation();

    type State = "idle" | "pending" | "error";
    const [state, setState] = useState<State>("idle");

    const actionProps = CONFIG.auth.logoutLink !== null
        // Just a normal link to the specified URL
        ? {
            htmlLink: true,
            linkTo: CONFIG.auth.logoutLink,
        }
        // Our own internal link
        : {
            onClick: () => {
                // We don't do anything if a request is already pending.
                if (state === "pending") {
                    return;
                }

                setState("pending");
                fetch("/~session", { method: "DELETE" })
                    .then(() => {
                        // We deliberately ignore the `status`. See `handle_logout`
                        // for more information.
                        //
                        // We hard forward to the home page to get rid of any stale state.
                        window.location.href = "/";
                    })
                    .catch(error => {
                        // TODO: this is not great. It should happen only
                        // extremely rarely, but still, just showing a triangle
                        // is not very great for the uesr.
                        // eslint-disable-next-line no-console
                        console.error("Error during logout: ", error);
                        setState("error");
                    });
            },
        };

    return (
        <MenuItem
            icon={match(state, {
                "idle": () => <FiLogOut />,
                "pending": () => <Spinner />,
                "error": () => <FiAlertTriangle />,
            })}
            borderTop
            css={{ color: "var(--danger-color)" }}
            {...actionProps}
        >{t("user.logout")}</MenuItem>
    );
}

render() {
    return (
      <nav
        className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
        id="mainNav"
      >
        <a className="navbar-brand" href="/">
          <img src={logo} alt="logo" />
          <span className={'navbar-brand-title'}>
            Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
          </span>
        </a>
        <div className="navbar-network-info d-none d-md-inline-block">
          <p>
            Connected to:&nbsp;
            <span className={'navbar-network-highlight'}>
              {window.config?.network?.name}&nbsp;
            </span>
            Block Height:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHeight}&nbsp;
            </span>
          </p>
          <p>
            Block Hash:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHash || 'null'}&nbsp;
            </span>
          </p>
        </div>
        <button
          className="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarResponsive">
          {/* Side Bar */}
          <ul className="navbar-nav navbar-sidenav" id="sideMenu">
            {SideMenuItems.map(x => x.toRoute())}
          </ul>

          {/* Side Bar Toggle */}
          <ul className="navbar-nav sidenav-toggler">
            <li className="nav-item">
              <a className="nav-link text-center" id="sidenavToggler">
                <i className="fa fa-fw fa-angle-left"></i>
              </a>
            </li>
          </ul>

          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              {this.props.auth.user && (
                <div className="username text-white">
                  <span className="welcome">Welcome</span>
                  {this.props!.auth!.user!.name}
                </div>
              )}
            </li>
            <li className="nav-item">
              {this.props.auth.user ? (
                <a
                  className="nav-link text-white"
                  onClick={_ => this.props.auth.logout()}
                >
                  <FiLogOut /> Sign Out
                </a>
              ) : (
                <a
                  className="nav-link text-center"
                  onClick={_ => this.props.auth.login()}
                >
                  <i className="fa fa-fw fa-sign-in-alt"></i>Sign In
                </a>
              )}
            </li>
            <li
              className="nav-item"
              style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
            >
              <ConnectButton auth={this.props.auth} />
            </li>
          </ul>
        </div>
      </nav>
    );
  }

render() {
    return (
      <nav
        className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
        id="mainNav"
      >
        <a className="navbar-brand" href="/">
          <img src={logo} alt="logo" />
          <span className={'navbar-brand-title'}>
            Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
          </span>
        </a>
        <div className="navbar-network-info d-none d-md-inline-block">
          <p>
            Connected to:&nbsp;
            <span className={'navbar-network-highlight'}>
              {window.config?.network?.name}&nbsp;
            </span>
            Block Height:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHeight}&nbsp;
            </span>
          </p>
          <p>
            Block Hash:&nbsp;
            <span className={'navbar-network-highlight'}>
              {this.props.networkInfoContainer.blockHash || 'null'}&nbsp;
            </span>
          </p>
        </div>
        <button
          className="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarResponsive">
          {/* Side Bar */}
          <ul className="navbar-nav navbar-sidenav" id="sideMenu">
            {SideMenuItems.map(x => x.toRoute())}
          </ul>

          {/* Side Bar Toggle */}
          <ul className="navbar-nav sidenav-toggler">
            <li className="nav-item">
              <a
                className="nav-link text-center"
                id="sidenavToggler"
                href={'/#'}
              >
                <i className="fa fa-fw fa-angle-left"></i>
              </a>
            </li>
          </ul>

          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              {this.props.auth.user && (
                <div className="username text-white">
                  <span className="welcome">Welcome</span>
                  {this.props!.auth!.user!.name}
                </div>
              )}
            </li>
            <li className="nav-item">
              {this.props.auth.user ? (
                <a
                  href={'/#'}
                  className="nav-link text-white"
                  onClick={_ => this.props.auth.logout()}
                >
                  <FiLogOut /> Sign Out
                </a>
              ) : (
                <a
                  href={'/#'}
                  className="nav-link text-center"
                  onClick={_ => this.props.auth.login()}
                >
                  <i className="fa fa-fw fa-sign-in-alt"></i>Sign In
                </a>
              )}
            </li>
            <li
              className="nav-item"
              style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
            >
              <ConnectButton auth={this.props.auth} />
            </li>
          </ul>
        </div>
      </nav>
    );
  }