kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
80 wiersze
3.4 KiB
TypeScript
80 wiersze
3.4 KiB
TypeScript
import classNames from 'clsx';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
|
|
import LoadMore from 'soapbox/components/load-more';
|
|
import RadioButton from 'soapbox/components/radio-button';
|
|
import Column from 'soapbox/features/ui/components/column';
|
|
import { useAppSelector } from 'soapbox/hooks';
|
|
import { getFeatures } from 'soapbox/utils/features';
|
|
|
|
import AccountCard from './components/account-card';
|
|
|
|
const messages = defineMessages({
|
|
title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
|
|
recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
|
|
newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
|
|
local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
|
|
federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
|
|
});
|
|
|
|
const Directory = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useDispatch();
|
|
const { search } = useLocation();
|
|
const params = new URLSearchParams(search);
|
|
|
|
const accountIds = useAppSelector((state) => state.user_lists.directory.items);
|
|
const isLoading = useAppSelector((state) => state.user_lists.directory.isLoading);
|
|
const title = useAppSelector((state) => state.instance.get('title'));
|
|
const features = useAppSelector((state) => getFeatures(state.instance));
|
|
|
|
const [order, setOrder] = useState(params.get('order') || 'active');
|
|
const [local, setLocal] = useState(!!params.get('local'));
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchDirectory({ order: order || 'active', local: local || false }));
|
|
}, [order, local]);
|
|
|
|
const handleChangeOrder: React.ChangeEventHandler<HTMLInputElement> = e => {
|
|
setOrder(e.target.value);
|
|
};
|
|
|
|
const handleChangeLocal: React.ChangeEventHandler<HTMLInputElement> = e => {
|
|
setLocal(e.target.value === '1');
|
|
};
|
|
|
|
const handleLoadMore = () => {
|
|
dispatch(expandDirectory({ order: order || 'active', local: local || false }));
|
|
};
|
|
|
|
return (
|
|
<Column icon='address-book-o' label={intl.formatMessage(messages.title)}>
|
|
<div className='directory__filter-form'>
|
|
<div className='directory__filter-form__column' role='group'>
|
|
<RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={handleChangeOrder} />
|
|
<RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={handleChangeOrder} />
|
|
</div>
|
|
|
|
{features.federating && (
|
|
<div className='directory__filter-form__column' role='group'>
|
|
<RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: title })} checked={local} onChange={handleChangeLocal} />
|
|
<RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={handleChangeLocal} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className={classNames('directory__list', { loading: isLoading })}>
|
|
{accountIds.map((accountId) => <AccountCard id={accountId} key={accountId} />)}
|
|
</div>
|
|
|
|
<LoadMore onClick={handleLoadMore} visible={!isLoading} />
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default Directory;
|