alice.mosphere.at / emojistats-bsky
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: no more crashing when scrolling to the end of grid (#5)

fixes an issue introduced in #2. before that PR, Cell would render null if
we got an index that's out of range, but we moved that for rules-of-hooks
reasons, so that `if` no longer did anything useful.
well, it turns out that getting an index that's out of range is a
regular occurence in FixedSizeGrid, because it doesn't actually know
how many items we want to render, just the columns x rows dimensions.
so this ended up causing a lot of crashes if you scrolled to the end.

authored by

Janka Uryga and committed by
GitHub c19ecd87 321442f4

+41 -11
+41 -11
packages/frontend/src/components/EmojiGrid.tsx
··· 41 41 itemKey={getItemKey} 42 42 itemData={{ items: topEmojis, columnCount, socket, lang }} 43 43 > 44 - {Cell} 44 + {MaybeCell} 45 45 </Grid> 46 46 ); 47 47 }} ··· 50 50 ); 51 51 }; 52 52 53 - const getItemKey: GridItemKeySelector<EmojiGridItemData> = ({ columnIndex, rowIndex, data }) => { 54 - const { items, columnCount, lang } = data; 55 - const index = rowIndex * columnCount + columnIndex; 53 + function getItemIndex({ 54 + columnIndex, 55 + rowIndex, 56 + data, 57 + }: { 58 + columnIndex: number; 59 + rowIndex: number; 60 + data: { columnCount: number }; 61 + }) { 62 + const { columnCount } = data; 63 + return rowIndex * columnCount + columnIndex; 64 + } 65 + 66 + const getItemKey: GridItemKeySelector<EmojiGridItemData> = (props) => { 67 + const { items, lang } = props.data; 68 + const index = getItemIndex(props); 69 + if (index >= items.length) { 70 + // FixedSizedGrid wants to render an element we don't have data for. 71 + // we don't really care what this is as long as it's unique. 72 + return index; 73 + } 56 74 const { emoji } = items[index]; 75 + 57 76 return `${lang}-${emoji}`; 58 77 }; 59 78 60 - const Cell = memo(({ columnIndex, rowIndex, style, data }: GridChildComponentProps<EmojiGridItemData>) => { 61 - const { items, columnCount, socket, lang } = data; 62 - const index = rowIndex * columnCount + columnIndex; 79 + const MaybeCell = memo((props: GridChildComponentProps<EmojiGridItemData>) => { 80 + const index = getItemIndex(props); 81 + const items = props.data.items; 82 + if (index >= items.length) { 83 + // FixedSizedGrid wants to render an element we don't have data for. 84 + // this happens because it doesn't actually know how many items we have, 85 + // just rowCount x columnCount. 86 + return null; 87 + } 88 + return <Cell {...props} />; 89 + }); 90 + 91 + const Cell = memo((props: GridChildComponentProps<EmojiGridItemData>) => { 92 + const { 93 + data: { items, socket, lang }, 94 + style, 95 + } = props; 96 + const index = getItemIndex(props); 63 97 const { emoji, count } = items[index]; 64 98 65 99 const elRef = useRef<HTMLDivElement | null>(null); ··· 109 143 isFirstRun.current = true; 110 144 }; 111 145 }, []); 112 - 113 - if (index >= items.length) { 114 - return null; 115 - } 116 146 117 147 const cellStyle = { 118 148 ...style,