More profile migrations

www/js/control/AlertBar.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Modal, Snackbar} from 'react-native-paper';
+import { useTranslation } from "react-i18next";
+
+const AlertBar = ({visible, setVisible, messageKey}) => {
+    const { t } = useTranslation(); 
+    const onDismissSnackBar = () => setVisible(false);
+
+    return (
+      <Modal visible={visible} onDismiss={() => setVisible(false)}>
+        <Snackbar
+          visible={visible}
+          onDismiss={onDismissSnackBar}
+          action={{
+            label: t("join.close"),
+            onPress: () => {
+              onDismissSnackBar()
+            },
+        }}>
+          {t(messageKey)}
+        </Snackbar>
+    </Modal>
+    );
+  };
+
+export default AlertBar;

www/js/control/ControlDataTable.jsx

@@ -1,12 +1,9 @@
 import React from "react";
 import { DataTable } from 'react-native-paper';
-import { angularize } from "../angular-react-helper";
-import { array } from "prop-types";
 
-// Note the camelCase to dash-case conventions when translating to .html files!
 // val with explicit call toString() to resolve bool values not showing
 const ControlDataTable = ({ controlData }) => {
-  // console.log("Printing data trying to tabulate", controlData);
+  console.log("Printing data trying to tabulate", controlData);
   return (
     //rows require unique keys!
     <DataTable style={styles.table}>
@@ -28,11 +25,5 @@ const styles = {
     borderLeftColor: 'rgba(0,0,0,0.25)',
   }
 }
-ControlDataTable.propTypes = {
-    controlData: array
-  }
-
-// need call to angularize to let the React and Angular co-mingle
-  //second argument is "module path" - can access later as ControlDataTable.module
-angularize(ControlDataTable, 'ControlDataTable', 'emission.main.control.dataTable'); 
+
 export default ControlDataTable;

www/js/control/DemographicsSettingRow.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { getAngularService } from "../angular-react-helper";
+import SettingRow from "./SettingRow";
+
+const DemographicsSettingRow = ({ }) => {
+
+  const EnketoDemographicsService = getAngularService('EnketoDemographicsService');
+  const EnketoSurveyLaunch = getAngularService('EnketoSurveyLaunch');
+  const $rootScope = getAngularService('$rootScope');
+
+  // copied from /js/survey/enketo/enketo-demographics.js
+  function openPopover() {
+    return EnketoDemographicsService.loadPriorDemographicSurvey().then((lastSurvey) => {
+      return EnketoSurveyLaunch
+        .launch($rootScope, 'UserProfileSurvey', {
+          prefilledSurveyResponse: lastSurvey?.data?.xmlResponse,
+          showBackButton: true, showFormFooterJumpNav: true
+        })
+        .then(result => {
+          console.log("demographic survey result ", result);
+        });
+    });
+  }
+
+  return <SettingRow action={openPopover} iconName="account"
+          textKey="control.edit-demographics" isToggle={false} />
+};
+
+export default DemographicsSettingRow;

www/js/control/ExpandMenu.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { StyleSheet } from 'react-native';
+import { List, useTheme } from 'react-native-paper';
+import { useTranslation } from "react-i18next";
+import { styles as rowStyles } from "./SettingRow";
+
+const ExpansionSection = (props) => {
+    const { t } = useTranslation(); //this accesses the translations
+    const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors
+    const [expanded, setExpanded] = React.useState(false);
+
+    const handlePress = () => setExpanded(!expanded);
+
+  return (
+    <List.Accordion
+      style={styles.section(colors.surface)}
+      title={t(props.sectionTitle)}
+      titleStyle={rowStyles.title}
+      expanded={expanded}
+      onPress={handlePress}>
+        {props.children}
+    </List.Accordion>
+  );
+};
+const styles = StyleSheet.create({
+  section: (surfaceColor) => ({
+      justifyContent: 'space-between',
+      backgroundColor: surfaceColor,
+      margin: 1,
+  }),
+});
+
+export default ExpansionSection;

www/js/control/PopOpCode.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Modal, StyleSheet } from 'react-native';
+import { Button, Text, IconButton, Dialog, useTheme } from 'react-native-paper';
+import { useTranslation } from "react-i18next";
+import QrCode from "../components/QrCode";
+
+const PopOpCode = ({visibilityValue, tokenURL, action, setVis}) => {
+    const { t } = useTranslation(); 
+    const { colors } = useTheme();
+
+    return (
+        <Modal visible={visibilityValue} onDismiss={() => setVis(false)}
+        transparent={true}>
+            <Dialog visible={visibilityValue} 
+            onDismiss={() => setVis(false)}
+            style={styles.dialog(colors.elevation.level3)}>
+                <Dialog.Title>{t("general-settings.qrcode")}</Dialog.Title>
+                <Dialog.Content style={styles.content}>
+                    <QrCode value={tokenURL}></QrCode>
+                    <Text>{t("general-settings.qrcode-share-title")}</Text>
+                    <IconButton icon="share" onPress={() => action()} style={styles.button}/>
+                </Dialog.Content>
+                <Dialog.Actions>
+                    <Button onPress={() => setVis(false)}>{t('general-settings.cancel')}</Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Modal>
+    )
+}
+const styles = StyleSheet.create({
+    dialog: (surfaceColor) => ({
+        backgroundColor: surfaceColor,
+        margin: 1,
+    }),
+    title:
+    {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center', 
+    },
+    button: {
+        margin: 'auto',
+    }
+  });
+
+export default PopOpCode;