text: import React, { useEffect, useState } from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  import { Link } from 'react-router-dom'
  import isEmpty from 'lodash/isEmpty'
  import cookies from 'js-cookie'
  
  import Dashboard from '../dashboard'
  
  import {
    get,
    saveKudo,
    setLoggedUser
  } from './actions'
  
  function useStateAndDispatch () {
    const dispatch = useDispatch()
    const participants = useSelector(state => state.home.participants)
    const loggedUser = useSelector(state => state.home.loggedUser)
  
    return {
      loggedUser,
      participants,
      get: params => dispatch(get(params)),
      saveKudo: params => dispatch(saveKudo(params)),
      setLoggedUser: params => dispatch(setLoggedUser(params))
    }
  }
  
  const Home = () => {
    const {
      loggedUser,
      participants,
      get,
      saveKudo,
      setLoggedUser
    } = useStateAndDispatch()
  
    const [brooches, setBrooches] = useState([])
  
    const checkLoggedUser = async () => {
      if (!isEmpty(loggedUser)) return void (0)
  
      const loggedUserCookie = cookies.get('loggedUser')
  
      if (!loggedUserCookie) {
        window.location.href = '/login'
      } else {
        try {
          const loggedUser = JSON.parse(loggedUserCookie)
          setLoggedUser(loggedUser)
          setBrooches(loggedUser.brooches)
          get()
        } catch (err) {
          window.location.href = '/login'
        }
      }
    }
  
    useEffect(() => {
      checkLoggedUser()
    }, [checkLoggedUser])
  
    const getTotalByBroocheName = (obj, name) => {
      const brooche = obj && obj.filter(brooche => brooche.name === name)
      return brooche.length > 0 && brooche.shift().total
    }
  
    const submit = async (participantId, kindAct) => {
      try {
        await saveKudo({ participantId, kindAct })
        const updatedBrooches = brooches.map(brooche => {
          if (brooche.name === kindAct) --brooche.total
          brooche.total = brooche.total >= 0 ? brooche.total : 0
          return brooche
        })
        setBrooches(updatedBrooches)
      } catch (err) {
        console.log('Request error')
      }
    }
  
    return (
      <Dashboard
        title='Novatics Challenge'
      >
        <h1>Dê um kudo!</h1>
        <div className='kinds_acts'>
          <div className='info'>
            <p>Selos disponíveis</p>
            <span>Atualizado em 12/05/2020 20:25</span>
          </div>
          <div className='kinds'>
            <div className='kinds_details'>
              <img src={require('../../assets/student.svg')} alt='Eu aprendi' />
              <p>{getTotalByBroocheName(brooches, 'learned')}</p>
            </div>
            <div className='kinds_details'>
              <img src={require('../../assets/claps.svg')} alt='Foi incrível' />
              <p>{getTotalByBroocheName(brooches, 'awesome')}</p>
            </div>
            <div className='kinds_details'>
              <img src={require('../../assets/prayer.svg')} alt='Sou grato' />
              <p>{getTotalByBroocheName(brooches, 'grateful')}</p>
            </div>
          </div>
        </div>
        <div className='wrapper'>
          {participants && participants.data && participants.data.map(p => (
            <div className='box' key={p._id}>
              <div className='img_box'>
                <img src={p.image} alt={p.name} />
              </div>
              <div className='kudos_box'>
                <div className='details'>
                  <p>Dê um kudo para</p>
                  <h2>{p.name}</h2>
                </div>
                <div className='actions'>
                  <Link to='#/' onClick={() => submit(p._id, 'learned')}>
                    <img src={require('../../assets/student.svg')} alt='Eu aprendi' />
                  </Link>
                  <Link to='#/' onClick={() => submit(p._id, 'awesome')}>
                    <img src={require('../../assets/claps.svg')} alt='Foi incrível' />
                  </Link>
                  <Link to='#/' onClick={() => submit(p._id, 'grateful')}>
                    <img src={require('../../assets/prayer.svg')} alt='Sou grato' />
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Dashboard>
    )
  }
  
  export default Home
  