jaredLunde / jaredLunde/masonic

Error when Filtering High Impact News in Masonry Layout

Open
#164 2 comments 0 reactions 0 assignees View on GitHub
question
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**
Screenshot 2024-07-27 at 10 46 29 AM
Screenshot 2024-07-27 at 11 04 41 AM

- OS: [macOS]
- Browser [ chrome,]

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.