주기적으로 끝나고 다시 실행되는 카운트다운 2개를 만들어야하는데 하나가 일찍 끝나면 나머지 하나가 일찍끝난거와 동시에 다시 재시작 되어 버리네요 두 컴포넌트의 연관성이 전혀 없는거 같은데 영향받는게 이해가 안가 질문드립니다… 도와 주세요!
TimerM1.js
import { useEffect, useState } from "react";
import { useInterval } from "./hooks";
import { useDispatch } from "react-redux";
import { pickWinnerAction } from "../../redux/actions/pickWinnerAction";
const useResultOfIntervalCalculator = (calculator, delay) => {
const dispatch = useDispatch();
const [result, setResult] = useState(calculator());
useInterval(() => {
const newResult = calculator();
if (newResult !== result) setResult(newResult);
}, delay);
if(result === 1) {
// dispatch(pickWinnerAction.pickWinnerAct());
}
return result;
};
const CountDownView = ({ targetISOString }) => {
const remain = useResultOfIntervalCalculator(() =>
Math.floor((new Date(targetISOString) - new Date()) / 1000, 10)
);
var hour = parseInt((remain / 3600));
var min = parseInt((remain % 3600) / 60);
var sec = remain % 60;
return <div className="CountDownWrap"><p>MODE#1 Remain</p><p>{hour} H {min} M {sec} S</p></div>;
};
const TimerM1 = () => {
const [targetISOString, setTargetISOString] = useState("11 17 2022 16:40:00");
const isNotYet = useResultOfIntervalCalculator(
() => new Date(targetISOString) - new Date() > 0, 10
);
const test = () => {
return new Date(targetISOString) - new Date()
}
const test2 = useResultOfIntervalCalculator(test, 1000);
const ChangeTimer = () => {
const crt = new Date()
const year = crt.getFullYear();
const month = crt.getMonth();
const date = crt.getDate();
const hour = crt.getHours();
const minutes = crt.getMinutes();
if(!isNotYet) {
if(minutes + 1 < 60)
setTargetISOString(`${month + 1} ${date} ${year} ${hour}:${minutes + 2}:00 `)
else if(minutes + 1 === 60 && hour + 1 < 24)
setTargetISOString(`${month + 1} ${date} ${year} ${hour + 1}:00:00 `)
else if(minutes + 1 === 60 && hour + 1 === 24)
setTargetISOString(`${month + 1} ${date + 1} ${year} 00:00:00 `)
}
}
useEffect(() => {
ChangeTimer();
},[isNotYet])
return (
<div>
<CountDownView targetISOString={targetISOString} />
</div>
);
}
export default TimerM1
TimerM2.js
import { useEffect, useState } from "react";
import { useInterval } from "./hooks";
import { useDispatch, useSelector } from "react-redux";
import { pickWinnerM2Action } from "../../redux/actions/pickWinnerM2Action";
const useResultOfIntervalCalculatorM2 = (calculator, delay) => {
const dispatch = useDispatch();
const [resultM2, setResultM2] = useState(calculator());
useInterval(() => {
const newResultM2 = calculator();
if (newResultM2 !== resultM2) setResultM2(newResultM2);
}, delay);
if(resultM2 === 1) {
// dispatch(pickWinnerM2Action.pickWinnerM2Act());
}
return resultM2;
};
const CountDownViewM2 = ({ targetISOStringM2 }) => {
const remain = useResultOfIntervalCalculatorM2(() =>
Math.floor((new Date(targetISOStringM2) - new Date()) / 1000, 10)
);
var hour = parseInt((remain / 3600));
var min = parseInt((remain % 3600) / 60);
var sec = remain % 60;
return <div className="CountDownWrap"><p>MODE#2 Remain</p><p>{hour} H {min} M {sec} S</p></div>;
};
const TimerM2 = () => {
const dispatch = useDispatch();
const [targetISOStringM2, setTargetISOStringM2] = useState("11 17 2022 15:21:00");
const isNotYetM2 = useResultOfIntervalCalculatorM2(
() => new Date(targetISOStringM2) - new Date() > 0, 10
);
const ChangeTimerM2 = () => {
const crt = new Date()
const year = crt.getFullYear();
const month = crt.getMonth();
const date = crt.getDate();
const hour = crt.getHours();
const minutes = crt.getMinutes();
if(!isNotYetM2) {
if(minutes + 1 < 60)
setTargetISOStringM2(`${month + 1} ${date} ${year} ${hour}:${minutes + 1}:00 `)
else if(minutes + 1 === 60 && hour + 1 < 24)
setTargetISOStringM2(`${month + 1} ${date} ${year} ${hour + 1}:00:00 `)
else if(minutes + 1 === 60 && hour + 1 === 24)
setTargetISOStringM2(`${month + 1} ${date + 1} ${year} 00:00:00 `)
}
}
useEffect(() => {
ChangeTimerM2();
},[isNotYetM2])
return (
<div>
<CountDownViewM2 targetISOStringM2={targetISOStringM2} />
</div>
);
}
export default TimerM2
hooks.js
import { useEffect, useRef } from "react";
export function useInterval(callback, delay) {
const savedCallback = useRef();
// console.log(savedCallback.current)
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}```