From 09b4b025df7ef053f90dc42711c1d0895bd3284a Mon Sep 17 00:00:00 2001 From: KMY Date: Sat, 26 Aug 2023 14:13:45 +0900 Subject: [PATCH] Add title editor and delete button --- .../mastodon/actions/bookmark_categories.js | 2 +- .../edit_bookmark_category_form.jsx | 73 +++++++++++++++++++ .../bookmark_category_statuses/index.jsx | 61 +++++++++++++++- .../mastodon/features/list_timeline/index.jsx | 2 +- .../mastodon/reducers/bookmark_categories.js | 7 +- .../reducers/bookmark_category_editor.js | 1 - 6 files changed, 138 insertions(+), 8 deletions(-) create mode 100644 app/javascript/mastodon/features/bookmark_category_statuses/components/edit_bookmark_category_form.jsx diff --git a/app/javascript/mastodon/actions/bookmark_categories.js b/app/javascript/mastodon/actions/bookmark_categories.js index 3f8f790009..9fa2ffc9f2 100644 --- a/app/javascript/mastodon/actions/bookmark_categories.js +++ b/app/javascript/mastodon/actions/bookmark_categories.js @@ -113,7 +113,7 @@ export const submitBookmarkCategoryEditor = shouldReset => (dispatch, getState) export const setupBookmarkCategoryEditor = bookmarkCategoryId => (dispatch, getState) => { dispatch({ type: BOOKMARK_CATEGORY_EDITOR_SETUP, - bookmarkCategory: getState().getIn(['bookmarkCategories', bookmarkCategoryId]), + bookmarkCategory: getState().getIn(['bookmark_categories', bookmarkCategoryId]), }); dispatch(fetchBookmarkCategoryStatuses(bookmarkCategoryId)); diff --git a/app/javascript/mastodon/features/bookmark_category_statuses/components/edit_bookmark_category_form.jsx b/app/javascript/mastodon/features/bookmark_category_statuses/components/edit_bookmark_category_form.jsx new file mode 100644 index 0000000000..028d2716bc --- /dev/null +++ b/app/javascript/mastodon/features/bookmark_category_statuses/components/edit_bookmark_category_form.jsx @@ -0,0 +1,73 @@ +import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + +import { defineMessages, injectIntl } from 'react-intl'; + +import { connect } from 'react-redux'; + +import { changeBookmarkCategoryEditorTitle, submitBookmarkCategoryEditor } from '../../../actions/bookmark_categories'; +import { IconButton } from '../../../components/icon_button'; + +const messages = defineMessages({ + title: { id: 'bookmark_categories.edit.submit', defaultMessage: 'Change title' }, +}); + +const mapStateToProps = state => ({ + value: state.getIn(['bookmarkCategoryEditor', 'title']), + disabled: !state.getIn(['bookmarkCategoryEditor', 'isChanged']) || !state.getIn(['bookmarkCategoryEditor', 'title']), +}); + +const mapDispatchToProps = dispatch => ({ + onChange: value => dispatch(changeBookmarkCategoryEditorTitle(value)), + onSubmit: () => dispatch(submitBookmarkCategoryEditor(false)), +}); + +class EditBookmarkCategoryForm extends PureComponent { + + static propTypes = { + value: PropTypes.string.isRequired, + disabled: PropTypes.bool, + intl: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + }; + + handleChange = e => { + this.props.onChange(e.target.value); + }; + + handleSubmit = e => { + e.preventDefault(); + this.props.onSubmit(); + }; + + handleClick = () => { + this.props.onSubmit(); + }; + + render () { + const { value, disabled, intl } = this.props; + + const title = intl.formatMessage(messages.title); + + return ( +
+ + + + + ); + } + +} + +export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(EditBookmarkCategoryForm)); diff --git a/app/javascript/mastodon/features/bookmark_category_statuses/index.jsx b/app/javascript/mastodon/features/bookmark_category_statuses/index.jsx index 6ffd017891..0b431b334d 100644 --- a/app/javascript/mastodon/features/bookmark_category_statuses/index.jsx +++ b/app/javascript/mastodon/features/bookmark_category_statuses/index.jsx @@ -10,16 +10,23 @@ import { connect } from 'react-redux'; import { debounce } from 'lodash'; -import { expandBookmarkCategoryStatuses, fetchBookmarkCategory, fetchBookmarkCategoryStatuses } from 'mastodon/actions/bookmark_categories'; +import { deleteBookmarkCategory, expandBookmarkCategoryStatuses, fetchBookmarkCategory, fetchBookmarkCategoryStatuses , setupBookmarkCategoryEditor } from 'mastodon/actions/bookmark_categories'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; +import { openModal } from 'mastodon/actions/modal'; import ColumnHeader from 'mastodon/components/column_header'; +import { Icon } from 'mastodon/components/icon'; import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import StatusList from 'mastodon/components/status_list'; import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error'; import Column from 'mastodon/features/ui/components/column'; import { getBookmarkCategoryStatusList } from 'mastodon/selectors'; +import EditBookmarkCategoryForm from './components/edit_bookmark_category_form'; + + const messages = defineMessages({ + deleteMessage: { id: 'confirmations.delete_bookmary_category.message', defaultMessage: 'Are you sure you want to permanently delete this category?' }, + deleteConfirm: { id: 'confirmations.delete_bookmark_category.confirm', defaultMessage: 'Delete' }, heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, }); @@ -27,11 +34,16 @@ const mapStateToProps = (state, { params }) => ({ bookmarkCategory: state.getIn(['bookmark_categories', params.id]), statusIds: getBookmarkCategoryStatusList(state, params.id), isLoading: state.getIn(['bookmark_categories', params.id, 'isLoading'], true), + isEditing: state.getIn(['bookmarkCategoryEditor', 'bookmarkCategoryId']) === params.id, hasMore: !!state.getIn(['bookmark_categories', params.id, 'next']), }); class BookmarkCategoryStatuses extends ImmutablePureComponent { + static contextTypes = { + router: PropTypes.object, + }; + static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, @@ -42,6 +54,7 @@ class BookmarkCategoryStatuses extends ImmutablePureComponent { multiColumn: PropTypes.bool, hasMore: PropTypes.bool, isLoading: PropTypes.bool, + isEditing: PropTypes.bool, }; UNSAFE_componentWillMount () { @@ -68,6 +81,32 @@ class BookmarkCategoryStatuses extends ImmutablePureComponent { this.column.scrollTop(); }; + handleEditClick = () => { + this.props.dispatch(setupBookmarkCategoryEditor(this.props.params.id)); + }; + + handleDeleteClick = () => { + const { dispatch, columnId, intl } = this.props; + const { id } = this.props.params; + + dispatch(openModal({ + modalType: 'CONFIRM', + modalProps: { + message: intl.formatMessage(messages.deleteMessage), + confirm: intl.formatMessage(messages.deleteConfirm), + onConfirm: () => { + dispatch(deleteBookmarkCategory(id)); + + if (columnId) { + dispatch(removeColumn(columnId)); + } else { + this.context.router.history.push('/bookmark_categories'); + } + }, + }, + })); + }; + setRef = c => { this.column = c; }; @@ -77,7 +116,7 @@ class BookmarkCategoryStatuses extends ImmutablePureComponent { }, 300, { leading: true }); render () { - const { intl, bookmarkCategory, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props; + const { intl, bookmarkCategory, statusIds, columnId, multiColumn, hasMore, isLoading, isEditing } = this.props; const pinned = !!columnId; if (typeof bookmarkCategory === 'undefined') { @@ -96,6 +135,10 @@ class BookmarkCategoryStatuses extends ImmutablePureComponent { const emptyMessage = ; + const editor = isEditing && ( + + ); + return ( + > +
+ + + + + {editor} +
+ { const id = e.currentTarget.getAttribute('data-id'); this.context.router.history.push(`/antennasw/${id}/edit`); - } + }; handleRepliesPolicyChange = ({ target }) => { const { dispatch } = this.props; diff --git a/app/javascript/mastodon/reducers/bookmark_categories.js b/app/javascript/mastodon/reducers/bookmark_categories.js index 731dceee85..561dea1824 100644 --- a/app/javascript/mastodon/reducers/bookmark_categories.js +++ b/app/javascript/mastodon/reducers/bookmark_categories.js @@ -49,7 +49,9 @@ const appendToBookmarkCategoryStatuses = (state, bookmarkCategoryId, statuses, n const removeStatusFromAllBookmarkCategories = (state, status) => { state.toList().forEach((bookmarkCategory) => { - state = state.updateIn([bookmarkCategory.get('id'), 'items'], items => items.delete(status.get('id'))); + if (state.getIn([bookmarkCategory.get('id'), 'items'])) { + state = state.updateIn([bookmarkCategory.get('id'), 'items'], items => items.delete(status.get('id'))); + } }); return state; }; @@ -58,8 +60,9 @@ export default function bookmarkCategories(state = initialState, action) { switch(action.type) { case BOOKMARK_CATEGORY_FETCH_SUCCESS: case BOOKMARK_CATEGORY_CREATE_SUCCESS: - case BOOKMARK_CATEGORY_UPDATE_SUCCESS: return normalizeBookmarkCategory(state, action.bookmarkCategory); + case BOOKMARK_CATEGORY_UPDATE_SUCCESS: + return state.setIn([action.bookmarkCategory.id, 'title'], action.bookmarkCategory.title); case BOOKMARK_CATEGORIES_FETCH_SUCCESS: return normalizeBookmarkCategories(state, action.bookmarkCategories); case BOOKMARK_CATEGORY_DELETE_SUCCESS: diff --git a/app/javascript/mastodon/reducers/bookmark_category_editor.js b/app/javascript/mastodon/reducers/bookmark_category_editor.js index 2226fd7327..2c1c55c6d1 100644 --- a/app/javascript/mastodon/reducers/bookmark_category_editor.js +++ b/app/javascript/mastodon/reducers/bookmark_category_editor.js @@ -39,7 +39,6 @@ export default function bookmarkCategoryEditorReducer(state = initialState, acti return state.withMutations(map => { map.set('bookmarkCategoryId', action.bookmarkCategory.get('id')); map.set('title', action.bookmarkCategory.get('title')); - map.set('isExclusive', action.bookmarkCategory.get('is_exclusive')); map.set('isSubmitting', false); }); case BOOKMARK_CATEGORY_EDITOR_TITLE_CHANGE: