react-icons/fi#FiTwitter 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 Create({ allApps }) {
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);
  const [user, setUser] = useState();
  const [packApps, setPackApps] = useState([]);

  useEffect(() => {
    setPackApps(selectedApps);

    const restoreBackup = async () => {
      const checkForBackup = await localStorage.getItem("winstallLogin");

      const backup = JSON.parse(checkForBackup);

      if (!backup) return;

      setSelectedApps(backup);
      setPackApps(backup);

      await localStorage.removeItem("winstallLogin");
    };

    restoreBackup();

    getSession().then(async (session) => {
      if (!session) return;

      if (session.user) setUser(session.user);

      setSelectedApps([]);
    });
  }, []);

  const handleLogin = async () => {
    const appsBackup = JSON.stringify(selectedApps);

    await localStorage.setItem("winstallLogin", appsBackup);

    signIn("twitter");
  };

  const updatePackApps = (apps) => {
    setPackApps(apps);
  };

  if (!user) {
    return (
      <PageWrapper>
        <MetaTags title="Create a pack - winstall" />
        <FeaturePromoter art="/assets/packsPromo.svg" disableHide={true}>
          <h3>One more thing...</h3>
          <h1>Welcome! Login with Twitter to be able to create a pack.</h1>
          <button className={styles.button} onClick={handleLogin}>
            <div>
              <FiTwitter />
              Login
            </div>
          </button>
        </FeaturePromoter>
      </PageWrapper>
    );
  }

  return (
    <PageWrapper>
      <MetaTags title="Create a pack - winstall" />

      <div className={styles.content}>
        <h1>Create a pack</h1>

        {user && (
          <>
            <CreatePackForm user={user} packApps={packApps} editMode={false} />

            <br />

            <PackAppsList
              notLoggedIn={user === null}
              providedApps={packApps}
              reorderEnabled={true}
              allApps={allApps}
              onListUpdate={updatePackApps}
            />
          </>
        )}
      </div>
    </PageWrapper>
  );
}

Footer = () => {

    const { colorMode } = useColorMode()
    const borderIcon = {
        light: 'gray.400',
        dark: 'gray.500'
    }
    const footerHoverBg = {
        light: 'gray.100',
        dark: 'gray.700',
    }
    return (
        <Box bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} mt={4}>
            <Flex
                align="center"
                my={4}
                direction="column"
            >
                <div>
                    <Link href="https://twitter.com/bjmncrlsn" title="Twitter" isExternal>
                        <IconButton
                            aria-label="Twitter"
                            icon={<FiTwitter />}
                            size="lg"
                            color={borderIcon[colorMode]}
                            variant="ghost"
                            _hover={{ backgroundColor: footerHoverBg[colorMode] }}
                        />
                    </Link>
                    <Link href="https://github.com/bjcarlson42" title="GitHub" isExternal>
                        <IconButton
                            aria-label="GitHub"
                            icon={<FiGithub />}
                            size="lg"
                            color={borderIcon[colorMode]}
                            variant="ghost"
                            _hover={{ backgroundColor: footerHoverBg[colorMode] }}
                        />
                    </Link>
                    <Link
                        href="https://www.linkedin.com/in/bjcarlson42"
                        title="LinkedIn"
                        isExternal
                    >
                        <IconButton
                            aria-label="LinkedIn"
                            icon={<FiLinkedin />}
                            size="lg"
                            color={borderIcon[colorMode]}
                            variant="ghost"
                            _hover={{ backgroundColor: footerHoverBg[colorMode] }}
                        />
                    </Link>
                    <Link
                        href="https://www.youtube.com/benjamincarlson"
                        title="YouTube"
                        isExternal
                    >
                        <IconButton
                            aria-label="YouTube"
                            icon={<FiYoutube />}
                            size="lg"
                            color={borderIcon[colorMode]}
                            variant="ghost"
                            _hover={{ backgroundColor: footerHoverBg[colorMode] }}
                        />
                    </Link>
                    <Link href="mailto:[email protected]" title="Email" isExternal>
                        <IconButton
                            aria-label="Email"
                            icon={<FiMail />}
                            size="lg"
                            color={borderIcon[colorMode]}
                            variant="ghost"
                            _hover={{ backgroundColor: footerHoverBg[colorMode] }}
                        />
                    </Link>
                </div>
            </Flex>
        </Box>
    )
}