Merge branch 'master' into button-changes

emma-frontend/components/patientscreens/registration/regEight.js

 import React, { useState } from "react";
-import { View, Text, Button, StyleSheet, Alert, Clipboard } from "react-native";
+import {
+  View,
+  Text,
+  Button,
+  StyleSheet,
+  Alert,
+  Clipboard,
+  ActivityIndicator,
+} from "react-native";
 import RadioForm, {
   RadioButton,
   RadioButtonInput,
@@ -13,6 +21,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 export default function PatientRegEight({ navigation, route }) {
   const [educationLevel, setEducationLevel] = useState("");
   const [employedStatus, setEmployedStatus] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const educationLevelOptions = [
     { label: "Schooling", value: "Schooling" },
@@ -28,6 +37,8 @@ export default function PatientRegEight({ navigation, route }) {
   ];
 
   const handleSave = async () => {
+    setIsLoading(true);
+
     //encrypt the data
     const encryptedEmail = EncryptWithServerKey(route.params.email);
     const encryptedUsername = EncryptWithServerKey(route.params.username);
@@ -132,7 +143,7 @@ export default function PatientRegEight({ navigation, route }) {
             `\nSecret key : ` +
             decryptedStellarSecretKey +
             `\n Save the keys in a safe place`;
-
+          setIsLoading(false);
           //Show keys on the alert
           Alert.alert("Account keys", alertMessage, [
             {
@@ -156,87 +167,95 @@ export default function PatientRegEight({ navigation, route }) {
           //on close send to main UI
         } catch (errorWhenStoringInAsyncStorage) {
           console.log(errorWhenStoringInAsyncStorage);
+          setIsLoading(false);
         }
       } else {
         console.log(responseData);
       }
     } catch (errorWhenSendingRegObj) {
       console.error("Error : ", errorWhenSendingRegObj);
+      setIsLoading(false);
     }
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>Highest Education Level:</Text>
-      <View style={styles.separator} />
-      <RadioForm animation={true}>
-        {educationLevelOptions.map((option, index) => (
-          <RadioButton
-            labelHorizontal={true}
-            key={index}
-            labelWrapStyle={{ flexDirection: "row", alignItems: "center" }}
-          >
-            <RadioButtonInput
-              obj={option}
-              index={index}
-              isSelected={educationLevel === option.value}
-              onPress={() => setEducationLevel(option.value)}
-              buttonInnerColor={"#703BE7"}
-              buttonOuterColor={
-                educationLevel === option.value ? "#703BE7" : "#703BE7"
-              }
-              buttonSize={15}
-              buttonOuterSize={25}
-              buttonStyle={{}}
-              buttonWrapStyle={{ marginLeft: 10 }}
-            />
-            <RadioButtonLabel
-              obj={option}
-              index={index}
-              labelHorizontal={true}
-              onPress={() => setEducationLevel(option.value)}
-              labelStyle={{ fontSize: 16, marginRight: 10 }}
-            />
-          </RadioButton>
-        ))}
-      </RadioForm>
-      <View style={styles.separator} />
-      <Text style={styles.label}>Employed:</Text>
-      <View style={styles.separator} />
-      <RadioForm animation={true}>
-        {employedOptions.map((option, index) => (
-          <RadioButton
-            labelHorizontal={true}
-            key={index}
-            labelWrapStyle={{ flexDirection: "row", alignItems: "center" }}
-          >
-            <RadioButtonInput
-              obj={option}
-              index={index}
-              isSelected={employedStatus === option.value}
-              onPress={() => setEmployedStatus(option.value)}
-              buttonInnerColor={"#703BE7"}
-              buttonOuterColor={
-                employedStatus === option.value ? "#703BE7" : "#703BE7"
-              }
-              buttonSize={15}
-              buttonOuterSize={25}
-              buttonStyle={{}}
-              buttonWrapStyle={{ marginLeft: 10 }}
-            />
-            <RadioButtonLabel
-              obj={option}
-              index={index}
-              labelHorizontal={true}
-              onPress={() => setEmployedStatus(option.value)}
-              labelStyle={{ fontSize: 16, marginRight: 10 }}
-            />
-          </RadioButton>
-        ))}
-      </RadioForm>
-      <View style={styles.buttonContainer}>
-        <Button title="All Done" onPress={handleSave} color="#703BE7" />
-      </View>
+      {isLoading ? (
+        <ActivityIndicator size="large" color="#560CCE" />
+      ) : (
+        <>
+          <Text style={styles.label}>Highest Education Level:</Text>
+          <View style={styles.separator} />
+          <RadioForm animation={true}>
+            {educationLevelOptions.map((option, index) => (
+              <RadioButton
+                labelHorizontal={true}
+                key={index}
+                labelWrapStyle={{ flexDirection: "row", alignItems: "center" }}
+              >
+                <RadioButtonInput
+                  obj={option}
+                  index={index}
+                  isSelected={educationLevel === option.value}
+                  onPress={() => setEducationLevel(option.value)}
+                  buttonInnerColor={"#703BE7"}
+                  buttonOuterColor={
+                    educationLevel === option.value ? "#703BE7" : "#703BE7"
+                  }
+                  buttonSize={15}
+                  buttonOuterSize={25}
+                  buttonStyle={{}}
+                  buttonWrapStyle={{ marginLeft: 10 }}
+                />
+                <RadioButtonLabel
+                  obj={option}
+                  index={index}
+                  labelHorizontal={true}
+                  onPress={() => setEducationLevel(option.value)}
+                  labelStyle={{ fontSize: 16, marginRight: 10 }}
+                />
+              </RadioButton>
+            ))}
+          </RadioForm>
+          <View style={styles.separator} />
+          <Text style={styles.label}>Employed:</Text>
+          <View style={styles.separator} />
+          <RadioForm animation={true}>
+            {employedOptions.map((option, index) => (
+              <RadioButton
+                labelHorizontal={true}
+                key={index}
+                labelWrapStyle={{ flexDirection: "row", alignItems: "center" }}
+              >
+                <RadioButtonInput
+                  obj={option}
+                  index={index}
+                  isSelected={employedStatus === option.value}
+                  onPress={() => setEmployedStatus(option.value)}
+                  buttonInnerColor={"#703BE7"}
+                  buttonOuterColor={
+                    employedStatus === option.value ? "#703BE7" : "#703BE7"
+                  }
+                  buttonSize={15}
+                  buttonOuterSize={25}
+                  buttonStyle={{}}
+                  buttonWrapStyle={{ marginLeft: 10 }}
+                />
+                <RadioButtonLabel
+                  obj={option}
+                  index={index}
+                  labelHorizontal={true}
+                  onPress={() => setEmployedStatus(option.value)}
+                  labelStyle={{ fontSize: 16, marginRight: 10 }}
+                />
+              </RadioButton>
+            ))}
+          </RadioForm>
+          <View style={styles.buttonContainer}>
+            <Button title="All Done" onPress={handleSave} color="#703BE7" />
+          </View>
+        </>
+      )}
     </View>
   );
 }

emma-frontend/components/practitionerscreens/registration.js

 import { useNavigation } from "@react-navigation/core";
-import { View, TextInput, Button, StyleSheet, Alert } from "react-native";
+import {
+  View,
+  TextInput,
+  Button,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+} from "react-native";
 import React, { useState } from "react";
 import EncryptWithServerKey from "../../services/encryptByServerKey";
 import { LOCALBACKEND } from "../../env";
@@ -13,8 +20,11 @@ export default function PractitionerRegistration() {
   const [email, setEmail] = useState("");
   const [fullName, setFullName] = useState("");
   const [workspace, setWorkspace] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleNext = async () => {
+    setIsLoading(true);
+
     //encrypt the data
     const encryptedUsername = EncryptWithServerKey(username);
     const encryptedPassword = EncryptWithServerKey(password);
@@ -75,6 +85,7 @@ export default function PractitionerRegistration() {
           `\nSecret key : ` +
           decryptedStellarSecretKey +
           `\n Save the keys in a safe place`;
+        setIsLoading(false);
 
         Alert.alert("Account keys", alertMessage, [
           {
@@ -94,50 +105,57 @@ export default function PractitionerRegistration() {
           "Error when saving details in the async storage : ",
           errorWhenStoringInTheAsyncStorage
         );
+        setIsLoading(false);
       }
     } catch (errorWhenRegisteringPractitioner) {
       console.log(
         "Error when registering practitioner : ",
         errorWhenRegisteringPractitioner
       );
+      setIsLoading(false);
     }
   };
 
   return (
     <View style={styles.container}>
-      <TextInput
-        style={styles.input}
-        placeholder="User name"
-        value={username}
-        onChangeText={(text) => setUsername(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Password"
-        value={password}
-        onChangeText={(text) => setPassword(text)}
-        secureTextEntry={true}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Full Name"
-        value={fullName}
-        onChangeText={(text) => setFullName(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Workspace"
-        value={workspace}
-        onChangeText={(text) => setWorkspace(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Email"
-        value={email}
-        onChangeText={(text) => setEmail(text)}
-      />
-
-      <Button color="#703BE7" title="Register" onPress={handleNext} />
+      {isLoading ? (
+        <ActivityIndicator size="large" color="#560CCE" />
+      ) : (
+        <>
+          <TextInput
+            style={styles.input}
+            placeholder="User name"
+            value={username}
+            onChangeText={(text) => setUsername(text)}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Password"
+            value={password}
+            onChangeText={(text) => setPassword(text)}
+            secureTextEntry={true}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Full Name"
+            value={fullName}
+            onChangeText={(text) => setFullName(text)}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Workspace"
+            value={workspace}
+            onChangeText={(text) => setWorkspace(text)}
+          />
+          <TextInput
+            style={styles.input}
+            placeholder="Email"
+            value={email}
+            onChangeText={(text) => setEmail(text)}
+          />
+          <Button color="#703BE7" title="Register" onPress={handleNext} />
+        </>
+      )}
     </View>
   );
 }

emma-frontend/package.json

@@ -23,10 +23,10 @@
     "react-native-base64": "^0.2.1",
     "react-native-crypto-js": "^1.0.0",
     "react-native-datepicker": "^1.7.2",
-    "react-native-gesture-handler": "^2.10.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-render-html": "^6.3.4",
     "react-native-rsa-native": "^2.0.5",
-    "react-native-safe-area-context": "^4.5.3",
+    "react-native-safe-area-context": "4.5.0",
     "react-native-simple-radio-button": "^2.7.4",
     "react-native-toast-message": "^2.1.6",
     "react-native-webview": "11.26.0"