import './drafts.css'; import { useEffect, useMemo, useReducer, useState } from 'react'; import { api } from '../utils/api'; import db from '../utils/db'; import niceDateTime from '../utils/nice-date-time'; import states from '../utils/states'; import { getCurrentAccountNS } from '../utils/store-utils'; import Icon from './icon'; import Loader from './loader'; import MenuConfirm from './menu-confirm'; function Drafts({ onClose }) { const { masto } = api(); const [uiState, setUIState] = useState('default'); const [drafts, setDrafts] = useState([]); const [reloadCount, reload] = useReducer((c) => c + 1, 0); useEffect(() => { setUIState('loading'); (async () => { try { const keys = await db.drafts.keys(); if (keys.length) { const ns = getCurrentAccountNS(); const ownKeys = keys.filter((key) => key.startsWith(ns)); if (ownKeys.length) { const drafts = await db.drafts.getMany(ownKeys); drafts.sort( (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(), ); setDrafts(drafts); } else { setDrafts([]); } } else { setDrafts([]); } setUIState('default'); } catch (e) { console.error(e); setUIState('error'); } })(); }, [reloadCount]); const hasDrafts = drafts?.length > 0; return (
{!!onClose && ( )}

Unsent drafts

{hasDrafts && (
Looks like you have unsent drafts. Let's continue where you left off.
)}
{hasDrafts ? ( <> {drafts.length > 1 && (

Delete all drafts?} menuItemClassName="danger" disabled={uiState === 'loading'} onClick={() => { (async () => { // const yes = confirm('Delete all drafts?'); // if (yes) { setUIState('loading'); try { await db.drafts.delMany( drafts.map((draft) => draft.key), ); setUIState('default'); reload(); } catch (e) { console.error(e); alert('Error deleting drafts! Please try again.'); setUIState('error'); } // } })(); }} >

)} ) : (

No drafts found.

)}
); } function MiniDraft({ draft }) { const { draftStatus, replyTo } = draft; const { status, spoilerText, poll, mediaAttachments } = draftStatus; const hasPoll = poll?.options?.length > 0; const hasMedia = mediaAttachments?.length > 0; const hasPollOrMedia = hasPoll || hasMedia; const firstImageMedia = useMemo(() => { if (!hasMedia) return; const image = mediaAttachments.find((media) => /image/.test(media.type)); if (!image) return; const { file } = image; const objectURL = URL.createObjectURL(file); return objectURL; }, [hasMedia, mediaAttachments]); return ( <>
{hasPollOrMedia && (
{hasPoll && } {hasMedia && ( {' '} {mediaAttachments?.length} )}
)}
{!!spoilerText &&
{spoilerText}
} {!!status &&
{status}
}
); } export default Drafts;