417 lines
11 KiB
TypeScript
417 lines
11 KiB
TypeScript
import { useEffect, useState, useCallback } from 'react';
|
|
|
|
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
|
|
import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
|
|
import DomainIcon from '@/material-icons/400-24px/dns.svg?react';
|
|
//import EditIcon from '@/material-icons/400-24px/edit.svg?react';
|
|
//import HashtagIcon from '@/material-icons/400-24px/tag.svg?react';
|
|
//import KeywordIcon from '@/material-icons/400-24px/title.svg?react';
|
|
import AntennaIcon from '@/material-icons/400-24px/wifi.svg?react';
|
|
import {
|
|
fetchAntenna,
|
|
fetchAntennaAccounts,
|
|
fetchAntennaDomains,
|
|
fetchAntennaExcludeAccounts,
|
|
fetchAntennaKeywords,
|
|
fetchAntennaTags,
|
|
} from 'mastodon/actions/antennas';
|
|
import {
|
|
apiAddDomain,
|
|
apiGetAccounts,
|
|
apiRemoveDomain,
|
|
} from 'mastodon/api/antennas';
|
|
import { Button } from 'mastodon/components/button';
|
|
import Column from 'mastodon/components/column';
|
|
import { ColumnHeader } from 'mastodon/components/column_header';
|
|
import type { IconProp , Icon } from 'mastodon/components/icon';
|
|
import { IconButton } from 'mastodon/components/icon_button';
|
|
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
|
|
|
const messages = defineMessages({
|
|
deleteMessage: {
|
|
id: 'confirmations.delete_antenna.message',
|
|
defaultMessage: 'Are you sure you want to permanently delete this antenna?',
|
|
},
|
|
deleteConfirm: {
|
|
id: 'confirmations.delete_antenna.confirm',
|
|
defaultMessage: 'Delete',
|
|
},
|
|
editAccounts: {
|
|
id: 'antennas.edit_accounts',
|
|
defaultMessage: 'Edit accounts',
|
|
},
|
|
noOptions: {
|
|
id: 'antennas.select.no_options_message',
|
|
defaultMessage: 'Empty lists',
|
|
},
|
|
placeholder: {
|
|
id: 'antennas.select.placeholder',
|
|
defaultMessage: 'Select list',
|
|
},
|
|
addDomainLabel: {
|
|
id: 'antennas.add_domain_placeholder',
|
|
defaultMessage: 'New domain',
|
|
},
|
|
addKeywordLabel: {
|
|
id: 'antennas.add_keyword_placeholder',
|
|
defaultMessage: 'New keyword',
|
|
},
|
|
addTagLabel: {
|
|
id: 'antennas.add_tag_placeholder',
|
|
defaultMessage: 'New tag',
|
|
},
|
|
addDomainTitle: { id: 'antennas.add_domain', defaultMessage: 'Add domain' },
|
|
addKeywordTitle: {
|
|
id: 'antennas.add_keyword',
|
|
defaultMessage: 'Add keyword',
|
|
},
|
|
addTagTitle: { id: 'antennas.add_tag', defaultMessage: 'Add tag' },
|
|
accounts: { id: 'antennas.accounts', defaultMessage: '{count} accounts' },
|
|
domains: { id: 'antennas.domains', defaultMessage: '{count} domains' },
|
|
tags: { id: 'antennas.tags', defaultMessage: '{count} tags' },
|
|
keywords: { id: 'antennas.keywords', defaultMessage: '{count} keywords' },
|
|
setHome: { id: 'antennas.select.set_home', defaultMessage: 'Set home' },
|
|
});
|
|
|
|
const TextListItem: React.FC<{
|
|
icon: string;
|
|
iconComponent: IconProp;
|
|
value: string;
|
|
onRemove: (value: string) => void;
|
|
}> = ({ icon, iconComponent, value, onRemove }) => {
|
|
const handleRemove = useCallback(() => { onRemove(value); }, [onRemove, value]);
|
|
|
|
return (
|
|
<div className='setting-text-list-item'>
|
|
<Icon id={icon} icon={iconComponent} />
|
|
<span className='label'>{value}</span>
|
|
<IconButton
|
|
title='Delete'
|
|
icon='trash'
|
|
iconComponent={DeleteIcon}
|
|
onClick={handleRemove}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const TextList: React.FC<{
|
|
values: string[];
|
|
disabled?: boolean;
|
|
icon: string;
|
|
iconComponent: IconProp;
|
|
label: string;
|
|
title: string;
|
|
onAdd: (value: string) => void;
|
|
onRemove: (value: string) => void;
|
|
}> = ({
|
|
values,
|
|
disabled,
|
|
icon,
|
|
iconComponent,
|
|
label,
|
|
title,
|
|
onAdd,
|
|
onRemove,
|
|
}) => {
|
|
const [value, setValue] = useState('');
|
|
|
|
const handleValueChange = useCallback(
|
|
({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
|
|
setValue(value);
|
|
},
|
|
[setValue],
|
|
);
|
|
|
|
const handleAdd = useCallback(() => {
|
|
onAdd(value);
|
|
setValue('');
|
|
}, [onAdd, value]);
|
|
|
|
const handleRemove = useCallback(
|
|
(removeValue: string) => { onRemove(removeValue); },
|
|
[onRemove],
|
|
);
|
|
|
|
const handleSubmit = handleAdd;
|
|
|
|
return (
|
|
<div className='setting-text-list'>
|
|
{values.map((val) => (
|
|
<TextListItem
|
|
key={val}
|
|
value={val}
|
|
icon={icon}
|
|
iconComponent={iconComponent}
|
|
onRemove={handleRemove}
|
|
/>
|
|
))}
|
|
|
|
<form className='add-text-form' onSubmit={handleSubmit}>
|
|
<label>
|
|
<span style={{ display: 'none' }}>{label}</span>
|
|
|
|
<input
|
|
className='setting-text'
|
|
value={value}
|
|
disabled={disabled}
|
|
onChange={handleValueChange}
|
|
placeholder={label}
|
|
/>
|
|
</label>
|
|
|
|
<Button
|
|
disabled={disabled || !value}
|
|
text={title}
|
|
onClick={handleAdd}
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const RadioPanel: React.FC<{
|
|
items: { title: string; value: string }[];
|
|
valueLengths: number[];
|
|
alertMessage: React.ReactElement;
|
|
onChange: (value: string) => void;
|
|
}> = ({ items, valueLengths, alertMessage, onChange }) => {
|
|
const [error, setError] = useState(false);
|
|
const [value, setValue] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (valueLengths.length >= 2) {
|
|
setError(valueLengths.slice(1).some((v) => v > 0));
|
|
} else {
|
|
setError(false);
|
|
}
|
|
}, [valueLengths]);
|
|
|
|
useEffect(() => {
|
|
if (items.length > 0 && !items.some((i) => i.value === value)) {
|
|
for (let i = 0; i < valueLengths.length; i++) {
|
|
const length = valueLengths[i] ?? 0;
|
|
const item = items[i] ?? { value: '' };
|
|
if (length > 0) {
|
|
setValue(item.value);
|
|
return;
|
|
}
|
|
}
|
|
setValue(items[0]?.value ?? '');
|
|
}
|
|
}, [items]);
|
|
|
|
const handleChange = useCallback(
|
|
({ currentTarget }: React.MouseEvent<HTMLButtonElement>) => {
|
|
const selected = currentTarget.getAttribute('data-value') ?? '';
|
|
if (value !== selected) {
|
|
onChange(selected);
|
|
setValue(selected);
|
|
}
|
|
},
|
|
[setValue],
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<div className='setting-radio-panel'>
|
|
{items.map((item) => (
|
|
<button
|
|
className={classNames('setting-radio-panel__item', {
|
|
'setting-radio-panel__item__active': value === item.value,
|
|
})}
|
|
key={item.value}
|
|
onClick={handleChange}
|
|
data-value={item.value}
|
|
>
|
|
{item.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{error && <div className='alert'>{alertMessage}</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const MembersLink: React.FC<{
|
|
id: string;
|
|
onCountFetched: (count: number) => void;
|
|
}> = ({ id, onCountFetched }) => {
|
|
const [count, setCount] = useState(0);
|
|
const [avatars, setAvatars] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
void apiGetAccounts(id)
|
|
.then((data) => {
|
|
setCount(data.length);
|
|
onCountFetched(data.length);
|
|
setAvatars(data.slice(0, 3).map((a) => a.avatar));
|
|
return '';
|
|
})
|
|
.catch(() => {
|
|
// Nothing
|
|
});
|
|
}, [id, setCount, setAvatars]);
|
|
|
|
return (
|
|
<Link to={`/antennas/${id}/members`} className='app-form__link'>
|
|
<div className='app-form__link__text'>
|
|
<strong>
|
|
<FormattedMessage
|
|
id='antennas.antenna_accounts'
|
|
defaultMessage='Antenna accounts'
|
|
/>
|
|
</strong>
|
|
<FormattedMessage
|
|
id='antennas.antenna_accounts_count'
|
|
defaultMessage='{count, plural, one {# member} other {# accounts}}'
|
|
values={{ count }}
|
|
/>
|
|
</div>
|
|
|
|
<div className='avatar-pile'>
|
|
{avatars.map((url) => (
|
|
<img key={url} src={url} alt='' />
|
|
))}
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const AntennaSetting: React.FC<{
|
|
multiColumn?: boolean;
|
|
}> = ({ multiColumn }) => {
|
|
const dispatch = useAppDispatch();
|
|
const { id } = useParams<{ id?: string }>();
|
|
const intl = useIntl();
|
|
//const history = useHistory();
|
|
|
|
const antenna = useAppSelector((state) =>
|
|
id ? state.antennas.get(id) : undefined,
|
|
);
|
|
const domains = useAppSelector((state) =>
|
|
id ? state.antennas.getIn(['domains', id]) : undefined,
|
|
) as string[] | undefined;
|
|
const [domainList, setDomainList] = useState([] as string[]);
|
|
const [accountsCount, setAccountsCount] = useState(0);
|
|
const [rangeMode, setRangeMode] = useState('accounts');
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
dispatch(fetchAntenna(id));
|
|
dispatch(fetchAntennaKeywords(id));
|
|
dispatch(fetchAntennaDomains(id));
|
|
dispatch(fetchAntennaTags(id));
|
|
dispatch(fetchAntennaAccounts(id));
|
|
dispatch(fetchAntennaExcludeAccounts(id));
|
|
}
|
|
}, [dispatch, id]);
|
|
|
|
useEffect(() => {
|
|
if (id && antenna) {
|
|
setDomainList(domains ?? []);
|
|
}
|
|
}, [id, antenna, domains, setDomainList]);
|
|
|
|
const handleAccountsFetched = useCallback(
|
|
(count: number) => {
|
|
setAccountsCount(count);
|
|
},
|
|
[setAccountsCount],
|
|
);
|
|
|
|
const handleAddDomain = useCallback(
|
|
(value: string) => {
|
|
if (!id) return;
|
|
|
|
void apiAddDomain(id, value).then(() => {
|
|
setDomainList([...domainList, value]);
|
|
return value;
|
|
});
|
|
},
|
|
[id, domainList, setDomainList],
|
|
);
|
|
|
|
const handleRemoveDomain = useCallback(
|
|
(value: string) => {
|
|
if (!id) return;
|
|
|
|
void apiRemoveDomain(id, value).then(() => {
|
|
setDomainList(domainList.filter((v) => v !== value));
|
|
return value;
|
|
});
|
|
},
|
|
[id, domainList, setDomainList],
|
|
);
|
|
|
|
const handleRangeRadioChange = useCallback(
|
|
(value: string) => {
|
|
setRangeMode(value);
|
|
},
|
|
[id, antenna, setRangeMode],
|
|
);
|
|
|
|
if (!antenna || !id) return <div />;
|
|
|
|
const rangeRadioItems = [
|
|
{
|
|
value: 'accounts',
|
|
title: intl.formatMessage(messages.accounts, { count: accountsCount }),
|
|
},
|
|
{
|
|
value: 'domains',
|
|
title: intl.formatMessage(messages.domains, { count: domainList.length }),
|
|
},
|
|
];
|
|
const rangeRadioLengths = [0, domainList.length];
|
|
|
|
return (
|
|
<Column bindToDocument={!multiColumn} label={antenna.title}>
|
|
<ColumnHeader
|
|
title={antenna.title}
|
|
icon='antenna-ul'
|
|
iconComponent={AntennaIcon}
|
|
multiColumn={multiColumn}
|
|
showBackButton
|
|
/>
|
|
|
|
<div className='scrollable antenna-setting'>
|
|
<RadioPanel
|
|
items={rangeRadioItems}
|
|
valueLengths={rangeRadioLengths}
|
|
alertMessage={
|
|
<div className='alert'>
|
|
<FormattedMessage
|
|
id='antennas.warnings.range_radio'
|
|
defaultMessage='Simultaneous account and domain designation is not recommended.'
|
|
/>
|
|
</div>
|
|
}
|
|
onChange={handleRangeRadioChange}
|
|
/>
|
|
{rangeMode === 'accounts' && (
|
|
<MembersLink id={id} onCountFetched={handleAccountsFetched} />
|
|
)}
|
|
{rangeMode === 'domains' && (
|
|
<TextList
|
|
values={domainList}
|
|
icon='sitemap'
|
|
iconComponent={DomainIcon}
|
|
label={intl.formatMessage(messages.addDomainLabel)}
|
|
title={intl.formatMessage(messages.addDomainTitle)}
|
|
onAdd={handleAddDomain}
|
|
onRemove={handleRemoveDomain}
|
|
/>
|
|
)}
|
|
</div>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
// eslint-disable-next-line import/no-default-export
|
|
export default AntennaSetting;
|