react-timezone-select: add popular cities for each timezone

[PeerRich]

based on: https://twitter.com/peer_rich/status/1531906849733222400

lets use:
https://github.com/ndom91/react-timezone-select#-custom-timezones

to add cities such as San Francisco => PT, etc.

csvData.csv

[PeerRich]

found this resource too: https://www.zeitverschiebung.net/en/all-time-zones.html

[Toledodev]

i will take a look on this :)

[Toledodev]

you mean this?

or just use as a filter?

[PeerRich]

you mean this?

or just use as a filter?

the dropdown should still have the default ones, but the autocomplete should search and find popular cities

[Toledodev]

Okay, i will try

[Toledodev]

In the library there is no kind of filter or key that refers to the capital or if the city is "popular". Until now if I type the name of the city the corresponding timezone is selected, but not rendered in the options

[Toledodev]

Can I make all cities matching the input search be rendered in the options? as the user types more characters the options will decrease

[Toledodev]

Please check my video 👍
https://www.loom.com/share/3fc511af5e4c4fb68946d85e2a0286ee

[PeerRich]

Please check my video 👍

https://www.loom.com/share/3fc511af5e4c4fb68946d85e2a0286ee

is it possible to show the city in the dropdown when typing?

[Toledodev]

Hey @PeerRich . there is no way to render the cities (or the corresponding timezones) in the dropdown without rendering it again
I was able to make it switch to the right timezone without being rendered on the dropdown (as I showed in a video above) and I was able to show the corresponding timezones when the dropdown is rendered again (https://www.loom.com/share/5d14b40950ef4c94b691d3efb37ef95e)

[Toledodev]

The console on loom video shows the filtered object (with the input value)

[Toledodev]

I opened an issue in the react time zone select repository, suggesting this feature, as they only provide the date with the timezones, without having cities to filter. When trying to make the relationship between react-timezone-select and city-timezones(library I used) I realized that react-timezone-select doesn't accept timezones different from theirs suggesting this feature

[Toledodev]

hey @PeerRich, as you can see there is no dynamic way to filter and render the desired cities
ndom91/react-timezone-select#71

[aar2dee2]

@PeerRich
I'm planning to add cities from this Kaggle database directly to the declared time-zones list in react-timezone-select. Here's a snapshot of the data in Kaggle:

Is it better to include the city names or city_ascii names?

[aar2dee2]

update: just read the discussion here. Happy to work with @Toledodev / others if we have consensus on the dataset to be used.

[PeerRich]

update: just read the discussion here. Happy to work with @Toledodev / others if we have consensus on the dataset to be used.

awesome yeah lets work in that repo 🙏

[aar2dee2]

Hey @Toledodev if you have a fork for react-timezone-select that you're adding the cities in, could you add me as collaborator?

[Toledodev]

Hi @aar2dee2, I am at an internship program at GitStart, we forked privately and will push as a company when it is ready, but we can push work in progress if u want too
Initially, I am thinking on just adding a new prop called “extraLabels” that will send which other labels we want and match the already existing timezones