time-convertor-ts

commit 9899cc6535b01a1d03473e551eb3b9be10556d01
parent 4d959f2324a21bd5c0e75c7f6d5bb32560fc55c6
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Mon, 25 May 2020 23:50:28 +0530

refactor

Diffstat:
A
src/App/comps/FutureConverted.tsx
 | 
41
+++++++++++++++++++++++++++++++++++++++++
M
src/App/comps/SavedTimezones.tsx
 | 
2
+-
M
src/App/pages/FutureConversion.tsx
 | 
49
++++---------------------------------------------
M
src/utils/index.ts
 | 
6
+++---

4 files changed, 49 insertions(+), 49 deletions(-)
diff --git a/src/App/comps/FutureConverted.tsx b/src/App/comps/FutureConverted.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import moment from 'moment-timezone';
+
+import { displayTime, friendlyStr, getAbbr } from '../../utils';
+import { HMMDY, HMSDMY } from '../../utils';
+import { IFutureConverted } from '../../utils/interfaces';
+
+function FutureConverted({
+  selectedTime,
+  TZ1,
+  TZ2,
+}: IFutureConverted): JSX.Element {
+  const chosenTime = selectedTime;
+  const convertedTime = selectedTime.clone().tz(TZ2);
+  const fromLbl = getAbbr({ timezone: TZ1, time: moment(chosenTime, HMSDMY) });
+  const toLbl = getAbbr({ timezone: TZ2, time: moment(convertedTime, HMSDMY) });
+  return (
+    <div className="mt-5">
+      <div className="row">
+        <div className="col">
+          <h1>{friendlyStr(TZ1)}</h1>
+        </div>
+        <div className="col">
+          <h1>{friendlyStr(TZ2)}</h1>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          {displayTime({ fmtStr: HMMDY, time: chosenTime, timezone: TZ1 })} (
+          {fromLbl})
+        </div>
+        <div className="col">
+          {displayTime({ fmtStr: HMMDY, time: convertedTime, timezone: TZ2 })} (
+          {toLbl})
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FutureConverted;
diff --git a/src/App/comps/SavedTimezones.tsx b/src/App/comps/SavedTimezones.tsx
@@ -9,7 +9,7 @@ import { ISavedTimezones } from '../../utils/interfaces';
 function SavedTimezones({ time }: ISavedTimezones): JSX.Element {
   const savedZones = getSavedZones();
   return (
-    <div className="Saved">
+    <div className="saved">
       {savedZones.length > 0 ? (
         // @ts-ignore
         <ShowSavedZones savedZones={savedZones} time={time} />
diff --git a/src/App/pages/FutureConversion.tsx b/src/App/pages/FutureConversion.tsx
@@ -1,18 +1,12 @@
 import React from 'react';
 import moment from 'moment-timezone';
 
+import FutureConverted from '../comps/FutureConverted';
 import TimezoneInput from '../comps/TimezoneInput';
 
-import {
-  displayTime,
-  friendlyStr,
-  getAbbr,
-  timezoneList,
-  HMMDY,
-  HMSDMY,
-} from '../../utils';
+import { displayTime, timezoneList } from '../../utils';
 import { HM, MAX_DATE, YMD, localTimezone } from '../../utils';
-import { IFutureConversion, IFutureConverted } from '../../utils/interfaces';
+import { IFutureConversion } from '../../utils/interfaces';
 import ErrorAlert from '../comps/ErrorAlert';
 
 function FutureConversion({
@@ -22,7 +16,6 @@ function FutureConversion({
   TZ1,
   TZ2,
 }: IFutureConversion): JSX.Element {
-  //
   const [date, setDate] = React.useState(
     displayTime({ fmtStr: YMD, time: now, timezone: localTimezone })
   );
@@ -102,7 +95,7 @@ function FutureConversion({
 
   return (
     <div className="container">
-      <form onSubmit={handleFormSubmit}>
+      <form autoComplete="false" onSubmit={handleFormSubmit}>
         <div className="form-group">
           <label htmlFor="choose-date">Choose date</label>
           <input
@@ -169,38 +162,4 @@ function FutureConversion({
   );
 }
 
-function FutureConverted({
-  selectedTime,
-  TZ1,
-  TZ2,
-}: IFutureConverted): JSX.Element {
-  // console.log(selectedTime);
-  const chosenTime = selectedTime;
-  const convertedTime = selectedTime.clone().tz(TZ2);
-  const fromLbl = getAbbr({ timezone: TZ1, time: moment(chosenTime, HMSDMY) });
-  const toLbl = getAbbr({ timezone: TZ2, time: moment(convertedTime, HMSDMY) });
-  return (
-    <div className="mt-5">
-      <div className="row">
-        <div className="col">
-          <h1>{friendlyStr(TZ1)}</h1>
-        </div>
-        <div className="col">
-          <h1>{friendlyStr(TZ2)}</h1>
-        </div>
-      </div>
-      <div className="row">
-        <div className="col">
-          {displayTime({ fmtStr: HMMDY, time: chosenTime, timezone: TZ1 })} (
-          {fromLbl})
-        </div>
-        <div className="col">
-          {displayTime({ fmtStr: HMMDY, time: convertedTime, timezone: TZ2 })} (
-          {toLbl})
-        </div>
-      </div>
-    </div>
-  );
-}
-
 export default FutureConversion;
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -3,10 +3,10 @@ import moment from 'moment-timezone';
 import { IDisplayTime } from '../utils/interfaces';
 
 /**
- * @description clears the localStorage
+ * @description clears the zones in localStorage
  */
 function clearTimezones<never>() {
-  localStorage.clear()
+  localStorage.setItem('zones', '{}')
 }
 
 /**
@@ -41,7 +41,7 @@ function getAbbr({ timezone, time }: { timezone: string, time: moment.Moment }):
 }
 
 /**
- * @description Fetch list of saved time zones from the local Storage
+ * @description Fetch list of saved time zones from the localStorage
  * @returns {string[]} Array of saved time zones
  */
 function getSavedZones<never>(): string[] | [] {