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 (
{!!onClose && ( )}{' '}

{editMode ? 'Edit list' : 'New list'}

{ 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.$select(list.id).update({ 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.', ); } })(); }} >
{supportsExclusive && (
)}
); } export default ListAddEdit;