react-icons/fa#FaSpotify JavaScript Examples

The following examples show how to use react-icons/fa#FaSpotify. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: NavSocial.js    From codeursenseine.com with MIT License 5 votes vote down vote up 
socialLinks = [
  {
    name: "Twitter",
    icon: <FaTwitter />,
    link: "http://twitter.com/codeursenseine",
  },
  {
    name: "Youtube",
    icon: <FaYoutube />,
    link: "https://www.youtube.com/channel/UCWujmG5rANxJI0nHbMFs08w/playlists",
  },
  {
    name: "Twitch",
    icon: <FaTwitch />,
    link: "https://www.twitch.tv/codeursenseine/",
  },
  {
    name: "GitHub",
    icon: <FaGithub />,
    link: "https://github.com/CodeursEnSeine/",
  },
  {
    name: "Facebook",
    icon: <FaFacebook />,
    link: "https://www.facebook.com/codeursenseine",
  },
  {
    name: "Linkedin",
    icon: <FaLinkedin />,
    link: "https://www.linkedin.com/company/codeurs-en-seine",
  },
  {
    name: "Slack",
    icon: <FaSlack />,
    link: "https://go.codeursenseine.com/slack",
  },
  {
    name: "Flux RSS",
    icon: <FaRss />,
    link: "https://www.spreaker.com/show/3365517/episodes/feed",
  },
  {
    name: "Spotify",
    icon: <FaSpotify />,
    link: "https://open.spotify.com/show/28UM8IYvMF68hMm0IqO0M3",
  },
  {
    name: "iTunes",
    icon: <FaItunesNote />,
    link:
      "https://itunes.apple.com/fr/podcast/codeurs-en-seine/id1454150414?mt=2",
  },
]
Example #2
Source File: NavButton.js    From remixr with MIT License 5 votes vote down vote up 
NavButton = (props) => {
  const [redirectPath, setRedirectPath] = useState(null);
  const accessToken = Cookies.get('access_token');
  const isLoggedIn = accessToken && accessToken !== '';

  const logout = () => {
    ReactGA.event({
      category: 'Auth',
      action: 'Log out button pressed',
      label: 'Navbar',
    });

    Cookies.remove('access_token');
    Cookies.remove('refresh_token');
    Cookies.remove('userID');

    props.setAccessToken && props.setAccessToken(null);
    props.setRefreshToken && props.setRefreshToken(null);

    window.location = '/';
  };

  const login = () => {
    ReactGA.event({
      category: 'Auth',
      action: 'Log in button pressed',
      label: 'Navbar',
    });

    const URI = process.env.REACT_APP_API_URL;
    window.location = `${URI}/login`;
  };

  if (redirectPath) {
    return <Redirect to={redirectPath} />;
  }

  return (
    <div>
      <Button
        shape="round"
        size="large"
        className={'spotifyColor'}
        style={{
          float: 'right',
          marginTop: '0.5em',
        }}
        onClick={isLoggedIn ? logout : login}
      >
        <span
          style={{
            display: 'inline-flex',
            alignItems: 'center',
          }}
        >
          <FaSpotify
            style={{
              height: '1.5em',
              width: '1.5em',
              marginRight: '5px',
            }}
          />
          {isLoggedIn ? 'Log out' : 'Log in'}
        </span>
      </Button>
    </div>
  );
}
Example #3
Source File: Home.js    From remixr with MIT License 4 votes vote down vote up 
function Home() {
  const [accessToken, setAccessToken] = useState(Cookies.get('access_token'));
  const [refreshToken, setRefreshToken] = useState(Cookies.get('refresh_token'));

  useEffect(() => {
    ReactGA.pageview('/');
  }, []);

  const refresh = async () => {
    try {
      const url = process.env.REACT_APP_API_URL + '/refresh';
      let response = await transport.get(url);
      let expiry_time = new Date(new Date().getTime() + response.data.maxAge);
      Cookies.set('access_token', response.data.access_token, { expires: expiry_time });
      setAccessToken(response.data.access_token);
      ReactGA.event({
        category: 'Auth',
        action: 'Refreshed auth token',
        label: 'Home Page',
      });
    } catch (e) {
      setAccessToken(null);
      setRefreshToken(null);
    }
  };

  if (!accessToken && refreshToken) {
    refresh();
  }

  return (
    <div className="gradient">
      <div
        style={{
          position: 'absolute',
          right: '5%',
          marginTop: '1em',
        }}
      >
        <NavButton setAccessToken={setAccessToken} setRefreshToken={setRefreshToken} />
      </div>

      <div className="home center">
        <h1 className="title"> remixr </h1>
        <Text className="subtitle"> Discover new music based on playlists you love! </Text>
        <div>
          <div
            className="searchBox"
            style={{
              align: 'center',
              margin: '0 auto',
            }}
          >
            <SearchSeeds />
          </div>
          <Button
            shape="round"
            size="large"
            className="spotifyColor"
            style={{ marginTop: '0.5em' }}
            onClick={() => {
              ReactGA.event({
                category: 'Playlist',
                action: 'Click on playlist button',
                label: 'Home page',
              });

              if (!accessToken) {
                const URI = process.env.REACT_APP_API_URL;
                window.location = `${URI}/login?redirectTo=playlists`;
              } else {
                window.location = '/playlists';
              }
            }}
          >
            <span
              style={{
                display: 'inline-flex',
                alignItems: 'center',
              }}
            >
              <FaSpotify
                style={{
                  height: '1.5em',
                  width: '1.5em',
                  marginRight: '5px',
                }}
              />
              Select from my playlists
            </span>
          </Button>
        </div>
      </div>

      <Footer />
    </div>
  );
}