Update directory page options to use URL params (#31977)
This commit is contained in:
parent
57a38f071b
commit
ae03e4ffc6
2 changed files with 51 additions and 15 deletions
|
@ -1,5 +1,5 @@
|
|||
import type { ChangeEventHandler } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
@ -23,6 +23,8 @@ import { RadioButton } from 'mastodon/components/radio_button';
|
|||
import ScrollContainer from 'mastodon/containers/scroll_container';
|
||||
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { useSearchParam } from '../../../hooks/useSearchParam';
|
||||
|
||||
import { AccountCard } from './components/account_card';
|
||||
|
||||
const messages = defineMessages({
|
||||
|
@ -47,18 +49,19 @@ export const Directory: React.FC<{
|
|||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const [state, setState] = useState<{
|
||||
order: string | null;
|
||||
local: boolean | null;
|
||||
}>({
|
||||
order: null,
|
||||
local: null,
|
||||
});
|
||||
|
||||
const column = useRef<Column>(null);
|
||||
|
||||
const order = state.order ?? params?.order ?? 'active';
|
||||
const local = state.local ?? params?.local ?? false;
|
||||
const [orderParam, setOrderParam] = useSearchParam('order');
|
||||
const [localParam, setLocalParam] = useSearchParam('local');
|
||||
|
||||
let localParamBool: boolean | undefined;
|
||||
|
||||
if (localParam === 'false') {
|
||||
localParamBool = false;
|
||||
}
|
||||
|
||||
const order = orderParam ?? params?.order ?? 'active';
|
||||
const local = localParamBool ?? params?.local ?? true;
|
||||
|
||||
const handlePin = useCallback(() => {
|
||||
if (columnId) {
|
||||
|
@ -101,10 +104,10 @@ export const Directory: React.FC<{
|
|||
if (columnId) {
|
||||
dispatch(changeColumnParams(columnId, ['order'], e.target.value));
|
||||
} else {
|
||||
setState((s) => ({ order: e.target.value, local: s.local }));
|
||||
setOrderParam(e.target.value);
|
||||
}
|
||||
},
|
||||
[dispatch, columnId],
|
||||
[dispatch, columnId, setOrderParam],
|
||||
);
|
||||
|
||||
const handleChangeLocal = useCallback<ChangeEventHandler<HTMLInputElement>>(
|
||||
|
@ -113,11 +116,13 @@ export const Directory: React.FC<{
|
|||
dispatch(
|
||||
changeColumnParams(columnId, ['local'], e.target.value === '1'),
|
||||
);
|
||||
} else if (e.target.value === '1') {
|
||||
setLocalParam('true');
|
||||
} else {
|
||||
setState((s) => ({ local: e.target.value === '1', order: s.order }));
|
||||
setLocalParam('false');
|
||||
}
|
||||
},
|
||||
[dispatch, columnId],
|
||||
[dispatch, columnId, setLocalParam],
|
||||
);
|
||||
|
||||
const handleLoadMore = useCallback(() => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue