jaredLunde / jaredLunde/masonic
Error when Filtering High Impact News in Masonry Layout
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
First, thank you for this amazing package. It perfectly meets my requirements.
I am creating a news feed application where news items are displayed in cards. I am using the Masonry layout to handle the different card sizes, as some cards include images while others do not.
The Masonry layout is working well overall, but I have encountered an issue when implementing a filter functionality. The filter allows users to sort news based on their impact levels: high, medium, and low. Currently, there are 3 high-impact news items, and more than 60 items for both medium and low impact.
When switching to display only high-impact news, I encounter the following error:
` const filterByImpactHigh = filteredData?.filter((item) => item?.impact === 'High');
const filterByImpactMedium = filteredData?.filter((item) => item?.impact === 'Medium');
const filterByImpactLow = filteredData?.filter((item) => item?.impact=== 'Low');
const dataToDisplay =
tab === '0'
? filteredData
: tab === '1'
? filterByImpactHigh
: tab === '2'
? filterByImpactMedium
: filterByImpactLow;
`
`
{dataToDisplay?.length > 0 &&
{
return (
<>
{data && }
);
}}
/>
}
`
**Actual Behavior**
An error occurs when switching to the high-impact filter, preventing the news items from being displayed correctly. while switching to others work fine as long as the there is large set of data
**To Reproduce**
1. Implement a Masonry layout for news cards.
2. Add a filter functionality to sort news by impact levels (high, medium, low).
3. Populate the feed with 3 high-impact news items and over 60 medium and low impact news items.
4. Switch to the high-impact filter.
**Expected behavior**
The Masonry layout should correctly display the 3 high-impact news items without any errors.
**Screenshots**
- OS: [macOS]
- Browser [ chrome,]
Contributor guide
Research direction
Start by reproducing the reported filter transition with the Masonry component, using the provided data sizes and render callback. Inspect the filtering and rendered items around the high-impact case, then confirm that switching to three high-impact items displays them without an error while the other filters continue to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100