gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 01:50:47 +00:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

Update to latest eslint-plugin-react-hooks (#36702)

Browse Source 
Co-authored-by: diondiondion <mail@diondiondion.com>
This commit is contained in:
Renaud Chaput 2025-11-10 15:50:04 +01:00 committed by GitHub
parent 4ddddc2573
commit 9addad8ce5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 382 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/alt_text_badge.tsx
View File

@ -47,7 +47,7 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
rootClose
onHide={handleClose}
show={open}
target={anchorRef.current}
target={anchorRef}
placement='top-end'
flip
offset={offset}

24
app/javascript/mastodon/components/carousel/index.tsx
View File

@ -76,6 +76,11 @@ export const Carousel = <
// Handle slide change
const [slideIndex, setSlideIndex] = useState(0);
const wrapperRef = useRef<HTMLDivElement>(null);
// Handle slide heights
const [currentSlideHeight, setCurrentSlideHeight] = useState(
() => wrapperRef.current?.scrollHeight ?? 0,
);
const previousSlideHeight = usePrevious(currentSlideHeight);
const handleSlideChange = useCallback(
(direction: number) => {
setSlideIndex((prev) => {
@ -101,16 +106,11 @@ export const Carousel = <
[items.length, onChangeSlide],
);
// Handle slide heights
const [currentSlideHeight, setCurrentSlideHeight] = useState(
wrapperRef.current?.scrollHeight ?? 0,
);
const previousSlideHeight = usePrevious(currentSlideHeight);
const observerRef = useRef<ResizeObserver>(
new ResizeObserver(() => {
handleSlideChange(0);
}),
);
const observerRef = useRef<ResizeObserver | null>(null);
observerRef.current ??= new ResizeObserver(() => {
handleSlideChange(0);
});
const wrapperStyles = useSpring({
x: `-${slideIndex * 100}%`,
height: currentSlideHeight,
@ -200,7 +200,7 @@ export const Carousel = <
};
type CarouselSlideWrapperProps<SlideProps extends CarouselSlideProps> = {
observer: ResizeObserver;
observer: ResizeObserver | null;
className: string;
active: boolean;
item: SlideProps;
@ -217,7 +217,7 @@ const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
}: CarouselSlideWrapperProps<SlideProps>) => {
const handleRef = useCallback(
(instance: HTMLDivElement | null) => {
if (instance) {
if (observer && instance) {
observer.observe(instance);
}
},

10
app/javascript/mastodon/components/column_search_header.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useState, useEffect, useRef } from 'react';
import { useCallback, useState, useRef } from 'react';
import { FormattedMessage } from 'react-intl';
@ -12,11 +12,15 @@ export const ColumnSearchHeader: React.FC<{
const inputRef = useRef<HTMLInputElement>(null);
const [value, setValue] = useState('');
useEffect(() => {
// Reset the component when it turns from active to inactive.
// [More on this pattern](https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)
const [previousActive, setPreviousActive] = useState(active);
if (active !== previousActive) {
setPreviousActive(active);
if (!active) {
setValue('');
}
}, [active]);
}
const handleChange = useCallback(
({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {

2
app/javascript/mastodon/components/dropdown/index.tsx
View File

@ -109,7 +109,7 @@ export const Dropdown: FC<
placement='bottom-start'
onHide={handleClose}
flip
target={buttonRef.current}
target={buttonRef}
popperConfig={{
strategy: 'fixed',
modifiers: [matchWidth],

23
app/javascript/mastodon/components/exit_animation_wrapper.tsx
View File

@ -27,22 +27,23 @@ export const ExitAnimationWrapper: React.FC<{
*/
children: (delayedIsActive: boolean) => React.ReactNode;
}> = ({ isActive = false, delayMs = 500, withEntryDelay, children }) => {
const [delayedIsActive, setDelayedIsActive] = useState(false);
const [delayedIsActive, setDelayedIsActive] = useState(
isActive && !withEntryDelay,
);
useEffect(() => {
if (isActive && !withEntryDelay) {
setDelayedIsActive(true);
const withDelay = !isActive || withEntryDelay;
return () => '';
} else {
const timeout = setTimeout(() => {
const timeout = setTimeout(
() => {
setDelayedIsActive(isActive);
}, delayMs);
},
withDelay ? delayMs : 0,
);
return () => {
clearTimeout(timeout);
};
}
return () => {
clearTimeout(timeout);
};
}, [isActive, delayMs, withEntryDelay]);
if (!isActive && !delayedIsActive) {

8
app/javascript/mastodon/components/hover_card_controller.tsx
View File

@ -27,7 +27,6 @@ export const HoverCardController: React.FC = () => {
const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
const [setEnterTimeout, cancelEnterTimeout, delayEnterTimeout] = useTimeout();
const [setScrollTimeout] = useTimeout();
const location = useLocation();
const handleClose = useCallback(() => {
cancelEnterTimeout();
@ -36,9 +35,12 @@ export const HoverCardController: React.FC = () => {
setAnchor(null);
}, [cancelEnterTimeout, cancelLeaveTimeout, setOpen, setAnchor]);
useEffect(() => {
const location = useLocation();
const [previousLocation, setPreviousLocation] = useState(location);
if (location !== previousLocation) {
setPreviousLocation(location);
handleClose();
}, [handleClose, location]);
}
useEffect(() => {
let isScrolling = false;

23
app/javascript/mastodon/components/icon_button.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useCallback, forwardRef } from 'react';
import { useCallback, forwardRef } from 'react';
import classNames from 'classnames';
@ -55,23 +55,6 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
},
buttonRef,
) => {
const [activate, setActivate] = useState(false);
const [deactivate, setDeactivate] = useState(false);
useEffect(() => {
if (!animate) {
return;
}
if (activate && !active) {
setActivate(false);
setDeactivate(true);
} else if (!activate && active) {
setActivate(true);
setDeactivate(false);
}
}, [setActivate, setDeactivate, animate, active, activate]);
const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(
(e) => {
e.preventDefault();
@ -112,8 +95,8 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
active,
disabled,
inverted,
activate,
deactivate,
activate: animate && active,
deactivate: animate && !active,
overlayed: overlay,
'icon-button--with-counter': typeof counter !== 'undefined',
});

6
app/javascript/mastodon/components/poll.tsx
View File

@ -35,6 +35,9 @@ const messages = defineMessages({
},
});
const isPollExpired = (expiresAt: Model.Poll['expires_at']) =>
new Date(expiresAt).getTime() < Date.now();
interface PollProps {
pollId: string;
status: Status;
@ -58,8 +61,7 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
if (!poll) {
return false;
}
const expiresAt = poll.expires_at;
return poll.expired || new Date(expiresAt).getTime() < Date.now();
return poll.expired || isPollExpired(poll.expires_at);
}, [poll]);
const timeRemaining = useMemo(() => {
if (!poll) {

5
app/javascript/mastodon/components/status_action_bar/remove_quote_hint.tsx
View File

@ -44,6 +44,7 @@ export const RemoveQuoteHint: React.FC<{
if (!firstHintId) {
firstHintId = uniqueId;
// eslint-disable-next-line react-hooks/set-state-in-effect
setIsOnlyHint(true);
}
@ -64,8 +65,8 @@ export const RemoveQuoteHint: React.FC<{
flip
offset={[12, 10]}
placement='bottom-end'
target={anchorRef.current}
container={anchorRef.current}
target={anchorRef}
container={anchorRef}
>
{({ props, placement }) => (
<div

1
app/javascript/mastodon/containers/scroll_container/scroll_context.tsx
View File

@ -86,6 +86,7 @@ export const ScrollContext: React.FC<ScrollContextProps> = ({
) =>
// Hack to allow accessing scrollBehavior._stateStorage
shouldUpdateScroll.call(
// eslint-disable-next-line react-hooks/immutability
scrollBehavior,
prevLocationContext,
locationContext,

15
app/javascript/mastodon/features/alt_text_modal/index.tsx
View File

@ -101,16 +101,17 @@ const Preview: React.FC<{
position: FocalPoint;
onPositionChange: (arg0: FocalPoint) => void;
}> = ({ mediaId, position, onPositionChange }) => {
const draggingRef = useRef<boolean>(false);
const nodeRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
const [dragging, setDragging] = useState<'started' | 'moving' | null>(null);
const [x, y] = position;
const style = useSpring({
to: {
left: `${x * 100}%`,
top: `${y * 100}%`,
},
immediate: draggingRef.current,
immediate: dragging === 'moving',
});
const media = useAppSelector((state) =>
(
@ -123,8 +124,6 @@ const Preview: React.FC<{
me ? state.accounts.get(me) : undefined,
);
const [dragging, setDragging] = useState(false);
const setRef = useCallback(
(e: HTMLImageElement | HTMLVideoElement | null) => {
nodeRef.current = e;
@ -140,20 +139,20 @@ const Preview: React.FC<{
const handleMouseMove = (e: MouseEvent) => {
const { x, y } = getPointerPosition(nodeRef.current, e);
draggingRef.current = true; // This will disable the animation for quicker feedback, only do this if the mouse actually moves
setDragging('moving'); // This will disable the animation for quicker feedback, only do this if the mouse actually moves
onPositionChange([x, y]);
};
const handleMouseUp = () => {
setDragging(false);
draggingRef.current = false;
setDragging(null);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('mousemove', handleMouseMove);
};
const { x, y } = getPointerPosition(nodeRef.current, e.nativeEvent);
setDragging(true);
setDragging('started');
onPositionChange([x, y]);
document.addEventListener('mouseup', handleMouseUp);

4
app/javascript/mastodon/features/annual_report/index.tsx
View File

@ -31,15 +31,13 @@ export const AnnualReport: React.FC<{
year: string;
}> = ({ year }) => {
const [response, setResponse] = useState<AnnualReportResponse | null>(null);
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(true);
const currentAccount = useAppSelector((state) =>
me ? state.accounts.get(me) : undefined,
);
const dispatch = useAppDispatch();
useEffect(() => {
setLoading(true);
apiRequestGet<AnnualReportResponse>(`v1/annual_reports/${year}`)
.then((data) => {
dispatch(importFetchedStatuses(data.statuses));

19
app/javascript/mastodon/features/compose/components/language_dropdown.tsx
View File

@ -55,6 +55,8 @@ const getFrequentlyUsedLanguages = createSelector(
.toArray(),
);
const isTextLongEnoughForGuess = (text: string) => text.length > 20;
const LanguageDropdownMenu: React.FC<{
value: string;
guess?: string;
@ -375,14 +377,27 @@ export const LanguageDropdown: React.FC = () => {
);
useEffect(() => {
if (text.length > 20) {
if (isTextLongEnoughForGuess(text)) {
debouncedGuess(text, setGuess);
} else {
debouncedGuess.cancel();
setGuess('');
}
}, [text, setGuess]);
// Keeping track of the previous render's text length here
// to be able to reset the guess when the text length drops
// below the threshold needed to make a guess
const [wasLongText, setWasLongText] = useState(() =>
isTextLongEnoughForGuess(text),
);
if (wasLongText !== isTextLongEnoughForGuess(text)) {
setWasLongText(isTextLongEnoughForGuess(text));
if (wasLongText) {
setGuess('');
}
}
return (
<div ref={targetRef}>
<button

340
app/javascript/mastodon/features/compose/components/search.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useState, useRef, useEffect } from 'react';
import { useCallback, useState, useRef, useEffect, useMemo } from 'react';
import {
defineMessages,
@ -97,173 +97,13 @@ export const Search: React.FC<{
const [expanded, setExpanded] = useState(false);
const [selectedOption, setSelectedOption] = useState(-1);
const [quickActions, setQuickActions] = useState<SearchOption[]>([]);
useEffect(() => {
setValue(initialValue ?? '');
setQuickActions([]);
}, [initialValue]);
const searchOptions: SearchOption[] = [];
const unfocus = useCallback(() => {
document.querySelector('.ui')?.parentElement?.focus();
setExpanded(false);
}, []);
if (searchEnabled) {
searchOptions.push(
{
key: 'prompt-has',
label: (
<>
<mark>has:</mark>{' '}
<FormattedList
type='disjunction'
value={['media', 'poll', 'embed']}
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('has:');
},
},
{
key: 'prompt-is',
label: (
<>
<mark>is:</mark>{' '}
<FormattedList type='disjunction' value={['reply', 'sensitive']} />
</>
),
action: (e) => {
e.preventDefault();
insertText('is:');
},
},
{
key: 'prompt-language',
label: (
<>
<mark>language:</mark>{' '}
<FormattedMessage
id='search_popout.language_code'
defaultMessage='ISO language code'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('language:');
},
},
{
key: 'prompt-from',
label: (
<>
<mark>from:</mark>{' '}
<FormattedMessage id='search_popout.user' defaultMessage='user' />
</>
),
action: (e) => {
e.preventDefault();
insertText('from:');
},
},
{
key: 'prompt-before',
label: (
<>
<mark>before:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('before:');
},
},
{
key: 'prompt-during',
label: (
<>
<mark>during:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('during:');
},
},
{
key: 'prompt-after',
label: (
<>
<mark>after:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('after:');
},
},
{
key: 'prompt-in',
label: (
<>
<mark>in:</mark>{' '}
<FormattedList
type='disjunction'
value={['all', 'library', 'public']}
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('in:');
},
},
);
}
const recentOptions: SearchOption[] = recent.map((search) => ({
key: `${search.type}/${search.q}`,
label: labelForRecentSearch(search),
action: () => {
setValue(search.q);
if (search.type === 'account') {
history.push(`/@${search.q}`);
} else if (search.type === 'hashtag') {
history.push(`/tags/${search.q}`);
} else {
const queryParams = new URLSearchParams({ q: search.q });
if (search.type) queryParams.set('type', search.type);
history.push({ pathname: '/search', search: queryParams.toString() });
}
unfocus();
},
forget: (e) => {
e.stopPropagation();
void dispatch(forgetSearchResult(search));
},
}));
const navigableOptions = hasValue
? quickActions.concat(searchOptions)
: recentOptions.concat(quickActions, searchOptions);
const insertText = (text: string) => {
const insertText = useCallback((text: string) => {
setValue((currentValue) => {
if (currentValue === '') {
return text;
@ -273,7 +113,181 @@ export const Search: React.FC<{
return `${currentValue} ${text}`;
}
});
};
}, []);
const searchOptions = useMemo(() => {
if (!searchEnabled) {
return [];
} else {
const options: SearchOption[] = [
{
key: 'prompt-has',
label: (
<>
<mark>has:</mark>{' '}
<FormattedList
type='disjunction'
value={['media', 'poll', 'embed']}
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('has:');
},
},
{
key: 'prompt-is',
label: (
<>
<mark>is:</mark>{' '}
<FormattedList
type='disjunction'
value={['reply', 'sensitive']}
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('is:');
},
},
{
key: 'prompt-language',
label: (
<>
<mark>language:</mark>{' '}
<FormattedMessage
id='search_popout.language_code'
defaultMessage='ISO language code'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('language:');
},
},
{
key: 'prompt-from',
label: (
<>
<mark>from:</mark>{' '}
<FormattedMessage id='search_popout.user' defaultMessage='user' />
</>
),
action: (e) => {
e.preventDefault();
insertText('from:');
},
},
{
key: 'prompt-before',
label: (
<>
<mark>before:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('before:');
},
},
{
key: 'prompt-during',
label: (
<>
<mark>during:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('during:');
},
},
{
key: 'prompt-after',
label: (
<>
<mark>after:</mark>{' '}
<FormattedMessage
id='search_popout.specific_date'
defaultMessage='specific date'
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('after:');
},
},
{
key: 'prompt-in',
label: (
<>
<mark>in:</mark>{' '}
<FormattedList
type='disjunction'
value={['all', 'library', 'public']}
/>
</>
),
action: (e) => {
e.preventDefault();
insertText('in:');
},
},
];
return options;
}
}, [insertText]);
const recentOptions: SearchOption[] = useMemo(
() =>
recent.map((search) => ({
key: `${search.type}/${search.q}`,
label: labelForRecentSearch(search),
action: () => {
setValue(search.q);
if (search.type === 'account') {
history.push(`/@${search.q}`);
} else if (search.type === 'hashtag') {
history.push(`/tags/${search.q}`);
} else {
const queryParams = new URLSearchParams({ q: search.q });
if (search.type) queryParams.set('type', search.type);
history.push({
pathname: '/search',
search: queryParams.toString(),
});
}
unfocus();
},
forget: (e) => {
e.stopPropagation();
void dispatch(forgetSearchResult(search));
},
})),
[dispatch, history, recent, unfocus],
);
const navigableOptions: SearchOption[] = useMemo(
() =>
hasValue
? quickActions.concat(searchOptions)
: recentOptions.concat(quickActions, searchOptions),
[hasValue, quickActions, recentOptions, searchOptions],
);
const submit = useCallback(
(q: string, type?: SearchType) => {

6
app/javascript/mastodon/features/domain_blocks/index.tsx
View File

@ -19,14 +19,12 @@ const messages = defineMessages({
const Blocks: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
const intl = useIntl();
const [domains, setDomains] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(true);
const [next, setNext] = useState<string | undefined>();
const hasMore = !!next;
const columnRef = useRef<ColumnRef>(null);
useEffect(() => {
setLoading(true);
void apiGetDomainBlocks()
.then(({ domains, links }) => {
const next = links.refs.find((link) => link.rel === 'next');
@ -40,7 +38,7 @@ const Blocks: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
.catch(() => {
setLoading(false);
});
}, [setLoading, setDomains, setNext]);
}, []);
const handleLoadMore = useCallback(() => {
setLoading(true);

17
app/javascript/mastodon/features/home_timeline/components/announcements/announcement.tsx
View File

@ -35,12 +35,17 @@ export const Announcement: FC<AnnouncementProps> = ({
}, [active, id, dispatch, read]);
// But visually show the announcement as read only when it goes out of view.
const [unread, setUnread] = useState(!read);
useEffect(() => {
if (!active && unread !== !read) {
setUnread(!read);
const [isVisuallyRead, setIsVisuallyRead] = useState(read);
const [previousActive, setPreviousActive] = useState(active);
if (active !== previousActive) {
setPreviousActive(active);
// This marks the announcement as read in the UI only after it
// went from active to inactive.
if (!active && isVisuallyRead !== read) {
setIsVisuallyRead(read);
}
}, [active, unread, read]);
}
return (
<AnimateEmojiProvider>
@ -63,7 +68,7 @@ export const Announcement: FC<AnnouncementProps> = ({
<ReactionsBar reactions={announcement.reactions} id={announcement.id} />
{unread && <span className='announcements__unread' />}
{!isVisuallyRead && <span className='announcements__unread' />}
</AnimateEmojiProvider>
);
};

3
app/javascript/mastodon/features/lists/members.tsx
View File

@ -164,12 +164,11 @@ const ListMembers: React.FC<{
const [searching, setSearching] = useState(false);
const [accountIds, setAccountIds] = useState<string[]>([]);
const [searchAccountIds, setSearchAccountIds] = useState<string[]>([]);
const [loading, setLoading] = useState(true);
const [loading, setLoading] = useState(!!id);
const [mode, setMode] = useState<Mode>('remove');
useEffect(() => {
if (id) {
setLoading(true);
dispatch(fetchList(id));
void apiGetAccounts(id)

6
app/javascript/mastodon/features/navigation_panel/components/list_panel.tsx
View File

@ -27,17 +27,15 @@ export const ListPanel: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const lists = useAppSelector((state) => getOrderedLists(state));
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
void dispatch(fetchLists()).then(() => {
setLoading(false);
return '';
});
}, [dispatch, setLoading]);
}, [dispatch]);
return (
<CollapsiblePanel

2
app/javascript/mastodon/features/search/index.tsx
View File

@ -225,7 +225,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
/>
<div className='explore__search-header'>
<Search singleColumn initialValue={trimmedValue} />
<Search singleColumn initialValue={trimmedValue} key={trimmedValue} />
</div>
<div className='account__section-headline'>

4
app/javascript/mastodon/features/ui/components/domain_block_modal.tsx
View File

@ -53,8 +53,6 @@ export const DomainBlockModal: React.FC<{
}, [dispatch]);
useEffect(() => {
setLoading(true);
apiRequest<DomainBlockPreviewResponse>('GET', 'v1/domain_blocks/preview', {
params: { domain },
timeout: 5000,
@ -68,7 +66,7 @@ export const DomainBlockModal: React.FC<{
setPreview('error');
setLoading(false);
});
}, [setPreview, setLoading, domain]);
}, [domain]);
return (
<div className='modal-root__modal safety-action-modal' aria-live='polite'>

47
app/javascript/mastodon/features/ui/components/hashtag_menu_controller.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import { useEffect, useState, useCallback, useMemo } from 'react';
import { useIntl, defineMessages } from 'react-intl';
@ -41,40 +41,44 @@ const isHashtagLink = (
};
interface TargetParams {
hashtag?: string;
accountId?: string;
element: HTMLAnchorElement | null;
hashtag: string;
accountId: string;
}
export const HashtagMenuController: React.FC = () => {
const intl = useIntl();
const { signedIn } = useIdentity();
const [open, setOpen] = useState(false);
const [{ accountId, hashtag }, setTargetParams] = useState<TargetParams>({});
const targetRef = useRef<HTMLAnchorElement | null>(null);
const location = useLocation();
const [target, setTarget] = useState<TargetParams | null>(null);
const { element = null, accountId, hashtag } = target ?? {};
const open = !!element;
const account = useAppSelector((state) =>
accountId ? state.accounts.get(accountId) : undefined,
);
useEffect(() => {
setOpen(false);
targetRef.current = null;
}, [setOpen, location]);
const location = useLocation();
const [previousLocation, setPreviousLocation] = useState(location);
if (location !== previousLocation) {
setPreviousLocation(location);
setTarget(null);
}
useEffect(() => {
const handleClick = (e: MouseEvent) => {
const target = (e.target as HTMLElement).closest('a');
const targetElement = (e.target as HTMLElement).closest('a');
if (e.button !== 0 || e.ctrlKey || e.metaKey) {
return;
}
if (!isHashtagLink(target)) {
if (!isHashtagLink(targetElement)) {
return;
}
const hashtag = target.text.replace(/^#/, '');
const accountId = target.getAttribute('data-menu-hashtag');
const hashtag = targetElement.text.replace(/^#/, '');
const accountId = targetElement.getAttribute('data-menu-hashtag');
if (!hashtag || !accountId) {
return;
@ -82,9 +86,7 @@ export const HashtagMenuController: React.FC = () => {
e.preventDefault();
e.stopPropagation();
targetRef.current = target;
setOpen(true);
setTargetParams({ hashtag, accountId });
setTarget({ element: targetElement, hashtag, accountId });
};
document.addEventListener('click', handleClick, { capture: true });
@ -92,12 +94,11 @@ export const HashtagMenuController: React.FC = () => {
return () => {
document.removeEventListener('click', handleClick);
};
}, [setTargetParams, setOpen]);
}, []);
const handleClose = useCallback(() => {
setOpen(false);
targetRef.current = null;
}, [setOpen]);
setTarget(null);
}, []);
const menu = useMemo(() => {
const arr: MenuItem[] = [
@ -139,7 +140,7 @@ export const HashtagMenuController: React.FC = () => {
offset={offset}
placement='bottom'
flip
target={targetRef}
target={element}
popperConfig={popperConfig}
>
{({ props, arrowProps, placement }) => (

2
app/javascript/mastodon/features/ui/components/media_modal.tsx
View File

@ -66,6 +66,7 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
_ref,
) => {
const [index, setIndex] = useState(startIndex);
const [zoomedIn, setZoomedIn] = useState(false);
const currentMedia = media.get(index);
const handleChangeIndex = useCallback(
@ -134,7 +135,6 @@ export const MediaModal: FC<MediaModalProps> = forwardRef<
}
}, []);
const [zoomedIn, setZoomedIn] = useState(false);
const zoomable =
currentMedia?.get('type') === 'image' &&
((currentMedia.getIn(['meta', 'original', 'width']) as number) >

29
app/javascript/mastodon/features/ui/hooks/useBreakpoint.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useSyncExternalStore } from 'react';
const breakpoints = {
narrow: 479, // Device width under which horizontal space is constrained
@ -9,25 +9,20 @@ const breakpoints = {
type Breakpoint = keyof typeof breakpoints;
export const useBreakpoint = (breakpoint: Breakpoint) => {
const [isMatching, setIsMatching] = useState(false);
const query = `(max-width: ${breakpoints[breakpoint]}px)`;
useEffect(() => {
const mediaWatcher = window.matchMedia(
`(max-width: ${breakpoints[breakpoint]}px)`,
);
const isMatching = useSyncExternalStore(
(callback) => {
const mediaWatcher = window.matchMedia(query);
setIsMatching(mediaWatcher.matches);
mediaWatcher.addEventListener('change', callback);
const handleChange = (e: MediaQueryListEvent) => {
setIsMatching(e.matches);
};
mediaWatcher.addEventListener('change', handleChange);
return () => {
mediaWatcher.removeEventListener('change', handleChange);
};
}, [breakpoint, setIsMatching]);
return () => {
mediaWatcher.removeEventListener('change', callback);
};
},
() => window.matchMedia(query).matches,
);
return isMatching;
};

22
app/javascript/mastodon/hooks/usePrevious.ts
View File

@ -1,4 +1,4 @@
import { useRef, useEffect } from 'react';
import { useState } from 'react';
/**
* Returns the previous state of the passed in value.
@ -6,11 +6,21 @@ import { useRef, useEffect } from 'react';
*/
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
const [{ previous, current }, setMemory] = useState<{
previous: T | undefined;
current: T;
}>(() => ({ previous: undefined, current: value }));
useEffect(() => {
ref.current = value;
}, [value]);
let result = previous;
return ref.current;
if (value !== current) {
setMemory({
previous: current,
current: value,
});
// Ensure that the returned result updates synchronously
result = current;
}
return result;
}

4
eslint.config.mjs
View File

@ -184,7 +184,7 @@ export default tseslint.config([
]),
react.configs.flat.recommended,
react.configs.flat['jsx-runtime'],
reactHooks.configs['recommended-latest'],
reactHooks.configs.flat.recommended,
jsxA11Y.flatConfigs.recommended,
importPlugin.flatConfigs.react,
// @ts-expect-error -- For some reason the formatjs package exports an empty object?
@ -329,7 +329,7 @@ export default tseslint.config([
tseslint.configs.stylisticTypeChecked,
react.configs.flat.recommended,
react.configs.flat['jsx-runtime'],
reactHooks.configs['recommended-latest'],
reactHooks.configs.flat.recommended,
jsxA11Y.flatConfigs.recommended,
importPlugin.flatConfigs.react,
importPlugin.flatConfigs.typescript,

2
package.json
View File

@ -174,7 +174,7 @@
"eslint-plugin-jsx-a11y": "~6.10.2",
"eslint-plugin-promise": "~7.2.1",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-storybook": "^10.0.2",
"fake-indexeddb": "^6.0.1",
"globals": "^16.0.0",

76
yarn.lock
View File

@ -299,10 +299,10 @@ __metadata:
languageName: node
linkType: hard
"@babel/helper-validator-identifier@npm:^7.27.1":
version: 7.27.1
resolution: "@babel/helper-validator-identifier@npm:7.27.1"
checksum: 10c0/c558f11c4871d526498e49d07a84752d1800bf72ac0d3dad100309a2eaba24efbf56ea59af5137ff15e3a00280ebe588560534b0e894a4750f8b1411d8f78b84
"@babel/helper-validator-identifier@npm:^7.27.1, @babel/helper-validator-identifier@npm:^7.28.5":
version: 7.28.5
resolution: "@babel/helper-validator-identifier@npm:7.28.5"
checksum: 10c0/42aaebed91f739a41f3d80b72752d1f95fd7c72394e8e4bd7cdd88817e0774d80a432451bcba17c2c642c257c483bf1d409dd4548883429ea9493a3bc4ab0847
languageName: node
linkType: hard
@ -334,14 +334,14 @@ __metadata:
languageName: node
linkType: hard
"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
version: 7.28.4
resolution: "@babel/parser@npm:7.28.4"
"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
version: 7.28.5
resolution: "@babel/parser@npm:7.28.5"
dependencies:
"@babel/types": "npm:^7.28.4"
"@babel/types": "npm:^7.28.5"
bin:
parser: ./bin/babel-parser.js
checksum: 10c0/58b239a5b1477ac7ed7e29d86d675cc81075ca055424eba6485872626db2dc556ce63c45043e5a679cd925e999471dba8a3ed4864e7ab1dbf64306ab72c52707
checksum: 10c0/5bbe48bf2c79594ac02b490a41ffde7ef5aa22a9a88ad6bcc78432a6ba8a9d638d531d868bd1f104633f1f6bba9905746e15185b8276a3756c42b765d131b1ef
languageName: node
linkType: hard
@ -1209,13 +1209,13 @@ __metadata:
languageName: node
linkType: hard
"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.25.4, @babel/types@npm:^7.26.10, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.4.4":
version: 7.28.4
resolution: "@babel/types@npm:7.28.4"
"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.25.4, @babel/types@npm:^7.26.10, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.28.5, @babel/types@npm:^7.4.4":
version: 7.28.5
resolution: "@babel/types@npm:7.28.5"
dependencies:
"@babel/helper-string-parser": "npm:^7.27.1"
"@babel/helper-validator-identifier": "npm:^7.27.1"
checksum: 10c0/ac6f909d6191319e08c80efbfac7bd9a25f80cc83b43cd6d82e7233f7a6b9d6e7b90236f3af7400a3f83b576895bcab9188a22b584eb0f224e80e6d4e95f4517
"@babel/helper-validator-identifier": "npm:^7.28.5"
checksum: 10c0/a5a483d2100befbf125793640dec26b90b95fd233a94c19573325898a5ce1e52cdfa96e495c7dcc31b5eca5b66ce3e6d4a0f5a4a62daec271455959f208ab08a
languageName: node
linkType: hard
@ -2796,7 +2796,7 @@ __metadata:
eslint-plugin-jsx-a11y: "npm:~6.10.2"
eslint-plugin-promise: "npm:~7.2.1"
eslint-plugin-react: "npm:^7.37.4"
eslint-plugin-react-hooks: "npm:^5.2.0"
eslint-plugin-react-hooks: "npm:^7.0.1"
eslint-plugin-storybook: "npm:^10.0.2"
fake-indexeddb: "npm:^6.0.1"
fast-glob: "npm:^3.3.3"
@ -7178,12 +7178,18 @@ __metadata:
languageName: node
linkType: hard
"eslint-plugin-react-hooks@npm:^5.2.0":
version: 5.2.0
resolution: "eslint-plugin-react-hooks@npm:5.2.0"
"eslint-plugin-react-hooks@npm:^7.0.1":
version: 7.0.1
resolution: "eslint-plugin-react-hooks@npm:7.0.1"
dependencies:
"@babel/core": "npm:^7.24.4"
"@babel/parser": "npm:^7.24.4"
hermes-parser: "npm:^0.25.1"
zod: "npm:^3.25.0 || ^4.0.0"
zod-validation-error: "npm:^3.5.0 || ^4.0.0"
peerDependencies:
eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
checksum: 10c0/1c8d50fa5984c6dea32470651807d2922cc3934cf3425e78f84a24c2dfd972e7f019bee84aefb27e0cf2c13fea0ac1d4473267727408feeb1c56333ca1489385
checksum: 10c0/1e711d1a9d1fa9cfc51fa1572500656577201199c70c795c6a27adfc1df39e5c598f69aab6aa91117753d23cc1f11388579a2bed14921cf9a4efe60ae8618496
languageName: node
linkType: hard
@ -8090,6 +8096,22 @@ __metadata:
languageName: node
linkType: hard
"hermes-estree@npm:0.25.1":
version: 0.25.1
resolution: "hermes-estree@npm:0.25.1"
checksum: 10c0/48be3b2fa37a0cbc77a112a89096fa212f25d06de92781b163d67853d210a8a5c3784fac23d7d48335058f7ed283115c87b4332c2a2abaaccc76d0ead1a282ac
languageName: node
linkType: hard
"hermes-parser@npm:^0.25.1":
version: 0.25.1
resolution: "hermes-parser@npm:0.25.1"
dependencies:
hermes-estree: "npm:0.25.1"
checksum: 10c0/3abaa4c6f1bcc25273f267297a89a4904963ea29af19b8e4f6eabe04f1c2c7e9abd7bfc4730ddb1d58f2ea04b6fee74053d8bddb5656ec6ebf6c79cc8d14202c
languageName: node
linkType: hard
"history@npm:^4.10.1, history@npm:^4.9.0":
version: 4.10.1
resolution: "history@npm:4.10.1"
@ -14736,3 +14758,19 @@ __metadata:
checksum: 10c0/2d110bfcb0f8b8dbf225423f6556da9c5bca95c8b849c1218983676158a24b5cd0350357e0c4d504e27f8c7e18d471d9712576f35114a81a51bcf83453f02beb
languageName: node
linkType: hard
"zod-validation-error@npm:^3.5.0 || ^4.0.0":
version: 4.0.2
resolution: "zod-validation-error@npm:4.0.2"
peerDependencies:
zod: ^3.25.0 || ^4.0.0
checksum: 10c0/0ccfec48c46de1be440b719cd02044d4abb89ed0e14c13e637cd55bf29102f67ccdba373f25def0fc7130e5f15025be4d557a7edcc95d5a3811599aade689e1b
languageName: node
linkType: hard
"zod@npm:^3.25.0 || ^4.0.0":
version: 4.1.12
resolution: "zod@npm:4.1.12"
checksum: 10c0/b64c1feb19e99d77075261eaf613e0b2be4dfcd3551eff65ad8b4f2a079b61e379854d066f7d447491fcf193f45babd8095551a9d47973d30b46b6d8e2c46774
languageName: node
linkType: hard