Custom Labels Step 2

jest.config.js

@@ -18,4 +18,5 @@ module.exports = {
   moduleDirectories: ["node_modules", "src"],
   globals: {"__DEV__": false},
   collectCoverage: true,
+  coveragePathIgnorePatterns: ['www/js/services/commHelper.ts']
 };

www/__tests__/commHelper.test.ts

@@ -47,4 +47,8 @@ it('fetches text from a URL and caches it so the next call is faster', async ()
   * - updateUser
   * - getUser
   * - putOne
+  * - getUserCustomLabels
+  * - insertUserCustomLabel
+  * - updateUserCustomLabel
+  * - deleteUserCustomLabel
 */

www/i18n/en.json

@@ -8,7 +8,10 @@
   "trip-confirm": {
     "services-please-fill-in": "Please fill in the {{text}} not listed.",
     "services-cancel": "Cancel",
-    "services-save": "Save"
+    "services-save": "Save",
+    "custom-mode": "Custom Mode",
+    "custom-purpose": "Custom Purpose",
+    "custom-labels": "Custom Labels"
   },
 
   "control": {
@@ -47,7 +50,8 @@
     "reminders-time-of-day": "Time of Day for Reminders ({{time}})",
     "upcoming-notifications": "Upcoming Notifications",
     "dummy-notification": "Dummy Notification in 5 Seconds",
-    "log-out": "Log Out"
+    "log-out": "Log Out",
+    "manage-custom-labels": "Manage Custom Labels"
   },
 
   "general-settings": {

www/js/App.tsx

@@ -18,6 +18,7 @@ import { initPushNotify } from './splash/pushNotifySettings';
 import { initStoreDeviceSettings } from './splash/storeDeviceSettings';
 import { initRemoteNotifyHandler } from './splash/remoteNotifyHandler';
 import { withErrorBoundary } from './plugin/ErrorBoundary';
+import { getUserCustomLabels } from './services/commHelper';
 import { initCustomDatasetHelper } from './metrics/customMetricsHelper';
 
 const defaultRoutes = (t) => [
@@ -42,6 +43,16 @@ const defaultRoutes = (t) => [
 ];
 
 export const AppContext = createContext<any>({});
+const CUSTOM_LABEL_KEYS_IN_DATABASE = ['mode', 'purpose'];
+type CustomLabelMap = {
+  [k: string]: string[];
+};
+
+const scenes = {
+  label: withErrorBoundary(LabelTab),
+  metrics: withErrorBoundary(MetricsTab),
+  control: withErrorBoundary(ProfileSettings),
+};
 
 const scenes = {
   label: withErrorBoundary(LabelTab),
@@ -54,6 +65,7 @@ const App = () => {
   // will remain null while the onboarding state is still being determined
   const [onboardingState, setOnboardingState] = useState<OnboardingState | null>(null);
   const [permissionsPopupVis, setPermissionsPopupVis] = useState(false);
+  const [customLabelMap, setCustomLabelMap] = useState<CustomLabelMap>({});
   const appConfig = useAppConfig();
   const permissionStatus = usePermissionStatus();
   const { colors } = useTheme();
@@ -79,6 +91,7 @@ const App = () => {
     initPushNotify();
     initStoreDeviceSettings();
     initRemoteNotifyHandler();
+    getUserCustomLabels(CUSTOM_LABEL_KEYS_IN_DATABASE).then((res) => setCustomLabelMap(res));
     initCustomDatasetHelper(appConfig);
   }, [appConfig]);
 
@@ -90,6 +103,8 @@ const App = () => {
     permissionStatus,
     permissionsPopupVis,
     setPermissionsPopupVis,
+    customLabelMap,
+    setCustomLabelMap,
   };
 
   console.debug('onboardingState in App', onboardingState);

www/js/control/CustomLabelSettingRow.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useContext } from 'react';
+import SettingRow from './SettingRow';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  useWindowDimensions,
+  ScrollView,
+} from 'react-native';
+import { Icon, TextInput, Dialog, Button, useTheme, SegmentedButtons } from 'react-native-paper';
+import { AppContext } from '../App';
+import { useTranslation } from 'react-i18next';
+import { deleteUserCustomLabel, insertUserCustomLabel } from '../services/commHelper';
+import { displayErrorMsg, logDebug } from '../plugin/logger';
+import { labelKeyToReadable, readableLabelToKey } from '../survey/multilabel/confirmHelper';
+
+const CustomLabelSettingRow = () => {
+  const [isCustomLabelModalOpen, setIsCustomLabelModalOpen] = useState(false);
+  const { customLabelMap, setCustomLabelMap } = useContext(AppContext);
+  const [isAddLabelOn, setIsAddLabelOn] = useState(false);
+  const [text, setText] = useState('');
+  const [key, setKey] = useState('mode');
+
+  const { t } = useTranslation(); //this accesses the translations
+  const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors
+  const { height } = useWindowDimensions();
+
+  const labelKeysButton = [
+    {
+      value: 'mode',
+      label: t('diary.mode'),
+    },
+    {
+      value: 'purpose',
+      label: t('diary.purpose'),
+    },
+  ];
+
+  const onDeleteLabel = async (label) => {
+    const processedLabel = readableLabelToKey(label);
+    try {
+      const res = await deleteUserCustomLabel(key, processedLabel);
+      if (res) {
+        setCustomLabelMap({
+          ...customLabelMap,
+          [key]: res['label'],
+        });
+        logDebug(`Successfuly deleted custom ${key}, ${JSON.stringify(res)}`);
+      }
+    } catch (e) {
+      displayErrorMsg(e, 'Delete Mode Error');
+    }
+  };
+
+  const onSaveLabel = async () => {
+    const processedLabel = readableLabelToKey(text);
+    if (customLabelMap[key]?.length > 0 && customLabelMap[key].indexOf(processedLabel) > -1) {
+      return;
+    }
+    try {
+      const res = await insertUserCustomLabel(key, processedLabel);
+      if (res) {
+        setText('');
+        setCustomLabelMap({
+          ...customLabelMap,
+          [key]: res['label'],
+        });
+        setIsAddLabelOn(false);
+        logDebug(`Successfuly inserted custom ${key}, ${JSON.stringify(res)}`);
+      }
+    } catch (e) {
+      displayErrorMsg(e, 'Create Mode Error');
+    }
+  };
+
+  return (
+    <>
+      <SettingRow
+        textKey="control.manage-custom-labels"
+        iconName="label-multiple"
+        action={() => setIsCustomLabelModalOpen(true)}></SettingRow>
+      <Modal
+        visible={isCustomLabelModalOpen}
+        onDismiss={() => setIsCustomLabelModalOpen(false)}
+        transparent={true}>
+        <Dialog visible={isCustomLabelModalOpen} onDismiss={() => setIsCustomLabelModalOpen(false)}>
+          <Dialog.Title>
+            <Text>{t('trip-confirm.custom-labels')}</Text>
+            <TouchableOpacity style={styles.plusIconWrapper} onPress={() => setIsAddLabelOn(true)}>
+              <Icon source="plus-circle" size={24} />
+            </TouchableOpacity>
+          </Dialog.Title>
+          <Dialog.Content>
+            <SegmentedButtons
+              style={{ marginBottom: 10 }}
+              value={key}
+              onValueChange={setKey}
+              buttons={labelKeysButton}
+            />
+            {isAddLabelOn && (
+              <>
+                <TextInput
+                  label={t('trip-confirm.services-please-fill-in', {
+                    text: key,
+                  })}
+                  value={text}
+                  onChangeText={setText}
+                  maxLength={25}
+                  style={{ marginTop: 10 }}
+                />
+                <View style={styles.saveButtonWrapper}>
+                  <Button onPress={() => setIsAddLabelOn(false)}>
+                    {t('trip-confirm.services-cancel')}
+                  </Button>
+                  <Button onPress={onSaveLabel}>{t('trip-confirm.services-save')}</Button>
+                </View>
+              </>
+            )}
+            <ScrollView contentContainerStyle={{ height: height / 2 }}>
+              {customLabelMap[key]?.length > 0 &&
+                customLabelMap[key].map((label, idx) => {
+                  return (
+                    <View
+                      key={label + idx}
+                      style={[styles.itemWrapper, { borderBottomColor: colors.outline }]}>
+                      <Text>{labelKeyToReadable(label)}</Text>
+                      <TouchableOpacity onPress={() => onDeleteLabel(label)}>
+                        <Icon source="trash-can" size={20} />
+                      </TouchableOpacity>
+                    </View>
+                  );
+                })}
+            </ScrollView>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setIsCustomLabelModalOpen(false)}>
+              {t('trip-confirm.services-cancel')}
+            </Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  itemWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+  },
+  saveButtonWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  plusIconWrapper: {
+    position: 'absolute',
+    right: 0,
+  },
+});
+
+export default CustomLabelSettingRow;

www/js/control/ProfileSettings.tsx

@@ -32,6 +32,7 @@ import { storageClear } from '../plugin/storage';
 import { getAppVersion } from '../plugin/clientStats';
 import { getConsentDocument } from '../splash/startprefs';
 import { displayError, displayErrorMsg, logDebug, logWarn } from '../plugin/logger';
+import CustomLabelSettingRow from './CustomLabelSettingRow';
 import { fetchOPCode, getSettings } from '../services/controlHelper';
 import {
   updateScheduledNotifs,
@@ -434,6 +435,7 @@ const ProfileSettings = () => {
           desc={authSettings.opcode}
           descStyle={settingStyles.monoDesc}></SettingRow>
         <DemographicsSettingRow></DemographicsSettingRow>
+        <CustomLabelSettingRow />
         <SettingRow
           textKey="control.view-privacy"
           iconName="eye"

www/js/diary/LabelTab.tsx

@@ -66,7 +66,6 @@ const LabelTab = () => {
       if (!appConfig) return;
       showPlaces = appConfig.survey_info?.buttons?.['place-notes'];
       getLabelOptions(appConfig).then((labelOptions) => setLabelOptions(labelOptions));
-
       // we will show filters if 'additions' are not configured
       // https://github.com/e-mission/e-mission-docs/issues/894
       if (appConfig.survey_info?.buttons == undefined) {

www/js/diary/LabelTabContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { Dispatch, SetStateAction, createContext } from 'react';
 import { TimelineEntry, UserInputEntry } from '../types/diaryTypes';
 import { LabelOption, LabelOptions, MultilabelKey } from '../types/labelTypes';
 import { EnketoUserInputEntry } from '../survey/enketo/enketoHelper';
@@ -20,6 +20,9 @@ export type TimelineLabelMap = {
 export type TimelineNotesMap = {
   [k: string]: UserInputEntry[];
 };
+export type CustomLabelMap = {
+  [k: string]: string[];
+};
 
 type ContextProps = {
   labelOptions: LabelOptions | null;

www/js/services/commHelper.ts

@@ -227,3 +227,77 @@ export function putOne(key, data) {
     throw error;
   });
 }
+
+export function getUserCustomLabels(keys) {
+  return new Promise<any>((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/customlabel/get',
+      'keys',
+      keys,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = 'While getting labels, ' + error;
+    throw error;
+  });
+}
+
+export function insertUserCustomLabel(key, newLabel) {
+  const insertedLabel = {
+    key: key,
+    label: newLabel,
+  };
+  return new Promise((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/customlabel/insert',
+      'inserted_label',
+      insertedLabel,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = `While inserting one ${key}, ${error}`;
+    throw error;
+  });
+}
+
+export function updateUserCustomLabel(key, oldLabel, newLabel, isNewLabelMustAdded) {
+  const updatedLabel = {
+    key: key,
+    old_label: oldLabel,
+    new_label: newLabel,
+    is_new_label_must_added: isNewLabelMustAdded,
+  };
+  return new Promise<any>((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/customlabel/update',
+      'updated_label',
+      updatedLabel,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = `While updating one ${key}, ${error}`;
+    throw error;
+  });
+}
+
+export function deleteUserCustomLabel(key, newLabel) {
+  const deletedLabel = {
+    key: key,
+    label: newLabel,
+  };
+  return new Promise((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/customlabel/delete',
+      'deleted_label',
+      deletedLabel,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = `While deleting one ${key}, ${error}`;
+    throw error;
+  });
+}