Refactor mission data download

packages/opensrp-plans/src/components/MissionData/index.tsx

@@ -11,11 +11,12 @@ import { useTranslation } from '../../mls';
 import { loadTasksIndicators, TaskCount, TaskParams } from '../../helpers/dataLoaders';
 import { CommonProps, defaultCommonProps } from '@opensrp/plan-form';
 import { useHandleBrokenPage } from '@opensrp/react-utils';
-import { BuildDownloadUrl } from '../../helpers/utils';
 import {
   OPENSRP_BUSINESS_STATUS_HAS_PROBLEM,
   OPENSRP_TASK_STATUS_COMPLETED,
 } from '../../constants';
+import { sendErrorNotification } from '@opensrp/notifications';
+import { downloadMissionData } from '../../helpers/utils';
 
 const { Title, Text } = Typography;
 
@@ -98,9 +99,7 @@ const MissionData = (props: MissionDataProps) => {
           <Text>{t('Number of flagged products')}</Text>:&nbsp;
           <Text type="secondary">{flaggedProducts}</Text>
         </p>
-        <a href={BuildDownloadUrl(baseURL, plan.identifier)} download>
-          <Button type="primary">{t('Download mission data')}</Button>
-        </a>
+        <DownloadMissionData baseUrl={baseURL} plan={plan} />
       </Space>
     </Card>
   ) : null;
@@ -109,3 +108,31 @@ const MissionData = (props: MissionDataProps) => {
 MissionData.defaultProps = defaultProps;
 
 export { MissionData };
+
+// Download Mission button.
+
+interface DownloadMissionDataProps {
+  baseUrl: string;
+  plan: PlanDefinition;
+}
+
+export const DownloadMissionData = (props: DownloadMissionDataProps) => {
+  const { baseUrl, plan } = props;
+  const { t } = useTranslation();
+  const [downloading, setDownloading] = useState(false);
+  const handleClick = () => {
+    setDownloading(true);
+    downloadMissionData(baseUrl, plan)
+      .catch(() => {
+        sendErrorNotification(t('Mission data download failed.'));
+      })
+      .finally(() => {
+        setDownloading(false);
+      });
+  };
+  return (
+    <Button type="primary" disabled={downloading} onClick={handleClick}>
+      {t('Download mission data')}
+    </Button>
+  );
+};

packages/opensrp-plans/src/helpers/utils.tsx

@@ -9,6 +9,9 @@ import {
   SERVICE_POINT_CHECK_CODE,
   RECORD_GPS_CODE,
 } from '@opensrp/plan-form-core';
+import { HTTPMethod } from '@opensrp/server-service';
+import { getFileNameFromCDHHeader, downloadFile } from '@opensrp/react-utils';
+import { OpenSRPService } from './dataLoaders';
 
 /**
  * helper to retrieve the plan Type from a plan definition object
@@ -62,7 +65,38 @@ export const PlanLoading = () => {
   return <Spin size="large" className="custom-spinner"></Spin>;
 };
 
-export const BuildDownloadUrl = (baseURL: string, planId: string) => {
+const getFetchOptions = (_: AbortSignal, accessToken: string, method: HTTPMethod): RequestInit => {
+  return {
+    headers: {
+      authorization: `Bearer ${accessToken}`,
+    },
+    method,
+  };
+};
+
+/**
+ * download a misisons data.
+ *
+ * @param baseURL - opensrp server base url
+ * @param plan - plan whose mission data we fetching.
+ */
+export const downloadMissionData = async (baseURL: string, plan: PlanDefinition) => {
+  const { title, identifier } = plan;
+  const fileTitle = title.replaceAll(/\\s/g, ' ').split(' ').join('_');
   const eventType = `${FLAG_PROBLEM_CODE},${SERVICE_POINT_CHECK_CODE},${LOOKS_GOOD_CODE},${RECORD_GPS_CODE}`;
-  return `${baseURL}${OPENSRP_TASK_EXPORT_DATA}?eventTypes=${eventType}&planIdentifier=${planId}`;
+  const exportPath = `${OPENSRP_TASK_EXPORT_DATA}?eventTypes=${eventType}&planIdentifier=${identifier}`;
+
+  const serve = new OpenSRPService(exportPath, baseURL, getFetchOptions);
+  const response = await serve.download();
+
+  // get filename from content-disposition header
+  const contentDispositionHeader = response.headers.get('content-disposition');
+  const fileName = contentDispositionHeader
+    ? getFileNameFromCDHHeader(contentDispositionHeader)
+    : `mission_data_${fileTitle}_${Date.now()}.zip`;
+
+  // get blob data from response
+  const blob = await response.blob();
+
+  downloadFile(blob, fileName);
 };