Skip to content
Snippets Groups Projects
Commit c498a081 authored by 찬주 이's avatar 찬주 이
Browse files

end

parent 07cb923f
Branches
No related tags found
No related merge requests found
Pipeline #7560 passed
Source diff could not be displayed: it is too large. Options to address this: view the blob.
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect } from 'react';
const TimeButton = (props) => { const TimeButton = (props) => {
const [time, setTime] = useState(null); const [time, setTime] = useState(null);
const timer = useMemo(() => { const [show, setShow] = useState(false);
return setInterval(() => { let timer = null;
let date = new Date();
let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; const startTimer = () => {
let formattedDate = date.toLocaleDateString(undefined, options); timer = setInterval(() => {
setTime(formattedDate); displayTime();
}, 1000); }, 1000);
}, [props.tz]); };
useEffect(() => { const stopTimer = () => {
return () => {
clearInterval(timer); clearInterval(timer);
timer = null;
};
const handleClick = () => {
if (timer) {
stopTimer();
} else {
startTimer();
displayTime();
}
setShow(!show);
}; };
}, [timer]);
const displayTime = () => { const displayTime = () => {
let date = new Date(); let date = new Date();
let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; let options = {
timeZone: props.tz,
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
let formattedDate = date.toLocaleDateString(undefined, options); let formattedDate = date.toLocaleDateString(undefined, options);
setTime(formattedDate); setTime(formattedDate);
} };
useEffect(() => {
return () => {
stopTimer();
};
}, []);
return ( return (
<> <>
<button onClick={displayTime} tz={props.tz}>{props.name}</button> <button onClick={handleClick}>{props.name}</button>
<div id='time'>{time}</div> {show && <div id='time'>{time}</div>}
</> </>
); );
} };
const App = () => { const App = () => {
const cityListConst = [ const cityListConst = [
{ cityName: "Vienna", timezone: "Europe/Vienna" }, { cityName: 'Vienna', timezone: 'Europe/Vienna' },
{ cityName: "Lord_Howe", timezone: "Australia/Lord_Howe" }, { cityName: 'Lord_Howe', timezone: 'Australia/Lord_Howe' },
{ cityName: "Shanghai", timezone: "Asia/Shanghai" } { cityName: 'Shanghai', timezone: 'Asia/Shanghai' },
]; ];
const [cityList, setCityList] = useState(cityListConst); const [cityList, setCityList] = useState(cityListConst);
...@@ -51,6 +75,6 @@ const App = () => { ...@@ -51,6 +75,6 @@ const App = () => {
</div> </div>
</> </>
); );
} };
export default App; export default App;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment