phanpy/src/components/list-add-edit.jsx
Lim Chee Aun 1ecd568c29 Preliminary support for exclusive list
Only for Mastodon v4.2+
2023-08-09 19:08:42 +08:00

172 lines
5.3 KiB
JavaScript

import { useEffect, useRef, useState } from 'preact/hooks';
import { api } from '../utils/api';
import supports from '../utils/supports';
import Icon from './icon';
import MenuConfirm from './menu-confirm';
function ListAddEdit({ list, onClose }) {
const { masto } = api();
const [uiState, setUiState] = useState('default');
const editMode = !!list;
const nameFieldRef = useRef();
const repliesPolicyFieldRef = useRef();
const exclusiveFieldRef = useRef();
useEffect(() => {
if (editMode) {
nameFieldRef.current.value = list.title;
repliesPolicyFieldRef.current.value = list.repliesPolicy;
if (exclusiveFieldRef.current) {
exclusiveFieldRef.current.checked = list.exclusive;
}
}
}, [editMode]);
const supportsExclusive = supports('@mastodon/list-exclusive');
return (
<div class="sheet">
{!!onClose && (
<button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" />
</button>
)}{' '}
<header>
<h2>{editMode ? 'Edit list' : 'New list'}</h2>
</header>
<main>
<form
class="list-form"
onSubmit={(e) => {
e.preventDefault(); // Get form values
const formData = new FormData(e.target);
const title = formData.get('title');
const repliesPolicy = formData.get('replies_policy');
const exclusive = formData.get('exclusive') === 'on';
console.log({
title,
repliesPolicy,
exclusive,
});
setUiState('loading');
(async () => {
try {
let listResult;
if (editMode) {
listResult = await masto.v1.lists.update(list.id, {
title,
replies_policy: repliesPolicy,
exclusive,
});
} else {
listResult = await masto.v1.lists.create({
title,
replies_policy: repliesPolicy,
exclusive,
});
}
console.log(listResult);
setUiState('default');
onClose?.({
state: 'success',
list: listResult,
});
} catch (e) {
console.error(e);
setUiState('error');
alert(
editMode ? 'Unable to edit list.' : 'Unable to create list.',
);
}
})();
}}
>
<div class="list-form-row">
<label for="list-title">
Name{' '}
<input
ref={nameFieldRef}
type="text"
id="list-title"
name="title"
required
disabled={uiState === 'loading'}
/>
</label>
</div>
<div class="list-form-row">
<select
ref={repliesPolicyFieldRef}
name="replies_policy"
required
disabled={uiState === 'loading'}
>
<option value="list">Show replies to list members</option>
<option value="followed">Show replies to people I follow</option>
<option value="none">Don't show replies</option>
</select>
</div>
{supportsExclusive && (
<div class="list-form-row">
<label class="label-block">
<input
ref={exclusiveFieldRef}
type="checkbox"
name="exclusive"
disabled={uiState === 'loading'}
/>{' '}
Hide posts on this list from Home/Following
</label>
</div>
)}
<div class="list-form-footer">
<button type="submit" disabled={uiState === 'loading'}>
{editMode ? 'Save' : 'Create'}
</button>
{editMode && (
<MenuConfirm
disabled={uiState === 'loading'}
align="end"
menuItemClassName="danger"
confirmLabel="Delete this list?"
onClick={() => {
// const yes = confirm('Delete this list?');
// if (!yes) return;
setUiState('loading');
(async () => {
try {
await masto.v1.lists.remove(list.id);
setUiState('default');
onClose?.({
state: 'deleted',
});
} catch (e) {
console.error(e);
setUiState('error');
alert('Unable to delete list.');
}
})();
}}
>
<button
type="button"
class="light danger"
disabled={uiState === 'loading'}
>
Delete
</button>
</MenuConfirm>
)}
</div>
</form>
</main>
</div>
);
}
export default ListAddEdit;