search

DPGAlliance / publicgoods-scripts

Scripts to generate static site from WordPress
http://digitalpublicgoods.net
MIT License
4 stars 6 forks source link

This PR completely refactors the registry page and adds in the view source code. #135

Open seanmarcia opened 1 year ago

seanmarcia commented 1 year ago

This PR resolves #129 and does quite a bit more.

First here is a screen shot showing the View Source Code link. I made the link smaller to not draw attention away from the registry item:

source-code

This link only shows up if the DPG has a defined a respository in the API. If there are multiple repositories, as some have, it takes the first one in the list. On the Delve DPG you can see what it looks like when there is no repository defined:

image

This PR also completely refactors the registry page. I'd appreciate any feedback of where I may have gone in the wrong direction as I don't have a lot of experience with Next.js which you are using on top of React.

I added an additional dependency, React-Collapsible for collapsing the filter sections. I picked this one as it seems to be actively maintained with the last release was in June and it has 99k downloads per week.

At a high level this PR changes the code from using React Class based syntax to using the more modern React Hooks. It also breaks out all the functionality into small components each responsible for their own activity. This will help the future maintenance of the page as well as making it easier to make changes. For example, when adding this View Source Code link we now just need to edit the RegistryName component and not worry about our changes affecting anything else on the page.

Rather than have all the logic in the single file, this image shows how the page has been broken into the various components:

GithubUNindex

This PR also changes how filtering works on the page. Currently the page adds and removes html classes to the various registry items and then looks to see if those classes exist. The code I'm proposing removes all the classes from the html DOM and instead uses React State hooks to store and manage which filters have been checked.

I also added a small svg to the repository for the menu collapse.

Aside from the javascript changes, I also added some css updates to the index.css to handle the filter transitions for when a user uses the collapsing functionality on the filters.

Happy to make any changes you may have. Also I noticed that someone had already broken up and created components with the eligibility page and I followed the same convention of using the same file extension of .js rather than .jsx on components that render html but I'm happy to swap them to .jsx

seanmarcia commented 1 year ago

Hey @nathanfletcher, it looks like the filtering is still broken. This PR fixed that but it fairly out of date now. Would oyu like me to update it for the current site?