Pressroom releases

[DiogoSoaress]

What it solves

Adds the Press releases section on the Pressroom page
Refactors the quick categories filter to its own component in the /common folder

Screenshots

Figma

https://www.figma.com/file/zNUgOvD1WcFankfXfBiAfs/Press-room?type=design&node-id=9929-4249&mode=design&t=x13Zf5TNtfe0ytJN-0

[github-actions]

Branch preview

✅ Deployed successfully in branch deployment:

https://pressroom_releases--homepage.review.5afe.dev

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[iamacook]

Nit: we can remove the duplication by creating a handler for () => handleToggleCategory(category).

[iamacook]

Nit: I'd suggest moving this to a utility file as it is used in multiple components.

[DiogoSoaress]

Thanks for catching this! I wanted to extract it to an util function but forgot.

[iamacook]

Currying this still creates the function twice. You can create it within the map once, e.g.

Suggested change

	const handleToggleCategory = (category: string) => () => {
	const queryParams = { ...router.query }
	if (queryParams.category === category) {
	delete queryParams.category
	} else {
	queryParams.category = category
	}
	router.push(
	{
	query: queryParams,
	},
	undefined,
	{ shallow: true },
	)
	}
	return (
	<Grid container className={css.filterWrapper}>
	{categories.map((category) => {
	const isSelected = category === selectedCategory
	return (
	<Grid item key={category} className={css.filterCard} xs={12} md="auto">
	<ButtonBase
	className={clsx(css.filterButton, { [css.selected]: isSelected })}
	onClick={handleToggleCategory(category)}
	>
	<Typography>
	{category}
	{isSelected && (
	<IconButton className={css.closeFilter} onClick={handleToggleCategory(category)}>
	const handleToggleCategory = (category: string) => {
	const queryParams = { ...router.query }
	if (queryParams.category === category) {
	delete queryParams.category
	} else {
	queryParams.category = category
	}
	router.push(
	{
	query: queryParams,
	},
	undefined,
	{ shallow: true },
	)
	}
	return (
	<Grid container className={css.filterWrapper}>
	{categories.map((category) => {
	const isSelected = category === selectedCategory
	const handleToggle = () => handleToggleCategory(category)
	return (
	<Grid item key={category} className={css.filterCard} xs={12} md="auto">
	<ButtonBase
	className={clsx(css.filterButton, { [css.selected]: isSelected })}
	onClick={handleToggle}
	>
	<Typography>
	{category}
	{isSelected && (
	<IconButton className={css.closeFilter} onClick={handleToggle}>

[DiogoSoaress]

WDYT of memoizing the function with useCallback ?

[DiogoSoaress]

Moved the handler inside of the mapping function