News List

[Woozl]

Important

As the tag endpoint is still finalized, you currently need to use a plugin like ModHeader to allow the client to access api.renci.org/graphql, by providing a Strapi API token in the Authorization header:

"Authorization": "Bearer <API_TOKEN>"

I think we'll want to wait until that endpoint is finalized before merging this, but we can go ahead testing this UI in the meantime.

features:

• state in query params
• tag + article fetches on client side
• skeleton loaders for tag + article fetches
• error message component (not currently implemented for tag fetch until endpoint is ready)
• url+query param caching with SWR (not currently implemented for tag fetch until endpoint is ready)
• pagination
• clickable tags in article preview
• custom tags for arbitrary text to search the article title and slugs
• custom tags matches are highlighted in article preview
• filter drawer when in mobile view
• message when there are no article results
• sorted tags in autocomplete (AC) and filter list
• tags are colored according to type
• filtered searching with highlighting when searching through tags in AC
• clear all button to remove all filters

Waterfall skeleton loaders, query params, custom search with highlighted titles, pagination:

Screen.Recording.2023-11-10.at.12.48.04.PM.mov

Clickable tags, using browser back button to update to move state back, going back has no loader as the request has been cached:

Screen.Recording.2023-11-10.at.12.49.50.PM.mov

Mobile view, drawer opened by button with badge showing number of active filters, "no results" text:

Screen.Recording.2023-11-10.at.12.53.51.PM.mov

[mbwatson]

this is awesome, David. this has the features we're after and the implementation is solid. if there was a place to call out that has the most room for improvement, i'd say it's news/index.js, purely because there's a lof of functionality baked into the page component. i think long-term maintenance would be easier if the business logic for the query params/tags was extracted to its own hook, like useQueryTags or similar.

in any event, this is all great 👍. i left a few nitpicky comments, but nothing that absolutely needs to be changed before merging. i know this feature will continue to see activity as other things fall into place.

[mbwatson]

should this be FeatureOrBlogToggle or BlogOrFeatureToggle? perhaps better would be to not bake the options into the function name. i'd suggest something a bit more generic, like ArticleTypeToggle or something similar.