Merge pull request #2204 from zetkin/issue-2096/error-handling-for-no…

…tes-upload Issue 2096/error handling for notes upload
zetkin · Sep 30, 2024 · 38b14a1 · 38b14a1
2 parents 04ee98a + ad8ff97
commit 38b14a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/src/zui/ZUITimeline/TimelineAddNote.tsx b/src/zui/ZUITimeline/TimelineAddNote.tsx
@@ -1,6 +1,7 @@
-import { Box, Collapse } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import { Box, Collapse, Typography } from '@mui/material';
+import React, { FormEvent, useEffect, useState } from 'react';
 
+import theme from 'theme';
 import { useMessages } from 'core/i18n';
 import { ZetkinNoteBody } from 'utils/types/zetkin';
 import ZUISubmitCancelButtons from '../ZUISubmitCancelButtons';
@@ -12,11 +13,13 @@ import messageIds from './l10n/messageIds';
 import { useNumericRouteParams } from 'core/hooks';
 
 interface AddNoteProps {
+  showPostRequestError?: boolean;
   disabled?: boolean;
   onSubmit: (note: ZetkinNoteBody) => void;
 }
 
 const TimelineAddNote: React.FunctionComponent<AddNoteProps> = ({
+  showPostRequestError,
   disabled,
   onSubmit,
 }) => {
@@ -33,7 +36,7 @@ const TimelineAddNote: React.FunctionComponent<AddNoteProps> = ({
   } = useFileUploads(orgId);
 
   useEffect(() => {
-    if (!disabled) {
+    if (!disabled && !showPostRequestError) {
       onCancel();
     }
   }, [disabled]);
@@ -47,18 +50,17 @@ const TimelineAddNote: React.FunctionComponent<AddNoteProps> = ({
     (fileUpload) => fileUpload.state == FileUploadState.UPLOADING
   );
 
+  async function onSubmitHandler(evt: FormEvent<HTMLFormElement>) {
+    evt.preventDefault();
+    if (note?.text) {
+      onSubmit({
+        ...note,
+        file_ids: fileUploads.map((fileUpload) => fileUpload.apiData!.id),
+      });
+    }
+  }
   return (
-    <form
-      onSubmit={(evt) => {
-        evt.preventDefault();
-        if (note?.text) {
-          onSubmit({
-            ...note,
-            file_ids: fileUploads.map((fileUpload) => fileUpload.apiData!.id),
-          });
-        }
-      }}
-    >
+    <form onSubmit={onSubmitHandler}>
       <Box {...getDropZoneProps()}>
         <ZUITextEditor
           clear={clear}
@@ -68,6 +70,13 @@ const TimelineAddNote: React.FunctionComponent<AddNoteProps> = ({
           onClickAttach={() => openFilePicker()}
           placeholder={messages.addNotePlaceholder()}
         />
+        {showPostRequestError && (
+          <Box>
+            <Typography color={theme.palette.error.main}>
+              {messages.fileUploadErrorMessage()}
+            </Typography>
+          </Box>
+        )}
       </Box>
       <Collapse in={!!visibleText || fileUploads.length > 0}>
         <ZUISubmitCancelButtons

diff --git a/src/zui/ZUITimeline/index.tsx b/src/zui/ZUITimeline/index.tsx
@@ -1,5 +1,5 @@
 import { Alert } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   CardActionArea,
@@ -42,11 +42,25 @@ const ZUITimeline: React.FunctionComponent<ZUITimelineProps> = ({
     typeFilterOptions,
   } = useFilterUpdates(updates);
 
+  const [showPostRequestError, setShowPostRequestError] = useState(false);
+
   return (
     <Fade appear in timeout={1000}>
       <Grid container direction="column" spacing={5}>
         <Grid item>
-          <TimelineAddNote disabled={disabled} onSubmit={onAddNote} />
+          <TimelineAddNote
+            disabled={disabled}
+            onSubmit={async (note) => {
+              setShowPostRequestError(false);
+              try {
+                // Await is needed here to catch the exception if the request fails
+                await onAddNote(note);
+              } catch (e) {
+                setShowPostRequestError(true);
+              }
+            }}
+            showPostRequestError={showPostRequestError}
+          />
         </Grid>
         <Grid item sm={6} xl={4} xs={12}>
           {/* Filter timeline select */}

diff --git a/src/zui/ZUITimeline/l10n/messageIds.ts b/src/zui/ZUITimeline/l10n/messageIds.ts
@@ -12,6 +12,7 @@ export default makeMessages('zui.timeline', {
     },
   },
   expand: m('show full timeline'),
+  fileUploadErrorMessage: m('Unable to add note. It might be too long'),
   filter: {
     byType: {
       all: m('All'),