Wip: アンテナ編集画面周辺

This commit is contained in:
KMY 2024-11-28 12:51:25 +09:00
parent 041b05b15f
commit 946f5bce3e
51 changed files with 1006 additions and 3665 deletions

View file

@ -0,0 +1,58 @@
import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router';
import { deleteAntenna } from 'mastodon/actions/antennas';
import { removeColumn } from 'mastodon/actions/columns';
import { useAppDispatch } from 'mastodon/store';
import type { BaseConfirmationModalProps } from './confirmation_modal';
import { ConfirmationModal } from './confirmation_modal';
const messages = defineMessages({
deleteAntennaTitle: {
id: 'confirmations.delete_antenna.title',
defaultMessage: 'Delete antenna?',
},
deleteAntennaMessage: {
id: 'confirmations.delete_antenna.message',
defaultMessage: 'Are you sure you want to permanently delete this antenna?',
},
deleteAntennaConfirm: {
id: 'confirmations.delete_antenna.confirm',
defaultMessage: 'Delete',
},
});
export const ConfirmDeleteAntennaModal: React.FC<
{
antennaId: string;
columnId: string;
} & BaseConfirmationModalProps
> = ({ antennaId, columnId, onClose }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const history = useHistory();
const onConfirm = useCallback(() => {
dispatch(deleteAntenna(antennaId));
if (columnId) {
dispatch(removeColumn(columnId));
} else {
history.push('/antennas');
}
}, [dispatch, history, columnId, antennaId]);
return (
<ConfirmationModal
title={intl.formatMessage(messages.deleteAntennaTitle)}
message={intl.formatMessage(messages.deleteAntennaMessage)}
confirm={intl.formatMessage(messages.deleteAntennaConfirm)}
onConfirm={onConfirm}
onClose={onClose}
/>
);
};

View file

@ -0,0 +1,59 @@
import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router';
import { deleteBookmarkCategory } from 'mastodon/actions/bookmark_categories';
import { removeColumn } from 'mastodon/actions/columns';
import { useAppDispatch } from 'mastodon/store';
import type { BaseConfirmationModalProps } from './confirmation_modal';
import { ConfirmationModal } from './confirmation_modal';
const messages = defineMessages({
deleteBookmarkCategoryTitle: {
id: 'confirmations.delete_bookmark_category.title',
defaultMessage: 'Delete category?',
},
deleteBookmarkCategoryMessage: {
id: 'confirmations.delete_bookmark_category.message',
defaultMessage:
'Are you sure you want to permanently delete this category?',
},
deleteBookmarkCategoryConfirm: {
id: 'confirmations.delete_bookmark_category.confirm',
defaultMessage: 'Delete',
},
});
export const ConfirmDeleteBookmarkCategoryModal: React.FC<
{
bookmark_categoryId: string;
columnId: string;
} & BaseConfirmationModalProps
> = ({ bookmark_categoryId, columnId, onClose }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const history = useHistory();
const onConfirm = useCallback(() => {
dispatch(deleteBookmarkCategory(bookmark_categoryId));
if (columnId) {
dispatch(removeColumn(columnId));
} else {
history.push('/bookmark_categorys');
}
}, [dispatch, history, columnId, bookmark_categoryId]);
return (
<ConfirmationModal
title={intl.formatMessage(messages.deleteBookmarkCategoryTitle)}
message={intl.formatMessage(messages.deleteBookmarkCategoryMessage)}
confirm={intl.formatMessage(messages.deleteBookmarkCategoryConfirm)}
onConfirm={onConfirm}
onClose={onClose}
/>
);
};

View file

@ -0,0 +1,58 @@
import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router';
import { deleteCircle } from 'mastodon/actions/circles';
import { removeColumn } from 'mastodon/actions/columns';
import { useAppDispatch } from 'mastodon/store';
import type { BaseConfirmationModalProps } from './confirmation_modal';
import { ConfirmationModal } from './confirmation_modal';
const messages = defineMessages({
deleteCircleTitle: {
id: 'confirmations.delete_circle.title',
defaultMessage: 'Delete circle?',
},
deleteCircleMessage: {
id: 'confirmations.delete_circle.message',
defaultMessage: 'Are you sure you want to permanently delete this circle?',
},
deleteCircleConfirm: {
id: 'confirmations.delete_circle.confirm',
defaultMessage: 'Delete',
},
});
export const ConfirmDeleteCircleModal: React.FC<
{
circleId: string;
columnId: string;
} & BaseConfirmationModalProps
> = ({ circleId, columnId, onClose }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const history = useHistory();
const onConfirm = useCallback(() => {
dispatch(deleteCircle(circleId));
if (columnId) {
dispatch(removeColumn(columnId));
} else {
history.push('/circles');
}
}, [dispatch, history, columnId, circleId]);
return (
<ConfirmationModal
title={intl.formatMessage(messages.deleteCircleTitle)}
message={intl.formatMessage(messages.deleteCircleMessage)}
confirm={intl.formatMessage(messages.deleteCircleConfirm)}
onConfirm={onConfirm}
onClose={onClose}
/>
);
};

View file

@ -1,6 +1,9 @@
export { ConfirmationModal } from './confirmation_modal';
export { ConfirmDeleteStatusModal } from './delete_status';
export { ConfirmDeleteListModal } from './delete_list';
export { ConfirmDeleteAntennaModal } from './delete_antenna';
export { ConfirmDeleteCircleModal } from './delete_circle';
export { ConfirmDeleteBookmarkCategoryModal } from './delete_bookmark_category';
export { ConfirmReplyModal } from './reply';
export { ConfirmEditStatusModal } from './edit_status';
export { ConfirmUnfollowModal } from './unfollow';

View file

@ -50,7 +50,7 @@ export const ListPanel = () => {
<ColumnLink icon='list-ul' key={list.get('id')} iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
))}
{antennas && antennas.map(antenna => (
<ColumnLink icon='wifi' key={antenna.get('id')} iconComponent={AntennaIcon} activeIconComponent={AntennaIcon} text={antenna.get('title')} to={`/antennast/${antenna.get('id')}`} transparent />
<ColumnLink icon='wifi' key={antenna.get('id')} iconComponent={AntennaIcon} activeIconComponent={AntennaIcon} text={antenna.get('title')} to={`/antennas/${antenna.get('id')}`} transparent />
))}
</div>
);

View file

@ -34,6 +34,9 @@ import {
ConfirmationModal,
ConfirmDeleteStatusModal,
ConfirmDeleteListModal,
ConfirmDeleteAntennaModal,
ConfirmDeleteCircleModal,
ConfirmDeleteBookmarkCategoryModal,
ConfirmReplyModal,
ConfirmEditStatusModal,
ConfirmUnfollowModal,
@ -55,6 +58,9 @@ export const MODAL_COMPONENTS = {
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
'CONFIRM_DELETE_STATUS': () => Promise.resolve({ default: ConfirmDeleteStatusModal }),
'CONFIRM_DELETE_LIST': () => Promise.resolve({ default: ConfirmDeleteListModal }),
'CONFIRM_DELETE_ANTENNA': () => Promise.resolve({ default: ConfirmDeleteAntennaModal }),
'CONFIRM_DELETE_CIRCLE': () => Promise.resolve({ default: ConfirmDeleteCircleModal }),
'CONFIRM_DELETE_BOOKMARK_CATEGORY': () => Promise.resolve({ default: ConfirmDeleteBookmarkCategoryModal }),
'CONFIRM_REPLY': () => Promise.resolve({ default: ConfirmReplyModal }),
'CONFIRM_EDIT_STATUS': () => Promise.resolve({ default: ConfirmEditStatusModal }),
'CONFIRM_UNFOLLOW': () => Promise.resolve({ default: ConfirmUnfollowModal }),

View file

@ -122,7 +122,7 @@ class NavigationPanel extends Component {
};
isAntennasActive = (match, location) => {
return (match || location.pathname.startsWith('/antennast'));
return (match || location.pathname.startsWith('/antennas'));
};
render () {
@ -197,7 +197,7 @@ class NavigationPanel extends Component {
{signedIn && (
<>
<ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} />
<ColumnLink transparent to='/antennasw' icon='wifi' iconComponent={AntennaIcon} text={intl.formatMessage(messages.antennas)} isActive={this.isAntennasActive} />
<ColumnLink transparent to='/antennas' icon='wifi' iconComponent={AntennaIcon} text={intl.formatMessage(messages.antennas)} isActive={this.isAntennasActive} />
<ColumnLink transparent to='/circles' icon='user-circle' iconComponent={CirclesIcon} text={intl.formatMessage(messages.circles)} />
<FollowRequestsLink />
<ColumnLink transparent to='/conversations' icon='at' iconComponent={AlternateEmailIcon} text={intl.formatMessage(messages.direct)} />