comunidade.js

import React from 'react';
import PropTypes from 'prop-types';
import { compose } from 'recompose';
import monthNames from '~/util/monthNames';
import 'isomorphic-fetch';

import withLayout from '~/hocs/withLayout';
import withAnalytics from '~/hocs/withAnalytics';

import { Content } from '~/styles/components';
import { Container, Actions, Ranking, Podium } from './styles';

const Comunidade = ({ ranking }) => (
  <Container>
    <Content>
      <Actions>
        <a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/invite/gCRAFhc">
          <img src="/static/images/icons/discord.svg" alt="Comunidade no Discord" />
          Acessar <span>&nbsp;comunidade</span>
        </a>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://github.com/rocketseat/comunidade"
        >
          <img src="/static/images/icons/ranking.svg" alt="Entenda o ranking" />
          Saiba mais
        </a>
      </Actions>

      <h1>Ranking do mês de {monthNames[(new Date()).getMonth()]}</h1>

      <Podium>
        {ranking[1] && (
          <div>
            <img src={ranking[1].avatar} alt={ranking[1].nickname} />
            <strong>{ranking[1].nickname}</strong>
            <img src="/static/images/trofeu-prata.svg" alt="Troféu de prata" />
          </div>
        )}
        {ranking[0] && (
          <div>
            <img src={ranking[0].avatar} alt={ranking[0].nickname} />
            <strong>{ranking[0].nickname}</strong>
            <img src="/static/images/trofeu-ouro.svg" alt="Troféu de ouro" />
          </div>
        )}
        {ranking[2] && (
          <div>
            <img src={ranking[2].avatar} alt={ranking[2].nickname} />
            <strong>{ranking[2].nickname}</strong>
            <img src="/static/images/trofeu-bronze.svg" alt="Troféu de bronze" />
          </div>
        )}
      </Podium>

      <Ranking>
        {ranking.length === 0 && (
          <strong>O ranking ainda não foi calculado...</strong>
        )}

        {ranking.map((user, index) => (
          <article key={user.id}>
            <header>
              <span>#{index + 1}</span>
              <img src={user.avatar} alt={user.nickname} />
              <div>
                <strong>{user.nickname}</strong>
                <small>LEVEL {user.level}</small>
              </div>
            </header>
            <footer>
              <strong>
                {user.experience}
                <span>XP</span>
              </strong>
            </footer>
          </article>
        ))}
      </Ranking>

      <p>
        Quer participar do ranking?{' '}
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://github.com/Rocketseat/comunidade/blob/master/gamification.md"
        >
          Entenda como funciona
        </a>
      </p>
    </Content>
  </Container>
);

Comunidade.propTypes = {
  ranking: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    avatar: PropTypes.string,
    nickname: PropTypes.string,
    level: PropTypes.number,
    experience: PropTypes.number,
  })).isRequired,
};

Comunidade.getInitialProps = async () => {
  const response = await fetch('https://game.rocketseat.com.br/');

  return { ranking: await response.json() };
};

Comunidade.pageOptions = {
  titlePrefix: 'Comunidade',
  description:
    'A comunidade da Rocketseat é um espaço aberto focado em desenvolvimento de software e todo seu ecossistema.',
};

export default compose(withAnalytics(), withLayout())(Comunidade);