fix: add error message

graasp · Jan 29, 2024 · 3a9658e · 3a9658e
1 parent 82dcd5c
commit 3a9658e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 21 deletions.
diff --git a/src/components/common/CropModal.tsx b/src/components/common/CropModal.tsx
@@ -7,7 +7,7 @@ import ReactCrop, {
 } from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 
-import Dialog from '@mui/material/Dialog';
+import { Alert } from '@mui/material';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -21,6 +21,8 @@ import { CROP_MODAL_CONFIRM_BUTTON_CLASSNAME } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import CancelButton from './CancelButton';
 
+export const MODAL_TITLE_ARIA_LABEL_ID = 'crop-modal-title';
+
 function centerAspectCrop(
   mediaWidth: number,
   mediaHeight: number,
@@ -42,26 +44,23 @@ function centerAspectCrop(
 }
 
 export type CropProps = {
-  open: boolean;
   onClose: () => void;
   src: string;
   onConfirm: (blob: Blob | null) => void;
 };
 
-const CropModal = ({
-  onConfirm,
-  open,
-  onClose,
-  src,
-}: CropProps): JSX.Element => {
+const CropModal = ({ onConfirm, onClose, src }: CropProps): JSX.Element => {
   const [crop, setCrop] = useState<Crop>();
   const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
+  const [isError, setIsError] = useState(false);
   const imageRef = useRef<HTMLImageElement | null>(null);
   const { t } = useBuilderTranslation();
 
   const handleOnConfirm = async () => {
     const image = imageRef.current;
+
     if (!image || !completedCrop) {
+      setIsError(true);
       throw new Error('Crop canvas does not exist');
     }
 
@@ -133,11 +132,11 @@ const CropModal = ({
     setCrop(centerAspectCrop(imgWidth, imgHeight, THUMBNAIL_ASPECT));
   };
 
-  const label = 'crop-modal-title';
-
   return (
-    <Dialog open={open} onClose={onClose} aria-labelledby={label}>
-      <DialogTitle id={label}>{t(BUILDER.CROP_IMAGE_MODAL_TITLE)}</DialogTitle>
+    <>
+      <DialogTitle id={MODAL_TITLE_ARIA_LABEL_ID}>
+        {t(BUILDER.CROP_IMAGE_MODAL_TITLE)}
+      </DialogTitle>
       <DialogContent sx={{ textAlign: 'center' }}>
         <DialogContentText>
           {t(BUILDER.CROP_IMAGE_MODAL_CONTENT_TEXT)}
@@ -159,17 +158,23 @@ const CropModal = ({
             onLoad={onImageLoaded}
           />
         </ReactCrop>
+        {isError && (
+          <Alert severity="error">
+            {t(BUILDER.CROP_IMAGE_MODAL_UNEXPECTED_ERROR)}
+          </Alert>
+        )}
       </DialogContent>
       <DialogActions>
         <CancelButton onClick={onClose} />
         <Button
           onClick={handleOnConfirm}
           className={CROP_MODAL_CONFIRM_BUTTON_CLASSNAME}
+          disabled={isError}
         >
           {t(BUILDER.CONFIRM_BUTTON)}
         </Button>
       </DialogActions>
-    </Dialog>
+    </>
   );
 };
 

diff --git a/src/components/item/settings/ThumbnailSetting.tsx b/src/components/item/settings/ThumbnailSetting.tsx
@@ -1,6 +1,6 @@
 import { FormEventHandler, useEffect, useRef, useState } from 'react';
 
-import { Stack } from '@mui/material';
+import { Dialog, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 import { DiscriminatedItem, ItemType, ThumbnailSize } from '@graasp/sdk';
@@ -18,7 +18,7 @@ import { THUMBNAIL_SETTING_UPLOAD_BUTTON_CLASSNAME } from '../../../config/selec
 import { BUILDER } from '../../../langs/constants';
 import defaultImage from '../../../resources/avatar.png';
 import { configureThumbnailUppy } from '../../../utils/uppy';
-import CropModal from '../../common/CropModal';
+import CropModal, { MODAL_TITLE_ARIA_LABEL_ID } from '../../common/CropModal';
 import StatusBar from '../../file/StatusBar';
 
 type Props = { item: DiscriminatedItem };
@@ -152,12 +152,17 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
         />
       </Stack>
       {fileSource && (
-        <CropModal
+        <Dialog
           open={showCropModal}
           onClose={onClose}
-          src={fileSource}
-          onConfirm={onConfirmCrop}
-        />
+          aria-labelledby={MODAL_TITLE_ARIA_LABEL_ID}
+        >
+          <CropModal
+            onClose={onClose}
+            src={fileSource}
+            onConfirm={onConfirmCrop}
+          />
+        </Dialog>
       )}
     </>
   );

diff --git a/src/config/notifier.ts b/src/config/notifier.ts
@@ -178,8 +178,12 @@ const notifier: Notifier = ({
     default:
   }
   // error notification
-  if (payload?.error && message) {
-    toast.error(i18n.t(message));
+  if (payload?.error) {
+    if (message) {
+      toast.error(i18n.t(message));
+    } else {
+      toast.error(payload.error.toString());
+    }
   }
   // success notification
   else if (message) {

diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -32,6 +32,7 @@ export const BUILDER = {
   CROP_IMAGE_MODAL_CONTENT_TEXT: 'CROP_IMAGE_MODAL_CONTENT_TEXT',
   CROP_IMAGE_MODAL_TITLE: 'CROP_IMAGE_MODAL_TITLE',
   CROP_IMAGE_MODAL_IMAGE_ALT_TEXT: 'CROP_IMAGE_MODAL_IMAGE_ALT_TEXT',
+  CROP_IMAGE_MODAL_UNEXPECTED_ERROR: 'CROP_IMAGE_MODAL_UNEXPECTED_ERROR',
   DELETE_BUTTON: 'DELETE_BUTTON',
   DELETE_ITEM_MODAL_CONFIRM_BUTTON: 'DELETE_ITEM_MODAL_CONFIRM_BUTTON',
   DELETE_ITEM_MODAL_CONTENT: 'DELETE_ITEM_MODAL_CONTENT',

diff --git a/src/langs/en.json b/src/langs/en.json
@@ -26,6 +26,7 @@
   "CROP_IMAGE_MODAL_CONTENT_TEXT": "Crop your chosen image to fit the image size requirements.",
   "CROP_IMAGE_MODAL_TITLE": "Crop Image",
   "CROP_IMAGE_MODAL_IMAGE_ALT_TEXT": "Crop me",
+  "CROP_IMAGE_MODAL_UNEXPECTED_ERROR": "An unexpected error happened, please try again later. You can dismiss this modal, refresh the page and try again. If this issue persists please contact us.",
   "DELETE_BUTTON": "Delete",
   "DELETE_ITEM_MODAL_CONFIRM_BUTTON": "Delete Permanently",
   "DELETE_ITEM_MODAL_CONTENT_one": "This item will be deleted permanently.",