remove deprecated Apollo onCompleted/onError callbacks

src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx

@@ -67,19 +67,17 @@ const SideMenus = ({ opened }: SideMenusProps) => {
   const { t } = useTranslation();
 
   // handle count for notifictions
-  const [notificationCount, setNotificationCount] = useState(0);
-  const [getNotificationCount] = useLazyQuery(GET_NOTIFICATIONS_COUNT, {
+  const [getNotificationCount, { data: notificationData }] = useLazyQuery(GET_NOTIFICATIONS_COUNT, {
     variables: {
       filter: {
         is_read: false,
       },
     },
     fetchPolicy: 'cache-and-network',
-    onCompleted: (countData) => {
-      setNotificationCount(countData.countNotifications);
-    },
   });
 
+  const notificationCount = notificationData?.countNotifications ?? 0;
+
   useEffect(() => {
     getNotificationCount();
   }, []);

src/containers/Flow/FlowList/FlowList.tsx

@@ -75,7 +75,6 @@ export const FlowList = () => {
   const { t } = useTranslation();
   const [filter, setFilter] = useState<any>(true);
   const [selectedtag, setSelectedTag] = useState<any>(null);
-  const [flowName, setFlowName] = useState('');
   const [importing, setImporting] = useState(false);
   const [importStatus, setImportStatus] = useState([]);
   const [showDialog, setShowDialog] = useState(false);
@@ -89,28 +88,10 @@ export const FlowList = () => {
     releaseFlow();
   }, []);
 
-  const [importFlow] = useMutation(IMPORT_FLOW, {
-    onCompleted: (result: any) => {
-      const { status } = result.importFlow;
-      setImportStatus(status);
-      setImporting(false);
-    },
-    onError: (error: any) => {
-      setNotification('An error occured while importing the flow', 'warning');
-      setImporting(false);
-    },
-  });
+  const [importFlow] = useMutation(IMPORT_FLOW);
 
   const [exportFlowMutation] = useLazyQuery(EXPORT_FLOW, {
     fetchPolicy: 'network-only',
-    onCompleted: async ({ exportFlow }) => {
-      const { exportData } = exportFlow;
-      await exportFlowMethod(exportData, flowName);
-      setNotification('Flow exported successfully');
-    },
-    onError: (error: any) => {
-      setErrorMessage(error);
-    },
   });
 
   const [updatePinned] = useMutation(PIN_FLOW);
@@ -123,41 +104,40 @@ export const FlowList = () => {
     navigate(`/flow/${id}/edit`, { state: 'copy' });
   };
 
-  const exportFlow = (id: any, item: any) => {
-    setFlowName(item.name);
-    exportFlowMutation({ variables: { id } });
+  const exportFlow = async (id: any, item: any) => {
+    try {
+      const result = await exportFlowMutation({ variables: { id } });
+      const { exportData } = result.data.exportFlow;
+      await exportFlowMethod(exportData, item.name);
+      setNotification('Flow exported successfully');
+    } catch (error: any) {
+      setErrorMessage(error);
+    }
   };
 
-  const handlePin = (updateFlowId: any, pin: boolean = false) => {
-    if (pin) {
-      updatePinned({
-        variables: {
-          updateFlowId,
-          input: {
-            isPinned: true,
-          },
-        },
-        onCompleted: () => {
-          setRefreshList(!refreshList);
-          setNotification('Flow pinned successfully');
-        },
-      });
-    } else {
-      updatePinned({
-        variables: {
-          updateFlowId,
-          input: {
-            isPinned: false,
-          },
-        },
-        onCompleted: () => {
-          setRefreshList(!refreshList);
-          setNotification('Flow unpinned successfully');
-        },
-      });
+  const handleImport = async (result: string) => {
+    try {
+      const { data } = await importFlow({ variables: { flow: result } });
+      const { status } = data.importFlow;
+      setImportStatus(status);
+    } catch {
+      setNotification('An error occured while importing the flow', 'warning');
+    } finally {
+      setImporting(false);
     }
   };
 
+  const handlePin = async (updateFlowId: any, pin: boolean = false) => {
+    await updatePinned({
+      variables: {
+        updateFlowId,
+        input: { isPinned: pin },
+      },
+    });
+    setRefreshList(!refreshList);
+    setNotification(pin ? 'Flow pinned successfully' : 'Flow unpinned successfully');
+  };
+
   let dialog;
 
   const displayPinned = (isPinned: boolean, id: any) => {
@@ -250,7 +230,7 @@ export const FlowList = () => {
     <ImportButton
       title={t('Import flow')}
       onImport={() => setImporting(true)}
-      afterImport={(result: string) => importFlow({ variables: { flow: result } })}
+      afterImport={handleImport}
     />
   );
 

src/containers/Form/FormLayout.tsx

@@ -153,13 +153,11 @@ export const FormLayout = ({
 }: FormLayoutProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const [formSubmitted, setFormSubmitted] = useState(false);
-  const [languageId, setLanguageId] = useState('');
   const [formCancelled, setFormCancelled] = useState(false);
   const [action, setAction] = useState(false);
   const [link, setLink] = useState(undefined);
   const [deleted, setDeleted] = useState(false);
   const [saveClick, onSaveClick] = useState(false);
-  const [isLoadedData, setIsLoadedData] = useState(false);
   const [customError, setCustomError] = useState<any>(null);
   const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
   const params = useParams();
@@ -251,6 +249,50 @@ export const FormLayout = ({
     }
   };
 
+  const capitalListItemName = listItemName[0].toUpperCase() + listItemName.slice(1);
+
+  let itemId = entityId;
+  if (!itemId) {
+    itemId = params.id;
+  }
+
+  let variables: any = itemId ? { [idType]: itemId } : false;
+  if (listItem === 'credential') {
+    variables = params.type ? { shortcode: params.type } : false;
+  }
+
+  const organization = useQuery(USER_LANGUAGES, {
+    skip: !languageSupport,
+  });
+
+  const { loading, error, data: itemData, refetch } = useQuery(getItemQuery, {
+    variables,
+    skip: !itemId,
+    fetchPolicy: getQueryFetchPolicy,
+    onCompleted: (data) => {
+      if (data) {
+        const loadedItem = data[listItem]?.[listItem] ?? data[Object.keys(data)[0]]?.[listItem];
+        if (loadedItem && setStates) {
+          setStates(loadedItem);
+        }
+      }
+    },
+  });
+
+  const fetchedItem: any = itemData
+    ? (itemData[listItem]?.[listItem] ?? itemData[Object.keys(itemData)[0]]?.[listItem] ?? null)
+    : null;
+
+  const isLoadedData = Boolean(fetchedItem);
+
+  const languageId = fetchedItem
+    ? languageSupport
+      ? fetchedItem.language.id
+      : null
+    : !itemId && organization.data
+      ? organization.data.currentUser.user.organization.defaultLanguage.id
+      : '';
+
   const formik = useFormik({
     initialValues: {
       languageId,
@@ -284,16 +326,6 @@ export const FormLayout = ({
     }
   }, [entityId]);
 
-  const capitalListItemName = listItemName[0].toUpperCase() + listItemName.slice(1);
-  let item: any = null;
-
-  let itemId = entityId;
-  if (!itemId) {
-    itemId = params.id;
-  }
-
-  let variables: any = itemId ? { [idType]: itemId } : false;
-
   const [deleteItem] = useMutation(deleteItemQuery, {
     onCompleted: () => {
       setNotification(`${capitalListItemName} deleted successfully`);
@@ -312,39 +344,6 @@ export const FormLayout = ({
     ],
   });
 
-  // get the organization for current user and have languages option set to that.
-
-  const organization = useQuery(USER_LANGUAGES, {
-    skip: !languageSupport,
-    onCompleted: (data: any) => {
-      if (!itemId) {
-        setLanguageId(data.currentUser.user.organization.defaultLanguage.id);
-      }
-    },
-  });
-  if (listItem === 'credential') {
-    variables = params.type ? { shortcode: params.type } : false;
-  }
-
-  const { loading, error, refetch } = useQuery(getItemQuery, {
-    variables,
-    skip: !itemId,
-    fetchPolicy: getQueryFetchPolicy,
-    onCompleted: (data) => {
-      if (data) {
-        item = data[listItem] ? data[listItem][listItem] : data[Object.keys(data)[0]][listItem];
-        if (item) {
-          setIsLoadedData(true);
-          setLink(data[listItem] ? data[listItem][listItem][linkParameter] : item.linkParameter);
-          setLanguageId(languageSupport ? item.language.id : null);
-          if (setStates) {
-            setStates(item);
-          }
-        }
-      }
-    },
-  });
-
   const camelCaseItem = listItem[0].toUpperCase() + listItem.slice(1);
 
   const [updateItem] = useMutation(updateItemQuery, {
@@ -448,7 +447,6 @@ export const FormLayout = ({
           afterSave(data, saveClick);
         }
       }
-      setIsLoadedData(true);
       onSaveClick(false);
     },
     refetchQueries: () => {

src/containers/HSM/HSM.tsx

@@ -127,20 +127,9 @@ export const HSM = () => {
     setUploadedFile(null);
   };
 
-  const [uploadMedia] = useMutation(UPLOAD_MEDIA, {
-    onCompleted: (data: { uploadMedia: string }) => {
-      setAttachmentURL(data.uploadMedia);
-      setNotification('File uploaded successfully');
-      setUploadingFile(false);
-    },
-    onError: (error: Error) => {
-      console.error('Upload error:', error);
-      setNotification('File upload failed. Please try again.');
-      resetUploadState();
-    },
-  });
+  const [uploadMedia] = useMutation(UPLOAD_MEDIA);
 
-  const handleFileUpload = (file: File): void => {
+  const handleFileUpload = async (file: File): Promise<void> => {
     if (!file) return;
 
     const mediaName = file.name;
@@ -156,12 +145,16 @@ export const HSM = () => {
       setType({ id: 'DOCUMENT', label: 'DOCUMENT' });
     }
 
-    uploadMedia({
-      variables: {
-        media: file,
-        extension,
-      },
-    });
+    try {
+      const result = await uploadMedia({ variables: { media: file, extension } });
+      setAttachmentURL(result.data.uploadMedia);
+      setNotification('File uploaded successfully');
+      setUploadingFile(false);
+    } catch (error) {
+      console.error('Upload error:', error);
+      setNotification('File upload failed. Please try again.', 'error');
+      resetUploadState();
+    }
   };
 
   let attachmentOptions = mediaOptions;
@@ -736,8 +729,8 @@ export const HSM = () => {
       helperText: uploadedFile
         ? `File uploaded: ${uploadedFile.name}`
         : t(
-            'Please provide a sample attachment for approval purpose. You may send a similar but different attachment when sending the HSM to users.'
-          ),
+          'Please provide a sample attachment for approval purpose. You may send a similar but different attachment when sending the HSM to users.'
+        ),
       inputProp: {
         onBlur: (event: any) => {
           setAttachmentURL(event.target.value.trim());

src/containers/List/List.tsx

@@ -381,14 +381,6 @@ export const List = ({
   // Make a new count request for a new count of the # of rows from this query in the back-end.
   if (deleteItemQuery) {
     [deleteItem] = useMutation(deleteItemQuery, {
-      onCompleted: () => {
-        setNotification(`${capitalListItemName} deleted successfully`);
-        checkUserRole();
-        countQuery && refetchCount();
-        if (refetchValues) {
-          refetchValues(filterPayload());
-        }
-      },
       refetchQueries: () => {
         if (refetchQueries)
           return refetchQueries.map((refetchQuery: any) => ({
@@ -397,9 +389,6 @@ export const List = ({
           }));
         return [];
       },
-      onError: () => {
-        setNotification(`Sorry! An error occurred!`, 'warning');
-      },
     });
   }
 
@@ -412,9 +401,19 @@ export const List = ({
     setDeleteItemID(null);
   };
 
-  const deleteHandler = (id: number) => {
+  const deleteHandler = async (id: number) => {
     const variables = deleteModifier.variables ? deleteModifier.variables(id) : { id };
-    deleteItem({ variables });
+    try {
+      await deleteItem({ variables });
+      setNotification(`${capitalListItemName} deleted successfully`);
+      checkUserRole();
+      countQuery && refetchCount();
+      if (refetchValues) {
+        refetchValues(filterPayload());
+      }
+    } catch {
+      setNotification(`Sorry! An error occurred!`, 'warning');
+    }
   };
 
   const handleDeleteItem = () => {