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:
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;
