bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AccountGallery: fix crash in React 18

Browse source 
Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1318
This commit is contained in:
Alex Gleason 2023-01-12 09:41:11 -06:00
parent c6700539f7
commit 8cbdc6019f
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/soapbox/features/account-gallery/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@ -66,10 +66,7 @@ const AccountGallery = () => {
const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore); const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore);
const [width, setWidth] = useState(323); const [width, setWidth] = useState(323);
const node = useRef<HTMLDivElement>(null);
const handleRef = (c: HTMLDivElement) => {
if (c) setWidth(c.offsetWidth);
};
const handleScrollToBottom = () => { const handleScrollToBottom = () => {
if (hasMore) { if (hasMore) {
@ -99,6 +96,12 @@ const AccountGallery = () => {
} }
}; };
useLayoutEffect(() => {
if (node.current) {
setWidth(node.current.offsetWidth);
}
}, [node.current]);
useEffect(() => { useEffect(() => {
if (accountId && accountId !== -1) { if (accountId && accountId !== -1) {
dispatch(fetchAccount(accountId)); dispatch(fetchAccount(accountId));
@ -140,7 +143,7 @@ const AccountGallery = () => {
return ( return (
<Column label={`@${accountUsername}`} transparent withHeader={false}> <Column label={`@${accountUsername}`} transparent withHeader={false}>
<div role='feed' className='account-gallery__container' ref={handleRef}> <div role='feed' className='account-gallery__container' ref={node}>
{attachments.map((attachment, index) => attachment === null ? ( {attachments.map((attachment, index) => attachment === null ? (
<LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} /> <LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} />
) : ( ) : (