Dúvida com design de código de um componente React

[willianribeiro]

Senhoras e senhores,

Estou com um problema de design de código aqui. Queria expor esse problema a vocês e receber ideas de possíveis soluções.

Agradeço a boa vontade de todos vocês 🙂

CONTEXTO DO PROBLEMA:

============

Estou construindo esse componente da imagem. Um botão play/pause que quando eu passo o mouse em cima ele exibe um cronômetro rodando.

Esse componente não é somente um cronômetro, ele é um "time tracker". Monitora o tempo de trabalho do usuário da aplicação.

Antes de começar a trabalhar o usuário clica em "Iniciar" (do contrário a tela fica bloqueada com um overlay) e quando ele precisa parar de trabalhar por algum motivo (café, banheiro, etc) ele clica em "Pausar".

Isso é necessário pois é um sistema de atendimento e portanto é preciso saber quem está disponível para atender.

As responsabilidades desse componente são:

• Contar o tempo em que o usuário está trabalhando (depois de clicar play);
• Permitir o usuário pausar esse tempo (clicando em pause);
• Deslogar o usuário após ele pausar o tempo;
• Redirecionar para a página de login após deslogar o usuário.
• Bloquear a tela com um overlay se o tempo não estiver contando;
• Colocar o sistema em pausa depois de 10 minutos de inatividade do usuário (inatividade = nenhuma ação de mouse ou teclado);

Boa parte destas responsabilidades já estão implementadas (e essas responsabilidades estão divididas em componentes menores), mas há um problema pontual no qual eu travei.

PROBLEMA:

Além deste botão play/pause o usuário pode deslogar da aplicação por meio de um botão "Sair" que não tem nada a ver com o TimeTracker. Contudo, ao clicar em "Sair", a rotina de pause também deve ser executada. Eis então o problema:

Como faço para que somente o TimeTracker seja responsável pela lógica do play/pause, mas ainda assim permitir que outro componente "chame" uma rotina dele (pause)?

Alguma ideia?

[nurycaroline]

Eu tive uma situação parecida, onde em determinadas telas um menu mudaria seu itens, mas o menu era responsável por seu itens, então utilizei o Redux, para atualizar a lista.

Você pode colocar uma chamada para o pause no redux, e declarar essa action onde fica o botão de sair.

[bernardodiasc]

++ Actions do Redux

[filipi777]

Gostaria de complementar com um artigo:
http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/

[diessica]

Primeiramente, agradeço por trazer um problema interessante ao fórum e tão bem descrito. Me senti no dever de ajudar da forma que puder.

O que eu entendi foi: você está usando apenas React, certo?

Então, porque cada componente React tem somente seu estado interno (e, claro, props, se você transferiu estado), e a proposta do React não é gerenciar o estado da sua aplicação (e sim de componentes), é normal que você encontre esse problema em que você precisa comunicar um outro componente sobre o estado de um componente que não tem nada a ver. No fim, o estado não era para ser do componente, era para ser da aplicação. Esta é a razão pela qual soluções como Flux surgiram: state management.

No caso do Redux, que é a solução que eu também recomendaria para você (bem documentada, ecossistema incrível e muitos tutoriais, inclusive gratuitos), o estado da sua aplicação será armazenado em única fonte (a chamada state tree), e, para comunicar componentes desses estados, basta você conectar as fatias da state tree a esses componentes. O Redux vai fazer todo o trabalho para você de rerenderizar novamente os componentes assim que o estado mudar, tal como o React faz. (A mágica do Redux é que todo seu estado é passado como props, em vez de você fazer isso manualmente, componente por componente!)

Outra solução seria armazenar todo seu estado da sua aplicação no componente mãe (?), e sair transferindo tudo para baixo, para seus children components, como props. Você ia cansar tanto que ia acabar desenvolvendo o Redux.

[willianribeiro]

Caraca, que show galera! <3

Tô analisando aqui as sugestões que vocês deram, eu volto para dar um feedback assim que tiver processado o input de vocês. Me aguardem 🙏

[rodrigonehring]

Outra forma de resolver este problema, sem ficar muito overkill (adicionar redux), seria ter um "container" e você salva o state que precisa ser reutilizado em mais componentes nele.

Ex:

const Button = ({ running, action }) => (
  <button onClick={action}>
    {running ? 'Pausar' : 'Iniciar'}
  </button>
)

const Tooltip = ({ time }) => (
  <div>
    {time}
  </div>
)

class Container extends React.Component {
  interval = null

  state = {
    time: 0,
    running: false
  }

  toggleTimer = () => {
    const { running } = this.state

    if (running) {
      this.stopTimer()
    } else {
      this.startTimer()
    }
  }

  startTimer = () => {
    this.setState({ running: true })
    this.interval = setInterval(this.loop.bind(this), 1000)
  }

  stopTimer = () => {
    this.setState({ running: false })
    clearInterval(this.interval)
    this.logout()
  }

  loop = () => {
    this.setState(state => ({
      time: state.time + 1000
    }))
  }
  
  logout = () => {
  	alert('fazer logout e redirect')
  }

  render() {
    const { running, time } = this.state

    return (
      <div>
      
        <Button
          running={running}
          action={this.toggleTimer}
        />
        
        <Tooltip
          time={time}
        />
        
      </div>
    )
  }
}

Demo:
https://jsfiddle.net/reactjs/69z2wepo/