fromToTime.js (1851B)
1 import React from 'react'; 2 import AutoCompleteText from './autoCompleteText'; 3 import moment from 'moment-timezone'; 4 5 import useTime from './helpers/useTime'; 6 import prepData from './helpers/prepData'; 7 8 function FromToTime() { 9 const guessedTZ = moment.tz.guess(); 10 const [TZ1, setTZ1] = React.useState(guessedTZ); 11 const [TZ2, setTZ2] = React.useState('UTC'); 12 const { firstAbbr, fmtTime1, fmtTime2, secondAbbr } = prepData( 13 useTime(), 14 TZ2, 15 TZ1 16 ); 17 return ( 18 <div className="time-conversion container" style={{ minHeight: '75vh' }}> 19 <div className="row mb-3" id="fromto"> 20 <div className="col text-right" id="labels-from"> 21 <h1>From</h1> 22 </div> 23 <div className="col text-left" id="labels-to"> 24 <h1>To</h1> 25 </div> 26 </div> 27 <div className="row mb-3" id="labels"> 28 <div className="col text-right" id="first-time-lbl-box"> 29 <AutoCompleteText 30 autofocus={true} 31 changeValue={setTZ1} 32 defaultValue={TZ1} 33 id="first-time-lbl-input" 34 placeholder="First time zone" 35 /> 36 </div> 37 <div className="col" id="second-time-lbl-box"> 38 <AutoCompleteText 39 changeValue={setTZ2} 40 defaultValue={TZ2} 41 id="second-time-lbl-input" 42 placeholder="Second time zone" 43 /> 44 </div> 45 </div> 46 <div className="row" id="times"> 47 <div className="col text-right" id="first-time-box"> 48 <h4 aria-level="4" id="first-time"> 49 {fmtTime1} ({firstAbbr}) 50 </h4> 51 </div> 52 <div className="col" id="second-time-box"> 53 <h4 aria-level="4" id="second-time"> 54 {fmtTime2} ({secondAbbr}) 55 </h4> 56 </div> 57 </div> 58 </div> 59 ); 60 } 61 62 export default FromToTime;