bugfix: init text field

This commit is contained in:
cv
2021-04-27 12:16:20 +02:00
parent 656ae396a9
commit f8825ed7dc
2 changed files with 11 additions and 12 deletions
+7 -3
View File
@@ -1,15 +1,19 @@
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable'; import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
import { useState } from 'react'; import { useEffect, useState } from 'react';
import style from './EditableText.module.css'; import style from './EditableText.module.css';
export default function EditableText(props) { export default function EditableText(props) {
const { label, defaultValue, placeholder, submitHandler } = props; const { label, defaultValue, placeholder, submitHandler } = props;
const [text, setText] = useState(props.defaultValue || ''); const [text, setText] = useState('');
useEffect(() => {
if (defaultValue == null) setText('');
else setText(defaultValue);
}, [defaultValue]);
const handleSubmit = (submitedVal) => { const handleSubmit = (submitedVal) => {
// No need to update if it hasnt changed // No need to update if it hasnt changed
if (submitedVal === defaultValue) return; if (submitedVal === defaultValue) return;
submitHandler(submitedVal); submitHandler(submitedVal);
}; };
@@ -133,7 +133,7 @@ export default function EventListWrapper() {
// Snapshot the previous value // Snapshot the previous value
const previousEvents = queryClient.getQueryData(eventsNamespace); const previousEvents = queryClient.getQueryData(eventsNamespace);
let filtered = [...previousEvents] let filtered = [...previousEvents];
filtered.filter((e) => e.id === 'eventId'); filtered.filter((e) => e.id === 'eventId');
// optimistically update object // optimistically update object
@@ -144,12 +144,12 @@ export default function EventListWrapper() {
}, },
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, eventId, context) => {
queryClient.setQueryData(eventsNamespace, context.previousEvents); queryClient.setQueryData(eventsNamespace, context.previousEvents);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: (newEvent) => { onSettled: () => {
queryClient.invalidateQueries(eventsNamespace); queryClient.invalidateQueries(eventsNamespace);
}, },
}); });
@@ -163,7 +163,6 @@ export default function EventListWrapper() {
// Events API // Events API
const eventsHandler = async (action, payload) => { const eventsHandler = async (action, payload) => {
let needsRefetch = false;
switch (action) { switch (action) {
case 'add': case 'add':
try { try {
@@ -187,9 +186,8 @@ export default function EventListWrapper() {
} }
break; break;
case 'delete': case 'delete':
// TODO: could do optimistic update here?
try { try {
await deleteEvent.mutateAsync(payload).then((needsRefetch = true)); await deleteEvent.mutateAsync(payload);
} catch (error) { } catch (error) {
showErrorToast('Error deleting event', error.message); showErrorToast('Error deleting event', error.message);
} }
@@ -198,9 +196,6 @@ export default function EventListWrapper() {
showErrorToast('Unrecognised request', action); showErrorToast('Unrecognised request', action);
break; break;
} }
if (needsRefetch) {
refetch();
}
}; };
return ( return (