time-convertor-ts

commit eb0b1dc1dffb0d1fcf33bcfece22dc90dd738078
parent 8759aaf729391265b9b1b72b299c9459a080190e
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Mon, 25 May 2020 00:54:23 +0530

primitive implementation of current time -- needs work

Diffstat:
M
src/App/index.tsx
 | 
7
+++++++
A
src/App/pages/CurrentConvertor.tsx
 | 
54
++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 61 insertions(+), 0 deletions(-)
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 
+import CurrentConvertor from './pages/CurrentConvertor';
+
 import Footer from './comps/Footer';
 import Header from './comps/Header';
 
+import { DEFAULT_TZ, localTimezone } from '../utils';
+
 function App<never>(): JSX.Element {
+  const [timezone1, setTimezone1] = React.useState(localTimezone);
+  const [timezone2, setTimezone2] = React.useState(DEFAULT_TZ);
   return (
     <div className="container-fluid">
       <Header />
+      <CurrentConvertor />
       <Footer />
     </div>
   );
diff --git a/src/App/pages/CurrentConvertor.tsx b/src/App/pages/CurrentConvertor.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import moment from 'moment-timezone';
+
+import useTime from '../../utils/useTime';
+import { DEFAULT_TZ, friendlyStr } from '../../utils';
+
+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();
+  return (
+    <>
+      <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>
+        <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>
+      </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')}
+          </h4>
+        </div>
+        <div className="col" id="converted-time-box">
+          <h4 id="converted-time">
+            {nowMoment.tz(TZ).format('HH:mm:ss MMM DD, YYYY')}
+          </h4>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default CurrentConvertor;