feat(announcements): page timeline in announcements component#459
feat(announcements): page timeline in announcements component#459anabaarbosa wants to merge 7 commits into
Conversation
…ng and year-based timeline
… filtering and year-based timeline" This reverts commit f6ffa2a.
…in announcement components
✅ Deploy Preview for leafy-mooncake-7c2e5e ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
A few additions in this PR don't appear to be referenced anywhere — they'll become dead code on
The two unrelated fixes inside |
|
|
||
| useEffect(() => { | ||
| setPage({ | ||
| curr: 1, | ||
| total: Math.ceil(filteredResult.length / itemsPerPage), | ||
| }) | ||
| }, [filteredResult]) | ||
| /** Lista após filtros — agrupamento só por ano (changelog). */ | ||
| const timelineAnnouncements = useMemo( | ||
| () => | ||
| filteredResult.map((announcement) => ({ | ||
| title: announcement.title, | ||
| publishedAt: new Date(announcement.createdAt), | ||
| articleLink: announcement.url, | ||
| synopsis: announcement.synopsis, | ||
| tags: announcement.tags, | ||
| })), | ||
| [filteredResult] | ||
| ) | ||
|
|
||
| const paginatedResult = useMemo(() => { | ||
| return filteredResult.slice( | ||
| (page.curr - 1) * itemsPerPage, | ||
| page.curr * itemsPerPage | ||
| ) | ||
| }, [page, filteredResult]) | ||
| const timelineByYear = useMemo(() => { | ||
| type TimelineItem = { | ||
| title: string | ||
| publishedAt: Date | ||
| articleLink: string | ||
| synopsis?: string | ||
| tags?: string[] | ||
| } | ||
|
|
||
| const bucket = new Map<string, TimelineItem[]>() |
There was a problem hiding this comment.
With pagination gone, the page now mounts every PUBLISHED/CHANGED announcement into the DOM on first paint (no virtualization). Announcements are append-only content, so this list only grows over time.
I am not sure this is the UX we want and maybe this will also impact performance over time. If you choose to merge this PR without addressing this, please create a github issue in this repo to 'restore announcements page pagination'.
There was a problem hiding this comment.
I chose to implement incremental disclosure as in the developers, but I left an issue open.
There was a problem hiding this comment.
Thanks for the timeline UX work — the new layout is solid and centralizing the tag→color mapping in announcementTypeTags.ts is a nice cleanup.
Requesting changes for a few things before merge — left inline comments with details:
- Blocking: a meaningful amount of dead code (unused new util files, an unused i18n key in each locale, and 6 new optional props on
AnnouncementTimelineCardwhose new render branch is unreachable). See the general comment. - Suggestions: silent color regression on the
Deprecationtag (pink → gray on the existing landing-page card too); accessibility issue with the title<a>nested inside arole="button"row; and a heads-up that removing pagination renders the full announcements list unbounded. - Nits: hardcoded hex colors instead of theme tokens; PT-only code comments in the new styles files.
Remove unused helpers (capitalizeMonthHeading, getAnnouncementTypeKey), the unreferenced announcement_timeline.default_type message, and the unreachable card-like branch/props from AnnouncementTimelineCard. Revert typeTagsByLocale to a private const. Keep the key and isNew upper-bound fixes.
# Conflicts: # src/components/announcement-card/index.tsx
What is the purpose of this pull request?
Update to the Announcements homepage: now displays a single list with filters and search, grouped by year, with a changelog-style layout, month and day on the left, vertical line only in each year's block, expandable lines for synopsis. New
AnnouncementExpandableRowandannouncementTypeTagsutility (EN/PT/ES) centering marker colors and type on the timeline.Screenshots or example usage
Types of changes