71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import debounce from 'lodash/debounce';
|
|
import React, { useCallback, useEffect } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import { expandUserIndex, fetchUserIndex, setUserIndexQuery } from 'soapbox/actions/admin';
|
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
|
import { Column } from 'soapbox/components/ui';
|
|
import AccountContainer from 'soapbox/containers/account-container';
|
|
import { SimpleForm, TextInput } from 'soapbox/features/forms';
|
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
heading: { id: 'column.admin.users', defaultMessage: 'Users' },
|
|
empty: { id: 'admin.user_index.empty', defaultMessage: 'No users found.' },
|
|
searchPlaceholder: { id: 'admin.user_index.search_input_placeholder', defaultMessage: 'Who are you looking for?' },
|
|
});
|
|
|
|
const UserIndex: React.FC = () => {
|
|
const dispatch = useAppDispatch();
|
|
const intl = useIntl();
|
|
|
|
const { isLoading, items, total, query, next } = useAppSelector((state) => state.admin_user_index);
|
|
|
|
const handleLoadMore = () => {
|
|
dispatch(expandUserIndex());
|
|
};
|
|
|
|
const updateQuery = useCallback(debounce(() => {
|
|
dispatch(fetchUserIndex());
|
|
}, 900, { leading: true }), []);
|
|
|
|
const handleQueryChange: React.ChangeEventHandler<HTMLInputElement> = e => {
|
|
dispatch(setUserIndexQuery(e.target.value));
|
|
};
|
|
|
|
useEffect(() => {
|
|
updateQuery();
|
|
}, [query]);
|
|
|
|
const hasMore = items.count() < total && next !== null;
|
|
|
|
const showLoading = isLoading && items.isEmpty();
|
|
|
|
return (
|
|
<Column label={intl.formatMessage(messages.heading)}>
|
|
<SimpleForm style={{ paddingBottom: 0 }}>
|
|
<TextInput
|
|
value={query}
|
|
onChange={handleQueryChange}
|
|
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
|
/>
|
|
</SimpleForm>
|
|
<ScrollableList
|
|
scrollKey='user-index'
|
|
hasMore={hasMore}
|
|
isLoading={isLoading}
|
|
showLoading={showLoading}
|
|
onLoadMore={handleLoadMore}
|
|
emptyMessage={intl.formatMessage(messages.empty)}
|
|
className='mt-4'
|
|
itemClassName='pb-4'
|
|
>
|
|
{items.map(id =>
|
|
<AccountContainer key={id} id={id} withDate />,
|
|
)}
|
|
</ScrollableList>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default UserIndex;
|