Provinces page enhancements

[zainfathoni]

Overview

Since we have finished our basic functionalities for the Provinces page, we need to enhance them into our users' best possible experience.

Current Tasks

UI/UX

• Implement a dropdown filter based on Kebutuhan #112
• Implement a dropdown filter based on Lokasi #113
• Sort the Contact List by Penyedia alphabetically ascending #133
• Sort the Contact List by prioritizing the verified contacts over unverified ones #131
• Implement global navigation to replace the image header #122
• Implement a ReportButton in each Contact field #129
• Update the query params according to the the filter changes so the search result is shareable through the URL #152
• Reduce the clickable area of the contact item so users can select & copy the Kontak & Alamat from the list view #156
• Provide a Copy to Clipboard button for Kontak & Alamat fields in the list view #157
• Change the default sort on the first load of ProvincePage from Nama into Terverifikasi #164
• Data - Double DKI Jakarta #208
• Fix UX writing for loading state #222
• Search issue in Province Page #231
• Simplify search + filter UI #244
• Fix getKebabCase() implementation #294
• Total count showing a wrong number when query param kebutuhan exist #581
• Need to fix typo and options in province location #648
• Font size on label filters are not same with the search label #583
• Address and Copy Button are too close #584

Performance

• Use a proper client-side search engine library to power the search functionality in our pages #111
• Explore using covid.yapie.me as the backend #137

SEO

• SEO Improvement for Province & Contact Pages #115
• Change query param to path param #486

Code Structure

• Migrate /fetchers/*.js files to TypeScript so we can share codes with the /lib/*.ts ones #144

Questionable

With #374 coming, I'm wondering whether we still need these two issues implemented

• Implement virtualization for list views #125
• Refactor use-search to use a properly-typed fuzzy-search library #197

[baraeb92]

Wishing the following enhancement as well:

1. Sort by alpabhetical order
2. Search or Filter by Category
3. Button for direction and call directly from the list.

[baraeb92]

Something like this

[aldiharyo]

Setelah filter by kota, next stepnya filter based on needs seperti di https://indiacovidresources.in itu. Saya lihat sudah ada tiketnya by category itu yang seperti ini bukan?

[zainfathoni]

No, it's not. What I meant in #112 is a dropdown filter like this:

If we want to have a different experience like that, I think it is worth a separate issue due to its complexity. 😁
And I think it's better to wait for the final UI/UX design from Mas @baraeb92 & Mas Momo.

[zainfathoni]

With #374 coming, I'm wondering whether we still need #125 & #197 implemented. 🤔

Any opinions, @kawalcovid19/wbw?

[ekafyi]

🤔 I have no real-world experience with this tbh, but the new typesense will enable us to fetch in paginated batch (eg. 30 first items, next 30 items, etc), is that correct? In that case IMO we won't need virtualized lists.

[zainfathoni]

🤔 I have no real-world experience with this tbh, but the new Typesense will enable us to fetch in paginated batch (eg. 30 first items, next 30 items, etc), is that correct? In that case, IMO we won't need virtualized lists.

What do you think, Mas @famasya?
Typesense provides proper pagination, doesn't it?

[famasya]

🤔 I have no real-world experience with this tbh, but the new Typesense will enable us to fetch in paginated batch (eg. 30 first items, next 30 items, etc), is that correct? In that case, IMO we won't need virtualized lists.

What do you think, Mas @famasya?
Typesense provides proper pagination, doesn't it?

Yes, mas @zainfathoni it provides decent pagination as described here. FYI, it also provides federated search (search over multiple indices at once) to reduce round-trip latency.