[#1153] Add sync button to manage form

app/src/components/SyncService.js

@@ -1,9 +1,14 @@
 import { useCallback, useEffect } from 'react';
 import { BuildParamsState, UIState } from '../store';
 import { backgroundTask } from '../lib';
-import crudJobs, { jobStatus, MAX_ATTEMPT } from '../database/crud/crud-jobs';
+import crudJobs, {
+  jobStatus,
+  MAX_ATTEMPT,
+  SYNC_DATAPOINT_JOB_NAME,
+} from '../database/crud/crud-jobs';
 import { SYNC_FORM_SUBMISSION_TASK_NAME, syncStatus } from '../lib/background-task';
 import { crudDataPoints } from '../database/crud';
+import { downloadDatapointsJson, fetchDatapoints } from '../lib/sync-datapoints';
 /**
  * This sync only works in the foreground service
  */
@@ -94,6 +99,62 @@ const SyncService = () => {
     };
   }, [syncInSecond, isOnline, onSync]);
 
+  const onSyncDataPoint = useCallback(async () => {
+    const activeJob = await crudJobs.getActiveJob(SYNC_DATAPOINT_JOB_NAME);
+
+    if (activeJob.status === PENDING && activeJob.attempt < 3) {
+      UIState.update((s) => {
+        s.statusBar = {
+          type: syncStatus.ON_PROGRESS,
+          bgColor: '#2563eb',
+          icon: 'sync',
+        };
+      });
+      await crudJobs.updateJob(activeJob.id, {
+        status: jobStatus.ON_PROGRESS,
+      });
+      try {
+        const allData = await fetchDatapoints(activeJob.form);
+        const urls = allData.map((item) => item.url);
+        await Promise.all(urls.map(downloadDatapointsJson));
+        UIState.update((s) => {
+          s.statusBar = {
+            type: syncStatus.SUCCESS,
+            bgColor: '#16a34a',
+            icon: 'checkmark-done',
+          };
+        });
+        await crudJobs.deleteJob(activeJob.id);
+      } catch (error) {
+        await crudJobs.updateJob(activeJob.id, {
+          status: jobStatus.PENDING,
+          attempt: activeJob.attempt + 1,
+        });
+      }
+    }
+
+    if (activeJob.status === PENDING && activeJob.attempt === 3) {
+      await crudJobs.deleteJob(activeJob.id);
+    }
+
+    console.log(activeJob, 'activeJob');
+  }, [statusBar]);
+
+  useEffect(() => {
+    if (!syncInSecond || !isOnline) {
+      return;
+    }
+    const syncTimer = setInterval(() => {
+      // Perform sync operation
+      onSyncDataPoint();
+    }, syncInSecond);
+
+    return () => {
+      // Clear the interval when the component unmounts
+      clearInterval(syncTimer);
+    };
+  }, [syncInSecond, isOnline, onSync]);
+
   return null; // This is a service component, no rendering is needed
 };
 

app/src/database/crud/crud-jobs.js

@@ -13,21 +13,29 @@ export const jobStatus = {
 
 export const MAX_ATTEMPT = 3;
 
+export const SYNC_DATAPOINT_JOB_NAME = 'sync-form-datapoints';
+
 const tableName = 'jobs';
 const jobsQuery = () => {
   return {
-    getActiveJob: async (type) => {
+    getActiveJob: async (type, form = null) => {
       try {
         const session = await crudUsers.getActiveUser();
         if (session?.id) {
           /**
            * Make sure the app only gets active jobs from current user
            */
-          const where = { active: 1, type, user: session.id };
+          const where = { type, user: session.id };
+          const params = [type, session.id];
+          if (form) {
+            where.form = form;
+            params.push(form);
+          }
+
           const nocase = false;
           const order_by = 'createdAt';
           const readQuery = query.read(tableName, where, nocase, order_by);
-          const { rows } = await conn.tx(db, readQuery, [1, type, session.id]);
+          const { rows } = await conn.tx(db, readQuery, params);
           if (!rows.length) {
             return null;
           }
@@ -44,7 +52,6 @@ const jobsQuery = () => {
         const insertQuery = query.insert(tableName, {
           ...data,
           createdAt,
-          uuid: Crypto.randomUUID(), // TODO: Remove if not needed
         });
         return await conn.tx(db, insertQuery, []);
       } catch (error) {

app/src/database/crud/crud-monitoring.js

@@ -8,13 +8,37 @@ const monitoringQuery = () => {
       const insertQuery = query.insert('monitoring', {
         formId: formId,
         uuid: formJSON.uuid,
-        administration: formJSON?.administration,
         name: formJSON?.datapoint_name || null,
         json: formJSON ? JSON.stringify(formJSON.answers).replace(/'/g, "''") : null,
         syncedAt: new Date().toISOString(),
       });
       return await conn.tx(db, insertQuery, []);
     },
+    syncForm: async ({ formId, formJSON }) => {
+      const findQuery = query.read('monitoring', { uuid: formJSON.uuid });
+      const { rows } = await conn.tx(db, findQuery, [formJSON.uuid]);
+      if (rows.length) {
+        const monitoringID = rows._array[0].id;
+        const updateQuery = query.update(
+          'monitoring',
+          { id: monitoringID },
+          {
+            json: formJSON ? JSON.stringify(formJSON.answers).replace(/'/g, "''") : null,
+            syncedAt: new Date().toISOString(),
+          },
+        );
+        return await conn.tx(db, updateQuery, [monitoringID]);
+      } else {
+        const insertQuery = query.insert('monitoring', {
+          formId: formId,
+          uuid: formJSON.uuid,
+          name: formJSON?.datapoint_name || null,
+          json: formJSON ? JSON.stringify(formJSON.answers).replace(/'/g, "''") : null,
+          syncedAt: new Date().toISOString(),
+        });
+        return await conn.tx(db, insertQuery, []);
+      }
+    },
     getAllForms: async () => {
       const sqlQuery = 'SELECT formId FROM monitoring';
       const { rows } = await conn.tx(db, sqlQuery);

app/src/database/tables.js

@@ -61,7 +61,6 @@ export const tables = [
       formId: 'INTEGER NOT NULL',
       uuid: 'TEXT type UNIQUE',
       name: 'VARCHAR(255)',
-      administration: 'VARCHAR(255)', // TODO: Remove
       syncedAt: 'DATETIME',
       json: 'TEXT',
     },
@@ -78,13 +77,12 @@ export const tables = [
     name: 'jobs',
     fields: {
       id: 'INTEGER PRIMARY KEY NOT NULL',
-      uuid: 'TEXT type UNIQUE', // TODO: Remove if not used
+      form: 'INTEGER NOT NULL',
       user: 'INTEGER NOT NULL',
       type: 'VARCHAR(191)',
       status: 'INTEGER NOT NULL',
       attempt: 'INTEGER DEFAULT "0" NOT NULL',
-      active: 'TINYINT',
-      info: 'TEXT',
+      info: 'VARCHAR(255)',
       createdAt: 'DATETIME',
     },
   },

app/src/lib/i18n/ui-text.js

@@ -100,6 +100,7 @@ const uiText = {
     settingAddNewFormPageTitle: 'Add New Form',
     errorFormsNotLoaded: 'Unable to load forms',
     downloadingData: 'Downloading data',
+    syncDataPointBtn: 'Sync Datapoint',
     syncingText: 'Syncing...',
     syncingFailedText: 'Syncing failed...',
     syncingSuccessText: 'Syncing successful...',

app/src/lib/sync-datapoints.js

@@ -0,0 +1,35 @@
+import { crudMonitoring } from '../database/crud';
+import api from './api';
+
+export const fetchDatapoints = async (form, pageNumber = 1, allData = []) => {
+  try {
+    const response = await api.get(`/datapoint-list?page=${pageNumber}&form=${form}`);
+    const data = response.data.data;
+
+    const updatedData = [...allData, ...data];
+
+    if (data.hasMorePages) {
+      return fetchDatapoints(form, pageNumber + 1, updatedData);
+    } else {
+      return updatedData;
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+export const downloadDatapointsJson = async (formId, url) => {
+  try {
+    const response = await api.get(url);
+    if (response.status === 200) {
+      const jsonData = response.data;
+      const res = await crudMonitoring.syncForm({
+        formId,
+        formJSON: jsonData,
+      });
+      console.info('[SYNCED MONITORING]', res);
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};

app/src/pages/FormPage.js

@@ -180,9 +180,9 @@ const FormPage = ({ navigation, route }) => {
        * Create a new job for syncing form submissions.
        */
       await crudJobs.addJob({
+        form: currentFormId,
         user: userId,
         type: SYNC_FORM_SUBMISSION_TASK_NAME,
-        active: 1,
         status: jobStatus.PENDING,
         info: `${currentFormId} | ${datapoitName}`,
       });

app/src/pages/ManageForm.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { View } from 'react-native';
-import { ListItem } from '@rneui/themed';
+import { View, ToastAndroid } from 'react-native';
+import { Button, ListItem } from '@rneui/themed';
 import { BaseLayout } from '../components';
-import { UIState, FormState } from '../store';
-import { i18n } from '../lib';
+import { UIState, FormState, UserState } from '../store';
+import { i18n, api } from '../lib';
 import { getCurrentTimestamp } from '../form/lib';
+import { crudForms, crudMonitoring } from '../database/crud';
+import crudJobs, { SYNC_DATAPOINT_JOB_NAME, jobStatus } from '../database/crud/crud-jobs';
 
 const ManageForm = ({ navigation, route }) => {
   const draftCount = FormState.useState((s) => s.form?.draft);
   const submittedCount = FormState.useState((s) => s.form?.submitted);
   const activeLang = UIState.useState((s) => s.lang);
   const trans = i18n.text(activeLang);
+  const userId = UserState.useState((s) => s.id);
 
   const goToNewForm = () => {
     FormState.update((s) => {
@@ -57,6 +60,88 @@ const ManageForm = ({ navigation, route }) => {
       goTo: () => navigation.navigate('FormData', { ...route?.params, showSubmitted: true }),
     },
   ];
+
+  async function fetchData(form, pageNumber = 1, allData = []) {
+    try {
+      const response = await api.get(`/datapoint-list?page=${pageNumber}&form=${form}`);
+      const data = response.data.data;
+
+      const updatedData = [...allData, ...data];
+
+      if (data.hasMorePages) {
+        return fetchData(form, pageNumber + 1, updatedData);
+      } else {
+        return updatedData;
+      }
+    } catch (error) {
+      ToastAndroid.show(`${error?.errorCode}: ${error?.message}`, ToastAndroid.LONG);
+    }
+  }
+
+  const handleDataPoint = async () => {
+    ToastAndroid.show(trans.syncingText, ToastAndroid.CENTER);
+    setSyncLoading(true);
+    try {
+      const allData = await fetchData(route.params.formId);
+      const urls = allData.map((item) => item.url);
+      await Promise.all(urls.map(downloadJson));
+    } catch (error) {
+      setSyncLoading(false);
+    }
+  };
+
+  const downloadJson = async (url) => {
+    try {
+      const response = await api.get(url);
+      if (response.status === 200) {
+        const jsonData = response.data;
+        await crudMonitoring.addForm({
+          formId: params.id,
+          formJSON: jsonData,
+        });
+        setSyncLoading(false);
+        ToastAndroid.show(trans.syncingSuccessText, ToastAndroid.LONG);
+      }
+    } catch (error) {
+      ToastAndroid.show(`${error?.errorCode}: ${error?.message}`, ToastAndroid.LONG);
+    }
+  };
+
+  const handleGetForm = async (userID) => {
+    try {
+      const formRes = await api.get(`/form/${route.params.formId}`);
+      const apiData = formRes.data;
+
+      if (apiData.cascades) {
+        apiData.cascades.forEach((cascadeFile) => {
+          const downloadUrl = api.getConfig().baseURL + cascadeFile;
+          cascades.download(downloadUrl, cascadeFile);
+        });
+      }
+
+      const savedForm = await crudForms.addForm({
+        formId: route.params.formId,
+        version: apiData.version,
+        userId: userID,
+        formJSON: apiData,
+      });
+
+      console.info('Saved Form...', savedForm);
+    } catch (error) {
+      console.error('Error handling form:', error);
+    }
+  };
+
+  const handleOnSyncClick = async () => {
+    await handleGetForm();
+    await crudJobs.addJob({
+      form: route.params.formId,
+      user: userId,
+      type: SYNC_DATAPOINT_JOB_NAME,
+      status: jobStatus.PENDING,
+    });
+  };
+
   return (
     <BaseLayout title={route?.params?.name} rightComponent={false}>
       <BaseLayout.Content>
@@ -78,6 +163,9 @@ const ManageForm = ({ navigation, route }) => {
           ))}
         </View>
       </BaseLayout.Content>
+      <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
+        <Button title={trans.syncDataPointBtn} type="outline" onPress={handleOnSyncClick} />
+      </View>
     </BaseLayout>
   );
 };

app/src/store/users.js

@@ -10,6 +10,8 @@ const UserState = new Store({
   forms: [],
   currentLocation: null,
   locationIsGranted: false,
+  syncDatapointsAdded: false,
+  syncDatapointsForm: null,
 });
 
 export default UserState;