time-convertor-ts

commit ce64d574e3705a1f8cb11d313ad68fc268ab8595
parent fe740f14d4f41338ad5acaf1b229b2f3ca45e4f3
Author: Agastya Chandrakant <acagastya@outlook.com>
Date:   Sun, 11 Oct 2020 21:39:45 +0530

Add a countdown

Diffstat:
M
package.json
 | 
1
+
M
src/App/comps/TimezoneInput.tsx
 | 
7
++-----
M
src/App/pages/UNIXTime.tsx
 | 
9
++++++++-
M
yarn.lock
 | 
7
+++++++

4 files changed, 18 insertions(+), 6 deletions(-)
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@testing-library/user-event": "^7.1.2",
     "moment-timezone": "^0.5.31",
     "react": "^16.13.1",
+    "react-countdown": "^2.2.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
diff --git a/src/App/comps/TimezoneInput.tsx b/src/App/comps/TimezoneInput.tsx
@@ -15,7 +15,7 @@ function TimezoneInput({
   TZ = "UTC",
 }: ITimezoneInput): JSX.Element {
   const options = timezoneList;
-  const [suggestions, setSuggestions] = React.useState<string[] | []>([]);
+  const [suggestions, setSuggestions] = React.useState<string[]>([]);
   const [inputValue, setInputValue] = React.useState(friendlyStr(TZ));
   const [style, setStyle] = React.useState<object>({
     border: 0,
@@ -110,10 +110,7 @@ function TimezoneInput({
       >
         <div className="h6 mb-0">
           <ul className="list-group text-left">
-            {
-              // @ts-ignore don't know why ts is complaining about this
-              suggestions.length > 0 ? suggestions.map(showLI) : null
-            }
+            {suggestions.length > 0 ? suggestions.map(showLI) : null}
           </ul>
         </div>
       </div>
diff --git a/src/App/pages/UNIXTime.tsx b/src/App/pages/UNIXTime.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import moment from "moment-timezone";
 import { Link } from "react-router-dom";
+import Countdown from "react-countdown";
 
 import { basePath, localTimezone } from "../../utils";
 import TimezoneInput from "../comps/TimezoneInput";
@@ -51,7 +52,13 @@ function UNIXTime(): JSX.Element {
         <button className="btn btn-primary mb-5 mt-3" onClick={handleClick}>
           Change
         </button>
-        <p className="mb-5 mt-5"></p>
+        <h2 className="mb-2 mt-2">
+          {isWas === "is" ? (
+            <Countdown date={timestamp} />
+          ) : (
+            "The event has commenced."
+          )}
+        </h2>
         <Link
           className="btn btn-info mt-5"
           role="button"
diff --git a/yarn.lock b/yarn.lock
@@ -8836,6 +8836,13 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-countdown@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.2.2.tgz#c783fc3cad1699ac08e018c6da10da7cb6641f46"
+  integrity sha512-L/6mxoLBpGZY/97V883n9ZcDdkAxKjC1D9LQC73IVplwKw7U4UHkia8KvXp0vOPXnBf4gt5tgU5lGFeBcutWlQ==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"