time-convertor

commit 62bfee1b1b01ed51f5c4eec2f762a3821f9c8b10
parent 900a9f7f8ffef269bc5bd45095ea1e2fed29bf6b
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Mon, 18 May 2020 12:42:47 +0530

implement frmtotime

Diffstat:
M
src/comp/fromToTime.js
 | 
48
+++++++++++++++++++++++++++++++-----------------
M
src/comp/helpers/prepData.js
 | 
2
+-

2 files changed, 32 insertions(+), 18 deletions(-)
diff --git a/src/comp/fromToTime.js b/src/comp/fromToTime.js
@@ -1,34 +1,48 @@
 import React from 'react';
+import AutoCompleteText from './autoCompleteText';
 import moment from 'moment-timezone';
 
-function AutoCompleteFrom() {
-  return 'from';
-}
-
-function AutoCompleteTo() {
-  return 'To';
-}
+import useTime from './helpers/useTime';
+import prepData from './helpers/prepData';
 
 function FromToTime() {
+  const guessedTZ = moment.tz.guess();
+  const [TZ1, setTZ1] = React.useState(guessedTZ);
+  const [TZ2, setTZ2] = React.useState('UTC');
+  const { firstAbbr, fmtTime1, fmtTime2, secondAbbr } = prepData(
+    useTime(),
+    TZ2,
+    TZ1
+  );
   return (
     <div className="time-conversion">
       <div className="row mb-3" id="labels">
-        <div className="col" id="from-time-lbl-box">
-          <AutoCompleteTo defaultValue={fromTZ} changeValue={setFromTZ} />
+        <div className="col text-right" id="first-time-lbl-box">
+          <AutoCompleteText
+            changeValue={setTZ1}
+            defaultValue={TZ1}
+            id="first-time-lbl-input"
+            placeholder="First time zone"
+          />
         </div>
-        <div className="col" id="to-time-lbl-box">
-          <AutoCompleteFrom defaultValue={toTZ} changeValue={setToTZ} />
+        <div className="col" id="second-time-lbl-box">
+          <AutoCompleteText
+            changeValue={setTZ2}
+            defaultValue={TZ2}
+            id="second-time-lbl-input"
+            placeholder="Second time zone"
+          />
         </div>
       </div>
       <div className="row" id="times">
-        <div className="col text-right" id="from-time-box">
-          <h4 aria-level="4" id="from-time">
-            {nowMoment.tz(fromTZ).format('HH:mm:ss MMM DD, YYYY')} ({fromAbbr})
+        <div className="col text-right" id="first-time-box">
+          <h4 aria-level="4" id="first-time">
+            {fmtTime1} ({firstAbbr})
           </h4>
         </div>
-        <div className="col" id="to-time-box">
-          <h4 aria-level="4" id="to-time">
-            {nowMoment.tz(toTZ).format('HH:mm:ss MMM DD, YYYY')} ({toAbbr})
+        <div className="col" id="second-time-box">
+          <h4 aria-level="4" id="second-time">
+            {fmtTime2} ({secondAbbr})
           </h4>
         </div>
       </div>
diff --git a/src/comp/helpers/prepData.js b/src/comp/helpers/prepData.js
@@ -11,9 +11,9 @@ function prepData(time, TZ2, TZ1 = '') {
   let fmtTime2 = now.tz(TZ2).format('HH:mm:ss MMM DD, YYYY');
   return {
     firstAbbr,
+    firstTZ,
     fmtTime1,
     fmtTime2,
-    firstTZ,
     secondAbbr,
   };
 }