time-convertor

commit 1c8b11eb3e5edbda96ee67f0334831a8d444d2e8
parent bc8669a98a082dd8cae08fa9e0842bba0c611b27
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Mon, 18 May 2020 02:43:56 +0530

Add implementation

Diffstat:
A
src/comp/autoCompleteText.js
 | 
75
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
src/comp/currentTime.js
 | 
41
+++++++++++++++++------------------------

2 files changed, 92 insertions(+), 24 deletions(-)
diff --git a/src/comp/autoCompleteText.js b/src/comp/autoCompleteText.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import moment from 'moment-timezone';
+
+function AutoCompleteText({ defaultValue = '', changeValue }) {
+  const options = moment.tz
+    .names()
+    .sort()
+    .map((el) => el.replace(/_/g, ' '));
+  const [suggestions, setSuggestions] = React.useState([]);
+  const [inputVal, setInputVal] = React.useState(
+    defaultValue.replace(/_/g, ' ')
+  );
+  function handleChange(event) {
+    const { value: input } = event.target;
+    setInputVal(input);
+    let recommendations = [];
+    if (input.length) {
+      recommendations = [
+        ...recommendations,
+        ...options.filter((val) =>
+          val.toLowerCase().includes(input.toLowerCase())
+        ),
+      ];
+    }
+    setSuggestions(Array.from(new Set([...recommendations])));
+  }
+
+  function handleClick(value) {
+    setSuggestions([]);
+    setInputVal(value);
+    changeValue(value.replace(/ /g, '_'));
+  }
+
+  return (
+    <h2 aria-level="2" id="converted-time-lbl">
+      <input
+        role="searchbox"
+        autoFocus
+        className="w-75"
+        id="converted-time-lbl-input"
+        name="converted-time-lbl-input"
+        onChange={handleChange}
+        type="text"
+        placeholder="Time Zone"
+        aria-placeholder="Time Zone"
+        value={inputVal}
+        maxLength={100}
+      />
+      <div
+        id="suggestion-list"
+        style={{ maxHeight: '50vh', overflow: 'scroll' }}
+      >
+        <h6 aria-level="6">
+          <ul className="list-group" role="list">
+            {suggestions.length > 0
+              ? suggestions.map((el, i) => (
+                  <li
+                    className="list-group-item list-group-item-action"
+                    key={i}
+                    onClick={() => handleClick(el)}
+                    role="listitem"
+                    // style={{ paddingLeft: 0 }}
+                  >
+                    {el.replace(/_/g, ' ')}
+                  </li>
+                ))
+              : null}
+          </ul>
+        </h6>
+      </div>
+    </h2>
+  );
+}
+
+export default AutoCompleteText;
diff --git a/src/comp/currentTime.js b/src/comp/currentTime.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment-timezone';
+import AutoCompleteText from './autoCompleteText';
 
 function useTime() {
   const [time, setTime] = React.useState(new Date());
@@ -15,47 +16,39 @@ function useTime() {
 
 function CurrentTime() {
   const now = useTime();
-  const [TZ, setTZ] = React.useState('UTC');
+  const [TZ, setTZ] = React.useState('America/New_York');
   const ISOtime = now.toISOString();
-  const localTZ = moment.tz.guess().replace(/_/g, ' ');
+  const tz = moment.tz.guess();
+  const localTZ = tz.replace(/_/g, ' ');
   const nowMoment = moment(ISOtime);
-  const timezoneList = moment.tz.names();
+  const localAbbr = moment.tz.zone(tz).abbr(nowMoment);
+  const otherAbbr = moment.tz.zone(TZ).abbr(nowMoment);
   return (
-    <>
+    <div className="time-conversion">
       <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>
+          <h2 aria-level="2" id="local-time-lbl">
+            Local time ({localTZ})
+          </h2>
         </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>
+          <AutoCompleteText defaultValue={TZ} changeValue={setTZ} />
         </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 aria-level="4" id="local-time">
+            {nowMoment.tz(localTZ).format('HH:mm:ss MMM DD, YYYY')} ({localAbbr}
+            )
           </h4>
         </div>
         <div className="col" id="converted-time-box">
-          <h4 id="converted-time">
-            {nowMoment.tz(TZ).format('HH:mm:ss MMM DD, YYYY')}
+          <h4 aria-level="4" id="converted-time">
+            {nowMoment.tz(TZ).format('HH:mm:ss MMM DD, YYYY')} ({otherAbbr})
           </h4>
         </div>
       </div>
-    </>
+    </div>
   );
 }