Как сделать что таймер останавливатся по id?

Question

[supkiler]

у меня несколько таймеров как сделать чтоб они останавливались по id ?ссылка на сайт с таймером после того как я фильтрую список таймер не останавливается что можно сделать ?

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { formatDistanceToNow } from 'date-fns';


export const Task = ({ description, isDone = false, createdDate, id, seconds,time, onToggleProperty, onDelete, onTick,titleCom,secTim,playTime,pauses,run }) => {
  const [timer,setTimer] = useState(false)
  const data = new Date();
  createdDate = data;
 
  
  useEffect(() => {
   if(time === true ){
    let x = (setInterval(onTick, 1000, id, timer));
   
    playTime(id,x)
   }
   if(time === false){

     clearInterval(run)
     pauses(id)
   }
     return () => clearInterval(timer);
    
  }, [time]);

  const play = (id) => {
    if (isDone || time || seconds <= 0) {
      return;
    }
   
    secTim(id)
   
  };

  const pause = (id) => {
    
    if (!time) {
      return;
    }
    
    secTim(id)
  };

  const formatTime = (sec) => {
    // let hours = Math.floor(sec / (60 * 60));

    let divisor_for_minutes = sec % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);
    
    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
    const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
  
    return <span>{formattedMinutes}:{formattedSeconds}</span>;
  };

  const toggleDone = () => {
    onToggleProperty('isDone', id, 'toggle', !isDone);
  };

  return (
    <div className="view">
      <input className="toggle" onChange={toggleDone} type="checkbox" checked={isDone}/>
      <label onClick={(e) => e.preventDefault()}>
        <span className={`title ${titleCom}`} onClick={toggleDone}>{description}</span>
        <span className="description">
            {!time ?
            <button aria-label="play" onClick={() => play(id)} type="button" className="icon icon-play" />
            :
            <button type="button" onClick={() => pause(id)} aria-label="pause" className="icon icon-pause" />
            }
          
          
          <span className="timer">{formatTime(seconds)}</span>
        </span>
        <span className="description-second">{(formatDistanceToNow(createdDate))}</span>
      </label>
      <button
        className="icon icon-edit"
        aria-label="edit"
        type="button"
        onClick={() => onToggleProperty('isEditing', id)}
      />
      <button className="icon icon-destroy" aria-label="destroy" type="button" onClick={() => onDelete(id)} />
    </div>
  );
};


Task.defaultProps = {
  description: "",
  isDone: false,
  createdDate: new Date(),
};

Task.propTypes = {
  description: PropTypes.string,
  isDone: PropTypes.bool,
  createdDate: PropTypes.instanceOf(Date),
  id: PropTypes.number.isRequired,
  onToggleProperty: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
};

Comments

[szQocks]

Самое время познакомиться с debugger, с точками останова и кнопками шагов и т.д
И интервал у тебя должен быть только 1 на все задачи которые выполняются, то есть, не создавать интервал для каждой задачи отдельно.