From 6e78330a9b41e4c3c22315316127aeb9fbe451a1 Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Tue, 17 Oct 2023 15:45:01 +0300 Subject: [PATCH 1/5] added formatted timezones to the dropdown --- apps/web/lib/settings/timezone-dropdown.tsx | 24 ++++++++++++++++++++- apps/web/package.json | 1 + yarn.lock | 7 ++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/apps/web/lib/settings/timezone-dropdown.tsx b/apps/web/lib/settings/timezone-dropdown.tsx index 7545c7c15..18f0d8e00 100644 --- a/apps/web/lib/settings/timezone-dropdown.tsx +++ b/apps/web/lib/settings/timezone-dropdown.tsx @@ -4,6 +4,7 @@ import timeZones from './timezones'; import { mapTimezoneItems, TimezoneItem } from 'lib/features'; import { useTimezoneSettings } from '@app/hooks'; import { clsxm } from '@app/utils'; +import moment from 'moment-timezone'; export const TimezoneDropDown = ({ currentTimezone, @@ -14,7 +15,28 @@ export const TimezoneDropDown = ({ }) => { const { activeTimezone, setActiveTimezone } = useTimezoneSettings(); - const timeZonesMap: string[] = timeZones; // TODO: we should import here from timeZones + const allTimezonesNames = moment.tz.names(); + const allTimezonesWithUTC = allTimezonesNames.map((item) => { + const offset = moment.tz(item).format('Z'); + return { name: item, offset: offset }; + }); + + allTimezonesWithUTC.sort((a, b) => { + // Compare the offsets for sorting + if (a.offset < b.offset) { + return -1; + } + if (a.offset > b.offset) { + return 1; + } + return 0; + }); + + const sortedTimezones = allTimezonesWithUTC.map( + (item) => `${item.name} (UTC ${item.offset})` + ); + + const timeZonesMap: string[] = sortedTimezones; // TODO: we should import here from timeZones const items = useMemo(() => mapTimezoneItems(timeZonesMap), [timeZonesMap]); diff --git a/apps/web/package.json b/apps/web/package.json index 0e1054867..589bc176d 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -52,6 +52,7 @@ "lodash": "^4.17.21", "lucide-react": "^0.263.1", "moment": "^2.29.4", + "moment-timezone": "^0.5.42", "nanoid": "5.0.1", "next": "^13.0.5", "next-themes": "^0.2.1", diff --git a/yarn.lock b/yarn.lock index 094079cee..4cc62a858 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14470,6 +14470,13 @@ module-deps@^6.2.3: through2 "^2.0.0" xtend "^4.0.0" +moment-timezone@^0.5.42: + version "0.5.43" + resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.43.tgz#3dd7f3d0c67f78c23cd1906b9b2137a09b3c4790" + integrity sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ== + dependencies: + moment "^2.29.4" + moment@^2.19.3, moment@^2.29.4: version "2.29.4" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" From 69855a6e0011a462f5c36e1fc3cf07cd9f9134e4 Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Tue, 17 Oct 2023 15:54:23 +0300 Subject: [PATCH 2/5] updated the time zone detecting function --- apps/web/app/helpers/date.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/app/helpers/date.ts b/apps/web/app/helpers/date.ts index 250620895..1acc1577f 100644 --- a/apps/web/app/helpers/date.ts +++ b/apps/web/app/helpers/date.ts @@ -1,4 +1,5 @@ import moment from 'moment'; +import * as momentTimezone from 'moment-timezone'; const months: { [key: string]: string } = { '01': 'January', @@ -28,7 +29,10 @@ export function changeTimezone(date: Date, ianatz?: string) { } export function userTimezone() { - return Intl.DateTimeFormat().resolvedOptions().timeZone; + const userTimezone = momentTimezone.tz.guess(); + const offset = momentTimezone.tz(userTimezone).format('Z'); + const formattedTimezone = `${userTimezone.replace(/_/, ' ')} (UTC ${offset})`; + return formattedTimezone; } export function addHours(numOfHours: number, date = new Date()) { From 3186a672f38e5bb4ba5f723d1c066e64cfffd1b0 Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Tue, 17 Oct 2023 16:57:19 +0300 Subject: [PATCH 3/5] added search bar to the time zone dropdown --- apps/web/lib/components/dropdown.tsx | 21 +++++++++++++++++++-- apps/web/lib/settings/timezone-dropdown.tsx | 9 +++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx index fba4633b8..d4b9d79af 100644 --- a/apps/web/lib/components/dropdown.tsx +++ b/apps/web/lib/components/dropdown.tsx @@ -27,6 +27,8 @@ type Props = { publicTeam?: boolean; closeOnChildrenClick?: boolean; cardClassName?: string; + searchBar?: boolean; + setSearchText?: React.Dispatch>; } & PropsWithChildren; export function Dropdown({ @@ -40,7 +42,9 @@ export function Dropdown({ buttonStyle, optionsClassName, publicTeam, - closeOnChildrenClick = true + closeOnChildrenClick = true, + searchBar = false, + setSearchText }: Props) { return (
@@ -100,10 +104,23 @@ export function Dropdown({ + {searchBar && ( +
+ setSearchText(e.target.value)) + } + /> +
+ )} + {items.map((Item, index) => ( { const { activeTimezone, setActiveTimezone } = useTimezoneSettings(); + const [searchText, setSearchText] = useState(''); const allTimezonesNames = moment.tz.names(); const allTimezonesWithUTC = allTimezonesNames.map((item) => { @@ -36,7 +37,9 @@ export const TimezoneDropDown = ({ (item) => `${item.name} (UTC ${item.offset})` ); - const timeZonesMap: string[] = sortedTimezones; // TODO: we should import here from timeZones + const timeZonesMap: string[] = sortedTimezones.filter((item) => + item.toLowerCase().includes(searchText.toLowerCase()) + ); const items = useMemo(() => mapTimezoneItems(timeZonesMap), [timeZonesMap]); @@ -62,6 +65,8 @@ export const TimezoneDropDown = ({ return ( Date: Tue, 17 Oct 2023 17:06:06 +0300 Subject: [PATCH 4/5] updated dark theme color of input --- apps/web/lib/components/dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx index d4b9d79af..a92239ba1 100644 --- a/apps/web/lib/components/dropdown.tsx +++ b/apps/web/lib/components/dropdown.tsx @@ -113,7 +113,7 @@ export function Dropdown({
setSearchText(e.target.value)) } From eac44484a6d45751b83c639d5fab155c58536e1b Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Tue, 17 Oct 2023 17:49:08 +0300 Subject: [PATCH 5/5] added the search bar placeholder to translations file --- apps/web/lib/components/dropdown.tsx | 6 +++++- apps/web/lib/i18n/en.ts | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx index a92239ba1..e896dce9a 100644 --- a/apps/web/lib/components/dropdown.tsx +++ b/apps/web/lib/components/dropdown.tsx @@ -5,6 +5,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'; import { Card } from './card'; import { SpinnerLoader } from './loader'; import { IClassName } from '@app/interfaces'; +import { useTranslation } from 'lib/i18n'; export type DropdownItem> = { key: React.Key; @@ -46,6 +47,7 @@ export function Dropdown({ searchBar = false, setSearchText }: Props) { + const { trans } = useTranslation(); return (
@@ -112,7 +114,9 @@ export function Dropdown({ {searchBar && (
setSearchText(e.target.value)) diff --git a/apps/web/lib/i18n/en.ts b/apps/web/lib/i18n/en.ts index 4243f6152..c189ce11a 100644 --- a/apps/web/lib/i18n/en.ts +++ b/apps/web/lib/i18n/en.ts @@ -221,7 +221,8 @@ export const en = { SUBSCRIPTION: 'Subscription', ABOUT_TO_CHANGE_EMAIL: 'You are about to change Email', ABOUT_TO_DELETE_ACCOUNT: 'You are about to Delete your account ?', - ABOUT_TO_REMOVE_ACCOUNT: 'You are about to Remove your account ?' + ABOUT_TO_REMOVE_ACCOUNT: 'You are about to Remove your account ?', + TIMEZONE_SEARCH_PLACEHOLDER: 'Search Time Zone' }, settingsTeam: { HEADING_TITLE: 'General Settings',