react-icons/fi#FiLogOut JavaScript Examples

User = () => {
  const { data: session } = useSession();

  const [user, setUser] = useState();

  useEffect(() => {
    getSession().then(async (session) => {
      if (!session) return;
      const { response, error } = await fetch("/api/twitter/", {
        method: "GET",
        headers: {
          endpoint: `https://api.twitter.com/1.1/users/show.json?user_id=${session.user.id}`,
        },
      }).then((res) => res.json());

      if (!error) {
        setUser(response);
      }
    });
  }, []);

  return (
    <>
      {!session && (
        <a
          onClick={() => signIn("twitter")}
          title="Login with Twitter to create and share packs."
        >
          <FiTwitter />
          <p>Login</p>
        </a>
      )}
      {session && (
        <>
          <Link href="/users/you">
            <a title="View your packs" className={styles.user}>
              <img src={session.user.picture} alt="User profile picture" />
              <p className={styles.ddOnly}>Your packs</p>
            </a>
          </Link>
          <span onClick={signOut} title="Logout" className={styles.justIcon}>
            <FiLogOut />
            <p className={styles.ddOnly}>Logout</p>
          </span>
        </>
      )}
    </>
  );
}

function Sidebar({ drag, activeMenu, itensMenu, dispatch }) {

    function toggleMenu(menu) {
        return {
            type: 'SET_MENU_ACTIVE',
            menu
        };
    }

    return (
        <Side drag={drag}>
            <div className="logo">
                <img src={Logo} alt=""/>
            </div>
            <ul>
                {itensMenu.map(item => (
                    <li key={ item.name } className={item.name === activeMenu.name ? 'active' : ''}>
                        <Link to={ item.path } onClick={() => dispatch(toggleMenu(item)) }>
                            <span className="icon">
                                { item.icon }
                            </span>
                            <span className="item">
                                { item.name }
                            </span>
                        </Link>
                    </li>
                ))}
                <li>
                    <Link onClick={() => logout()} to={`/sis/login`}>
                        <span className="icon">
                            <FiLogOut />
                        </span>
                        <span className="item">
                            Sair
                        </span>
                    </Link>
                </li>
            </ul>
        </Side>
    );
}

function SideNav(props) {
  const { user } = props;
  const { logout } = useAuth0();
  const { container } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  // Setup Chat and Announcement Subscriptions
  const { refetch } = useQuery(GET_CHAT_ROOMS, { variables: { email: user.email } });
  const { subscribeToMore: announcementSubscription, refetch: refetchAnnouncements  } = useQuery(GET_ANNOUNCEMENTS, { variables: { isAnnouncementRoom: true } });
  const { subscribeToMore } = useQuery(GET_MESSAGES, { variables: { email: user.email } });
  const { data, refetch: refetchProfile } = useQuery(GET_USER_PROFILE, { variables: { email: user.email } });
  const { subscribeToMore: notificationSubscription } = useQuery(GET_NOTIFICATIONS, { variables: { email: user.email } });

  // Chat Subscription
  const _subscribeToNewChats = subscribeToMore => {
    subscribeToMore({
      document: CHAT_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev
        const chat = subscriptionData.data.chat
        refetch();
        refetchProfile();
        return Object.assign({}, prev, {
          profile: {
            chats: [chat, ...prev.profile.chats],
            __typename: prev.profile.__typename
          }
        })
      }
    })
  };

  // Announcement Subscription
  const _subscribeToNewAnnouncements = announcementSubscription => {
    announcementSubscription({
      document: ANNOUNCEMENT_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev
        const announcement = subscriptionData.data.announcement
        refetchAnnouncements();
        refetchProfile();
        return Object.assign({}, prev, {
          announcements: [announcement, ...prev.announcements],
          __typename: prev.__typename
        })
      }
    })
  };

  _subscribeToNewAnnouncements(announcementSubscription);

  // Notification Subscription
  const _subscribeToNewNotifications = notificationSubscription => {
    notificationSubscription({
      document: NOTIFICATION_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev
        const notification = subscriptionData.data.notification
        refetch();
        refetchAnnouncements();
        refetchProfile();
        return Object.assign({}, prev, {
          profile: {
            notifications: [notification, ...prev.profile.notifications],
            __typename: prev.profile.__typename
          }
        })
      }
    })
  };
  _subscribeToNewNotifications(notificationSubscription);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const drawer = (
    <>
      <Box className={classes.imgBox}>
        <img src={acsLogo} alt="ACS Logo" />
      </Box>
      <Box className={classes.navContainer}>
        <NavLink to="calendar" className={classes.navLink}>
          <CalendarTodayIcon className={classes.navIcon} />
          <p>Events Calendar</p>
        </NavLink>
        <NavLink to="myevents" className={classes.navLink}>
          <BookmarkIcon className={classes.navIcon} />
          <p>My Events</p>
        </NavLink>
        <NavLink to="/" className={classes.navLink}>
          <UserIcon className={classes.navIcon} />
          <p>My Profile</p>
        </NavLink>
        {data === undefined || data.profile === null || (data && (data?.profile.firstName === null || data?.profile.lastName === null)) ? 
        (
          <Tooltip title="Please complete your profile information to access Chats">
            <div className={classes.disabledNavLink}>
            {(data && data.profile !== null) && (data && data?.profile.notifications.length > 0) ? (
                <StyledBadge
                 overlap='circle'
                 badgeContent={data.profile.notifications.length}>
                  <ForumOutlinedIcon className={classes.navIcon} />
                </StyledBadge>
              ) : (
                <ForumOutlinedIcon className={classes.navIcon} />
              )}
              <p>Chats</p>
            </div>
          </Tooltip>
        ) 
        : 
        (
          <NavLink to="/chats" className={classes.navLink}>
            {data && data?.profile.notifications.length > 0 ? (
              <StyledBadge 
              overlap='circle'
              badgeContent={data.profile.notifications.length}
              >
                <ForumOutlinedIcon className={classes.navIcon} />
              </StyledBadge>
            ) : (
              <ForumOutlinedIcon className={classes.navIcon} />
            )}
            <p>Chats</p>
          </NavLink>
        )}
        {user && user[config.roleUrl].includes("Admin") ? (
          <>
            <NavLink to="manage" className={classes.navLink}>
              <HomeIcon className={classes.navIcon} />
              <p>Manage Events</p>
            </NavLink>
            <NavLink to="users" className={classes.navLink}>
              <GroupIcon className={classes.navIcon} />
              <p>Manage Users</p>
            </NavLink>
          </>
        ) : null}
      </Box>
      <Box className={classes.logoutContainer}>
        <Button className={classes.logoutBtn} onClick={() => logout()}>
          <IconContext.Provider
            value={{ style: { transform: "rotate(180deg)" } }}
          >
            <FiLogOut className={classes.logoutIcon} />
            <p className={classes.logoutP}>Log Out</p>
          </IconContext.Provider>
        </Button>
      </Box>
    </>
  );

  return (
    <div className={classes.root}>
      <Toolbar position="fixed">
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="start"
          onClick={handleDrawerToggle}
          className={classes.menuButton}
        >
          <MenuIcon className={classes.navIcon} />
        </IconButton>
      </Toolbar>
      <nav className={classes.drawer} aria-label="mailbox folders">
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
    </div>
  );
}