time-convertor

commit d11f8cf40d7d4af82c97dd9d4f14a49245d065c4
parent d9bde53c9b4da2079ac755a4b93e53cb0f156245
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Sun, 17 May 2020 22:03:39 +0530

add currenttime comp

Diffstat:
A
src/comp/currentTime.js
 | 
62
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 62 insertions(+), 0 deletions(-)
diff --git a/src/comp/currentTime.js b/src/comp/currentTime.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import moment from 'moment-timezone';
+
+function useTime() {
+  const [time, setTime] = React.useState(new Date());
+  function updateTime() {
+    setTime(new Date());
+  }
+  React.useEffect(() => {
+    let interval = setInterval(() => updateTime(), 1000);
+    return () => clearInterval(interval);
+  });
+  return time;
+}
+
+function CurrentTime() {
+  const now = useTime();
+  const [TZ, setTZ] = React.useState('UTC');
+  const ISOtime = now.toISOString();
+  const localTZ = moment.tz.guess().replace(/_/g, ' ');
+  const nowMoment = moment(ISOtime);
+  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
+                  className="border-0"
+                  id="myInput"
+                  name="myTZ"
+                  type="text"
+                  placeholder="Time Zone"
+                  defaultValue={nowMoment.tz(TZ).tz().replace(/_/g, ' ')}
+                />
+              </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 CurrentTime;