Change query param to path param

[mazipan]

Description

Currently, we utilize the query param to differentiate the "kebutuhan" selection.
Since these selections already bring to the main homepage and the menus, I think we need to think to create a separate path URL for this use case:

Sample current condition:

• Donor Plasma for all Provinces: https://www.wargabantuwarga.com/provinces?kebutuhan=Donor%20plasma
• Info Oksigen for all Provinces: https://www.wargabantuwarga.com/provinces?kebutuhan=Oksigen

Expectations

We need to change the query param to path param, e.g:

• Donor Plasma for all Provinces: https://www.wargabantuwarga.com/donor-plasma/
• Info Oksigen for all Provinces: https://www.wargabantuwarga.com/oksigen/

With this implementation, we also open the opportunity to generate spesific province for spesific "kebutuhan", e.g:

• Donor Plasma for DKI Jakarta: https://www.wargabantuwarga.com/donor-plasma/dki-jakarta
• Info Oksigen for DKI Jakarta: https://www.wargabantuwarga.com/oksigen/dki-jakarta

Implementation Model

Still have no idea, but since I guess the logic should be nearly same with the current implementation, maybe need to move the current provinces page logic to the place where we can reuse the logic part.

But ya, for the filters, it need to be re-touched.

Possible benefits

• The URL will be more beautiful, easy to remember.
• The Search Bot can see this page as a new generated content. In the current version, the Bot will not see this page since it already set as a same in term of canonical link.
• User can be more focus to search in one "kebutuhan" without need to see data from the other "kebutuhan"

Tasks

Didn't have any task lists for now, need insight from other contributors.

• ...
• ...
• ...

[ekamuktia]

For this, it's better to save fetch result in another file containing contact list.

If it's in current structure, I made a sample implementation here https://github.com/ekamuktia/wargabantuwarga.com/tree/kebutuhan-slug
It's not really optimized because I need to retrieve contact list by iterating province data.
Also regardless of the structure, interaction on this part needs to be improved

bandicam.2021-07-29.19-27-22-417.mp4

If I choose province, should I change the path? It's still buggy, but in this implementation it's just redirected to new page
Better way will be changing the path but keep the same view with additional lokasi filter showing, but it's not possible with current useSearch implementation (needs to be updated).

If it's using typesense, kebutuhan field needs to be set as faceted. cc @famasya
And for route path, it can be done like this https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/#seo-friendly-urls

[mazipan]

If using current JSON data, yes I also think we need to split the current JSON with a different subset. e.g: All contact data in all provinces, contact data in spesific provinces, contact data for spesific kebutuhan in all provinces, contact data for spesific kebutuhan in specific province, etc.

It will be easier to provide the initial data on the staticProps

[famasya]

Got it, will do it along all updated formats tonight. I'll let you know once it's done @ekamuktia .

[famasya]

All set @ekamuktia . I've also added sortable fields named order in every row as requested in #401 .