Fix european timezones (#130)

* Use eslint for formatting, make AM/PM - 24H bold based on activeness * Fix european time zones * Applied changes after self review
neetohq · Sep 11, 2023 · b4eb7f3 · b4eb7f3
1 parent 0362b3b
commit b4eb7f3
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 90 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": true
 }
diff --git a/data/europe.json b/data/europe.json
@@ -1,31 +1,4 @@
 [
-  {
-    "utc": [
-      "Europe/Belgrade",
-      "Europe/Bratislava",
-      "Europe/Budapest",
-      "Europe/Ljubljana",
-      "Europe/Podgorica",
-      "Europe/Prague",
-      "Europe/Tirane"
-    ],
-    "label": "Central Europe Standard Time",
-    "keywords": "Central Europe Standard Time Belgrade Bratislava Budapest Ljubljana Podgorica Prague Tirane CEST",
-    "isDst": true,
-    "cities": "Belgrade, Bratislava, Budapest, Ljubljana, Podgorica, Prague, Tirane"
-  },
-  {
-    "utc": [
-      "Europe/Sarajevo",
-      "Europe/Skopje",
-      "Europe/Warsaw",
-      "Europe/Zagreb"
-    ],
-    "label": "Central European Standard Time",
-    "keywords": "Central European Standard Time Sarajevo Skopje Warsaw Zagreb CEDT Spain France Italy Germany",
-    "isDst": true,
-    "cities": "Sarajevo, Skopje, Warsaw, Zagreb"
-  },
   {
     "utc": [
       "Europe/London",
@@ -34,63 +7,69 @@
       "Europe/Jersey"
     ],
     "label": "GMT Standard Time",
-    "keywords": "GMT Standard Time Isle of_Man Guernsey Jersey London Edinburgh GST England",
+    "keywords": "GMT Standard Time Isle of_Man Guernsey Jersey London Edinburgh England",
     "isDst": true,
     "cities": "London, Edinburgh, Isle of Man, Guernsey, Jersey"
   },
   {
     "utc": [
+      "WET",
       "Atlantic/Canary",
       "Atlantic/Faeroe",
       "Atlantic/Madeira",
       "Europe/Dublin",
       "Europe/Lisbon"
     ],
-    "label": "GMT Standard Time",
-    "keywords": "GMT Standard Time Canary Faeroe Madeira Dublin Lisbon GST",
+    "label": "Western European Time",
+    "keywords": "WET Western European Time Canary Faeroe Madeira Dublin Lisbon",
     "isDst": true,
     "cities": "Canary, Faeroe, Madeira, Dublin, Lisbon"
   },
   {
     "utc": [
+      "CET",
+      "Africa/Ceuta",
       "Arctic/Longyearbyen",
       "Europe/Amsterdam",
       "Europe/Andorra",
+      "Europe/Belgrade",
       "Europe/Berlin",
+      "Europe/Bratislava",
+      "Europe/Brussels",
+      "Europe/Budapest",
       "Europe/Busingen",
+      "Europe/Copenhagen",
       "Europe/Gibraltar",
+      "Europe/Ljubljana",
       "Europe/Luxembourg",
+      "Europe/Madrid",
       "Europe/Malta",
       "Europe/Monaco",
       "Europe/Oslo",
+      "Europe/Paris",
+      "Europe/Podgorica",
+      "Europe/Prague",
       "Europe/Rome",
       "Europe/San_Marino",
+      "Europe/Sarajevo",
+      "Europe/Skopje",
       "Europe/Stockholm",
+      "Europe/Tirane",
       "Europe/Vaduz",
       "Europe/Vatican",
       "Europe/Vienna",
+      "Europe/Warsaw",
+      "Europe/Zagreb",
       "Europe/Zurich"
     ],
-    "label": "West Europe Standard Time",
-    "keywords": "W. Europe Standard Time Longyearbyen Amsterdam Andorra Berlin Bern Busingen Gibraltar Luxembourg Malta Monaco Oslo Rome San Marino Stockholm Vaduz Vatican Vienna Zurich WEST",
-    "isDst": true,
-    "cities": "Longyearbyen, Amsterdam, Andorra, Berlin, Bern, Busingen, Gibraltar, Luxembourg, Malta, Monaco, Oslo, Rome, San Marino, Stockholm, Vaduz, Vatican, Vienna, Zurich"
-  },
-  {
-    "utc": [
-      "Africa/Ceuta",
-      "Europe/Brussels",
-      "Europe/Copenhagen",
-      "Europe/Madrid",
-      "Europe/Paris"
-    ],
-    "label": "Romance Standard Time",
-    "keywords": "Romance Standard Time Ceuta Brussels Copenhagen Madrid Paris RST",
+    "label": "Central European Time",
+    "keywords": "CET Central European Time Amsterdam Andorra Belgrade Berlin Bern Bratislava Brussels Budapest Busingen Ceuta Copenhagen Gibraltar Ljubljana Longyearbyen Luxembourg Madrid Malta Monaco Oslo Paris Podgorica Prague Rome San Marino Stockholm Tirane Vaduz Vatican Vienna Zurich Spain France Italy Germany",
     "isDst": true,
-    "cities": "Brussels, Copenhagen, Madrid, Paris, Ceuta"
+    "cities": "Amsterdam, Andorra, Belgrade, Berlin, Bern, Bratislava, Brussels, Budapest, Busingen, Ceuta, Copenhagen, Gibraltar, Ljubljana, Longyearbyen, Luxembourg, Madrid, Malta, Monaco, Oslo, Paris, Podgorica, Prague, Rome, San Marino, Stockholm, Tirane, Vaduz, Vatican, Vienna, Zurich"
   },
   {
     "utc": [
+      "EET",
       "Asia/Nicosia",
       "Europe/Athens",
       "Europe/Bucharest",
@@ -106,24 +85,20 @@
       "Europe/Vilnius",
       "Europe/Zaporozhye"
     ],
-    "label": "East Europe Standard Time",
-    "keywords": "East E. Europe Standard Time Nicosia Athens Bucharest Chisinau Helsinki Kiev Mariehamn Nicosia Riga Sofia Tallinn Uzhgorod Vilnius Zaporozhye EEST",
+    "label": "Eastern European Time",
+    "keywords": "Eastern European Time Athens Bucharest Chisinau Helsinki Kiev Mariehamn Nicosia Riga Sofia Tallinn Uzhgorod Vilnius Zaporozhye EEST",
     "isDst": true,
-    "cities": "Nicosia, Athens, Bucharest, Chisinau, Helsinki, Kiev, Mariehamn, Nicosia, Riga, Sofia, Tallinn, Uzhgorod, Vilnius, Zaporozhye"
+    "cities": "Athens, Bucharest, Chisinau, Helsinki, Kiev, Mariehamn, Nicosia, Riga, Sofia, Tallinn, Uzhgorod, Vilnius, Zaporozhye"
   },
   {
-    "utc": [
-      "Europe/Istanbul"
-    ],
+    "utc": ["Europe/Istanbul"],
     "label": "Turkey Standard Time",
     "keywords": "Turkey Standard Time Istanbul TST",
     "isDst": false,
     "cities": "Istanbul"
   },
   {
-    "utc": [
-      "Europe/Kaliningrad"
-    ],
+    "utc": ["Europe/Kaliningrad"],
     "label": "Kaliningrad Standard Time",
     "keywords": "Kaliningrad Standard Time Kaliningrad KST",
     "isDst": false,
@@ -143,11 +118,7 @@
     "cities": "Moscow, St. Petersburg, Volgograd, Minsk, Kirov"
   },
   {
-    "utc": [
-      "Europe/Astrakhan",
-      "Europe/Samara",
-      "Europe/Ulyanovsk"
-    ],
+    "utc": ["Europe/Astrakhan", "Europe/Samara", "Europe/Ulyanovsk"],
     "label": "Samara Time",
     "keywords": "Samara Time Astrakhan Samara Ulyanovsk ST",
     "isDst": false,

diff --git a/js/index.html b/js/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,7 +7,7 @@
   </head>
   <body>
     <div>
-      <div id="element"></div>
+      <div id="element" style="display: inline-block; width: 500px"></div>
     </div>
     <script type="module" src="/timezone-selector-plugin/index.tsx"></script>
     <script type="module" src="/timezone-selector-plugin/dev.ts"></script>

diff --git a/js/timezone-selector-plugin/selector/OptionsContainer.jsx b/js/timezone-selector-plugin/selector/OptionsContainer.jsx
@@ -23,7 +23,7 @@ function OptionsContainer({
       <Search {...{ elementId, searchInput, setSearchInput }} />
       <div className="flex items-center justify-between w-full pb-2 pr-4 mb-1 shadow-sm gap-x-4">
         <span />
-        <Switch defaultValue={is24H} labelRight="24h" labelLeft="AM/PM" onChange={handleTimeFormatChange} />
+        <Switch defaultValue={is24H} labelRight="24H" labelLeft="AM/PM" onChange={handleTimeFormatChange} />
       </div>
       <Options {...{
         elementId, searchInput, selectedValue, setSelectedValue, setIsOverlayVisible, is24H,

diff --git a/js/timezone-selector-plugin/selector/Search/utils.js b/js/timezone-selector-plugin/selector/Search/utils.js
@@ -7,11 +7,10 @@ export const filterTimezones = (inputValue) => {
 
   const filteredOptions = groupedOptions.map((group) => {
     const key = Object.keys(group)[0];
-    const element = group[key]
-      .filter(
-        (timezone) => timezone.label.toLowerCase().includes(inputValue.toLowerCase())
-          || timezone.keywords.toLowerCase().includes(inputValue.toLowerCase()),
-      );
+    const element = group[key].filter(
+      (timezone) => timezone.label.toLowerCase().includes(inputValue.toLowerCase())
+        || timezone.keywords.toLowerCase().includes(inputValue.toLowerCase()),
+    );
 
     return element.length > 0 ? { [key]: element } : null;
   });

diff --git a/js/timezone-selector-plugin/selector/commons/Button.jsx b/js/timezone-selector-plugin/selector/commons/Button.jsx
@@ -34,32 +34,32 @@ function Button({
 
   return (
     <button
-      {... {
-        id, key, onClick, value,
+      {...{
+        id,
+        key,
+        onClick,
+        value,
       }}
       className={`flex items-center gap-2 py-2 text-md ${customClass}`}
       type="submit"
     >
-      <span className="min-w-0 text-left break-words grow">
-        {hideCitiesTooltip
-          ? (label) : (
-            <span
-              value={value}
-              title={cities}
-            >
-              {label}
-            </span>
-          )}
+      <div className="min-w-0 text-left break-words grow flex space-x-1">
+        {hideCitiesTooltip ? (
+          label
+        ) : (
+          <span value={value} title={cities}>
+            {label}
+          </span>
+        )}
         {isDst && (
-          <span
-            value={value}
-            title="Daylight saving time applicable"
-          >
+          <span value={value} title="Daylight savings time applicable">
             &#127774;
           </span>
         )}
+      </div>
+      <span className="flex items-center shrink-0">
+        {getCurrentTimeInTimezone(timezone.utc[0])}
       </span>
-      <span className="flex items-center shrink-0">{getCurrentTimeInTimezone(timezone.utc[0])}</span>
       {children}
     </button>
   );

diff --git a/js/timezone-selector-plugin/selector/commons/Switch.jsx b/js/timezone-selector-plugin/selector/commons/Switch.jsx
@@ -1,23 +1,40 @@
 import { h } from "preact";
+import { useState } from "preact/hooks";
 
 function Switch({
   id = "ntsp-switch",
-  onChange = (value) => { },
+  onChange = () => {},
   labelRight = "Toggle switch",
   labelLeft = "Toggle switch",
   defaultValue = false,
 }) {
+  const [isChecked, setIsChecked] = useState(defaultValue);
+
+  const labelLeftBold = !isChecked && "font-semibold";
+  const labelRightBold = isChecked && "font-semibold";
+
+  const handleChange = ({ target: { checked } }) => {
+    setIsChecked(checked);
+    onChange(checked);
+  };
+
   return (
     <label htmlFor={id} className="flex items-center space-x-1 cursor-pointer">
-      <span className="ml-3 text-sm text-gray-700">
+      <span className={`ml-3 text-sm text-gray-700 ${labelLeftBold}`}>
         {labelLeft}
       </span>
       <span className="relative">
-        <input type="checkbox" id={id} className="sr-only" checked={defaultValue} onChange={(e) => onChange(e.target.checked)} />
+        <input
+          type="checkbox"
+          id={id}
+          className="sr-only"
+          checked={isChecked}
+          onChange={handleChange}
+        />
         <span className="block w-10 h-6 bg-gray-600 rounded-full" />
         <span className="absolute w-4 h-4 transition bg-white rounded-full dot left-1 top-1" />
       </span>
-      <span className="ml-3 text-sm text-gray-700">
+      <span className={`ml-3 text-sm text-gray-700 ${labelRightBold}`}>
         {labelRight}
       </span>
     </label>