<file_sep>import React from 'react'

import Title from '../../../components/Title'
import { Flex, Box } from '@rebass/grid'

import ilustraAtena from '../../../assets/ilustra-atena.svg'

const About = () => {
  return (
    <section className="container about">
      <Flex alignItems="center" flexWrap="wrap">
        <Box width={[1, 1 / 2]}>
          <Title large color="primary">
            Mas afinal,
            <br />o que é a <span className="red">Atena</span> ?
          </Title>
          <p className="super">
            Inspirada na deusa grega da sabedoria, a <strong>Atena</strong> é
            uma iniciativa <strong>open source</strong> de gamificação da
            Impulso, que tem como objetivos promover o engajamento e premiar os
            esforços das pessoas que pertencem à Impulso Network.
          </p>
          <br />
          <p className="super ifdesktop">
            Assim que você entra na comunidade, automaticamente se tornará um(a)
            jogador(a) e poderá pontuar por meio da execução de diversas{' '}
            <strong>atividades</strong>, alcançar <strong>Níveis</strong> e
            obter <strong>conquistas</strong> como reconhecimento pelos seus
            esforços.
          </p>
        </Box>
        <Box width={[1, 1 / 2]}>
          <img
            src={ilustraAtena}
            alt="Ilustração da Atena"
            className="ilustra"
          />
        </Box>
      </Flex>
    </section>
  )
}

export default About
<file_sep>import React, { Component } from 'react'

import InfoCards from './InfoCards'
import TeamAccordion from './TeamAccordion'
import AdminRanking from './AdminRanking'
import Chart from './Chart'
import Users from './Users'
import EditExperience from './EditExperience'
import EditAchievements from './EditAchievements'
import CreateAchievements from './CreateAchievements'

import { Container, Aside, Section, Option } from './styles'

class Admin extends Component {
  state = {
    active: 'players',
    achievementsType: null,
    options: [
      { key: 'generalReports', name: 'Relatórios Gerais' },
      { key: 'ranking', name: 'Rankings' },
      { key: 'editExperience', name: 'Experiência' },
      { key: 'achievements', name: 'Conquistas' }
    ]
  }

  handleClick = active => {
    active === 'editAchievements' || active === 'createAchievements'
      ? this.setState({ achievementsType: active })
      : active === 'achievements'
      ? this.setState({ active, achievementsType: 'editAchievements' })
      : this.setState({ active, achievementsType: null })
  }

  renderOptions = title => {
    const { active, options } = this.state
    return (
      <>
        <h3>{title}</h3>
        {options.map(option => (
          <Option
            key={option.key}
            active={active === option.key}
            onClick={() => this.handleClick(option.key)}
          >
            {option.name}
          </Option>
        ))}
      </>
    )
  }

  render() {
    const { active, achievementsType } = this.state
    return (
      <Container>
        <Aside>
          {this.renderOptions('Jogo')}
          {active === 'achievements' && (
            <>
              <Option
                marginLeft="15px"
                key="editAchievements"
                active={achievementsType === 'editAchievements'}
                onClick={() => this.handleClick('editAchievements')}
              >
                Editar
              </Option>
              <Option
                marginLeft="15px"
                key="createAchievements"
                active={achievementsType === 'createAchievements'}
                onClick={() => this.handleClick('createAchievements')}
              >
                Criar
              </Option>
            </>
          )}
          <small />
          <h3>Jogadores</h3>
          <Option
            key="players"
            active={active === 'players'}
            onClick={() => this.handleClick('players')}
          >
            Informações do jogador
          </Option>
        </Aside>
        <Section>
          {active === 'generalReports' ? (
            <>
              <h2>Relatórios Gerais</h2>
              <Chart />
              <InfoCards />
              <TeamAccordion />
            </>
          ) : active === 'editExperience' ? (
            <>
              <h2>Experiência(XP)</h2>
              <EditExperience />
            </>
          ) : active === 'ranking' ? (
            <>
              <h2>Ranking</h2>
              <AdminRanking />
            </>
          ) : active === 'players' ? (
            <>
              <h2>Informações do Jogador</h2>
              <Users />
            </>
          ) : active === 'achievements' ? null : null}

          {achievementsType === 'editAchievements' ? (
            <>
              <h2>Editar Conquistas</h2>
              <EditAchievements />
            </>
          ) : achievementsType === 'createAchievements' ? (
            <>
              <h2>Criar Conquistas</h2>
              <CreateAchievements />
            </>
          ) : null}
        </Section>
      </Container>
    )
  }
}

export default Admin
<file_sep>import styled from 'styled-components'
import theme from '../../styles/theme'

export const StyledUserCard = styled.div`
  background-color: ${theme.color.white};
  height: 413px;
  width: 325px;
  width: ${props => props.width};
  margin-right: 8px;
  padding: 0 12px 18px;
  box-shadow: 8px 8px 60px 0px rgba(0, 0, 0, 0.08);
  margin-top: ${({ first }) => (first ? null : ` 70px;`)};
  order: ${({ order }) => order};
  border-radius: 10px;
  position: relative;

  @media (max-width: 998px) {
    margin-top: 70px;

    &:first-child {
      order: 2;
    }
  }

  @media (max-width: 649px) {
    margin-right: 0;
    &:first-child {
      margin-top: 0;
    }
  }
`

export const Container = styled.div`
  background-color: #fff;
  height: 413px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  figure {
    margin-top: 0;
    background-color: #6567a9;
    padding-top: 30px;
    display: flex;
    width: 232px;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  img {
    width: 216px;
    height: 216px;
    border-radius: 50%;
    padding: 0 5px 8px 5px;
  }
`

export const Position = styled.div`
  background-color: #fff;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #6567a9;
  display: flex;
  position: absolute;
  transform: translateY(330%);
  text-align: center;

  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
`

export const Info = styled.div`
  margin-top: 30px;
  padding-bottom: 14px;
  width: 100%;
  h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    color: #595b98;
  }
`

export const Point = styled.div`
  flex: 1;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  flex-direction: column;
  text-align: center;
  border-right: ${props => (props.border ? 'solid 1px #e2e2e2' : 'none')};
  p {
    color: #666c71;
    font-size: 16px;
    font-weight: bold;
    padding: 6px;
    margin: 0;
  }
`
<file_sep>import styled from 'styled-components'
import theme from '../../styles/theme'

export const StyledScreenError = styled.section`
  main {
    padding-bottom: 100px;
    background: ${({ background }) => (background ? 'white' : 'transparent')};
  }

  ._inner {
    color: ${theme.color.gray};
    flex: 1;
    min-height: 400px;
  }

  ._inner > p {
    margin-top: 60px;
  }

  .super {
    max-width: 782px;
    margin: 0 auto;
    b {
      font-weight: 600;
    }
  }

  p.super {
    font-weight: 300;
  }

  .month {
    color: ${theme.color.secondary};
  }

  @media (max-width: 760px) {
    main {
      padding-top: 160px;
      padding-bottom: 60px;
    }

    ._inner > p {
      margin-top: 30px;
    }
  }
`

export const Header = styled.div`
  background: ${theme.color.primary};
  height: 100px;
`
export const Loading = styled.div`
  align-items: center;
  display: flex;
  height: ${({ height }) => height || 'initial'};
  justify-content: center;
  padding: ${({ paddingSize }) => paddingSize || '0'};
  width: ${({ width }) => width || '100%'};
  img {
    height: ${({ imgSize }) => imgSize || '10rem'};
  }
`

export const SmallLoadingWrapper = styled.div`
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  display: flex;
  height: ${({ height }) => height || '100%'};
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: ${({ width }) => width || '100%'};
  z-index: 10;
  img {
    height: 40%;
    margin: 0 auto;
  }
`

export const SmallErrorWrapper = styled.div`
  align-items: center;
  background: ${theme.color.white};
  border-radius: 10px;
  color: ${theme.color.primary};
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-weight: bold;
  height: ${({ height }) => height || '100%'};
  justify-content: center;
  padding: 14px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: ${({ width }) => width || '100%'};
  z-index: 1000;
  p {
    color: ${theme.color.gray};
    padding-bottom: 40px;
  }
`
<file_sep>import React from 'react'
import PropTypes from 'prop-types'
import StyledSubTitle from './SubTitle.style'

const SubTitle = props => {
  const { children } = props

  return <StyledSubTitle>{children}</StyledSubTitle>
}

SubTitle.propTypes = {
  children: PropTypes.string.isRequired
}

export default SubTitle
<file_sep>import { delay, call, put } from 'redux-saga/effects'
import api from '../../services/api'
import { Creators as RankingActions } from '../ducks/ranking'

export function* getRanking(action) {
  try {
    const { data } = yield call(api.get, `/ranking/${action.selected}?limit=20`)
    const rankingData = {
      data,
      loading: false,
      error: data.message || ''
    }

    yield put(RankingActions.getRankingResponse(rankingData))
  } catch (error) {
    yield put(
      RankingActions.getRankingResponse({
        loading: false,
        error: error.message,
        data: []
      })
    )
  }
}

export function* getRankingUsers() {
  try {
    yield delay(1000)
    // throw new Error("Servidor indisponivel");
    const data = [
      {
        name: '<NAME>',
        xp: 1234,
        position: 4,
        level: 5,
        isCoreTeam: true,
        teams: ['atari', 'flamengo', 'Chiefs'],
        avatar:
          'https://avatars.slack-edge.com/2018-08-01/409144328290_81d8f97e55540e84881c_72.png'
      },
      {
        name: '<NAME>',
        xp: 1234,
        position: 4,
        level: 5,
        isCoreTeam: true,
        teams: ['atari', 'flamengo', 'Chiefs'],
        avatar:
          'https://avatars.slack-edge.com/2018-08-01/409144328290_81d8f97e55540e84881c_72.png'
      },
      {
        name: '<NAME>',
        xp: 1234,
        position: 4,
        level: 5,
        isCoreTeam: true,
        teams: ['atari', 'flamengo', 'Chiefs'],
        avatar:
          'https://avatars.slack-edge.com/2018-08-01/409144328290_81d8f97e55540e84881c_72.png'
      },
      {
        name: '<NAME>',
        xp: 1234,
        position: 4,
        level: 5,
        isCoreTeam: true,
        teams: ['atari', 'flamengo', 'Chiefs'],
        avatar:
          'https://avatars.slack-edge.com/2018-08-01/409144328290_81d8f97e55540e84881c_72.png'
      },
      {
        name: '<NAME>',
        xp: 1234,
        position: 4,
        level: 5,
        isCoreTeam: true,
        teams: ['atari', 'flamengo', 'Chiefs'],
        avatar:
          'https://avatars.slack-edge.com/2018-08-01/409144328290_81d8f97e55540e84881c_72.png'
      }
    ]
    yield put(
      RankingActions.getRankingUsersResponse({
        data,
        loading: false,
        error: null
      })
    )
  } catch (error) {
    yield put(
      RankingActions.getRankingUsersResponse({
        data: null,
        loading: false,
        error: error.message
      })
    )
  }
}
<file_sep>import React from 'react'
import PropTypes from 'prop-types'
import { Route, Redirect } from 'react-router-dom'

import { store } from '../store'

export default function RouteWrapper({
  component: Component,
  isPrivate,
  coreTeam,
  ...rest
}) {
  const { uuid, isCoreTeam } = store.getState().auth

  if (!uuid && isPrivate) {
    return <Redirect to="/" />
  }
  if (uuid && coreTeam && !isCoreTeam) {
    return <Redirect to="/" />
  }
  return <Route {...rest} component={Component} />
}

RouteWrapper.propTypes = {
  isPrivate: PropTypes.bool,
  coreTeam: PropTypes.bool,
  component: PropTypes.any
}

RouteWrapper.defaultProps = {
  component: null,
  isPrivate: false,
  coreTeam: false
}
<file_sep>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Select from 'react-select'
import { Flex } from '@rebass/grid'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Creators as RankingActions } from '../../../store/ducks/ranking'
import { Creators as UserActions } from '../../../store/ducks/user'

import { PageLoading, PageError, SmallError } from '../../../components/utils'
import RankingRow from '../../Ranking/RankingRow'
import SearchBar from '../../../components/SearchBar'
import InfoCards from '../InfoCards'
import TeamAccordion from '../TeamAccordion'

import {
  Container,
  RankingHeader,
  UserSection,
  CardWrapper,
  Portrait,
  Card,
  ButtonWrapper,
  Button,
  Info
} from './styles'

class Users extends Component {
  static propTypes = {
    actions: PropTypes.object,
    user: PropTypes.object,
    userInfo: PropTypes.object,
    getUserInfo: PropTypes.func.isRequired,
    ranking: PropTypes.object
  }
  state = { user: null }

  getUserInfo = name => {
    if (name) {
      this.props.actions.getUserInfo(name)
      this.setState({ user: name })
    }
    this.props.actions.getUserInfo(this.state.user)
  }

  renderUsersList = users => {
    const { loading, error, data } = users
    if (error) return <PageError message={error} />
    if (!data && !loading) return
    if (!data && loading) return <PageLoading />
    return (
      <Flex justifyContent="space-around" mt={50} mb={50} flexWrap="wrap">
        <RankingHeader>
          <div className="ranking">RANKING</div>
          <div className="userInfo" />
          <div className="level">LEVEL</div>
          <div className="xp">XP</div>
        </RankingHeader>

        {data.map((card, index) => (
          <RankingRow getUserInfo={this.getUserInfo} key={index} {...card} />
        ))}
      </Flex>
    )
  }

  renderUserInfos = userInfo => {
    const { loading, error, data } = userInfo
    if (error)
      return (
        <UserSection>
          <SmallError
            refresh={() => this.getUserInfo()}
            height="100px"
            message={error}
          />
        </UserSection>
      )

    if (!data) return !loading ? null : <PageLoading />

    return (
      <UserSection>
        <CardWrapper>
          <Portrait>
            <figure>
              <img src={data.avatar} alt="" />
              <small>{`${data.monthlyPosition}º`}</small>
            </figure>
            <p>{data.name}</p>
          </Portrait>
          <Card>
            <Info width="30%">
              <h4>ranking geral</h4>
              <p>{data.generalPosition}</p>
            </Info>
            <Info>
              <h4>level</h4>
              <p>{data.level}</p>
            </Info>
            <Info>
              <h4>xp</h4>
              <p>{data.score}</p>
            </Info>
            <Info width="280px">
              <h4>times</h4>
              <Select
                isMulti
                placeholder="Selecione..."
                defaultValue={data.teams}
                options={data.availableTeams}
              />
            </Info>
          </Card>
        </CardWrapper>
        <ButtonWrapper>
          <Button>atualizar</Button>
        </ButtonWrapper>
        <InfoCards user={data.name} />
        <TeamAccordion user={data.name} />
      </UserSection>
    )
  }

  render() {
    const { users } = this.props.ranking
    const { userInfo } = this.props.user
    return (
      <Container>
        <SearchBar />
        {this.renderUsersList(users)}
        {this.renderUserInfos(userInfo)}
      </Container>
    )
  }
}

const mapStateToProps = state => ({
  ranking: state.ranking,
  user: state.user
})

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(
      Object.assign({}, RankingActions, UserActions),
      dispatch
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Users)
<file_sep><img src="https://s3-sa-east-1.amazonaws.com/assets.impulso.network/images/impulsonetwork-logo.svg" style="width: 350px">

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a837b0567bef4a1ca60fe9d9921b65f1)](https://www.codacy.com/app/impulsonetwork/atena-frontend?utm_source=github.com&utm_medium=referral&utm_content=universoimpulso/atena-frontend&utm_campaign=Badge_Grade)
[![Build Status](https://dev.azure.com/universoimpulso/Atena/_apis/build/status/universoimpulso.atena-frontend?branchName=master)](https://dev.azure.com/universoimpulso/Atena/_build/latest?definitionId=5&branchName=master)
[![Website](https://img.shields.io/website-up-down-green-red/http/shields.io.svg?label=about)](http://atena.impulso.network)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Twitter Follow](https://img.shields.io/twitter/follow/universoimpulso.svg?style=social&label=Follow)](https://twitter.com/UniversoImpulso)
[![Netlify Status](https://api.netlify.com/api/v1/badges/efabad6f-deb0-4384-9a98-b55d878bfbcb/deploy-status)](https://app.netlify.com/sites/atena/deploys)

## Front - Atena v.0.2

A Atena é uma iniciativa da Impulso Network em colaboração com vários Impulsers, com o objetivo de promover o engajamento e recompensar as atividades e esforços de cada pessoa na Impulso. Nele você poderá adquirir Pontos de Reputação através da execução de diversas atividades e com base nesses dois fatores os Impulsers receberão níveis e conquistas, reconhecendo o esforço despendido nas atividades.

## Configuração

Um passo-a-passo da configuração mínima que você precisa para obter o Atena em execução.

### Desenvolvimento

- Faça um `fork` do projeto para a tua conta, e então faça o `clone`

```sh
> git clone https://github.com/[sua-conta]/atena-frontend
```

- Navegue até a pasta de destino onde fez o clone do projeto

```sh
> cd atena-frontend/
```

- Instale o `yarn` a partir do `npm` (ser global é opcional)

```sh
> npm i yarn -g
```

- instalar os repositorios utilizando o `yarn`

```sh
> yarn -i
```

- Adicionar referências remotas

```sh
> git remote add upstream https://github.com/universoimpulso/atena-frontend
```

### Executando

- Inicie o servidor utilizando o seguinte comando:

```sh
> yarn start
```

### [Integração com o Github](GITHUB.md)

O Atena possui integração com o Github, onde o usuário ganha pontos ao criar pull requests, efetuar reviews, e ter seu pull request aprovado.

## Contribuindo

O principal objetivo deste repositório é continuar a evoluir o Atena, tornando-o mais rápido e fácil de usar.

O desenvolvimento da Atena acontece a céu aberto no GitHub, e somos gratos à comunidade por contribuir com correções de bugs e melhorias. Leia abaixo para saber como você pode participar da melhoria da Atena e da Impulso network.

## Comunidade

Todos os comentários e sugestões são bem-vindas e podem ser feitas via Issues no Github ou lá no RocketChat!

💬 Junte-se a comunidade em [Impulso Network](https://impulso.network)
<file_sep>import { delay, put } from 'redux-saga/effects'

import { Creators as ExperienceCardActions } from '../ducks/experienceCard'
import { toast } from 'react-toastify'

const data = {
  general: [
    {
      key: 'limitPerDay',
      name: 'limite de experiência diária',
      text: 'até:',
      values: [
        {
          key: 'limitPerDay',
          initialValue: 20
        }
      ]
    },
    {
      key: 'inactivityPeriod',
      name: 'período de inatividade',
      text: 'até:',
      values: [
        {
          key: 'inactivityPeriod',
          initialValue: 8
        }
      ]
    },
    {
      key: 'inactivityLost',
      name: 'XP perdido por inatividade',
      text: 'até:',
      values: [
        {
          key: 'inactivityLost',
          initialValue: 2
        }
      ]
    }
  ],

  activity: [
    {
      key: 'rocketChat',
      name: 'rocket chat',
      values: [
        {
          key: 'message',
          text: 'mensagens',
          initialValue: 2
        },
        {
          key: 'reactions',
          text: 'dar reactions',
          initialValue: 1
        },
        {
          key: 'receiveReaction',
          text: 'receber reactions',
          initialValue: 2
        }
      ]
    },
    {
      key: 'meetup',
      name: 'meetup',
      values: [
        {
          key: 'participant',
          text: 'participante',
          initialValue: 5
        },
        {
          key: 'mediator',
          text: 'mediador',
          initialValue: 3
        },
        {
          key: 'facilitator',
          text: 'facilitador',
          initialValue: 3
        }
      ]
    },
    {
      key: 'blog',
      name: 'blog',
      values: [
        { key: 'post', text: 'postagem realizada', initialValue: 3 },
        {
          key: 'comment',
          text: 'comentário realizado',
          initialValue: 2
        }
      ]
    },
    {
      key: 'github',
      name: 'open source',
      values: [
        { key: 'issue', text: 'issues', initialValue: 3 },
        {
          key: 'review',
          text: 'dar reactions',
          initialValue: 2
        },
        {
          key: 'pullRequest',
          text: 'pull request',
          initialValue: 2
        },
        {
          key: 'approvedPullRequest',
          text: 'PR aprovada',
          initialValue: 5
        }
      ]
    },
    {
      key: 'referral',
      name: 'referral',
      values: [
        {
          key: 'indication',
          text: 'impulser indicado',
          initialValue: 3
        },
        {
          key: 'allocation',
          text: 'alocado via indicação',
          initialValue: 2
        }
      ]
    },
    {
      key: 'research',
      name: 'research',
      values: [
        {
          key: 'validation',
          text: 'passar pela validação',
          initialValue: 2
        },
        {
          key: 'skill',
          text: 'skill assessments',
          initialValue: 2
        }
      ]
    },
    {
      key: 'allocation',
      name: 'alocação',
      values: [
        {
          key: 'interview',
          text: 'entrevistado',
          initialValue: 2
        },
        {
          key: 'approved',
          text: 'aprovado',
          initialValue: 3
        },
        {
          key: 'allocated',
          text: 'alocado',
          initialValue: 2
        }
      ]
    },
    {
      key: 'linkedin',
      name: 'linkedin',
      values: [
        {
          key: 'impulser',
          text: 'trabalhando na impulso',
          initialValue: 2
        }
      ]
    }
  ]
}
const data2 = {
  general: [
    {
      key: 'limitPerDay',
      name: 'limite de experiência diária',
      text: 'até:',
      values: [
        {
          key: 'limitPerDay',
          initialValue: 23
        }
      ]
    },
    {
      key: 'inactivityPeriod',
      name: 'período de inatividade',
      text: 'até:',
      values: [
        {
          key: 'inactivityPeriod',
          initialValue: 8
        }
      ]
    },
    {
      key: 'inactivityLost',
      name: 'XP perdido por inatividade',
      text: 'até:',
      values: [
        {
          key: 'inactivityLost',
          initialValue: 2
        }
      ]
    }
  ],

  activity: [
    {
      key: 'rocketChat',
      name: 'rocket chat',
      values: [
        {
          key: 'message',
          text: 'mensagens',
          initialValue: 2
        },
        {
          key: 'reactions',
          text: 'dar reactions',
          initialValue: 1
        },
        {
          key: 'receiveReaction',
          text: 'receber reactions',
          initialValue: 2
        }
      ]
    },
    {
      key: 'meetup',
      name: 'meetup',
      values: [
        {
          key: 'participant',
          text: 'participante',
          initialValue: 5
        },
        {
          key: 'mediator',
          text: 'mediador',
          initialValue: 3
        },
        {
          key: 'facilitator',
          text: 'facilitador',
          initialValue: 3
        }
      ]
    },
    {
      key: 'blog',
      name: 'blog',
      values: [
        { key: 'post', text: 'postagem realizada', initialValue: 3 },
        {
          key: 'comment',
          text: 'comentário realizado',
          initialValue: 2
        }
      ]
    },
    {
      key: 'github',
      name: 'open source',
      values: [
        { key: 'issue', text: 'issues', initialValue: 3 },
        {
          key: 'review',
          text: 'dar reactions',
          initialValue: 2
        },
        {
          key: 'pullRequest',
          text: 'pull request',
          initialValue: 2
        },
        {
          key: 'approvedPullRequest',
          text: 'PR aprovada',
          initialValue: 5
        }
      ]
    },
    {
      key: 'referral',
      name: 'referral',
      values: [
        {
          key: 'indication',
          text: 'impulser indicado',
          initialValue: 3
        },
        {
          key: 'allocation',
          text: 'alocado via indicação',
          initialValue: 2
        }
      ]
    },
    {
      key: 'research',
      name: 'research',
      values: [
        {
          key: 'validation',
          text: 'passar pela validação',
          initialValue: 2
        },
        {
          key: 'skill',
          text: 'skill assessments',
          initialValue: 2
        }
      ]
    },
    {
      key: 'allocation',
      name: 'alocação',
      values: [
        {
          key: 'interview',
          text: 'entrevistado',
          initialValue: 2
        },
        {
          key: 'approved',
          text: 'aprovado',
          initialValue: 3
        },
        {
          key: 'allocated',
          text: 'alocado',
          initialValue: 2
        }
      ]
    },
    {
      key: 'linkedin',
      name: 'linkedin',
      values: [
        {
          key: 'impulser',
          text: 'trabalhando na impulso',
          initialValue: 2
        }
      ]
    }
  ]
}
export function* getExperience() {
  try {
    yield delay(1000)

    // throw new Error("Não foi possível buscar os dados");

    yield put(ExperienceCardActions.getExperienceSuccess(data))
  } catch (error) {
    yield put(ExperienceCardActions.getExperienceFailure(error.message))
  }
}
export function* putExperience(action) {
  try {
    yield delay(1000)

    // throw new Error("Não foi possível atualizar a pontuação");

    yield put(ExperienceCardActions.putExperienceSuccess(data2))
    toast.success('Pontuação atualizada com sucesso!')
  } catch (error) {
    toast.error(error.message)
    yield put(ExperienceCardActions.putExperienceFailure())
  }
}
<file_sep>import React from 'react'
import { StyledFooter, StyledCopyright } from './style'
import impulsoIcon from '../../assets/impulso.svg'
import SocialLinks from './SocialLinks'

const Footer = () => (
  <StyledFooter>
    <section>
      <img className="impulsoIcon" src={impulsoIcon} alt="Logo da Impulso" />
      <SocialLinks />
      <hr />
      <StyledCopyright>
        2019 © Todos os direitos reservados. Impulso.
      </StyledCopyright>
    </section>
  </StyledFooter>
)

export default Footer
<file_sep>import React from 'react'
import { Flex, Box } from '@rebass/grid'

import Menu from './Menu/'
import atena from '../../assets/atena.svg'
import StyledHeader from './styles'

const Header = props => (
  <StyledHeader>
    <Flex justifyContent="space-between" alignItems="center">
      <Box flex="1">
        <a href="/">
          <img alt="Logo atena" src={atena} />
        </a>
      </Box>
      <Box>
        <Menu {...props} />
      </Box>
    </Flex>
  </StyledHeader>
)

export default Header
<file_sep>import { combineReducers } from 'redux'

import auth from './auth'
import user from './user'
import ranking from './ranking'
import generalReports from './generalReports'
import experienceCard from './experienceCard'
import achievements from './achievements'

export default combineReducers({
  auth,
  user,
  ranking,
  generalReports,
  experienceCard,
  achievements
})
<file_sep>const Theme = {
  gridSize: '1280px',
  spacing: {
    unit: 8
  },
  fontFamily: {
    primary: 'proxima-nova',
    secondary: 'essonnes-display'
  },
  fontSize: {
    default: '14px',
    medium: '20px',
    large: '36px',
    veryLarge: '48px',
    super: '100px',
    extraLarge: '48px'
  },
  color: {
    white: '#FFFFFF',
    background: '#F0F0F7',
    black: '#000000',
    gray: '#666C71',
    lightGray: '#C9C9D8',
    primary: '#595B98',
    primaryLight: '#8688D9',
    primaryHover: '#9598ED',
    primaryFocus: '#414287',
    scampi: '#6567A9',
    secondary: '#DC3C2C',
    bg: '#FDFDFD',
    green: '#279949',
    linkedin: '#1061AC',
    linkedinHover: '#007bb7'
  }
}

export default Theme
<file_sep>import React, { Component } from 'react'
import { Formik } from 'formik'
import { toast } from 'react-toastify'
import PropTypes from 'prop-types'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Creators as AchievementsActions } from '../../../store/ducks/achievements'

import { SmallLoading } from '../../../components/utils'
import { Card, StyledInput } from './styles'

class EditAchievements extends Component {
  static propTypes = {
    editAchievement: PropTypes.func.isRequired,
    data: PropTypes.array,
    achievements: PropTypes.object
  }

  putValues = values => {
    const { AchievementName, type, value } = this.props.data

    const formatedValues = []
    for (let [key, value] of Object.entries(values.tiers)) {
      formatedValues.push({ name: key, value })
    }

    values.tiers = formatedValues

    const sameValues = value.tiers.filter(
      (v, index) => v.value === values.tiers[index].value
    )

    if (sameValues.length === 5) {
      toast.warn('Nenhum valor alterado, sua requisição nao foi enviada!')
      return
    }

    const data = { AchievementName, type, values }
    this.props.editAchievement(data)
  }

  notify = type => {
    if (type === 'negativeNumber') {
      if (toast.isActive('negativeNumber')) return
      toast.error('Não é possível submeter valores negativos', {
        toastId: 'negativeNumber'
      })
    }
  }

  getValues = data => {
    const values = {}
    data.forEach(data => Object.assign(values, { [data.name]: data.value }))
    return values
  }

  validate = value => {
    const validate = value && value > 0 ? undefined : true
    if (validate) this.notify('negativeNumber')
    return validate
  }

  render() {
    const { type } = this.props.data
    const { name, tiers } = this.props.data.value
    const { editLoading } = this.props.achievements
    return (
      <Card>
        <p>{name}</p>
        <Formik
          onSubmit={tiers => this.putValues({ tiers, name })}
          initialValues={this.getValues(tiers)}
        >
          {({ handleSubmit, handleChange, errors, touched }) => (
            <form onSubmit={handleSubmit}>
              <ul>
                {tiers.map(tier => (
                  <li key={tier.name}>
                    <span>{tier.name}</span>
                    <StyledInput
                      name={tier.name}
                      validate={value => this.validate(value)}
                      type="number"
                      onChange={handleChange}
                      error={errors[tier.name] && touched[tier.name]}
                    />
                  </li>
                ))}
              </ul>

              <button type="submit">atualizar</button>
            </form>
          )}
        </Formik>
        {editLoading === type.concat(name) && <SmallLoading />}
      </Card>
    )
  }
}

const mapStateToProps = state => ({ achievements: state.achievements })

const mapDispatchToProps = dispatch =>
  bindActionCreators(AchievementsActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EditAchievements)
<file_sep>import styled from 'styled-components'

const StyledHeader = styled.header`
  left: 0;
  margin: 0 auto;
  max-width: ${props => props.theme.gridSize};
  padding: 30px 50px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;

  @media (max-width: 760px) {
    padding: 14px 20px;

    img {
      display: block;
      height: 40px;
      margin: auto;
    }
  }
`

export default StyledHeader
<file_sep>import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from 'styled-components'
import theme from '../styles/theme'
import StyledScreenGithub from './Github.style'
import hiwlpc from '../assets/hiwlpc.png'
import Card from '../components/Card'
import Title from '../components/Title'

const ScreenGithub = ({ match, location }) => {
  let type = 'retry'
  const { status } = match.params
  const { search } = location

  let url = search.replace('?url=', '') || 'https://impulso.network/'

  const getStatus = () => {
    if (status === 'success' || status === 'error') type = status
  }

  getStatus()

  const messages = {
    success: {
      title: 'Olá novamente, nobre Impulser!',
      subtitle: 'Sua dedicação foi posta a prova e você passou com honrarias!',
      text:
        "Quer entender um pouco mais? Não tem problema, dá uma olhadinha aqui neste papiro: <a href='https://github.com/universoimpulso/atena'>https://github.com/universoimpulso/atena</a>"
    },
    retry: {
      title: 'Olá, nobre Impulser!',
      subtitle: 'Ops! parece que você entrou na caverna errada.',
      text: `Que falta faz um GPS, não é? :P <br> Para tentar novamente, siga esse caminho e não vai errar: <a href='${url}'>${url}</a>`
    },
    error: {
      title: 'Olá, nobre Impulser!',
      subtitle:
        'Não conseguimos localizar seu e-mail público ou privado na API do GITHUB.',
      text:
        'Esse recurso da sua armadura de cavaleiro não está pronto para ganhar bonificações na contribuição do projeto Atena!'
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <StyledScreenGithub background={`url(${hiwlpc})`}>
        <div className="_inner">
          <Card large>
            <span className="cardIcon">
              <i className="fab fa-github" />
            </span>
            <p className="title">
              <strong>{messages[type].title}</strong>
            </p>
            <Title align="center">{messages[type].subtitle}</Title>
            <p
              className="super"
              dangerouslySetInnerHTML={{ __html: messages[type].text }}
            />
          </Card>
        </div>
        <div className="help">
          Ainda está em dúvida de como funciona? <br />
          Não tem problema, dá uma olhadinha aqui: <br />
          <a href="https://impulso.network/">https://impulso.network</a>
        </div>
      </StyledScreenGithub>
    </ThemeProvider>
  )
}

ScreenGithub.propTypes = {
  location: PropTypes.string,
  match: PropTypes.string
}
export default ScreenGithub
<file_sep>import styled from 'styled-components'

import Circle from '../../assets/circulos.png'
import Lines from '../../assets/lines.png'
import Imgbg from '../../assets/img-bg.svg'

const StyledScreenHowItWorks = styled.section`
  .layout {
    padding-top: 0;
    background-color: #fdfdfd;
    color: #666c71;
    padding-bottom: 80px;
  }

  .container {
    padding: 100px calc(15% + 1vw);
  }

  .about {
    position: relative;
    z-index: 10;

    img {
      @media (max-width: 760px) {
        transform: scale(0.8);
      }
    }

    &::before {
      content: url("${Lines}");
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: -1;
      opacity: 0.6;
      width: 90vw;
      left: 50%;
      transform: translateX(-50%);
      max-width: 1280px;
    }
    p {
      text-align: left;
    }
  }

  .xprules {
    text-align: center;
    position: relative;
    z-index: 10;

    .align-content {
      align-items: center;
      justify-content: center;

      align-title {
       text-align: center;
      }
    }

    &::before {
      content: url("${Imgbg}");
      display: block;
      position: absolute;
      z-index: -1;
      right: 0;
      right: 0;
      transform: translateX(60%);
    }

    .rules {
      margin: 70px 0 80px;
      background: white;
      height: 100px;
      font-size: 20px;
      font-weight: bold;
      border-radius: 50px;
      box-shadow: 8px 8px 60px rgba(0, 0, 0, 0.2);
      overflow: hidden;

      button {
        display: flex;
        align-items: center;
        height: 100px;
        justify-content: center;
        padding: 0 30px;
        text-decoration: none;
        color: #595b98;
        background: #fff;
        width: 100%;
        cursor: pointer;

        span::after {
          content: "";
          display: block;
          width: 0px;
          height: 3px;
          background: #c9ced2;
          border-radius: 3px;
          position: absolute;
          transform: translateY(6px);
          transition: 0.2s all ease-in;
        }

        &:hover {
          span::after {
            width: 30px;
            background: #595b98;
          }
        }

        &.selected {
          background: #595b98;
          color: white;

          span::after {
            width: 30px;
            background: #ffffff;
          }
        }
      }
    }

    .rules__inner {
      text-align: left;
      margin-bottom: 60px;
      opacity: 0;
      visibility: 0;
      display: none;

      &.selected {
        opacity: 1;
        visibility: visible;
        display: flex;
      }

      h1 {
        margin-top: 0;
      }

      p {
        text-align: left;
      }
    }
  }

  .rules__table {
    margin-bottom: 20px;

    p {
      margin: 0;
      display: flex;
      justify-content: space-between;
      line-height: 3;
      border-bottom: 1px solid #e2e2e2;
    }

    .value {
      color: #595b98;
      font-weight: bold;
    }
  }

  .roles__navigation {
    display: flex;
    margin-bottom: 40px;

    a {
      font-size: 20px;
      font-weight: bold;
      color: #c9ced2;
      text-decoration: none;

      & + a::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #dc3c2c;
        border-radius: 3px;
        margin-bottom: 3px;
        margin-left: 20px;
        margin-right: 20px;
      }

      &::after {
        content: "";
        display: block;
        width: 0px;
        height: 3px;
        background: #c9ced2;
        border-radius: 3px;
        position: absolute;
        transform: translateY(6px);
        transition: 0.2s all ease-in;
      }

      &:not(:first-child)::after {
        transform: translateX(44px) translateY(6px);
      }

      &:hover::after {
        width: 24px;
      }

      &.selected {
        color: #595b98;

        &::after {
          width: 24px;
          background: #595b98;
        }
      }
    }
  }

  .cards {
    div {
      flex: 1;
    }

    &::before {
      display: block;
      content: url("${Circle}");
      position: absolute;
      z-index: 0;
      left: 0;
      transform: translateX(-50%) translateY(-38%);
    }

    p {
      text-align: left;
    }

    button {
      margin-top: 50px;
    }

    img {
      position: absolute;
      top: 30px;
      right: 30px;
    }
  }

  .ilustra {
    float: right;
  }

  @media (max-width: 760px) {
    .container {
      padding: 60px 15px;
    }

    .about {
      padding: 0 15px;
    }

    .xprules {
      width: 100%;
      padding: 0;
      text-align: left;

      .align-content {
        padding-bottom: 30px;

        p {
          text-align: left;
        }
      }

      .rules {
        font-size: 16px;
        margin: 20px;
        width: 90%;
        button.selected span::after {
          margin-left: 5px;
        }
      }
    }

    .roles__navigation {
      margin-top: 20px;

      a {
        font-size: 16px;

        &::before {
          margin-left: 10px;
        }
      }
    }

    .cards {
      padding: 0;

      &::before {
        zoom: 0.5;
      }

      .cards-box {
        margin-bottom: 50px;
      }
    }

    .question-title {
      font-size: 18px;
    }
  }
`

export default StyledScreenHowItWorks
<file_sep>import styled from 'styled-components'
import Select from 'react-select'
import theme from '../../../styles/theme'
import { Field } from 'formik'

export const StyledForm = styled.form`
  display: flex;
  flex-direction: column;
  font-weight: bold;
  justify-content: space-between;
  h3 {
    color: ${theme.color.primary};
    font-size: 16px;
    margin: 30px 0;
    text-transform: uppercase;
  }
  p {
    color: ${theme.color.gray};
    font-size: 14px;
    margin: 25px 0 5px 0;
  }
  span {
    color: ${theme.color.secondary};
    font-size: 12px;
    font-weight: normal;
    padding-top: 4px;
  }
`
export const StyledSelect = styled(Select)`
  border: none;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  color: ${theme.color.gray};
  max-width: 25%;
`
export const StyledSmallInput = styled(Field)`
  border: ${({ error }) => (error ? '1px solid red' : '1px solid gray')};
  border-radius: 6px;
  color: ${theme.color.gray};
  font-size: 14px;
  font-weight: bold;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 4px;
  width: 100px;
`

export const DateWrapper = styled.section`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 50%;
  span {
    color: ${theme.color.gray};
    font-size: 14px;
    margin: 25px 0 5px 0;
  }
  input {
    color: ${theme.color.gray};
    border: none;
    border-radius: 6px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    height: 50px;
    padding: 0 16px;
    width: 95%;
  }
`
export const Box = styled.div`
  display: flex;
  flex-direction: column;
  width: 50%;
`

export const StyledInput = styled.input`
  border: none;
  border-radius: 6px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  color: ${theme.color.gray};
  font-weight: bold;
  height: 50px;
  padding: 0 16px;
  width: ${({ width }) => width || '50%'};
`
export const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
`

export const Card = styled.div`
  background: ${theme.color.white};
  border: ${({ cardError }) => (cardError ? '1px solid red' : 'none')};
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  color: ${theme.color.gray};
  display: flex;
  flex-direction: column;
  font-size: 12px;
  height: 182px;
  justify-content: space-between;
  margin-top: 30px;
  min-width: 48%;
  text-transform: uppercase;
  padding: 20px;
  div {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    ul {
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        flex-direction: column;
        p {
          color: ${theme.color.primaryHover};
          font-weight: bold;
          margin: 0 auto;
          padding-bottom: 15px;
        }
      }
      input {
        height: 50px;
        width: 70px;
      }
    }
  }
`

export const Title = styled.p`
  border-bottom: 1px solid ${theme.color.lightGray};
  font-size: 12px;
  height: 20px;
  padding-bottom: 20px;
`

export const Button = styled.button`
  align-self: flex-end;
  background: ${theme.color.white};
  border: 2px solid ${theme.color.primary};
  border-radius: 100px;
  color: ${theme.color.primary};
  cursor: pointer;
  font-weight: bold;
  height: 46px;
  margin: 50px 0;
  outline: none;
  text-transform: uppercase;
  transition: all 0.3s linear;
  width: 30%;
  &:hover {
    color: ${theme.color.white};
    background: ${theme.color.primary};
  }
  &:active {
    transform: scale(0.95);
  }
`
<file_sep>import styled from 'styled-components'

const StyledTab = styled.div`
  display: flex;
  min-height: 120px;

  .tab__content {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s all ease-in;
  }

  a:focus .tab__content {
    opacity: 1;
    visibility: visible;
  }
`

export default StyledTab
<file_sep>import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import StyledTab from './style'

const renderItem = ({ title, content }, index) => (
  <a key={index} href="javascript:;" className="tab__item">
    <span className="tab__title">{title}</span>
    <div className="tab__content">{content}</div>
  </a>
)

const renderItems = data => data.map((item, index) => renderItem(item, index))

const Tab = ({ data }) => (
  <StyledTab>
    <Fragment>{renderItems(data)}</Fragment>
  </StyledTab>
)

renderItem.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.element.isRequired
}

Tab.propTypes = {
  data: PropTypes.array.isRequired
}

export default Tab
<file_sep>import React from 'react'
import { Switch } from 'react-router-dom'
import Route from '../routes/Route'

import HowItWorks from '../pages/HowItWorks'
import Ranking from '../pages/Ranking'
import Admin from '../pages/admin'
import UserInfo from '../pages/UserInfo'
import Github from '../pages/Github'

import { LinkedInPopUp } from 'react-linkedin-login-oauth2'

export default function Routes() {
  return (
    <Switch>
      <Route exact path="/" component={HowItWorks} />
      <Route path="/ranking" component={Ranking} />
      <Route path="/github/:status" component={Github} />
      <Route path="/linkedin" component={LinkedInPopUp} />
      <Route path="/admin" component={Admin} isPrivate coreTeam />
      <Route path="/userInfo" component={UserInfo} isPrivate />
    </Switch>
  )
}
<file_sep>import React from 'react'
import PropTypes from 'prop-types'

import { Flex } from '@rebass/grid'
import Title from '../Title'
import {
  StyledScreenError,
  Loading,
  SmallLoadingWrapper,
  SmallErrorWrapper,
  Header
} from './styles'
import loading from '../../assets/loading.svg'

export const PageError = ({ message, background, withHeader }) => (
  <StyledScreenError background={background}>
    {withHeader && <Header />}
    <main className="layout">
      <div className="_inner">
        <Flex justifyContent="center">
          <Title align={'center'} extraLarge>
            Opa! algo deu errado...
          </Title>
        </Flex>
        <p className="super">
          Caro(a) cavaleiro(a), aconteceu um erro. Por favor tente novamente.
        </p>
        <p>{message}</p>
      </div>
    </main>
  </StyledScreenError>
)

export const SmallError = ({ refresh, height, width, message }) => (
  <SmallErrorWrapper height={height} width={width} onClick={refresh}>
    <p>Algo deu errado! clique aqui para atualizar</p>
    {message}
  </SmallErrorWrapper>
)

export const PageLoading = ({ paddingSize, imgSize, width, height }) => (
  <Loading
    width={width}
    height={height}
    paddingSize={paddingSize}
    imgSize={imgSize}
  >
    <img src={loading} alt="" />
  </Loading>
)

export const SmallLoading = ({ width, height }) => (
  <SmallLoadingWrapper width={width} height={height}>
    <img src={loading} alt="" />
  </SmallLoadingWrapper>
)

PageError.propTypes = {
  message: PropTypes.string.isRequired,
  background: PropTypes.string,
  withHeader: PropTypes.bool
}
SmallError.propTypes = {
  refresh: PropTypes.func,
  height: PropTypes.string,
  width: PropTypes.string,
  message: PropTypes.string
}
PageLoading.propTypes = {
  paddingSize: PropTypes.string,
  imgSize: PropTypes.string,
  width: PropTypes.string,
  height: PropTypes.string
}

SmallLoading.propTypes = {
  width: PropTypes.string,
  height: PropTypes.string
}
<file_sep>import styled from 'styled-components'
import Select from 'react-select'
import theme from '../../../styles/theme'

export const Container = styled.div`
  display: flex;
  height: 410px;
  margin: 60px 0 30px 0;
  width: 100%;
`

export const CardsWrapper = styled.div`
  flex: 1;
  position: relative;
  &:not(:last-child) {
    margin-right: 30px;
  }
  h4 {
    color: ${theme.color.primary};
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
`

export const Card = styled.div`
  background: ${theme.color.white};
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  justify-content: space-between;
  height: 110px;
  margin-bottom: 10px;
  padding: 15px;
  position: relative;
  text-transform: uppercase;
  width: 100%;
  p {
    display: inline-block;
    color: ${theme.color.gray};
    font-weight: bold;
  }
  h1 {
    font-size: 25px;
    color: ${theme.color.primaryHover};
    font-weight: bold;
    margin: 0;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
`

export const StyledSelect = styled(Select)`
  color: ${theme.color.primaryHover};
  font-weight: bold;
  margin-left: 5px;
  text-transform: uppercase;
  width: 40%;
`
export const Percentage = styled.span`
  color: ${props =>
    props.positive ? theme.color.green : theme.color.secondary};
  font-weight: bold;
  margin-left: 3px;
`
<file_sep>import styled from 'styled-components'

import theme from '../../styles/theme'

export const Container = styled.div`
  background: ${theme.color.background};
  display: flex;
  font-size: 16px;
  height: 100%;
  margin-top: 100px;
  padding-top: 40px;
  width: 100%;
`
export const Aside = styled.aside`
  margin: 0 30px;
  height: 600px;
  width: 320px;
  h3 {
    color: ${theme.color.gray};
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
  }

  small {
    border-bottom: solid 1px ${theme.color.lightGray};
    display: block;
    margin: 30px 0;
    width: 236px;
  }
`
export const Option = styled.p`
  cursor: pointer;
  line-height: 100%;
  margin: 30px 0;
  margin-left: ${props => props.marginLeft || 0};
  ${({ active }) =>
    active
      ? `color: ${theme.color.primary}
      font-weight: bold;`
      : `color: ${theme.color.gray}`};

  &:after {
    content: '';
    display: block;
    width: ${props => (props.active ? '30px' : 0)};
    height: 3px;
    background: ${theme.color.primary};
    border-radius: 3px;
    position: absolute;
    transform: translateY(6px);
    transition: 0.2s all ease-in;
  }

  &:hover {
    color: ${theme.color.primary};
    font-weight: bold;
    :after {
      width: 30px;
    }
  }
`

export const Section = styled.section`
  width: 100%;
  margin: 0 50px 0 20px;
  h2 {
    font-size: 36px;
    font-weight: bold;
    color: ${theme.color.primary};
    margin-bottom: 20px;
  }
`
<file_sep>import React from 'react'
import PropTypes from 'prop-types'
import StyledButton from './style'

const Button = ({ children }) => <StyledButton>{children}</StyledButton>

Button.propTypes = {
  children: PropTypes.element.isRequired
}

export default Button
<file_sep>import React from 'react'
import PropTypes from 'prop-types'
import { StyledRankingRow } from './style'
import avatarSvg from '../../../assets/avatar.svg'

const RankingRow = ({ position, name, avatar, level, score }) => {
  return (
    <StyledRankingRow>
      <div className="ranking">{position}º</div>
      <div className="userInfo">
        {avatar ? (
          <img
            src={avatar || avatarSvg}
            alt={`Foto de ${name}`}
            onError={e => {
              e.target.onerror = null
              e.target.src = avatarSvg
            }}
          />
        ) : (
          <img src={avatarSvg} alt={name} />
        )}
        <p>{name}</p>
      </div>
      <div className="level">{level}</div>
      <div className="xp">{score}</div>
    </StyledRankingRow>
  )
}

RankingRow.propTypes = {
  position: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  avatar: PropTypes.string.isRequired,
  level: PropTypes.number.isRequired,
  score: PropTypes.number.isRequired
}

export default RankingRow
<file_sep>import { decrypt } from './crypto'
import { store } from '../store'
const TOKEN_KEY = '@at:atpin'

export const isAuthenticated = async () => {
  const token = localStorage.getItem(TOKEN_KEY)
  const data = await decrypt(token)
  return token !== null && data !== null
}

export const isCoreTeam = async () => {
  const token = localStorage.getItem(TOKEN_KEY)
  const data = await decrypt(token)
  return token !== null && data !== null && data.isCoreTeam
}

export const getToken = () => store.getState().auth.token
<file_sep>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { Creators as UserActions } from '../../store/ducks/user'
import { PageError, PageLoading } from '../../components/utils'
import avatarSvg from '../../assets/avatarWhite.svg'
import {
  Container,
  Header,
  ImageWrapper,
  UserName,
  Info,
  Title,
  Icon,
  Accordion,
  AccordionBody,
  BadgeWrapper,
  Stars,
  Star,
  Badge,
  Score,
  ScoreBar,
  Achievement
} from './styles'

class UserInfo extends Component {
  static propTypes = {
    getProfile: PropTypes.func.isRequired,
    uuid: PropTypes.string.isRequired,
    profile: PropTypes.shape({
      error: PropTypes.string.isRequired,
      loading: PropTypes.bool.isRequired,
      userInfo: PropTypes.shape({
        avatar: PropTypes.string,
        name: PropTypes.string,
        monthlyPosition: PropTypes.number,
        generalPosition: PropTypes.number,
        score: PropTypes.number,
        level: PropTypes.number
      }).isRequired,
      userAchievements: PropTypes.arrayOf(
        PropTypes.shape({
          name: PropTypes.string.isRequired,
          achievements: PropTypes.arrayOf(
            PropTypes.shape({
              type: PropTypes.string.isRequired,
              name: PropTypes.string.isRequired,
              medal: PropTypes.number.isRequired,
              tier: PropTypes.number.isRequired,
              maxScore: PropTypes.number.isRequired,
              score: PropTypes.number.isRequired
            })
          ).isRequired
        })
      )
    })
  }

  state = {
    selected: null,
    colors: ['#EF7C1E', '#A3A2A2', '#F7AA22', '#9DC2D6', '#BBE2ED']
  }

  componentDidMount() {
    this.props.getProfile(this.props.uuid)
  }

  handleClick = index => {
    this.setState({ selected: index === this.state.selected ? null : index })
  }

  formatTitle = data => {
    const title = data.split(' ')
    return (
      <>
        {title[0]} <span>{title[1]}</span>
      </>
    )
  }

  renderAccordion = data => {
    const { selected } = this.state

    return data.map((data, index) => (
      <Accordion key={index}>
        <header onClick={() => this.handleClick(index)}>
          {this.formatTitle(data.name)}
          <Icon className="fas fa-sort-down" selected={selected === index} />
        </header>
        <AccordionBody selected={selected === index}>
          {data.achievements.map(achievement =>
            this.renderAchievement(achievement)
          )}
        </AccordionBody>
      </Accordion>
    ))
  }

  renderAchievement = data => {
    const { colors } = this.state
    const { type, name, medal, tier, maxScore, score } = data

    const reqStars = require.context('../../assets/stars', true, /\.svg$/)
    const starPath = reqStars.keys()
    const stars = starPath.map(path => reqStars(path))
    const reqBadges =
      type === 'network.message.sended'
        ? require.context('../../assets/badges/messageSend', true, /\.svg$/)
        : type === 'network.reaction.sended'
        ? require.context('../../assets/badges/reactionSend', true, /\.svg$/)
        : type === 'network.reaction.received'
        ? require.context('../../assets/badges/reactionGiven', true, /\.svg$/)
        : type === 'issueCreated'
        ? require.context('../../assets/badges/issueCreated', true, /\.svg$/)
        : type === 'pullRequestApproved'
        ? require.context('../../assets/badges/PRApproved', true, /\.svg$/)
        : type === 'pullRequestCreated'
        ? require.context('../../assets/badges/PRCreated', true, /\.svg$/)
        : type === 'review'
        ? require.context('../../assets/badges/review', true, /\.svg$/)
        : type === 'comments'
        ? require.context('../../assets/badges/comments', true, /\.svg$/)
        : type === 'posts'
        ? require.context('../../assets/badges/posts', true, /\.svg$/)
        : null
    const badgePath = reqBadges.keys()
    const badges = badgePath.map(path => reqBadges(path))

    return (
      <BadgeWrapper key={type}>
        <Stars>
          <Star align={100} src={tier <= 0 ? stars[5] : stars[medal]} />
          <Star align={50} src={tier <= 1 ? stars[5] : stars[medal]} />
          <Star align={0} src={tier <= 2 ? stars[5] : stars[medal]} />
          <Star align={50} src={tier <= 3 ? stars[5] : stars[medal]} />
          <Star align={100} src={tier <= 4 ? stars[5] : stars[medal]} />
        </Stars>
        <Badge>
          <img src={badges[medal]} alt="badge" />
        </Badge>
        <Score color={colors[medal]}>
          {score} / {maxScore}
        </Score>
        <ScoreBar status={(score / maxScore) * 100} color={colors[medal]} />
        <Achievement>{name.split('|')[1]}</Achievement>
      </BadgeWrapper>
    )
  }

  render() {
    const { error, loading, userInfo, userAchievements } = this.props.profile

    if (!!error)
      return <PageError message={error} background="white" withHeader />
    if (loading) return <PageLoading width="100%" height="800px" />
    const {
      avatar,
      name,
      monthlyPosition,
      generalPosition,
      score,
      level
    } = userInfo
    return (
      <Container>
        <Header>
          <ImageWrapper>
            <div>
              <img
                src={avatar || avatarSvg}
                onError={e => {
                  e.target.onerror = null
                  e.target.src = avatarSvg
                }}
                alt={`Foto de ${name}`}
              />
            </div>
            <small>
              {monthlyPosition === 'coreTeam' ? '-' : `${monthlyPosition}º`}
            </small>
          </ImageWrapper>
          <UserName>{name}</UserName>

          <Info>
            <div>
              <p>level</p>
              <span>{level}</span>
            </div>
            <div>
              <p>reputação</p>
              <span>{score}</span>
            </div>
            <div>
              <p>ranking geral</p>
              <span>
                {generalPosition === 'coreTeam' ? '-' : `${generalPosition}º`}
              </span>
            </div>
          </Info>
        </Header>
        {/* <Title>suas conquistas</Title> */}

        {/* {this.renderAccordion(userAchievements)} */}
      </Container>
    )
  }
}

const mapStateToProps = state => ({
  profile: state.user.profile,
  uuid: state.auth.uuid
})

const mapDispatchToProps = dispatch => bindActionCreators(UserActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserInfo)
<file_sep>import React from 'react'
import PropTypes from 'prop-types'

import StyledCard from './style'
import { Flex, Box } from '@rebass/grid'

const Card = props => {
  const { children, large } = props

  return (
    <StyledCard large={large}>
      <Flex justifyContent="space-between" alignItems="center">
        <Box width={1}>{children}</Box>
      </Flex>
    </StyledCard>
  )
}

Card.propTypes = {
  children: PropTypes.element.isRequired,
  large: PropTypes.bool.isRequired
}
export default Card
<file_sep>import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'

import { Creators as achievementsActions } from '../../../store/ducks/achievements'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { Container, Header, Icon, Wrapper } from './styles'
import Card from './Card'

class EditAchievements extends Component {
  static propTypes = {
    getAchievements: PropTypes.func.isRequired,
    achievements: PropTypes.object.isRequired,
    achievementsValues: PropTypes.array
  }

  state = {
    active: null
  }

  componentDidMount() {
    this.props.getAchievements()
  }

  handleClick = index => {
    this.setState({ active: index === this.state.active ? null : index })
  }

  render() {
    const { active } = this.state
    const { achievementsValues } = this.props.achievements
    return (
      <Container>
        {achievementsValues &&
          achievementsValues.map((achievement, index) => (
            <Fragment key={index}>
              <Header onClick={() => this.handleClick(index)}>
                <p>
                  {achievement.name}
                  <Icon
                    selected={active === index}
                    className="fas fa-sort-down"
                  />
                </p>
              </Header>
              <Wrapper selected={active === index}>
                {achievement.data.map((data, index) => (
                  <Fragment key={index}>
                    <h3>{data.type}</h3>
                    {data.values.map((value, index) => (
                      <Card
                        key={index}
                        data={{
                          value,
                          AchievementName: achievement.name,
                          type: data.type
                        }}
                      />
                    ))}
                  </Fragment>
                ))}
              </Wrapper>
            </Fragment>
          ))}
      </Container>
    )
  }
}

const mapStateToProps = state => ({ achievements: state.achievements })

const mapDispatchToProps = dispatch =>
  bindActionCreators(achievementsActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EditAchievements)
<file_sep>import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { Flex, Box } from '@rebass/grid'
import moment from 'moment'
import 'moment/locale/pt-br'

import { Creators as RankingActions } from '../../store/ducks/ranking'

import RankingRow from './RankingRow'
import Title from '../../components/Title'
import FullPage from '../../components/FullPage'
import Podium from '../../components/Podium'
import { PageError, PageLoading } from '../../components/utils'

import BgRanking from '../../assets/bg_ranking.png'
import {
  StyledScreenRanking,
  StyledRectangleGroup,
  StyledRectangle,
  UsersRanking,
  RankingHeader
} from './styles'

class ScreenRanking extends Component {
  static propTypes = {
    getRanking: PropTypes.func.isRequired,
    ranking: PropTypes.shape({
      loading: PropTypes.bool,
      error: PropTypes.string,
      data: PropTypes.array
    }).isRequired
  }

  state = {
    selected: 'general'
  }

  componentDidMount() {
    this.props.getRanking(this.state.selected)
  }

  toggleRanking = selected => {
    this.setState({ selected })
    this.props.getRanking(selected)
  }

  currentMouth = () => {
    moment().locale('pt-br')
    return moment().format('MMMM')
  }

  generatePosition = data => {
    data.forEach((user, index) => (user.position = index + 1))
    const podium = data.splice(0, 3)
    return { podium, users: data }
  }

  render() {
    const { selected } = this.state
    const { error, loading, data } = this.props.ranking
    const { podium, users } = this.generatePosition(data)
    if (!!error)
      return (
        <StyledScreenRanking>
          <main className="layout">
            <FullPage background={`url(${BgRanking})`} height="40" overlay>
              <Flex alignItems="baseline" justifyContent="center" flex="1">
                <Box>
                  <Title large color="white" align="center">
                    Ranking
                  </Title>
                </Box>
              </Flex>
            </FullPage>
            <div className="_inner">
              <Flex
                justifyContent="center"
                alignItems="center"
                mt={100}
                mb={100}>
                <PageError message={error} />
              </Flex>
            </div>
          </main>
        </StyledScreenRanking>
      )

    return (
      <StyledScreenRanking>
        <main className="layout">
          <FullPage background={`url(${BgRanking})`} height="40" overlay>
            <Flex alignItems="baseline" justifyContent="center" flex="1">
              <Box>
                <Title large color="white" align="center">
                  Ranking
                </Title>
              </Box>
            </Flex>
          </FullPage>
          {
            <div className="_inner">
              <p className="super">
                Confira aqui a sua colocação no ranking da Atena. Vale lembrar
                que o<b> Ranking Mensal</b> exibe o <b>saldo</b> de Reputação
                que você obteve
                <b> durante um mês</b>. Já o <b>Ranking Geral</b> exibe o saldo
                de Reputação de toda sua jornada na Impulso!
              </p>
              <Flex justifyContent="center" alignItems="center">
                <StyledRectangleGroup>
                  <StyledRectangle
                    onClick={() => this.toggleRanking('monthly')}
                    active={selected === 'monthly'}
                    left>
                    <p>Ranking Mensal</p>
                  </StyledRectangle>
                  <StyledRectangle
                    onClick={() => this.toggleRanking('general')}
                    active={selected === 'general'}
                    right>
                    <p>Ranking Geral</p>
                  </StyledRectangle>
                </StyledRectangleGroup>
              </Flex>
              {loading || !users ? (
                <PageLoading />
              ) : (
                <>
                  <Flex justifyContent="center">
                    <Title align={'center'} extraLarge>
                      RANKING
                      {selected === 'general' ? (
                        <>
                          <br />
                          <span className="month"> GERAL</span>
                        </>
                      ) : (
                        <>
                          <br />
                          DO MÊS DE
                          <span className="month"> {this.currentMouth()}</span>
                        </>
                      )}
                    </Title>
                  </Flex>
                  {<Podium firstUsers={podium} />}
                  <UsersRanking>
                    <RankingHeader>
                      <div className="ranking">RANKING</div>
                      <div className="userInfo" />
                      <div className="level">LEVEL</div>
                      <div className="xp">REPUTAÇÃO</div>
                    </RankingHeader>
                    {users.map((card, index) => (
                      <RankingRow key={index} {...card} />
                    ))}
                  </UsersRanking>
                </>
              )}
            </div>
          }
        </main>
      </StyledScreenRanking>
    )
  }
}
const mapStateToProps = state => ({
  ranking: state.ranking.ranking
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(RankingActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScreenRanking)
<file_sep>import React from 'react'

import badge from '../../../assets/badge.svg'
import stars from '../../../assets/stars.svg'

import Card from '../../../components/Card'
import { Flex, Box } from '@rebass/grid'
import Title from '../../../components/Title'
import Button from '../../../components/Button'

const QuestionCards = () => {
  return (
    <section className="container cards">
      <Flex css={{ margin: '0 -25px' }} flexWrap="wrap">
        <Box width={[1, 1 / 2]} px={25} className="cards-box">
          <Card>
            <img alt="estrelas" src={stars} />
            <Title className="question-title">
              O QUE SÃO E<br /> COMO GANHAR <br />
              <span className="red">NÍVEIS</span>?
            </Title>
            <p className="super">
              Os <strong>Níveis</strong> são representações simplificadas do seu
              avanço na Atena e são atingidos mediante uma determinada
              quantidade de <strong>reputação</strong> ganha. Além disso, eles
              conferem o acesso à novas missões, cargos e recompensas.
            </p>
            <Button>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.notion.so/impulso/N-veis-Como-ganhar-6d67592b078f49b3879ce4db91081be4">
                mais detalhes
              </a>
            </Button>
          </Card>
        </Box>
        <Box
          width={[1, 1 / 2]}
          px={25}
          css={{
            display: 'flex',
            flexDirection: 'column'
          }}>
          <Card>
            <img alt="badge" src={badge} />
            <Title className="question-title">
              O QUE SÃO E <br /> COMO GANHAR <br />{' '}
              <span className="red">CONQUISTAS</span>?
            </Title>
            <p className="super">
              <strong>Conquistas</strong> são formas de reconhecer o seu
              esforço. Após realizar algo que mereça esse reconhecimento, você
              será condecorado(a) com uma <strong>medalha</strong> que
              representa este marco.
            </p>
            <Button>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.notion.so/impulso/Conquistas-Como-ganhar-f8cded2569e7411ebabb78c8e99a2f94">
                mais detalhes
              </a>
            </Button>
          </Card>
        </Box>
      </Flex>
    </section>
  )
}

export default QuestionCards
<file_sep>import { persistStore } from 'redux-persist'
import { createStore, compose, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import persistReducers from './persistReducers'
import reducers from './ducks'
import sagas from './sagas'

const sagaMonitor =
  process.env.NODE_ENV === 'development'
    ? console.tron.createSagaMonitor()
    : null
const sagaMiddleware = createSagaMiddleware({ sagaMonitor })

const getError = store => next => action => {
  if (action.data) {
    if (action.data.errorType && action.data.errorType === 'sessionExpired') {
      store.dispatch({ type: 'FORCE_SIGN_OUT' })
    }
  }
  next(action)
}

const middlewares = [sagaMiddleware, getError]

const composer =
  process.env.NODE_ENV === 'development'
    ? compose(
        applyMiddleware(...middlewares),
        console.tron.createEnhancer()
      )
    : applyMiddleware(...middlewares)

const store = createStore(persistReducers(reducers), composer)

const persistor = persistStore(store)

sagaMiddleware.run(sagas)

export { store, persistor }
<file_sep>import { createActions, createReducer } from 'reduxsauce'

const INITIAL_STATE = {
  activeModal: false,
  loading: false,
  token: '',
  avatar: '',
  uuid: '',
  isCoreTeam: false
}

export const { Types, Creators } = createActions({
  toggleModal: ['data'],
  signInRequest: ['data'],
  signInSuccess: ['data'],
  signInFailure: ['data'],
  forceSignOut: ['data'],
  signOut: ['data']
})

const toggleModal = (state = INITIAL_STATE) => ({
  ...state,
  activeModal: !state.activeModal
})

const signInRequest = (state = INITIAL_STATE) => ({
  ...state,
  loading: true
})

const signInSuccess = (state = INITIAL_STATE, action) => {
  const { token, uuid, isCoreTeam, avatar } = action.data
  return {
    ...state,
    activeModal: false,
    loading: false,
    token,
    uuid,
    avatar,
    isCoreTeam
  }
}

const signInFailure = (state = INITIAL_STATE) => ({
  ...state,
  loading: false,
  activeModal: false
})

const signOut = (state = INITIAL_STATE) => {
  return {
    ...state,
    token: '',
    uuid: '',
    avatar: '',
    isCoreTeam: false
  }
}
const forceSignOut = (state = INITIAL_STATE) => {
  return {
    ...state
  }
}

export default createReducer(INITIAL_STATE, {
  [Types.TOGGLE_MODAL]: toggleModal,
  [Types.SIGN_IN_REQUEST]: signInRequest,
  [Types.SIGN_IN_SUCCESS]: signInSuccess,
  [Types.SIGN_IN_FAILURE]: signInFailure,
  [Types.FORCE_SIGN_OUT]: forceSignOut,
  [Types.SIGN_OUT]: signOut
})
<file_sep>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Formik } from 'formik'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

import { Creators as achievementsActions } from '../../../store/ducks/achievements'

import {
  StyledForm,
  StyledSelect,
  StyledInput,
  StyledSmallInput,
  DateWrapper,
  Box,
  Wrapper,
  Card,
  Title,
  Button
} from './styles'

class CreateAchievements extends Component {
  static propTypes = {
    getAchievements: PropTypes.func.isRequired,
    achievements: PropTypes.object.isRequired,
    achievementsValues: PropTypes.array
  }

  state = {
    startDate: null,
    endDate: null,
    limitDate: null,
    achievementTypeOptions: [
      { value: 'permanent', label: 'Permanente', isDisabled: true },
      { value: 'temporary', label: 'Temporária' }
    ],
    category: [
      { value: 'rocketchat', label: 'RocketChat' },
      { value: 'github', label: 'Github' }
    ],
    activity: [
      { value: 'Mensagens Enviadas', label: 'Mensagens Enviadas' },
      { value: 'Reactions Dados', label: 'Reactions Dados' },
      { value: 'Reactions Recebidos', label: 'Reactions Recebidos' }
    ],
    achievement: [
      {
        name: 'bronze',
        tiers: [
          { name: 'I', value: 1500 },
          { name: 'II', value: 1600 },
          { name: 'III', value: 1700 },
          { name: 'IV', value: 1800 },
          { name: 'V', value: 2000 }
        ]
      },
      {
        name: 'silver',
        tiers: [
          { name: 'I', value: 1500 },
          { name: 'II', value: 1600 },
          { name: 'III', value: 1700 },
          { name: 'IV', value: 1800 },
          { name: 'V', value: 2000 }
        ]
      },
      {
        name: 'gold',
        tiers: [
          { name: 'I', value: 1500 },
          { name: 'II', value: 1600 },
          { name: 'III', value: 1700 },
          { name: 'IV', value: 1800 },
          { name: 'V', value: 2000 }
        ]
      },
      {
        name: 'platinum',
        tiers: [
          { name: 'I', value: 1500 },
          { name: 'II', value: 1600 },
          { name: 'III', value: 1700 },
          { name: 'IV', value: 1800 },
          { name: 'V', value: 2000 }
        ]
      },
      {
        name: 'diamond',
        tiers: [
          { name: 'I', value: 1500 },
          { name: 'II', value: 1600 },
          { name: 'III', value: 1700 },
          { name: 'IV', value: 1800 },
          { name: 'V', value: 2000 }
        ]
      }
    ]
  }

  componentDidMount() {
    this.props.getAchievements()
  }
  handleCategoryChange = event => {}
  handleActivityChange = event => {}

  handleChangeStart = date => {
    this.setState({
      startDate: date
    })
  }

  handleChangeEnd = date => {
    this.setState({
      endDate: date
    })
  }

  handleChangeLimit = date => {
    this.setState({
      limitDate: date
    })
  }
  getValues = () => {
    const { achievement } = this.state
    let tiers = {}
    achievement.forEach(value =>
      value.tiers.forEach(tier => {
        Object.assign(tiers, { [`${value.name}-${tier.name}`]: tier.value })
      })
    )
    return tiers
  }

  validateTier = value => (!value || value <= 0 ? true : null)

  handleSubmit = (values, actions) => {
    actions.setSubmitting(false)
  }

  render() {
    const { achievement } = this.state
    return (
      <Formik
        onSubmit={(values, actions) => this.handleSubmit(values, actions)}
        initialValues={this.getValues()}
      >
        {({ handleSubmit, handleChange, setFieldValue, errors, touched }) => (
          <StyledForm onSubmit={handleSubmit}>
            <h3>Criar nova conquista</h3>
            <p>Tipo de conquista</p>

            <StyledSelect
              placeholder="Selecione..."
              name="achievementType"
              options={this.state.achievementTypeOptions}
              onChange={value => setFieldValue('achievementType', value.value)}
            />

            <p>Categoria</p>
            <StyledSelect
              placeholder="Selecione..."
              name="category"
              options={this.state.category}
              onChange={value => setFieldValue('category', value.value)}
            />

            <p>Atividade</p>
            <StyledSelect
              placeholder="Selecione..."
              name="activity"
              options={this.state.activity}
              onChange={value => setFieldValue('activity', value.value)}
            />

            <p>Nome da conquista</p>
            <StyledInput
              placeholder="Nome"
              name="achievementName"
              type="text"
              onChange={handleChange}
            />

            <DateWrapper>
              <Box>
                <p>Inicío</p>
                <DatePicker
                  selectsStart
                  placeholderText="Inicio"
                  name="initialDate"
                  minDate={new Date()}
                  dateFormat="dd/MM/yyyy"
                  selected={this.state.startDate}
                  startDate={this.state.startDate}
                  endDate={this.state.endDate}
                  onChange={data => {
                    this.handleChangeStart(data)
                    setFieldValue('initialDate', data)
                  }}
                />
              </Box>
              <Box>
                <p>Término</p>
                <DatePicker
                  selectsEnd
                  placeholderText="Término"
                  name="finalDate"
                  disabled={this.state.startDate === null}
                  minDate={new Date()}
                  input
                  dateFormat="dd/MM/yyyy"
                  selected={this.state.endDate}
                  startDate={this.state.startDate}
                  endDate={this.state.endDate}
                  onChange={data => {
                    this.handleChangeEnd(data)
                    setFieldValue('finalDate', data)
                  }}
                />
              </Box>
              <Box>
                <p>Data limite</p>
                <DatePicker
                  name="limitDate"
                  placeholderText="Limite"
                  minDate={new Date()}
                  disabled={this.state.endDate === null}
                  maxDate={this.state.endDate}
                  dateFormat="dd/MM/yyyy"
                  selected={this.state.limitDate}
                  onChange={data => {
                    this.handleChangeLimit(data)
                    setFieldValue('limitDate', data)
                  }}
                />
              </Box>
            </DateWrapper>

            <p>Quantidade de ações</p>
            <Wrapper>
              {achievement.map(value => (
                <Card key={value.name}>
                  <Title>{value.name}</Title>
                  <div>
                    <ul>
                      {value.tiers.map((tier, index) => {
                        const tierName = `${value.name}-${tier.name}`
                        return (
                          <li key={index}>
                            <p>{tier.name}</p>
                            <StyledSmallInput
                              validate={value => this.validateTier(value)}
                              name={tierName}
                              onChange={handleChange}
                              type="number"
                              error={errors[tierName] && touched[tierName]}
                            />
                          </li>
                        )
                      })}
                    </ul>
                  </div>
                </Card>
              ))}
            </Wrapper>
            <Button type="submit">concluir</Button>
          </StyledForm>
        )}
      </Formik>
    )
  }
}

const mapStateToProps = state => ({ achievements: state.achievements })

const mapDispatchToProps = dispatch =>
  bindActionCreators(achievementsActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CreateAchievements)
<file_sep>import styled from 'styled-components'
import theme from '../../styles/theme'

export const StyledFooter = styled.footer`
  background-color: ${theme.color.primary};
  color: ${theme.color.white};
  padding: 50px 0 40px;

  > section {
    max-width: 380px;
    margin: 0 auto;
    hr {
      width: 85%;
      margin: 40px auto;
    }
  }

  .impulsoIcon {
    display: flex;
    margin: 0 auto 40px;
  }
`

export const StyledCopyright = styled.p`
  text-align: center;
  color: ${theme.color.primaryLight};
  margin: 0;
`
<file_sep>import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Creators as RankingActions } from '../../store/ducks/ranking'

import { Container, SearchBar } from './styles'

class SearchUserBar extends Component {
  static propTypes = {
    getRankingUsers: PropTypes.func.isRequired,
    ranking: PropTypes.object
  }

  state = {
    inputValue: '',
    options: [
      { value: 'level', label: 'Nível' },
      { value: 'position', label: 'Posição' }
    ]
  }

  handleChange = event => this.setState({ inputValue: event.target.value })

  handleSubmit = event => {
    if (event.key === 'Enter') {
      this.props.getRankingUsers(this.state.inputValue)
      this.setState({ inputValue: '' })
    }
  }
  render() {
    return (
      <Container>
        <SearchBar
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
          onKeyPress={this.handleSubmit}
          placeholder=" Busca por jogador"
        />
      </Container>
    )
  }
}

const mapStateToProps = state => ({
  ranking: state.ranking
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(RankingActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchUserBar)
<file_sep>import styled from 'styled-components'
import theme from '../../../styles/theme'

export const Container = styled.section`
  width: 100%;
  h4 {
    color: ${theme.color.primary};
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
`

export const Wrapper = styled.div`
  display: flex;
  flex: 1;
  height: 85%;
`

export const Info = styled.div`
  color: ${theme.color.gray};
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: bold;
  height: 100%;
  margin-left: 50px;
  text-transform: uppercase;
`

export const Card = styled.div`
  background: ${theme.color.white};
  border-radius: 10px;
  height: ${props => props.height};
  margin-bottom: 10px;
  padding: 20px;
  width: ${props => props.width};
  h5 {
    color: ${theme.color.gray};
    font-size: 14px;
    margin-bottom: 20px;
  }
`

export const Level = styled.ul`
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: calc(100% - 40px);
  padding-left: 25px;
  width: 100%;
  li {
    display: flex;
    padding-bottom: 24px;
    width: 45%;
    span {
      border-bottom: 2px dotted ${theme.color.gray};
      flex: 1;
      margin: 0 6px;
      width: 25%;
    }
    div {
      border-radius: 100%;
      display: inline-block;
      height: 1em;
      margin: auto 4px;
      width: 1em;
    }
  }
`

export const Total = styled.div`
  align-items: baseline;
  background: ${theme.color.background};
  border-radius: 5px;
  color: ${theme.color.primaryHover};
  display: flex;
  font-size: 12px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  padding: 0 20px;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;

  span {
    border-bottom: 2px dotted ${theme.color.primaryHover};
    flex: 1;
    margin: 0 6px;
  }
`
<file_sep>import { createActions, createReducer } from 'reduxsauce'

const INITIAL_STATE = {
  loading: null,
  cardLoading: null,
  experienceValues: {},
  getError: null
}
export const { Types, Creators } = createActions({
  getExperience: ['data'],
  getExperienceSuccess: ['data'],
  getExperienceFailure: ['data'],
  putExperience: ['data'],
  putExperienceSuccess: ['data'],
  putExperienceFailure: ['data']
})

const getExperience = (state = INITIAL_STATE, action) => ({
  ...state,
  getError: '',
  loading: true
})
const getExperienceSuccess = (state = INITIAL_STATE, action) => ({
  ...state,
  loading: false,
  experienceValues: action.data
})
const getExperienceFailure = (state = INITIAL_STATE, action) => ({
  ...state,
  loading: false,
  getError: action.error
})
const putExperience = (state = INITIAL_STATE, action) => {
  const { key } = action.data
  return {
    ...state,
    cardLoading: key
  }
}
const putExperienceSuccess = (state = INITIAL_STATE, action) => ({
  ...state,
  cardLoading: null,
  experienceValues: action.data
})
const putExperienceFailure = (state = INITIAL_STATE, action) => ({
  ...state,
  cardLoading: null
})

export default createReducer(INITIAL_STATE, {
  [Types.GET_EXPERIENCE]: getExperience,
  [Types.GET_EXPERIENCE_SUCCESS]: getExperienceSuccess,
  [Types.GET_EXPERIENCE_FAILURE]: getExperienceFailure,
  [Types.PUT_EXPERIENCE]: putExperience,
  [Types.PUT_EXPERIENCE_SUCCESS]: putExperienceSuccess,
  [Types.PUT_EXPERIENCE_FAILURE]: putExperienceFailure
})
<file_sep>import React, { Component } from 'react'
import { AccordionWrapper, Awnser, Icon } from './style'

class Accordion extends Component {
  state = {
    active: null,
    questions: [
      {
        content: 'Como me comunico com a Atena?',
        awnser:
          'Para centralizar as informações a respeito da sua Reputação, Níveis e Conquistas criamos a bot ATENA. Através de comandos é possível pedir à Atena para exibir sua reputação (!meuspontos), Ranking Mensal (!ranking), Ranking Geral (!rankinggeral) e Conquistas (!minhasconquistas).'
      },
      {
        content: 'Existirão atualizações?',
        awnser:
          'Sim! A Impulso Network é muito dinâmica e não para de crescer. O surgimento de novos canais, atividades e práticas corriqueiras e positivas na comunidade serão mapeadas para que novas features sejam criadas.'
      },
      {
        content: 'Existe alguma premiação?',
        awnser:
          'Claro! Além da Reputação obtida através da sua participação na comunidade (representada por Reputação e Níveis), Atena poderá te premiar com acesso a atividades especiais da comunidade, cupons de desconto para serviços, além de produtos e brindes exclusivos.'
      },
      {
        content: 'Qual a diferença entre ranking mensal e geral?',
        awnser:
          'Enquanto o Ranking Geral valoriza o esforço durante todo o seu percurso com a Atena e mostra o acumulado de Reputação e seu Nível, o Ranking Mensal foca no que foi realizado e recompensa o primeiro colocado naquele mês.'
      },
      {
        content: 'Como faço para participar do projeto?',
        awnser: [
          `Qualquer pessoa pode ajudar Atena a crescer, basta entrar no canal <strong>#projeto-atena</strong> no nosso Rocket.chat ou acessar diretamente o nosso repositório no
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://github.com/universoimpulso/atena"
          >
            Github
          </a> .
          Ainda não faz parte da Impulso Network? Basta acessar o
                    <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://app.impulso.network/"
          >
            Rocket.chat
          </a>
           e fazer o seu cadastro, é rapidinho.`
        ]
      }
    ]
  }

  handleClick = index => {
    this.setState({ active: index === this.state.active ? null : index })
  }

  render() {
    const { active, questions } = this.state
    return (
      <AccordionWrapper>
        {questions.map((question, index) => (
          <section key={index} onClick={() => this.handleClick(index)}>
            <span className="accordion__link">
              {question.content}
              <Icon selected={active === index} className="fas fa-sort-down" />
            </span>
            <Awnser selected={active === index} className="accordion_content">
              <p dangerouslySetInnerHTML={{ __html: question.awnser }} />
            </Awnser>
          </section>
        ))}
      </AccordionWrapper>
    )
  }
}

export default Accordion
<file_sep>import React from 'react'

import { Flex } from '@rebass/grid'
import PropTypes from 'prop-types'
import UserCard from '../UserCard'

const Podium = ({ firstUsers }) => {
  return (
    <Flex justifyContent="center" mt={50} mb={80} flexWrap="wrap">
      {firstUsers.map((card, index) => (
        <UserCard key={index} first={index === 0} {...card} />
      ))}
    </Flex>
  )
}

Podium.propTypes = {
  firstUsers: PropTypes.array
}
export default Podium
<file_sep>import React, { Component } from 'react'

import hiwlpc from '../../assets/hiwlpc.png'

import StyledScreenHowItWorks from './styles'

import { Flex, Box } from '@rebass/grid'
import XpRules from './XpRules'
import FullPage from '../../components/FullPage'
import Title from '../../components/Title'
import SubTitle from '../../components/Title/SubTitle'
import Faq from './Faq'
import About from './About'
import QuestionCards from './QuestionCards'

class ScreenHowItWorks extends Component {
  render() {
    return (
      <StyledScreenHowItWorks>
        <main className="layout">
          <FullPage background={`url(${hiwlpc})`}>
            <Flex alignItems="center" justifyContent="center" flex="1">
              <Box>
                <Title large color="white" align="center">
                  Bem vindo(a)
                  <br />à atena!
                </Title>
                <SubTitle>
                  Participe da comunidade, compartilhe ideias, construa projetos
                  e ganhe pontos baseados em suas ações.
                </SubTitle>
              </Box>
            </Flex>
          </FullPage>

          <About />
          <XpRules />
          <QuestionCards />
          <Faq />
        </main>
      </StyledScreenHowItWorks>
    )
  }
}

export default ScreenHowItWorks
<file_sep>import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Creators as AuthActions } from '../../../store/ducks/auth'

import Auth from '../../auth'
import avatarSvg from '../../../assets/avatarWhite.svg'
import StyledMenu from './styles'

class Menu extends Component {
  static propTypes = {
    signOut: PropTypes.func.isRequired,
    toggleModal: PropTypes.func.isRequired,
    auth: PropTypes.shape({
      activeModal: PropTypes.bool.isRequired,
      avatar: PropTypes.string,
      uuid: PropTypes.string,
      isCoreTeam: PropTypes.bool
    }).isRequired
  }

  toggleModal = () => {
    this.props.toggleModal()
  }

  logout = () => {
    this.props.signOut()
  }

  render() {
    const { uuid, isCoreTeam, activeModal, avatar } = this.props.auth
    return (
      <>
        <StyledMenu>
          <li key="index">
            <Link to="/">
              <button>como funciona</button>
            </Link>
          </li>
          <li key="ranking">
            <Link to="/ranking">
              <button>ranking</button>
            </Link>
          </li>
          {uuid ? (
            <>
              {isCoreTeam && (
                <li key="admin">
                  <Link to="/admin">
                    <button>Admin</button>
                  </Link>
                </li>
              )}

              <li key="logout">
                <button onClick={this.logout}>logout</button>
              </li>
              <li className="user">
                <Link to="/userInfo">
                  <button className="profile">
                    <img
                      src={avatar || avatarSvg}
                      onError={e => {
                        e.target.onerror = null
                        e.target.src = avatarSvg
                      }}
                      alt={`Foto do usuário`}
                      className="avatar"
                    />
                  </button>
                </Link>
              </li>
            </>
          ) : (
            <li key="login">
              <button onClick={this.toggleModal}>login</button>
            </li>
          )}
        </StyledMenu>
        {activeModal && <Auth />}
      </>
    )
  }
}

const mapStateToProps = state => ({
  auth: state.auth
})

const mapDispatchToProps = dispatch => bindActionCreators(AuthActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu)
<file_sep>import styled from 'styled-components'

const StyledFaq = styled.section`
  button {
    margin-top: 50px;
  }

  @media (max-width: 760px) {
    h1 {
      br {
        display: none;
      }
    }

    i {
      padding-left: 20px;
    }
  }
`

export default StyledFaq
<file_sep>import { delay, put } from 'redux-saga/effects'
import { Creators as GeneralReportsActions } from '../ducks/generalReports'

export function* getUsers(action) {
  try {
    yield delay(1000)

    const generalReportsData = {
      users: [
        { name: 'Nível 1', value: 335 },
        { name: 'Nível 2', value: 310 },
        { name: 'Nível 3', value: 234 },
        { name: 'Nível 4', value: 535 },
        { name: 'Nível 5', value: 154 },
        { name: 'Nível 6', value: 754 },
        { name: 'Nível 7', value: 354 },
        { name: 'Nível 8', value: 854 },
        { name: 'Nível 9', value: 154 },
        { name: 'Nível 10', value: 554 }
      ],
      totalUsers: 12043,
      loading: false,
      error: null
    }

    // throw new Error("Não foi possível buscar os dados");
    yield put(GeneralReportsActions.getUsersResponse(generalReportsData))
  } catch (error) {
    yield put(
      GeneralReportsActions.getUsersResponse({
        users: null,
        totalUsers: null,
        loading: false,
        error: error.message
      })
    )
  }
}

export function* getUsersAchievements(action) {
  try {
    yield delay(1000)
    const data = {
      name: 'conquistas',
      byMonth: 865,
      byMonthPercentage: 13.8,
      byYear: 3587,
      byYearPercentage: -13.8,
      total: 12987
    }
    // throw new Error("Não foi possível buscar os dados");
    yield put(
      GeneralReportsActions.getUsersAchievementsResponse({
        type: 'achievements',
        loading: false,
        error: null,
        data
      })
    )
  } catch (error) {
    yield put(
      GeneralReportsActions.getUsersAchievementsResponse({
        type: 'achievements',
        loading: false,
        error: error.message,
        data: null
      })
    )
  }
}

export function* getMissions(action) {
  try {
    yield delay(2000)
    const data = {
      name: 'missões',
      byMonth: 565,
      byMonthPercentage: -14.8,
      byYear: 2587,
      byYearPercentage: 11.8,
      total: 22987
    }
    if (action.data) throw new Error('Você nao tem acesso')
    // throw new Error("Não foi possível buscar os dados");
    yield put(
      GeneralReportsActions.getMissionsResponse({
        type: 'missions',
        loading: false,
        error: null,
        data
      })
    )
  } catch (error) {
    const data = {
      name: 'missões',
      byMonth: 565,
      byMonthPercentage: -14.8,
      byYear: 2587,
      byYearPercentage: 11.8,
      total: 22987
    }
    yield put(
      GeneralReportsActions.getMissionsResponse({
        type: 'missions',
        loading: false,
        data,
        error: error.message
      })
    )
  }
}
export function* getXp(action) {
  try {
    yield delay(3000)
    const data = {
      name: 'experiência',
      byMonth: 165,
      byMonthPercentage: -6.8,
      byYear: 587,
      byYearPercentage: 16.8,
      total: 2987
    }
    // throw new Error("Não foi possível buscar os dados");
    yield put(
      GeneralReportsActions.getXpResponse({
        type: 'xp',
        loading: false,
        error: null,
        data
      })
    )
  } catch (error) {
    yield put(
      GeneralReportsActions.getXpResponse({
        type: 'xp',
        loading: false,
        error: error.message,
        data: null
      })
    )
  }
}

export function* getTeams() {
  try {
    yield delay(2000)
    const data = [
      {
        name: 'network',
        total: 1837,
        message: {
          send: 1452,
          receive: 7489
        },
        reactions: {
          send: 759,
          receive: 785
        },
        response: {
          send: 784,
          receive: 695
        },
        blog: {
          posts: 452,
          comments: 745
        },
        github: {
          issues: 548,
          reviews: 475,
          pullRequests: {
            created: 125,
            approved: 98
          }
        },
        meetups: {
          participants: 236,
          mediators: 65,
          facilitators: 74
        },
        referral: {
          allocated: 74,
          indications: 745
        }
      },
      {
        name: 'atari',
        total: 54837,
        message: {
          send: 1452,
          receive: 7489
        },
        reactions: {
          send: 759,
          receive: 785
        },
        response: {
          send: 784,
          receive: 695
        },
        blog: {
          posts: 452,
          comments: 745
        },
        github: {
          issues: 548,
          reviews: 475,
          pullRequests: {
            created: 125,
            approved: 98
          }
        },
        meetups: {
          participants: 236,
          mediators: 65,
          facilitators: 74
        },
        referral: {
          allocated: 74,
          indications: 745
        }
      },
      {
        name: 'corinthians',
        total: 26837,
        message: {
          send: 1452,
          receive: 7489
        },
        reactions: {
          send: 759,
          receive: 785
        },
        response: {
          send: 784,
          receive: 695
        },
        blog: {
          posts: 452,
          comments: 745
        },
        github: {
          issues: 548,
          reviews: 475,
          pullRequests: {
            created: 125,
            approved: 98
          }
        },
        meetups: {
          participants: 236,
          mediators: 65,
          facilitators: 74
        },
        referral: {
          allocated: 74,
          indications: 745
        }
      }
    ]
    // throw new Error("Não foi possível buscar times");
    yield put(
      GeneralReportsActions.getTeamsResponse({
        data,
        loading: false,
        error: null
      })
    )
  } catch (error) {
    yield put(
      GeneralReportsActions.getTeamsResponse({
        data: null,
        loading: false,
        error: error.message
      })
    )
  }
}
<file_sep>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import 'moment/locale/pt-br'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { SmallLoading, SmallError } from '../../../components/utils'
import { Creators as GeneralReportsActions } from '../../../store/ducks/generalReports'
import {
  Container,
  CardsWrapper,
  Card,
  Percentage,
  StyledSelect
} from './styles'

class InfoCards extends Component {
  static propTypes = {
    getUsersAchievements: PropTypes.func.isRequired,
    getMissions: PropTypes.func.isRequired,
    getXp: PropTypes.func.isRequired,
    generalReports: PropTypes.shape({
      achievements: PropTypes.shape({
        byMonth: PropTypes.number,
        byMonthPercentage: PropTypes.number,
        byYear: PropTypes.number,
        byYearPercentage: PropTypes.number,
        total: PropTypes.number
      }).isRequired,

      missions: PropTypes.shape({
        byMonth: PropTypes.number,
        byMonthPercentage: PropTypes.number,
        byYear: PropTypes.number,
        byYearPercentage: PropTypes.number,
        total: PropTypes.number
      }).isRequired,

      xp: PropTypes.shape({
        byMonth: PropTypes.number,
        byMonthPercentage: PropTypes.number,
        byYear: PropTypes.number,
        byYearPercentage: PropTypes.number,
        total: PropTypes.number
      }).isRequired
    }).isRequired
  }
  state = {}

  getFormatedMonth = month => {
    return moment()
      .locale('pt-BR')
      .subtract(month, 'month')
      .format('MMM/YY')
  }
  getMonth = month => {
    return moment()
      .subtract(month, 'month')
      .format('MM/YY')
  }
  renderOptions = type => {
    let options = []
    for (let i = 0; i < 7; i++) {
      options.push({
        value: { type, data: this.getMonth(i) },
        label: this.getFormatedMonth(i)
      })
    }
    return options
  }

  handleChange = value => {
    const { type, data } = value.value

    if (type === 'achievements') {
      this.props.getUsersAchievements(data)
    } else if (type === 'missions') {
      this.props.getMissions(data)
    } else if (type === 'xp') {
      this.props.getXp(data)
    }
  }

  componentDidMount() {
    const { achievements, missions, xp } = this.props.generalReports
    !achievements.data && this.props.getUsersAchievements()
    !missions.data && this.props.getMissions()
    !xp.data && this.props.getXp()
  }

  renderCards = ({ type, loading, error, data }) => {
    if (!data && loading)
      return (
        <CardsWrapper>
          <SmallLoading width="100%" height="100%" />
        </CardsWrapper>
      )
    if (!data && error)
      return (
        <CardsWrapper>
          <SmallError
            width="100%"
            height="100%"
            message={error}
            refresh={() => this.handleChange(null, type)}
          />
        </CardsWrapper>
      )
    const {
      name,
      byMonth,
      byMonthPercentage,
      byYear,
      byYearPercentage,
      total
    } = data

    return (
      <CardsWrapper>
        <h4>{name}</h4>
        <Card>
          {loading && <SmallLoading width="100%" height="100%" />}
          {error && (
            <SmallError
              width="100%"
              height="100%"
              message={error}
              refresh={() => this.handleChange(null, type)}
            />
          )}
          <header>
            <p>total {name} mês</p>
            <StyledSelect
              defaultValue={{
                value: { type, data: this.getMonth(0) },
                label: this.getFormatedMonth(0)
              }}
              options={this.renderOptions(type)}
              onChange={this.handleChange}
            />
          </header>
          <h1>{byMonth}</h1>

          <Percentage positive={byMonthPercentage > 0}>
            <i
              className={`fa fa-long-arrow-alt-${
                byMonthPercentage < 0 ? 'down' : 'up'
              }`}
            />
            {byMonthPercentage} %
          </Percentage>
        </Card>

        <Card>
          <p>total {name} do ano</p>
          <h1>{byYear}</h1>
          <Percentage positive={byYearPercentage > 0}>
            <i
              className={`fa fa-long-arrow-alt-${
                byYearPercentage < 1 ? 'down' : 'up'
              }`}
            />
            {byYearPercentage} %
          </Percentage>
        </Card>

        <Card>
          <p>total de {name}</p>
          <h1>{total}</h1>
        </Card>
      </CardsWrapper>
    )
  }

  render() {
    const { achievements, missions, xp } = this.props.generalReports
    return (
      <Container>
        {this.renderCards(achievements)}
        {this.renderCards(missions)}
        {this.renderCards(xp)}
      </Container>
    )
  }
}

const mapStateToProps = state => ({ generalReports: state.generalReports })

const mapDispatchToProps = dispatch =>
  bindActionCreators(GeneralReportsActions, dispatch)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(InfoCards)
<file_sep>REACT_APP_API_URL=
REACT_APP_ATENA_CRYPTO_SALT=

<file_sep>import styled from 'styled-components'

const StyledScreenHowItWorks = styled.section`
  .layout {
    padding-top: 0;
    background-color: #fdfdfd;
    color: #666c71;
  }
`

export default StyledScreenHowItWorks
<file_sep>import React, { Component } from 'react'

import hiwlpc from '../assets/hiwlpc.png'

import StyledScreenError from './Error.style'

import { Flex, Box } from '@rebass/grid'
import FullPage from '../components'
import Title from '../components/Title'
import SubTitle from '../components/Title/SubTitle'

class ScreenError extends Component {
  render() {
    return (
      <StyledScreenError>
        <main className="layout">
          <FullPage background={`url(${hiwlpc})`}>
            <Flex alignItems="center" justifyContent="center" flex="1">
              <Box>
                <Title large color="white" align="center">
                  404
                </Title>
                <SubTitle>Ops! Página não encontrada :/</SubTitle>
              </Box>
            </Flex>
          </FullPage>
        </main>
      </StyledScreenError>
    )
  }
}

export default ScreenError
<file_sep>import { all, takeLatest } from 'redux-saga/effects'

import { Types as AuthTypes } from '../ducks/auth'
import { Types as UserTypes } from '../ducks/user'
import { Types as RankingTypes } from '../ducks/ranking'
import { Types as GeneralReportsTypes } from '../ducks/generalReports'
import { Types as ExperienceCardTypes } from '../ducks/experienceCard'
import { Types as AchievementsTypes } from '../ducks/achievements'

import { signIn, logout, forceLogout } from './auth'
import { getProfile, getUserInfo, putUserInfo } from './user'
import { getRanking, getRankingUsers } from './ranking'
import {
  getUsers,
  getUsersAchievements,
  getMissions,
  getXp,
  getTeams
} from './generalReports'
import { getExperience, putExperience } from './experienceCard'
import {
  getAchievements,
  editAchievement,
  createAchievement
} from './achievements'

export default function* rootSaga() {
  yield all([
    takeLatest(AuthTypes.SIGN_IN_REQUEST, signIn),
    takeLatest(AuthTypes.SIGN_OUT, logout),
    takeLatest(AuthTypes.FORCE_SIGN_OUT, forceLogout),
    takeLatest(UserTypes.GET_USER_INFO, getUserInfo),
    takeLatest(UserTypes.PUT_USER_INFO, putUserInfo),
    takeLatest(UserTypes.GET_PROFILE, getProfile),
    takeLatest(RankingTypes.GET_RANKING, getRanking),
    takeLatest(RankingTypes.GET_RANKING_USERS, getRankingUsers),

    takeLatest(GeneralReportsTypes.GET_USERS, getUsers),
    takeLatest(
      GeneralReportsTypes.GET_USERS_ACHIEVEMENTS,
      getUsersAchievements
    ),
    takeLatest(GeneralReportsTypes.GET_MISSIONS, getMissions),
    takeLatest(GeneralReportsTypes.GET_XP, getXp),
    takeLatest(GeneralReportsTypes.GET_TEAMS, getTeams),
    takeLatest(ExperienceCardTypes.GET_EXPERIENCE, getExperience),
    takeLatest(ExperienceCardTypes.PUT_EXPERIENCE, putExperience),
    takeLatest(AchievementsTypes.GET_ACHIEVEMENTS, getAchievements),
    takeLatest(AchievementsTypes.EDIT_ACHIEVEMENT, editAchievement),
    takeLatest(AchievementsTypes.CREATE_ACHIEVEMENT, createAchievement)
  ])
}
<file_sep>import styled from 'styled-components'

const StyledScreenGithub = styled.section`
  background: ${props => props.background};
  background-size: cover;
  background-position: center;
  padding: 100px 0;

  .title {
    font-size: 20px;
    line-height: 1.5;
    font-family: ${props => props.theme.fontFamily.primary};

  }

  .super {
    font-size: 20px;
    line-height: 1.5;
    margin-top: 60px;

    a {
      color: ${props => props.theme.color.primary};
    }
  }

  .help {
    font-size: 16px;
    line-height: 1.5;
    color: ${props => props.theme.color.white};
    text-align: center;
    margin: 60px auto 0;
     flex: 1;

    a {
      color: ${props => props.theme.color.primaryHover};

      &:hover {
        color: ${props => props.theme.color.white};
      }
    }
  }

  a {
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
    display: block;
    word-break: break-all;

    &:hover {
      color: ${props => props.theme.color.primaryHover};
    }
  }

  ._inner {
    flex: 1;
    max-height: 590px
  }

  ._inner > p {
    margin-top: 60px;
  }

  @media (max-width: 760px) {
    main {
      padding-top: 160px;
      padding-bottom: 60px;
    }

    ._inner > p {
      margin-top: 30px;
    }
  }
`

export default StyledScreenGithub
<file_sep>import styled from 'styled-components'
import theme from '../../styles/theme'

const StyledButton = styled.div`
  color: ${theme.color.primary};
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 100px;
  padding: 12px 20px;
  border: 2px solid;
  margin: 20px 0 10px;
  cursor: pointer;
  background-color: transparent;

  & a {
    text-decoration: none;
    color: ${theme.color.primary};
  }

  &:hover {
    color: ${theme.color.primary};
    background-color: ${theme.color.primary};
    & a {
      color: white;
    }
  }

  &:focus {
    outline: none;
    color: ${theme.color.primaryFocus};
    background-color: ${theme.color.primaryFocus};
    & a {
      color: white;
    }
  }
`

export default StyledButton
<file_sep>import styled from 'styled-components'
import { Field } from 'formik'
import theme from '../../../styles/theme'

export const Container = styled.div`
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
`
export const Title = styled.h3`
  color: ${theme.color.primary};
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
  text-transform: uppercase;
  width: 100%;
`

export const Card = styled.div`
  background: ${theme.color.white};
  border-radius: 10px;
  color: ${theme.color.gray};
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: bold;
  margin: 2% 3% 2% 0;
  min-height: 258px;
  padding: 20px;
  position: relative;
  text-transform: uppercase;
  width: 30%;

  p {
    margin-bottom: 20px;
    text-align: center;
  }
  small {
    border-bottom: solid 1px ${theme.color.lightGray};
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  form {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 100%;
    span {
      color: ${theme.color.primaryHover};
      margin: 10px 0;
    }
  }

  button {
    background: ${theme.color.white};
    border: 2px solid ${theme.color.primary};
    border-radius: 100px;
    color: ${theme.color.primary};
    cursor: pointer;
    font-weight: bold;
    height: 46px;
    margin-top: 20px;
    outline: none;
    text-transform: uppercase;
    transition: all 0.3s linear;
    :hover {
      background: ${theme.color.primary};
      color: ${theme.color.white};
    }
    :active {
      transform: scale(0.95);
    }
    :focus {
      outline: none;
    }
    ::-moz-focus-inner {
      border: 0;
    }
  }
`

export const StyledInput = styled(Field)`
  border: ${({ error }) => (error ? '1px solid red' : '1px solid gray')};
  border-radius: 6px;
  color: ${theme.color.gray};
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 6px 0 18px;
  width: 100px;
`
<file_sep>import styled from 'styled-components'
import theme from '../../styles/theme'

export const AccordionWrapper = styled.div`
  & > section {
    text-decoration: none;
    border-bottom: 1px solid #e2e2e2;
    display: block;
    cursor: pointer;

    &:focus {
      outline: none;

      .accordion__link {
        color: ${props => theme.color.primary};
      }
    }
  }

  .accordion__link {
    color: ${props => theme.color.gray};
    font-size: ${props => theme.fontSize.medium};
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 30px 0px;

    &:hover {
      color: ${props => theme.color.primary};
    }
  }
`

export const Awnser = styled.div`
  ${({ selected }) =>
    selected
      ? `opacity: 1;
        visibility: visible;
        height: auto;
        transition: 0.2s all ease-in;`
      : `height: 0;
        opacity: 0;
        visibility: hidden;`}

  & > p {
    color: ${props => theme.color.gray};
    text-align: left;
    margin-bottom: 30px;
    cursor: auto;
  }
`
export const Icon = styled.i`
  ${({ selected }) =>
    selected
      ? `transition: 0.2s all ease-in;
                transform: rotate(180deg);`
      : `transition: 0.2s all ease-in;
                transform: rotate(0);`}
`
<file_sep>import { put, delay } from 'redux-saga/effects'
import { toast } from 'react-toastify'

import { Creators as achievementsActions } from '../ducks/achievements'

const data = [
  {
    name: 'RocketChat',
    data: [
      {
        type: 'Mensagens enviadas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reações Dadas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reações Recebidas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },

      {
        type: 'Reactions enviados',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reactions recebidos',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      }
    ]
  },
  {
    name: 'Github',
    data: [
      {
        type: 'Pull Request',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Review',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Pull Request aprovada',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },

      {
        type: 'Issue',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      }
    ]
  }
]
const data2 = [
  {
    name: 'RocketChat',
    data: [
      {
        type: 'Mensagens enviadas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1511 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reações Dadas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reações Recebidas',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },

      {
        type: 'Reactions enviados',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Reactions recebidos',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      }
    ]
  },
  {
    name: 'Github',
    data: [
      {
        type: 'Pull Request',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Review',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },
      {
        type: 'Pull Request aprovada',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      },

      {
        type: 'Issue',
        values: [
          {
            name: 'bronze',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'silver',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'gold',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'platinum',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          },
          {
            name: 'diamond',
            tiers: [
              { name: 'I', value: 1500 },
              { name: 'II', value: 1600 },
              { name: 'III', value: 1700 },
              { name: 'IV', value: 1800 },
              { name: 'V', value: 2000 }
            ]
          }
        ]
      }
    ]
  }
]

export function* getAchievements(action) {
  try {
    // throw new Error("Servidor indisponivel");
    yield put(achievementsActions.getAchievementsSuccess(data))
  } catch (error) {
    yield put(
      achievementsActions.getAchievementsFailure('Erro ao buscar cards')
    )
  }
}

export function* editAchievement(action) {
  try {
    yield delay(2000)
    // throw new Error("Servidor indisponivel");
    yield put(achievementsActions.editAchievementSuccess(data2))
    toast.success('Conquista alterada com sucesso!')
  } catch (error) {
    toast.error(`Não foi possível alterar conquista. ${error.message}`)
    yield put(achievementsActions.editAchievementFailure())
  }
}

export function* createAchievement(action) {
  try {
    yield put(achievementsActions.createAchievementSuccess())
  } catch (error) {
    yield put(
      achievementsActions.createAchievementFailure('Erro ao buscar cards')
    )
  }
}
<file_sep>/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'

import { Flex, Box } from '@rebass/grid'
import Title from '../../../components/Title'
import Button from '../../../components/Button'

class XpRules extends Component {
  state = {
    selected: 'gain'
  }

  changeInfos = selected => {
    this.setState({ selected })
  }

  render() {
    const { selected } = this.state
    return (
      <section className="container xprules">
        <Flex justifyContent className="align-content">
          <Box width={4 / 5}>
            <Title large className="align-title">
              O que é e como <br />
              ganhar <span className="red">reputação</span>?
            </Title>
            <p className="super">
              Sua pontuação será medida em <strong>Pontos de Reputação</strong>.
              Esse recurso é muito utilizado nos jogos como uma representação
              numérica do esforço e aprendizado obtido por um(a) personagem.
              Aqui na Impulso, a quantidade de reputação será baseada nas
              atividades que você realizar na nossa comunidade.
            </p>
          </Box>
        </Flex>
        <Flex className="rules">
          <Box width={1 / 2} px={0}>
            <button
              onClick={() => this.changeInfos('gain')}
              className={`${
                selected === 'gain' ? 'selected' : ''
              } a--rules--button`}>
              <span>01. Obtendo Reputação</span>
            </button>
          </Box>
          <Box width={1 / 2} px={0}>
            <button
              onClick={() => this.changeInfos('losing')}
              className={`${
                selected === 'losing' ? 'selected' : ''
              } a--rules--button`}>
              <span>02. Perdendo Reputação</span>
            </button>
          </Box>
        </Flex>
        {selected === 'gain' ? (
          <Flex
            css={{ margin: '0 -30px' }}
            className={`rules__inner rules__inner-1 ${
              selected === 'gain' ? 'selected' : ''
            } `}
            flexWrap="wrap">
            <Box width={[1, 1 / 2]} px={30}>
              <Title>
                <span className="red">01.</span>
                <br />
                OBTENDO REPUTAÇÃO
              </Title>
              <p>
                A obtenção de pontos é feita através da{' '}
                <strong>realização de atividades</strong> dentro da Impulso. Por
                exemplo: participar de um curso da Impulso Academy, reagir à uma
                mensagem no Rocket.chat e até criar uma postagem no nosso Blog.
              </p>
            </Box>
            <Box width={[1, 1 / 2]} px={30}>
              <div className="roles__navigation">
                <a className="selected">Rocket.Chat</a>
              </div>
              <div className="rules__table">
                <p>
                  Mensagem postada <span className="value">+3</span>
                </p>
                <p>
                  Reaction dado <span className="value">+2</span>
                </p>
                <p>
                  Reaction recebido <span className="value">+3</span>
                </p>
              </div>
              <Button>
                <a
                  href="https://www.notion.so/impulso/Reputa-o-Como-ganhar-372bc91f3e404b418b50267ddcadce6f"
                  target="_blank"
                  rel="noopener noreferrer">
                  mais detalhes
                </a>
              </Button>
            </Box>
          </Flex>
        ) : selected === 'losing' ? (
          <Flex
            css={{ margin: '0 -30px' }}
            className={`rules__inner rules__inner-2 ${
              selected === 'losing' ? 'selected' : ''
            } `}
            flexWrap="wrap">
            <Box width={1} px={30}>
              <Title>
                <span className="red">02.</span>
                <br />
                PERDENDO REPUTAÇÃO
              </Title>
              <p>
                Em oposição às atividades que promovem a obtenção de Reputação,
                a única forma de perder pontos é através da{' '}
                <strong>Inatividade Completa</strong> na comunidade Impulso. A
                inatividade começa a contar a partir de <strong>14 dias</strong>{' '}
                após à sua última participação. Apos este período, você perde{' '}
                <strong>dois pontos por dia</strong>, até voltar a participar na
                comunidade novamente.
              </p>
            </Box>
          </Flex>
        ) : null}
      </section>
    )
  }
}

export default XpRules
