Catch request errors when loading template previews

[MAILPOET-4534]
This commit is contained in:
Jan Jakes
2023-12-07 16:25:42 +01:00
committed by Aschepikov
parent d4f0dac54a
commit c7a5dd4efa

View File

@ -36,25 +36,32 @@ type Props = {
}; };
export function TemplatePreview({ template }: Props): JSX.Element { export function TemplatePreview({ template }: Props): JSX.Element {
const [isLoaded, setIsLoaded] = useState(false); const [state, setState] = useState<'loading' | 'loaded' | 'error'>('loading');
useEffect(() => { useEffect(() => {
const controller = new AbortController(); const controller = new AbortController();
const loadTemplate = async () => { const loadTemplate = async () => {
setIsLoaded(false); setState('loading');
initializeHooks(); initializeHooks();
createStore(); createStore();
initializeIntegrations(); initializeIntegrations();
const data = await apiFetch<{ data: { automation: unknown } }>({ try {
path: `/automation-templates/${template.slug}`, const data = await apiFetch<{ data: { automation: unknown } }>({
method: 'GET', path: `/automation-templates/${template.slug}`,
signal: controller.signal, method: 'GET',
}); signal: controller.signal,
dispatch(storeName).updateAutomation(data.data.automation); });
setIsLoaded(true); dispatch(storeName).updateAutomation(data.data.automation);
setState('loaded');
} catch (error) {
if (!controller.signal.aborted) {
setState('error');
}
}
}; };
void loadTemplate(); void loadTemplate();
return () => { return () => {
@ -63,7 +70,7 @@ export function TemplatePreview({ template }: Props): JSX.Element {
}; };
}, [template.slug]); }, [template.slug]);
return isLoaded ? ( return state === 'loaded' ? (
<Automation context="view" showStatistics={false} /> <Automation context="view" showStatistics={false} />
) : ( ) : (
<div className="mailpoet-automation-template-detail-preview-spinner"> <div className="mailpoet-automation-template-detail-preview-spinner">