commit f5f19249ef05738b4b97c7a237127bdaed84c86a
parent 766d6a2179d7fe91a79e909ce1f934ab63b174c3
Author: Agastya Chandrakant <acagastya@outlook.com>
Date: Mon, 25 May 2020 11:22:17 +0530
create /, from-to, and option to save
Diffstat:
7 files changed, 162 insertions(+), 87 deletions(-)
diff --git a/src/App/comps/SavedTimezones.tsx b/src/App/comps/SavedTimezones.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import ShowSavedZones from './ShowSavedZones';
+
+import { getSavedZones } from '../../utils';
+
+import { ISavedTimezones } from '../../utils/interfaces';
+
+function SavedTimezones({ time }: ISavedTimezones): JSX.Element {
+ const savedZones = getSavedZones();
+ return (
+ <div className="Saved">
+ {savedZones.length > 0 ? (
+ // @ts-ignore
+ <ShowSavedZones savedZones={savedZones} time={time} />
+ ) : (
+ <h5
+ className="border-top mt-5 text-center"
+ style={{ paddingTop: '1rem' }}
+ >
+ You haven't saved any timezones so far.
+ </h5>
+ )}
+ </div>
+ );
+}
+
+export default SavedTimezones;
diff --git a/src/App/comps/ShowSavedZones.tsx b/src/App/comps/ShowSavedZones.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { displayTime, friendlyStr, removeTimeZone } from '../../utils';
+import { HMSDMY } from '../../utils';
+
+import { IShowSavedTimezones } from '../../utils/interfaces';
+
+function ShowSavedZones({
+ savedZones,
+ time,
+}: IShowSavedTimezones): JSX.Element {
+ return (
+ <>
+ <h3 className="mt-5 mb-3">Saved time zones</h3>
+ <ul className="list-group">
+ {savedZones.map((zone) => (
+ <li
+ className="list-group-item list-group-item-action"
+ key={zone}
+ style={{ cursor: 'pointer' }}
+ >
+ <h4>{friendlyStr(zone)}</h4>
+ <span>{displayTime({ fmtStr: HMSDMY, time, timezone: zone })}</span>
+ <button
+ className="btn btn-danger float-right"
+ type="button"
+ onClick={() => removeTimeZone(zone)}
+ >
+ Remove
+ </button>
+ </li>
+ ))}
+ </ul>
+ </>
+ );
+}
+
+export default ShowSavedZones;
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import CurrentConvertor from './pages/CurrentConvertor';
+import DualConvertor from './pages/DualConvertor';
import SimpleConvertor from './pages/SimpleConvertor';
import Footer from './comps/Footer';
@@ -12,18 +12,19 @@ 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
+ <DualConvertor
time={now}
- TZ1={timezone1}
- TZ2={timezone2}
- setTZ1={setTimezone1}
- setTZ2={setTimezone2}
- /> */}
- <SimpleConvertor time={now} TZ1={timezone1} setTZ1={setTimezone1} />
+ TZ1={timezone2}
+ TZ2={timezone1}
+ setTZ1={setTimezone2}
+ setTZ2={setTimezone1}
+ />
+ {/* <SimpleConvertor time={now} TZ1={timezone1} setTZ1={setTimezone1} /> */}
<Footer />
</div>
);
diff --git a/src/App/pages/CurrentConvertor.tsx b/src/App/pages/CurrentConvertor.tsx
@@ -1,73 +0,0 @@
-import React from 'react';
-
-import TimezoneInput from '../comps/TimezoneInput';
-
-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="first-time-lbl-box">
- <TimezoneInput
- autofocus={true}
- changeValue={setTZ1}
- id="first-time-lbl"
- placeholder="Time zone"
- TZ={TZ1}
- />
- </div>
- <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="first-time-box">
- <h4 id="first-time">
- {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })}
- </h4>
- </div>
- <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>
- );
-}
-
-export default CurrentConvertor;
diff --git a/src/App/pages/DualConvertor.tsx b/src/App/pages/DualConvertor.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import TimezoneInput from '../comps/TimezoneInput';
+import SavedTimezones from '../comps/SavedTimezones';
+
+import { clearTimezones, displayTime, saveTimezones } from '../../utils';
+import { HMSDMY } from '../../utils';
+import { IDualConvertor } from '../../utils/interfaces';
+
+function DualConvertor({
+ time,
+ TZ1,
+ TZ2,
+ setTZ1,
+ setTZ2,
+}: IDualConvertor): 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="first-time-lbl-box">
+ <TimezoneInput
+ autofocus={true}
+ changeValue={setTZ1}
+ id="first-time-lbl"
+ placeholder="Time zone"
+ TZ={TZ1}
+ />
+ </div>
+ <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="first-time-box">
+ <h4 id="first-time">
+ {displayTime({ fmtStr: HMSDMY, time, timezone: TZ1 })}
+ </h4>
+ </div>
+ <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="btn btn-danger"
+ type="button"
+ onClick={clearTimezones}
+ >
+ Clear All
+ </button>
+ </div>
+ <SavedTimezones time={time} />
+ </main>
+ );
+}
+
+export default DualConvertor;
diff --git a/src/App/pages/SimpleConvertor.tsx b/src/App/pages/SimpleConvertor.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import TimezoneInput from '../comps/TimezoneInput';
+import SavedTimezones from '../comps/SavedTimezones';
import {
clearTimezones,
@@ -15,11 +16,15 @@ import { ISimpleConvertor } from '../../utils/interfaces';
function SimpleConvertor({ time, TZ1, setTZ1 }: ISimpleConvertor): JSX.Element {
return (
<main className="container">
- <h3 className="mb-5 text-center">
+ <h1 className="mb-5 text-center">
Convert <em>current</em> time to other time zone.
- </h3>
+ </h1>
<div className="row mb-3" id="labels">
- <div className="col text-right" id="first-time-lbl-box">
+ <div
+ className="col text-right"
+ id="first-time-lbl-box"
+ style={{ cursor: 'not-allowed' }}
+ >
<div className="h4">{friendlyStr(localTimezone)} (Local time)</div>
</div>
<div className="col" id="second-time-lbl-box">
@@ -53,13 +58,14 @@ function SimpleConvertor({ time, TZ1, setTZ1 }: ISimpleConvertor): JSX.Element {
Save timezone
</button>
<button
- className="mdx btn btn-danger"
+ className="btn btn-danger"
type="button"
onClick={clearTimezones}
>
Clear All
</button>
</div>
+ <SavedTimezones time={time} />
</main>
);
}
diff --git a/todo b/todo
@@ -1,2 +1,2 @@
1. Support locale.
-2. Support saving timezones.
-\ No newline at end of file
+2. Support saving future time.
+\ No newline at end of file
