UNIXTime.tsx (2090B)
1 import React from "react"; 2 import moment from "moment-timezone"; 3 import { Link } from "react-router-dom"; 4 import Countdown from "react-countdown"; 5 6 import { basePath, localTimezone } from "../../utils"; 7 import TimezoneInput from "../comps/TimezoneInput"; 8 9 function UNIXTime(): JSX.Element { 10 const timestamp = +window.location.pathname.replace("/", "") * 1000; 11 12 const [TZ, setTZ] = React.useState<string>(localTimezone); 13 14 const urlTime = moment.tz(timestamp, TZ); 15 const rightNow = Date.now(); 16 const isWas = urlTime.valueOf() >= rightNow ? "is" : "was"; 17 18 const [instance, setInstance] = React.useState<moment.Moment>(urlTime); 19 20 const [displayTime, setDisplayTime] = React.useState<string>( 21 instance.format("HH:mm MMM DD, YYYY Z (z)") 22 ); 23 24 const [timezone, setTimezone] = React.useState<string>( 25 instance.format("Z (z)") 26 ); 27 28 function handleClick() { 29 setInstance(moment.tz(timestamp, TZ)); 30 setDisplayTime(instance.format("HH:mm MMM DD, YYYY Z (z)")); 31 setTimezone(instance.format("Z (z)")); 32 } 33 34 function handleTimezoneChange(tz: React.SetStateAction<string>) { 35 setTZ(tz); 36 setInstance(moment.tz(timestamp, "" + tz)); 37 } 38 39 return ( 40 <main className="container"> 41 <div className="text-center"> 42 <h3>That {isWas}:</h3> 43 <h1 className="mb-5 mt-3">{displayTime}</h1> 44 <h5>Not {timezone}?</h5> 45 <TimezoneInput 46 autofocus={false} 47 changeValue={handleTimezoneChange} 48 id="event-time-mismatch" 49 placeholder="Time zone" 50 TZ={TZ} 51 /> 52 <button className="btn btn-primary mb-5 mt-3" onClick={handleClick}> 53 Change 54 </button> 55 <h2 className="mb-2 mt-2"> 56 {isWas === "is" ? ( 57 <Countdown date={timestamp} /> 58 ) : ( 59 "The event has commenced." 60 )} 61 </h2> 62 <Link 63 className="btn btn-info mt-5" 64 role="button" 65 to={`${basePath}/create`} 66 > 67 Schedule a new event 68 </Link> 69 </div> 70 </main> 71 ); 72 } 73 74 export default UNIXTime;