diff --git a/source/app.tsx b/source/app.tsx index b365049..b6449c3 100644 --- a/source/app.tsx +++ b/source/app.tsx @@ -87,6 +87,7 @@ export default function App() { const [loading, setLoading] = useState(true); const [input, setInput] = useState(''); const [message, setMessage] = useState(''); + const [editingField, setEditingField] = useState(false); const refresh = useCallback(async () => { if (view.type === 'edit') { @@ -161,22 +162,31 @@ export default function App() { {viewLabel} {isEditing ? ( - - { - setView({type: 'filter', query: homeFilter}); - refresh(); - }} - /> - + <> + + { + setView({type: 'filter', query: homeFilter}); + refresh(); + }} + onEditingChange={setEditingField} + /> + + + {' '} + {editingField + ? 'Enter to save ∙ Escape to cancel' + : 'Enter to edit ∙ Escape to go back'} + + ) : ( <> void; + onEditingChange: (editing: boolean) => void; }; const fields = [ @@ -72,10 +73,20 @@ function buildUpdateArgs(key: string, value: string) { } } -export default function EditView({task, api, onBack}: EditViewProps) { +export default function EditView({ + task, + api, + onBack, + onEditingChange, +}: EditViewProps) { const [cursor, setCursor] = useState(0); - const [editing, setEditing] = useState(false); + const [editing, _setEditing] = useState(false); const [editValue, setEditValue] = useState(''); + + const setEditing = (value: boolean) => { + _setEditing(value); + onEditingChange(value); + }; const [fieldValues, setFieldValues] = useState(() => Object.fromEntries(fields.map(f => [f.key, getFieldValue(task, f.key)])), ); @@ -140,12 +151,6 @@ export default function EditView({task, api, onBack}: EditViewProps) { )} ))} - {''} - - {editing - ? ' Enter to save ∙ Escape to cancel' - : ' Enter to edit ∙ Escape to go back'} - ); }