Agora que o básico do nosso componente está funcional, é hora de implementar efetivamente o contador. Para isso, é preciso utilizar um hook do React, chamado useState;

É chamado dentro de um componente funcional para atualizar e consumir o state de um componente. O state simboliza o estado atual de um componente.

O useState retorna um par: o valor do estado atual e uma função para atualizá-lo.

Voltando ao exemplo apresentado na etapa anterior, podemos mostrar na prática os conceitos abordados anteriormente. Para lembrar do exemplo, veja o código abaixo:

No trecho acima é importante observar três coisas:

• Na variável count, é possível consumir o estado atual;
• setCount é uma função para atualizá-lo;
• 0 é o valor do estado inicial

1. Precisamos importar algumas funções e tipos para continuar:

   
   

   _10

   //react/Countdown.tsx

   _10

   import React, { useState } from 'react'

   _10

   import { TimeSplit } from './typings/global'

   _10

   import { tick, getTwoDaysFromNow } from './utils/time'

   
   

   A função getTwoDaysFromNow será utilizada para tratar condições de borda. Será explicado mais tarde neste passo.

2. Adicione o hook de atualização de estado (useState)

   
   

   _14

   //react/Countdown.tsx

   _14

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate }) => {

   _14

   + const [timeRemaining, setTime] = useState<TimeSplit>({

   _14

   + hours: '00',

   _14

   + minutes: '00',

   _14

   + seconds: '00'

   _14

   + })

   _14

   _14

   return (

   _14

   <div>

   _14

   { targetDate }

   _14

   </div>

   _14

   )

   _14

   }

   
   

   Observe os detalhes: timeRemaining é o estado atual, setTime é a função de atualização do estado, TimeSplit é o tipo e, por fim, o objeto {hours: '00', minutes: '00', seconds: '00'} é o estado inicial do componente.

3. Adicione uma targetDate padrão para o caso de não haver um valor inicial definido. Vamos utilizar para isto uma data que é definida como dois dias a partir da data atual e ela será calculada em uma função utilitária que foi previamente importada da pasta /utils:

   
   

   _10

   //react/Countdown.tsx

   _10

   const DEFAULT_TARGET_DATE = getTwoDaysFromNow()

   
   

4. Utilize a função tick e a constante DEFAULT_TARGET_DATE para fazer o contador:

   
   

   _16

   //react/Countdown.tsx

   _16

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _16

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _16

   hours: '00',

   _16

   minutes: '00',

   _16

   seconds: '00'

   _16

   })

   _16

   _16

   + tick(targetDate, setTime)

   _16

   _16

   return (

   _16

   <div>

   _16

   { targetDate }

   _16

   </div>

   _16

   )

   _16

   }

   
   

5. Altere o h1 para que ele exiba o contador que criamos. Para isso, precisamos utilizar o estado atual timeRemaining:

   
   

   _17

   //react/Countdown.tsx

   _17

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate = DEFAULT_TARGET_DATE }) => {

   _17

   const [timeRemaining, setTime] = useState<TimeSplit>({

   _17

   hours: '00',

   _17

   minutes: '00',

   _17

   seconds: '00'

   _17

   })

   _17

   _17

   tick(targetDate, setTime)

   _17

   _17

   return (

   _17

   <div>

   _17

   - <h1>{ targetDate }</h1>

   _17

   + <h1>{ `${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}` }</h1>

   _17

   </div>

   _17

   )

   _17

   }

   
   

   A formatação da string do contador está no formato HH:MM:SS, feita através do split em hours, minutes e seconds.

Assim, com essas alterações, veremos a atualização em tempo real do contador! O resultado na home é esse: