time-convertor-ts

commit efeadd81c2345d3b0f932b7a4f600ca796880d44
parent b6f0131253187bb94c1b0f95724c063afd500317
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Wed, 27 May 2020 17:06:46 +0530

saved TZ's future time

Diffstat:
A
src/App/comps/SavedFuture.tsx
 | 
33
+++++++++++++++++++++++++++++++++
A
src/App/comps/ShowFuture.tsx
 | 
46
++++++++++++++++++++++++++++++++++++++++++++++
M
src/App/pages/FutureConversion.tsx
 | 
2
++

3 files changed, 81 insertions(+), 0 deletions(-)
diff --git a/src/App/comps/SavedFuture.tsx b/src/App/comps/SavedFuture.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import ShowFuture from './ShowFuture';
+
+import { getSavedZones } from '../../utils';
+
+function SavedFuture({
+  selectedTime,
+}: {
+  selectedTime: moment.Moment | undefined;
+}): JSX.Element {
+  const list = getSavedZones();
+  return (
+    <div className="mt-5">
+      {selectedTime && list.length > 0 ? (
+        <ShowFuture selectedTime={selectedTime} zones={list} />
+      ) : (
+        <h5
+          className="border-top mt-5 text-center"
+          style={{ paddingTop: '1rem' }}
+        >
+          You haven't {selectedTime ? 'saved any timezones' : 'selected a time'}{' '}
+          so far.{' '}
+          <span aria-label="Saved list is empty." role="img">
+            😅
+          </span>
+        </h5>
+      )}
+    </div>
+  );
+}
+
+export default SavedFuture;
diff --git a/src/App/comps/ShowFuture.tsx b/src/App/comps/ShowFuture.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import moment from 'moment-timezone';
+
+import { displayTime, friendlyStr, removeTimeZone } from '../../utils';
+import { HMMDY } from '../../utils';
+
+function ShowFuture({
+  selectedTime,
+  zones,
+}: {
+  selectedTime: moment.Moment;
+  zones: string[];
+}): JSX.Element {
+  return (
+    <>
+      <h3 className="mt-5 mb-3">In other time zones...</h3>
+      <ul className="list-group">
+        {zones.map((zone) => (
+          <li
+            className="list-group-item list-group-item-action"
+            key={zone}
+            style={{ cursor: 'pointer' }}
+          >
+            <h4>{friendlyStr(zone)}</h4>
+            <span>
+              {displayTime({
+                fmtStr: HMMDY,
+                time: selectedTime,
+                timezone: zone,
+              })}
+            </span>
+            <button
+              className="btn btn-danger float-right"
+              onClick={() => removeTimeZone(zone)}
+              type="button"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export default ShowFuture;
diff --git a/src/App/pages/FutureConversion.tsx b/src/App/pages/FutureConversion.tsx
@@ -3,6 +3,7 @@ import moment from 'moment-timezone';
 
 import ErrorAlert from '../comps/ErrorAlert';
 import FutureConverted from '../comps/FutureConverted';
+import SavedFuture from '../comps/SavedFuture';
 import TimezoneInput from '../comps/TimezoneInput';
 
 import { displayTime, getYesterday, timezoneList } from '../../utils';
@@ -161,6 +162,7 @@ function FutureConversion({
           <FutureConverted selectedTime={selectedTime} TZ1={TZ1} TZ2={TZ2} />
         ) : null}
       </form>
+      <SavedFuture selectedTime={selectedTime} />
     </div>
   );
 }