commit 78612fe68242d0e9ae9348f14933faf91a7b4f11
parent 828f256b2f3f27142a4754fa59cae9969d1e62f1
Author: Agastya Chandrakant <acagastya@outlook.com>
Date: Mon, 25 May 2020 18:19:18 +0530
fix manifest; add emoji; move router; new interface; getabbr; optional clearInput; help; working header
Diffstat:
9 files changed, 121 insertions(+), 17 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -2,13 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
- <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
- <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
+
<link
rel="stylesheet"
href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
/>
+ <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
+ <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+ <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
diff --git a/public/manifest.json b/public/manifest.json
@@ -4,7 +4,7 @@
"icons": [
{
"src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
+ "sizes": "256x256",
"type": "image/x-icon"
},
{
diff --git a/src/App/comps/Header.tsx b/src/App/comps/Header.tsx
@@ -1,10 +1,44 @@
import React from 'react';
+import { Link } from 'react-router-dom';
function Header<never>(): JSX.Element {
return (
- <header className="border-bottom page-header mt-3 mb-5">
- <h1>time-convertor</h1>
- </header>
+ <nav className="bg-danger mb-5 navbar navbar-dark navbar-expand-lg">
+ <Link className="navbar-brand" to="/">
+ <span aria-label="time convertor" role="img">
+ {new Date().getMinutes() % 2 ? '⏳' : '⌛️'}
+ </span>{' '}
+ time convertor
+ </Link>
+ <button
+ aria-label="Toggle navigation"
+ className="navbar-toggler"
+ data-toggle="collapse"
+ data-target="#collapsibleNavbar"
+ type="button"
+ >
+ <span className="navbar-toggler-icon"></span>
+ </button>
+ <div className="collapse navbar-collapse" id="collapsibleNavbar">
+ <ul className="navbar-nav">
+ <li className="nav-item">
+ <Link className="nav-link" to="/help">
+ Help
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/future">
+ Future
+ </Link>
+ </li>
+ <li className="nav-item">
+ <Link className="nav-link" to="/from-to">
+ From-to
+ </Link>
+ </li>
+ </ul>
+ </div>
+ </nav>
);
}
diff --git a/src/App/comps/SavedTimezones.tsx b/src/App/comps/SavedTimezones.tsx
@@ -18,7 +18,10 @@ function SavedTimezones({ time }: ISavedTimezones): JSX.Element {
className="border-top mt-5 text-center"
style={{ paddingTop: '1rem' }}
>
- You haven't saved any timezones so far.
+ You haven't saved any timezones so far.{' '}
+ <span aria-label="Saved list is empty." role="img">
+ 😅
+ </span>
</h5>
)}
</div>
diff --git a/src/App/comps/TimezoneInput.tsx b/src/App/comps/TimezoneInput.tsx
@@ -9,6 +9,7 @@ import { ITimezoneInput } from '../../utils/interfaces';
function TimezoneInput({
autofocus = false,
changeValue,
+ clearInput,
id = '',
placeholder = 'Time zone',
TZ = 'UTC',
@@ -30,6 +31,7 @@ function TimezoneInput({
function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
const { value } = e.target;
+ if (clearInput) clearInput(undefined);
setInputValue(value);
let recommendations: string[] | [] = [];
diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -17,10 +17,14 @@ function App<never>(): JSX.Element {
const [timezone2, setTimezone2] = React.useState(localTimezone);
return (
- <div className="container-fluid">
- <Header />
- <Router>
+ <Router>
+ <div
+ className="container-fluid"
+ style={{ paddingLeft: 0, paddingRight: 0 }}
+ >
+ <Header />
<Switch>
+ <Route path="/help" render={() => <Help time={now} />} />
<Route
path="/from-to"
render={() => (
@@ -33,7 +37,6 @@ function App<never>(): JSX.Element {
/>
)}
/>
- <Route component={Help} path="/help" />
<Route
path="/"
render={() => (
@@ -45,9 +48,9 @@ function App<never>(): JSX.Element {
)}
/>
</Switch>
- </Router>
- <Footer />
- </div>
+ <Footer />
+ </div>
+ </Router>
);
}
diff --git a/src/App/pages/Help.tsx b/src/App/pages/Help.tsx
@@ -1,7 +1,50 @@
import React from 'react';
+import { Link } from 'react-router-dom';
-function Help<never>(): JSX.Element {
- return <div className="container">This is help</div>;
+import { IMoment } from '../../utils/interfaces';
+
+import { getAbbr } from '../../utils';
+import { localTimezone } from '../../utils';
+
+function Help({ time }: IMoment): JSX.Element {
+ return (
+ <div className="container">
+ <ol>
+ <li>
+ Use the <Link to="/">homepage</Link> to convert your{' '}
+ <span className="font-weight-bold">current time</span> (
+ {getAbbr({ time, timezone: localTimezone })}) to other timezone.
+ </li>
+ <li>
+ Use the <Link to="/future">/future</Link> to convert a{' '}
+ <span className="font-weight-bold">future date</span> between
+ different timezones.
+ </li>
+ <li>
+ Use the <Link to="/from-to">/from-to</Link> to convert{' '}
+ <span className="font-weight-bold">current time</span> between
+ different timezones.
+ </li>
+ <li>
+ You can <span className="font-weight-bold">save</span> the converted
+ timezones, by clicking the "Save" button.
+ <ul className="list">
+ <li>
+ An ascending order list of converted time zones appear at the
+ bottom.
+ </li>
+ <li>
+ If you wish to clear all the saved time zones, press "Clear All".
+ </li>
+ <li>
+ If you wish to delete an individual timezone, you can delete from
+ the list by.
+ </li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ );
}
export default Help;
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -29,6 +29,18 @@ function friendlyStr(str: string): string {
}
/**
+ *
+ * @param timezone {string} Time zone string
+ * @param time {moment.Moment} moment object
+ * @returns {string}
+ * @description Obtain the abbreviation of a timezone
+ */
+function getAbbr({ timezone, time }: { timezone: string, time: moment.Moment }): string {
+ // @ts-ignore
+ return moment.tz.zone(timezone).abbr(time.unix());
+}
+
+/**
* @description Fetch list of saved time zones from the local Storage
* @returns {string[]} Array of saved time zones
*/
@@ -83,6 +95,7 @@ export {
clearTimezones,
displayTime,
friendlyStr,
+ getAbbr,
getSavedZones,
removeTimeZone,
saveTimezones,
diff --git a/src/utils/interfaces.tsx b/src/utils/interfaces.tsx
@@ -14,6 +14,10 @@ export interface IDisplayTime {
timezone: string;
}
+export interface IMoment {
+ time: moment.Moment;
+}
+
export interface ISavedTimezones {
time: moment.Moment;
}
@@ -32,6 +36,7 @@ export interface ISimpleConvertor {
export interface ITimezoneInput {
autofocus: boolean;
changeValue: React.Dispatch<React.SetStateAction<string>>;
+ clearInput?: Function;
id: string;
placeholder: string;
TZ: string;
