TimeCouter.js

TimeCounter.js

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import moment from 'moment';
import { Container } from './styles';

const TimeCounter = ({ size }) => {
  const { currentAttendance } = useSelector((state) => state.events);
  const { attendance } = useSelector((state) => state.attendance);

  const { created_at } = currentAttendance;
  const { created_at: from_events } = attendance;

  const [time, setTime] = useState({
    hh: '00',
    mm: '00',
    ss: '00',
  });

  function loadTime() {
    if (created_at) {
      console.log(created_at);
      setInterval(() => {
        const now = moment();
        const starter = moment(created_at);
        const diff = now - starter;
        setTime({
          hh: moment.duration(diff).hours().toString(),
          mm: moment.duration(diff).minutes().toString(),
          ss: moment.duration(diff).seconds().toString(),
        });
      }, 1000);
    }

    if (from_events) {
      console.log(from_events);
      setInterval(() => {
        const now = moment();
        const starter = moment(from_events);
        const diff = now - starter;
        setTime({
          hh: moment.duration(diff).hours().toString(),
          mm: moment.duration(diff).minutes().toString(),
          ss: moment.duration(diff).seconds().toString(),
        });
      }, 1000);
    }
  }

  useEffect(() => {
    loadTime();
  }, [currentAttendance]);

  useEffect(() => {
    loadTime();
  }, [attendance]);

  return (
    <Container>
      <p
        style={{
          fontSize: size || 16,
          color: '#fff',
          fontWeight: size ? 700 : 500,
        }}
      >{`${time.hh}:${time.mm}:${time.ss}`}</p>
    </Container>
  );
};

export default TimeCounter;