time-convertor-ts

Convert time across timezones (typescript)
git clone http://git.hanabi.in/repos/time-convertor-ts.git
Log | Files | Refs | README | LICENSE

commit bd8842736ec84012358ee013721e0375a70d7177
parent 87b06ad9e9dc28ed0348901f42589cc210417ab7
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Mon, 25 May 2020 08:44:54 +0530

implement simple, current and testing in index

Diffstat:
Msrc/App/index.tsx | 8+++++---
Msrc/App/pages/CurrentConvertor.tsx | 91++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
Asrc/App/pages/SimpleConvertor.tsx | 67+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 127 insertions(+), 39 deletions(-)

diff --git a/src/App/index.tsx b/src/App/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import CurrentConvertor from './pages/CurrentConvertor'; +import SimpleConvertor from './pages/SimpleConvertor'; import Footer from './comps/Footer'; import Header from './comps/Header'; @@ -11,17 +12,18 @@ import useTime from '../utils/useTime'; function App<never>(): JSX.Element { const now = useTime(); const [timezone1, setTimezone1] = React.useState(DEFAULT_TZ); - const [timezone2, setTimezone2] = React.useState(localTimezone); + return ( <div className="container-fluid"> <Header /> - <CurrentConvertor + {/* <CurrentConvertor time={now} TZ1={timezone1} TZ2={timezone2} setTZ1={setTimezone1} setTZ2={setTimezone2} - /> + /> */} + <SimpleConvertor time={now} TZ1={timezone1} setTZ1={setTimezone1} /> <Footer /> </div> ); diff --git a/src/App/pages/CurrentConvertor.tsx b/src/App/pages/CurrentConvertor.tsx @@ -1,53 +1,72 @@ import React from 'react'; -import moment from 'moment-timezone'; -import useTime from '../../utils/useTime'; -import { DEFAULT_TZ, friendlyStr } from '../../utils'; +import TimezoneInput from '../comps/TimezoneInput'; -function CurrentConvertor(): JSX.Element { - const [TZ, setTZ] = React.useState('UTC'); - const localTZ = moment.tz.guess().replace(/_/g, ' '); - const nowMoment = useTime(); - const timezoneList = moment.tz.names(); +import { clearTimezones, displayTime, saveTimezones } from '../../utils'; +import { HMSDMY } from '../../utils'; +import { ICurrentConvertor } from '../../utils/interfaces'; + +function CurrentConvertor({ + time, + TZ1, + TZ2, + setTZ1, + setTZ2, +}: ICurrentConvertor): JSX.Element { return ( - <> + <main className="container"> + <h3 className="mb-5 text-center"> + Convert <em>current</em> time across time zones. + </h3> <div className="row mb-3" id="labels"> - <div className="col text-right" id="local-time-lbl-box"> - <h1 id="local-time-lbl">Local time ({localTZ})</h1> + <div className="col text-right" id="first-time-lbl-box"> + <TimezoneInput + autofocus={true} + changeValue={setTZ1} + id="first-time-lbl" + placeholder="Time zone" + TZ={TZ1} + /> </div> - <div className="col" id="converted-time-lbl-box"> - <h1 id="converted-time-lbl"> - <form autoComplete="off"> - <div className="autocomplete"> - <input - autoComplete="false" - className="border-0" - id="myInput" - name="myTZ" - type="text" - placeholder="Time Zone" - defaultValue={friendlyStr( - nowMoment.tz(TZ).tz() || DEFAULT_TZ - )} - /> - </div> - </form> - </h1> + <div className="col" id="second-time-lbl-box"> + <TimezoneInput + autofocus={false} + changeValue={setTZ2} + id="second-time-lbl" + placeholder="Time zone" + TZ={TZ2} + /> </div> </div> <div className="row" id="times"> - <div className="col text-right" id="local-time-box"> - <h4 id="local-time"> - {nowMoment.tz(localTZ).format('HH:mm:ss MMM DD, YYYY')} + <div className="col text-right" id="first-time-box"> + <h4 id="first-time"> + {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })} </h4> </div> - <div className="col" id="converted-time-box"> - <h4 id="converted-time"> - {nowMoment.tz(TZ).format('HH:mm:ss MMM DD, YYYY')} + <div className="col" id="second-time-box"> + <h4 id="second-time"> + {displayTime({ fmtStr: HMSDMY, time, timezone: TZ2 })} </h4> </div> </div> - </> + <div className="text-right mt-5"> + <button + className="btn btn-success mr-3" + type="button" + onClick={() => saveTimezones([TZ1, TZ2])} + > + Save timezones + </button> + <button + className="mdx btn btn-danger" + type="button" + onClick={clearTimezones} + > + Clear All + </button> + </div> + </main> ); } diff --git a/src/App/pages/SimpleConvertor.tsx b/src/App/pages/SimpleConvertor.tsx @@ -0,0 +1,67 @@ +import React from 'react'; + +import TimezoneInput from '../comps/TimezoneInput'; + +import { + clearTimezones, + displayTime, + saveTimezones, + friendlyStr, + localTimezone, +} from '../../utils'; +import { HMSDMY } from '../../utils'; +import { ISimpleConvertor } from '../../utils/interfaces'; + +function SimpleConvertor({ time, TZ1, setTZ1 }: ISimpleConvertor): JSX.Element { + return ( + <main className="container"> + <h3 className="mb-5 text-center"> + Convert <em>current</em> time to other time zone. + </h3> + <div className="row mb-3" id="labels"> + <div className="col text-right" id="first-time-lbl-box"> + <div className="h4">{friendlyStr(localTimezone)} (Local time)</div> + </div> + <div className="col" id="second-time-lbl-box"> + <TimezoneInput + autofocus={true} + changeValue={setTZ1} + id="second-time-lbl" + placeholder="Time zone" + TZ={TZ1} + /> + </div> + </div> + <div className="row" id="times"> + <div className="col text-right" id="first-time-box"> + <h4 id="first-time"> + {displayTime({ fmtStr: HMSDMY, time, timezone: localTimezone })} + </h4> + </div> + <div className="col" id="second-time-box"> + <h4 id="second-time"> + {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })} + </h4> + </div> + </div> + <div className="text-right mt-5"> + <button + className="btn btn-success mr-3" + type="button" + onClick={() => saveTimezones([TZ1])} + > + Save timezone + </button> + <button + className="mdx btn btn-danger" + type="button" + onClick={clearTimezones} + > + Clear All + </button> + </div> + </main> + ); +} + +export default SimpleConvertor;