diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 078fbe1803..a255349105 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -5,10 +5,11 @@ import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { createSelector } from 'reselect';
-import { fetchLists } from 'soapbox/actions/lists';
+import { deleteList, fetchLists } from 'soapbox/actions/lists';
+import { openModal } from 'soapbox/actions/modals';
import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list';
-import { Spinner } from 'soapbox/components/ui';
+import { IconButton, Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
@@ -22,6 +23,11 @@ const messages = defineMessages({
heading: { id: 'column.lists', defaultMessage: 'Lists' },
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
add: { id: 'lists.new.create', defaultMessage: 'Add list' },
+ deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
+ deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
+ deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
+ editList: { id: 'lists.edit', defaultMessage: 'Edit list' },
+ deleteList: { id: 'lists.delete', defaultMessage: 'Delete list' },
});
const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
@@ -50,6 +56,25 @@ const Lists: React.FC = () => {
);
}
+ const handleEditClick = (id: number) => (e: React.MouseEvent) => {
+ e.preventDefault();
+
+ dispatch(openModal('LIST_EDITOR', { listId: id }));
+ };
+
+ const handleDeleteClick = (id: number) => (e: React.MouseEvent) => {
+ e.preventDefault();
+
+ dispatch(openModal('CONFIRM', {
+ heading: intl.formatMessage(messages.deleteHeading),
+ message: intl.formatMessage(messages.deleteMessage),
+ confirm: intl.formatMessage(messages.deleteConfirm),
+ onConfirm: () => {
+ dispatch(deleteList(id));
+ },
+ }));
+ };
+
const emptyMessage = ;
return (
@@ -66,11 +91,16 @@ const Lists: React.FC = () => {
{lists.map((list: any) => (
-
+
- {list.get('title')}
+
+ {list.get('title')}
+
+
+
))}