#1336 | Handle errors and don't continue with save while uploading pr…

…ofile pic for subject - Minor refactoring for variables named 'bucket' which were actually referring to folders in line with changes made on server
avniproject · Sep 18, 2024 · 6729931 · 6729931
1 parent 96de0de
commit 6729931
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 55 deletions.
diff --git a/src/adminApp/SubjectType/SubjectTypeCreate.js b/src/adminApp/SubjectType/SubjectTypeCreate.js
@@ -12,7 +12,7 @@ import { useFormMappings, useLocationType } from "./effects";
 import _, { identity } from "lodash";
 import { DocumentationContainer } from "../../common/components/DocumentationContainer";
 import { AdvancedSettings } from "./AdvancedSettings";
-import { bucketName, uploadImage } from "../../common/utils/S3Client";
+import { MediaFolder, uploadImage } from "../../common/utils/S3Client";
 import EditSubjectTypeFields from "./EditSubjectTypeFields";
 import { MessageReducer } from "../../formDesigner/components/MessageRule/MessageReducer";
 import { getMessageTemplates, saveMessageRules } from "../service/MessageService";
@@ -69,11 +69,7 @@ const SubjectTypeCreate = ({ organisationConfig }) => {
     setNameValidation(false);
 
     if (!groupValidationError) {
-      const [s3FileKey, error] = await uploadImage(
-        subjectType.iconFileS3Key,
-        file,
-        bucketName.ICONS
-      );
+      const [s3FileKey, error] = await uploadImage(subjectType.iconFileS3Key, file, MediaFolder.ICONS);
       if (error) {
         alert(error);
         return;
@@ -132,12 +128,7 @@ const SubjectTypeCreate = ({ organisationConfig }) => {
                 <></>
               )}
               <p />
-              <AdvancedSettings
-                subjectType={subjectType}
-                dispatch={dispatch}
-                locationTypes={locationTypes}
-                formMappings={formMappings}
-              />
+              <AdvancedSettings subjectType={subjectType} dispatch={dispatch} locationTypes={locationTypes} formMappings={formMappings} />
               <div />
               {nameValidation && (
                 <FormLabel error style={{ marginTop: "10px", fontSize: "12px" }}>

diff --git a/src/adminApp/SubjectType/SubjectTypeEdit.js b/src/adminApp/SubjectType/SubjectTypeEdit.js
@@ -16,7 +16,7 @@ import { findRegistrationForm } from "../domain/formMapping";
 import _, { identity } from "lodash";
 import { SaveComponent } from "../../common/components/SaveComponent";
 import { AdvancedSettings } from "./AdvancedSettings";
-import { bucketName, uploadImage } from "../../common/utils/S3Client";
+import { MediaFolder, uploadImage } from "../../common/utils/S3Client";
 import EditSubjectTypeFields from "./EditSubjectTypeFields";
 import { MessageReducer } from "../../formDesigner/components/MessageRule/MessageReducer";
 import { getMessageRules, getMessageTemplates, saveMessageRules } from "../service/MessageService";
@@ -88,7 +88,7 @@ const SubjectTypeEdit = ({ organisationConfig, ...props }) => {
 
     setNameValidation(false);
     if (!groupValidationError) {
-      const [s3FileKey, error] = await uploadImage(subjectType.iconFileS3Key, file, bucketName.ICONS);
+      const [s3FileKey, error] = await uploadImage(subjectType.iconFileS3Key, file, MediaFolder.ICONS);
       if (error) {
         alert(error);
         return;

diff --git a/src/common/utils/S3Client.js b/src/common/utils/S3Client.js
@@ -1,17 +1,17 @@
 import http from "./httpClient";
 import { get } from "lodash";
 
-export const uploadImage = async (existingURL, file, bucketName) => {
+export const uploadImage = async (existingURL, file, folderName) => {
   if (file == null) {
     return [existingURL];
   }
   return http
-    .uploadFile(http.withParams("/media/saveImage", { bucketName }), file)
+    .uploadFile(http.withParams("/media/saveImage", { folderName }), file)
     .then(r => [r.data, null])
     .catch(r => [null, `${get(r, "response.data") || get(r, "message") || "unknown error"}`]);
 };
 
-export const bucketName = Object.freeze({
+export const MediaFolder = Object.freeze({
   PROFILE_PICS: "profile-pics",
   ICONS: "icons",
   NEWS: "news"

diff --git a/src/dataEntryApp/sagas/subjectSaga.js b/src/dataEntryApp/sagas/subjectSaga.js
@@ -32,7 +32,7 @@ import Wizard from "dataEntryApp/state/Wizard";
 import { filterFormElements } from "dataEntryApp/services/FormElementService";
 import { selectRegistrationForm, setFilteredFormElements, setInitialSubjectState } from "dataEntryApp/reducers/registrationReducer";
 import identifierAssignmentService from "dataEntryApp/services/IdentifierAssignmentService";
-import { bucketName, uploadImage } from "../../common/utils/S3Client";
+import { MediaFolder, uploadImage } from "../../common/utils/S3Client";
 
 export function* dataEntryLoadRegistrationFormWatcher() {
   yield takeLatest(subjectTypes.GET_REGISTRATION_FORM, dataEntryLoadRegistrationFormWorker);
@@ -67,7 +67,11 @@ export function* saveSubjectWorker() {
   const identifierAssignments = yield select(selectIdentifierAssignments);
   const profilePictureFile = yield select(selectRegistrationProfilePictureFile);
   const removeProfilePicFile = yield select(selectRegistrationRemoveProfilePicture);
-  const [profilePicKey] = yield call(uploadImage, subject.profilePicture, profilePictureFile, bucketName.PROFILE_PICS);
+  const [profilePicKey, error] = yield call(uploadImage, subject.profilePicture, profilePictureFile, MediaFolder.PROFILE_PICS);
+  if (error) {
+    yield put(saveCompleteFalse(error));
+    return;
+  }
   subject.profilePicture = removeProfilePicFile ? null : profilePicKey;
   let resource = subject.toResource;
   resource.visitSchedules = visitSchedules;

diff --git a/src/formDesigner/components/ReportCard/CreateEditReportCard.js b/src/formDesigner/components/ReportCard/CreateEditReportCard.js
@@ -18,7 +18,7 @@ import MenuItem from "@material-ui/core/MenuItem/MenuItem";
 import { AvniSelect } from "../../../common/components/AvniSelect";
 import { AvniSwitch } from "../../../common/components/AvniSwitch";
 import { AvniImageUpload } from "../../../common/components/AvniImageUpload";
-import { bucketName, uploadImage } from "../../../common/utils/S3Client";
+import { MediaFolder, uploadImage } from "../../../common/utils/S3Client";
 import { getErrorByKey } from "../../common/ErrorUtil";
 import { JSEditor } from "../../../common/components/JSEditor";
 import { PopoverColorPicker } from "../../../common/components/PopoverColorPicker";
@@ -80,7 +80,7 @@ export const CreateEditReportCard = ({ edit, ...props }) => {
 
   const onSave = async () => {
     if (validateRequest()) {
-      const [s3FileKey, error] = await uploadImage(card.iconFileS3Key, file, bucketName.ICONS);
+      const [s3FileKey, error] = await uploadImage(card.iconFileS3Key, file, MediaFolder.ICONS);
       if (error) {
         alert(error);
         return;

diff --git a/src/news/CreateEditNews.js b/src/news/CreateEditNews.js
@@ -7,7 +7,7 @@ import { ActionButton } from "./components/ActionButton";
 import TextField from "@material-ui/core/TextField";
 import { AvniImageUpload } from "../common/components/AvniImageUpload";
 import { get, isEmpty } from "lodash";
-import { bucketName, uploadImage } from "../common/utils/S3Client";
+import { MediaFolder, uploadImage } from "../common/utils/S3Client";
 import { newsInitialState, NewsReducer } from "./reducers";
 import { dispatchActionAndClearError, displayErrorForKey } from "./utils";
 import draftToHtml from "draftjs-to-html";
@@ -66,7 +66,7 @@ export const CreateEditNews = ({ handleClose, open, headerTitle, edit, existingN
     const contentHtml = DOMPurify.sanitize(draftToHtml(rawContent));
     if (isValidRequest()) {
       setSaving(true);
-      const [s3FileKey, error] = await uploadImage(news.heroImage, file, bucketName.NEWS);
+      const [s3FileKey, error] = await uploadImage(news.heroImage, file, MediaFolder.NEWS);
       if (error) {
         setSaving(false);
         alert(error);
@@ -96,21 +96,15 @@ export const CreateEditNews = ({ handleClose, open, headerTitle, edit, existingN
           setError([
             {
               key: "SERVER_ERROR",
-              message: `${get(error, "response.data") ||
-                get(error, "message") ||
-                "error while saving card"}`
+              message: `${get(error, "response.data") || get(error, "message") || "error while saving card"}`
             }
           ]);
         });
     }
   };
 
   return (
-    <Dialog
-      onClose={MuiComponentHelper.getDialogClosingHandler(handleClose)}
-      classes={{ paper: classes.dialogPaper }}
-      open={open}
-    >
+    <Dialog onClose={MuiComponentHelper.getDialogClosingHandler(handleClose)} classes={{ paper: classes.dialogPaper }} open={open}>
       <CustomDialogTitle onClose={handleClose}>{headerTitle}</CustomDialogTitle>
       <DialogContent>
         <Grid container spacing={4} direction={"column"}>
@@ -132,16 +126,7 @@ export const CreateEditNews = ({ handleClose, open, headerTitle, edit, existingN
               fullWidth
               margin="normal"
               value={news.title || ""}
-              onChange={event =>
-                dispatchActionAndClearError(
-                  "title",
-                  event.target.value,
-                  "EMPTY_TITLE",
-                  dispatch,
-                  error,
-                  setError
-                )
-              }
+              onChange={event => dispatchActionAndClearError("title", event.target.value, "EMPTY_TITLE", dispatch, error, setError)}
             />
             {displayErrorForKey(error, "EMPTY_TITLE")}
           </Grid>
@@ -152,14 +137,7 @@ export const CreateEditNews = ({ handleClose, open, headerTitle, edit, existingN
                 <RichTextEditor
                   editorState={news.editorState}
                   setEditorState={newState =>
-                    dispatchActionAndClearError(
-                      "editorState",
-                      newState,
-                      "LESS_CONTENT",
-                      dispatch,
-                      error,
-                      setError
-                    )
+                    dispatchActionAndClearError("editorState", newState, "LESS_CONTENT", dispatch, error, setError)
                   }
                 />
               </Box>
@@ -168,12 +146,7 @@ export const CreateEditNews = ({ handleClose, open, headerTitle, edit, existingN
           </Grid>
           <Grid item>{displayErrorForKey(error, "SERVER_ERROR")}</Grid>
           <Grid item>
-            <ActionButton
-              onClick={onSave}
-              variant="contained"
-              style={{ paddingHorizontal: 10 }}
-              size="medium"
-            >
+            <ActionButton onClick={onSave} variant="contained" style={{ paddingHorizontal: 10 }} size="medium">
               {"Save Broadcast"}
             </ActionButton>
           </Grid>