gitea/nas
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add list selection on antenna setting page

Browse source
This commit is contained in:
KMY 2023-08-19 13:11:01 +09:00
parent d23ecd1dff
commit f393aa2a85
3 changed files with 62 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/controllers/api/v1/antennas_controller.rb
View file

@ -42,6 +42,6 @@ class Api::V1::AntennasController < Api::BaseController
end end
def antenna_params def antenna_params
params.permit(:title, :stl, :with_media_only, :ignore_reblog) params.permit(:title, :list_id, :stl, :with_media_only, :ignore_reblog)
end end
end end

4
app/javascript/mastodon/actions/antennas.js
View file

@ -151,10 +151,10 @@ export const createAntennaFail = error => ({
error, error,
}); });
export const updateAntenna = (id, title, shouldReset, stl, with_media_only, ignore_reblog) => (dispatch, getState) => { export const updateAntenna = (id, title, shouldReset, list_id, stl, with_media_only, ignore_reblog) => (dispatch, getState) => {
dispatch(updateAntennaRequest(id)); dispatch(updateAntennaRequest(id));
api(getState).put(`/api/v1/antennas/${id}`, { title, stl, with_media_only, ignore_reblog }).then(({ data }) => { api(getState).put(`/api/v1/antennas/${id}`, { title, list_id, stl, with_media_only, ignore_reblog }).then(({ data }) => {
dispatch(updateAntennaSuccess(data)); dispatch(updateAntennaSuccess(data));
if (shouldReset) { if (shouldReset) {

83
app/javascript/mastodon/features/antenna_setting/index.jsx
View file

@ -8,10 +8,12 @@ import { Helmet } from 'react-helmet';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Select, { NonceProvider } from 'react-select';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { fetchAntenna, deleteAntenna, updateAntenna } from 'mastodon/actions/antennas'; import { fetchAntenna, deleteAntenna, updateAntenna } from 'mastodon/actions/antennas';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
import { fetchLists } from 'mastodon/actions/lists';
import { openModal } from 'mastodon/actions/modal'; import { openModal } from 'mastodon/actions/modal';
import Button from 'mastodon/components/button'; import Button from 'mastodon/components/button';
import Column from 'mastodon/components/column'; import Column from 'mastodon/components/column';
@ -24,10 +26,13 @@ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete_antenna.message', defaultMessage: 'Are you sure you want to permanently delete this antenna?' }, 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' }, deleteConfirm: { id: 'confirmations.delete_antenna.confirm', defaultMessage: 'Delete' },
editAccounts: { id: 'antennas.edit_accounts', defaultMessage: 'Edit accounts' }, 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' },
}); });
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
antenna: state.getIn(['antennas', props.params.id]), antenna: state.getIn(['antennas', props.params.id]),
lists: state.get('lists'),
}); });
class AntennaSetting extends PureComponent { class AntennaSetting extends PureComponent {
@ -42,6 +47,7 @@ class AntennaSetting extends PureComponent {
columnId: PropTypes.string, columnId: PropTypes.string,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
antenna: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]), antenna: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
lists: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -70,6 +76,7 @@ class AntennaSetting extends PureComponent {
const { id } = this.props.params; const { id } = this.props.params;
dispatch(fetchAntenna(id)); dispatch(fetchAntenna(id));
dispatch(fetchLists());
} }
UNSAFE_componentWillReceiveProps (nextProps) { UNSAFE_componentWillReceiveProps (nextProps) {
@ -121,23 +128,31 @@ class AntennaSetting extends PureComponent {
onStlToggle = ({ target }) => { onStlToggle = ({ target }) => {
const { dispatch } = this.props; const { dispatch } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
dispatch(updateAntenna(id, undefined, false, target.checked, undefined, undefined)); dispatch(updateAntenna(id, undefined, false, undefined, target.checked, undefined, undefined));
}; };
onMediaOnlyToggle = ({ target }) => { onMediaOnlyToggle = ({ target }) => {
const { dispatch } = this.props; const { dispatch } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
dispatch(updateAntenna(id, undefined, false, undefined, target.checked, undefined)); dispatch(updateAntenna(id, undefined, false, undefined, undefined, target.checked, undefined));
}; };
onIgnoreReblogToggle = ({ target }) => { onIgnoreReblogToggle = ({ target }) => {
const { dispatch } = this.props; const { dispatch } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
dispatch(updateAntenna(id, undefined, false, undefined, undefined, target.checked)); dispatch(updateAntenna(id, undefined, false, undefined, undefined, undefined, target.checked));
}; };
onSelect = value => {
const { dispatch } = this.props;
const { id } = this.props.params;
dispatch(updateAntenna(id, undefined, false, value.value, undefined, undefined, undefined));
};
noOptionsMessage = () => this.props.intl.formatMessage(messages.noOptions);
render () { render () {
const { columnId, multiColumn, antenna, intl } = this.props; const { columnId, multiColumn, antenna, lists, intl } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
const pinned = !!columnId; const pinned = !!columnId;
const title = antenna ? antenna.get('title') : id; const title = antenna ? antenna.get('title') : id;
@ -183,12 +198,16 @@ class AntennaSetting extends PureComponent {
let stlAlert; let stlAlert;
if (isStl) { if (isStl) {
stlAlert = ( stlAlert = (
<div class='antenna-setting'> <div className='antenna-setting'>
<p><FormattedMessage id='antennas.in_stl_mode' defaultMessage='This antenna is in STL mode.' /></p> <p><FormattedMessage id='antennas.in_stl_mode' defaultMessage='This antenna is in STL mode.' /></p>
</div> </div>
); );
} }
const listOptions = lists.toArray().map((list) => {
return { value: list[1].get('id'), label: list[1].get('title') }
});
return ( return (
<Column bindToDocument={!multiColumn} ref={this.setRef} label={title}> <Column bindToDocument={!multiColumn} ref={this.setRef} label={title}>
<ColumnHeader <ColumnHeader
@ -221,27 +240,43 @@ class AntennaSetting extends PureComponent {
</ColumnHeader> </ColumnHeader>
{stlAlert} {stlAlert}
{!isStl && ( <div className='antenna-setting'>
<div class='antenna-setting'> {antenna.get('list') ? (
{antenna.get('list') ? ( <p><FormattedMessage id='antennas.related_list' defaultMessage='This antenna is related to {listTitle}.' values={{ listTitle: antenna.getIn(['list', 'title']) }} /></p>
<p><FormattedMessage id='antennas.related_list' defaultMessage='This antenna is related to {listTitle}.' values={{ listTitle: antenna.getIn(['list', 'title']) }} /></p> ) : (
) : ( <>
<> <p><FormattedMessage id='antennas.not_related_list' defaultMessage='This antenna is not related list. Posts will appear in home timeline. Open edit page to set list.' /></p>
<p><FormattedMessage id='antennas.not_related_list' defaultMessage='This antenna is not related list. Posts will appear in home timeline. Open edit page to set list.' /></p> <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditAntennaClick}>
<button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditAntennaClick}> <Icon id='pencil' /> <FormattedMessage id='anntennas.edit' defaultMessage='Edit antenna' />
<Icon id='pencil' /> <FormattedMessage id='anntennas.edit' defaultMessage='Edit antenna' /> </button>
</button> </>
</> )}
)}
<h3><FormattedMessage id='antennas.accounts' defaultMessage='{count} accounts' values={{ count: antenna.get('accounts_count') }} /></h3> <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content} cacheKey='lists'>
<Button text={intl.formatMessage(messages.editAccounts)} onClick={this.handleEditClick} /> <Select
value={{ value: antenna.getIn(['list', 'id']), label: antenna.getIn(['list', 'title']) }}
options={listOptions}
noOptionsMessage={this.noOptionsMessage}
onChange={this.onSelect}
className='column-select__container'
classNamePrefix='column-select'
name='lists'
placeholder={this.props.intl.formatMessage(messages.placeholder)}
defaultOptions
/>
</NonceProvider>
<h3><FormattedMessage id='antennas.domains' defaultMessage='{count} domains' values={{ count: antenna.get('domains_count') }} /></h3> {!isStl && (
<h3><FormattedMessage id='antennas.tags' defaultMessage='{count} tags' values={{ count: antenna.get('tags_count') }} /></h3> <>
<h3><FormattedMessage id='antennas.keywords' defaultMessage='{count} keywords' values={{ count: antenna.get('keywords_count') }} /></h3> <h3><FormattedMessage id='antennas.accounts' defaultMessage='{count} accounts' values={{ count: antenna.get('accounts_count') }} /></h3>
</div> <Button text={intl.formatMessage(messages.editAccounts)} onClick={this.handleEditClick} />
)}
<h3><FormattedMessage id='antennas.domains' defaultMessage='{count} domains' values={{ count: antenna.get('domains_count') }} /></h3>
<h3><FormattedMessage id='antennas.tags' defaultMessage='{count} tags' values={{ count: antenna.get('tags_count') }} /></h3>
<h3><FormattedMessage id='antennas.keywords' defaultMessage='{count} keywords' values={{ count: antenna.get('keywords_count') }} /></h3>
</>
)}
</div>
<Helmet> <Helmet>
<title>{title}</title> <title>{title}</title>