Merge branch 'button-changes' into 'master'

Button changes

See merge request !51

emma-frontend/App.js

@@ -111,33 +111,63 @@ export default function App() {
           <Stack.Screen
             name="PatientMainChatView"
             component={PatientMainChatView}
+            options={{ headerShown: false }}
           />
           <Stack.Screen
             name="All Practitioners"
             component={PatientAllPractitioners}
+            options={{ headerShown: false }}
           />
           <Stack.Screen
             name="PatientNFTRequests"
             component={PatientNFTRequests}
+            options={{ headerShown: false }}
           />
           <Stack.Screen
             name="PractitionerRegistration"
             component={PractitionerRegistration}
+            options={{ headerShown: false }}
           />
           <Stack.Screen
             name="PractitionerMainView"
             component={PractitionerMainView}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="PatientLogin"
+            component={PatientLogin}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="PatientRequests"
+            component={PatientRequests}
+            options={{ headerShown: false }}
           />
-          <Stack.Screen name="PatientLogin" component={PatientLogin} />
-          <Stack.Screen name="PatientRequests" component={PatientRequests} />
           <Stack.Screen
             name="PractitionerLogin"
             component={PractitionerLogin}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="TreatingPatients"
+            component={TreatingPatients}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="ReceivedNFT"
+            component={ReceivedNFT}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="NftView"
+            component={NftView}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="PatientMainMenu"
+            component={PatientMainMenu}
+            options={{ headerShown: false }}
           />
-          <Stack.Screen name="TreatingPatients" component={TreatingPatients} />
-          <Stack.Screen name="ReceivedNFT" component={ReceivedNFT} />
-          <Stack.Screen name="NftView" component={NftView} />
-          <Stack.Screen name="PatientMainMenu" component={PatientMainMenu} />
         </Stack.Navigator>
       ) : (
         <SplashScreenComponent />

emma-frontend/components/patientscreens/allPractitioners.js

 import React, { useEffect, useState } from "react";
-import { View, Text, StyleSheet, Button } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Button,
+  ActivityIndicator,
+} from "react-native";
 import { LOCALBACKEND } from "../../env";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function PatientAllPractitioners({ navigation, router }) {
   const [data, setData] = useState([]);
   const [stellarPublicKey, setStellarPublicKey] = useState("");
+  const [isRequested, setRequested] = useState(false);
 
   useEffect(() => {
     fetchData();
@@ -27,16 +34,21 @@ export default function PatientAllPractitioners({ navigation, router }) {
 
   const renderItem = (item) => {
     return (
-      <View key={item._id}>
+      <View style={styles.item} key={item._id}>
         <Text>Full Name: {item.fullname}</Text>
         <Text>Public Key: {item.publickey}</Text>
         <Text>Workspace: {item.workspace}</Text>
-        <Button title="Request" onPress={() => handleRequest(item)} />
+        <Button
+          color="#703BE7"
+          title="Request"
+          onPress={() => handleRequest(item)}
+        />
       </View>
     );
   };
 
   const handleRequest = async (item) => {
+    setRequested(true);
     try {
       const value = await AsyncStorage.getItem("patientStellarPublicKey");
       if (value != null) {
@@ -58,6 +70,7 @@ export default function PatientAllPractitioners({ navigation, router }) {
           });
 
           const responseData = await reqResponse.json();
+          setRequested(false);
         } catch (errorWhenSendingReqObj) {
           console.log("Error when sending request to practitioner");
         }
@@ -69,24 +82,34 @@ export default function PatientAllPractitioners({ navigation, router }) {
         "Error fetching public key from async storage data:",
         errorWhenPublicKey
       );
+      setRequested(false);
     }
     // Handle the request for the specific item by requesting the practitioner
     console.log("Requested:", item);
   };
 
   return (
-    <View style={styles.container}>{data.map((item) => renderItem(item))}</View>
+    <View style={styles.container}>
+      {isRequested ? (
+        <ActivityIndicator size="large" color="#000" />
+      ) : (
+        <>{data.map((item) => renderItem(item))}</>
+      )}
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
     alignItems: "center",
+    padding: 20,
   },
   text: {
     fontSize: 24,
     fontWeight: "bold",
   },
+  item: {
+    padding: 10,
+  },
 });

emma-frontend/components/patientscreens/consent.js

@@ -97,7 +97,7 @@ export default function PatientConsentForm({ navigation, route }) {
       <Button title="Cancel" onPress={handleCancel} /> */}
 
       <View style={{ marginTop: 10 }}>
-        <Button title="Agree" onPress={handleAgree} />
+        <Button title="Agree" onPress={handleAgree} color="#703BE7" />
       </View>
       <View style={{ marginTop: 10, marginBottom: 10 }}>
         <Button title="Cancel" onPress={handleCancel} color="red" />

emma-frontend/components/patientscreens/nftRequests.js

@@ -44,7 +44,11 @@ export default function PatientNFTRequests({ navigation }) {
     return (
       <View key={item._id}>
         <Text>Key: {item.requesterpk}</Text>
-        <Button title="Send NFT" onPress={() => handleSendNFT(item)}></Button>
+        <Button
+          color="#703BE7"
+          title="Send NFT"
+          onPress={() => handleSendNFT(item)}
+        ></Button>
       </View>
     );
   };

emma-frontend/components/patientscreens/patientMainChatView.js

@@ -44,9 +44,9 @@ export default function PatientMainChatView({ route }) {
 
   return (
     <View style={{ flex: 1 }}>
-      <View style={{ flexDirection: "row", alignItems: "center", padding: 10 }}>
-        <Text style={{ fontSize: 20, marginLeft: 10 }}>Chat</Text>
-      </View>
+      <View
+        style={{ flexDirection: "row", alignItems: "center", padding: 10 }}
+      ></View>
       {/* Chat messages */}
       <View style={{ flex: 1, padding: 10 }}>
         {chatMessages.map((msg) => (
@@ -81,7 +81,7 @@ export default function PatientMainChatView({ route }) {
         </TouchableOpacity>
       </View>
 
-      {/* Bottom buttons */}
+      {/* Bottom buttons
       <View
         style={{
           flexDirection: "row",
@@ -99,7 +99,7 @@ export default function PatientMainChatView({ route }) {
         <TouchableOpacity onPress={navigateToOthers}>
           <Text>Others</Text>
         </TouchableOpacity>
-      </View>
+      </View> */}
     </View>
   );
 }

emma-frontend/components/patientscreens/patientMenu.js

@@ -20,18 +20,23 @@ export default function PatientMainMenu({ navigation }) {
     <View style={styles.container}>
       <View style={styles.buttonContainer}>
         <Button
+          color="#703BE7"
           title="View Practitioners"
           onPress={() => handlePractitioners()}
         />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="Chat" onPress={() => handleChatView()} />
+        <Button color="#703BE7" title="Chat" onPress={() => handleChatView()} />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="NFT requests" onPress={() => handleNftRequests()} />
+        <Button
+          color="#703BE7"
+          title="NFT requests"
+          onPress={() => handleNftRequests()}
+        />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="Logout" onPress={() => handleLogout()} />
+        <Button color="red" title="Logout" onPress={() => handleLogout()} />
       </View>
     </View>
   );

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

 import React, { useState } from "react";
-import { View, TextInput, Button, Alert } from "react-native";
+import { View, TextInput, Button, Alert, StyleSheet } from "react-native";
 import { LOCALBACKEND } from "../../../env";
 import EncryptWithServerKey from "../../../services/encryptByServerKey";
 
@@ -37,19 +37,51 @@ export default function PatientLogin({ navigation, route }) {
   };
 
   return (
-    <View>
+    <View style={styles.container}>
       <TextInput
+        style={styles.input}
         placeholder="Username"
         value={username}
         onChangeText={setUsername}
       />
       <TextInput
+        style={styles.input}
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Login" onPress={handleLogin} />
+      <Button title="Login" onPress={handleLogin} color="#703BE7" />
     </View>
   );
 }
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    width: "80%",
+    height: 40,
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    borderColor: "gray",
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  button: {
+    width: "80%",
+    height: 60, // Adjust the height value to make the button taller
+    backgroundColor: "#560CCE",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 30, // Adjust the border radius value to make the edges rounder
+    marginTop: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

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

@@ -184,7 +184,8 @@ export default function PatientRegEight({ navigation, route }) {
         <ActivityIndicator size="large" color="#560CCE" />
       ) : (
         <>
-          <Text>Highest Education Level:</Text>
+          <Text style={styles.label}>Highest Education Level:</Text>
+          <View style={styles.separator} />
           <RadioForm animation={true}>
             {educationLevelOptions.map((option, index) => (
               <RadioButton
@@ -197,9 +198,9 @@ export default function PatientRegEight({ navigation, route }) {
                   index={index}
                   isSelected={educationLevel === option.value}
                   onPress={() => setEducationLevel(option.value)}
-                  buttonInnerColor={"#2196f3"}
+                  buttonInnerColor={"#703BE7"}
                   buttonOuterColor={
-                    educationLevel === option.value ? "#2196f3" : "#000"
+                    educationLevel === option.value ? "#703BE7" : "#703BE7"
                   }
                   buttonSize={15}
                   buttonOuterSize={25}
@@ -216,8 +217,9 @@ export default function PatientRegEight({ navigation, route }) {
               </RadioButton>
             ))}
           </RadioForm>
-
-          <Text>Employed:</Text>
+          <View style={styles.separator} />
+          <Text style={styles.label}>Employed:</Text>
+          <View style={styles.separator} />
           <RadioForm animation={true}>
             {employedOptions.map((option, index) => (
               <RadioButton
@@ -230,9 +232,9 @@ export default function PatientRegEight({ navigation, route }) {
                   index={index}
                   isSelected={employedStatus === option.value}
                   onPress={() => setEmployedStatus(option.value)}
-                  buttonInnerColor={"#2196f3"}
+                  buttonInnerColor={"#703BE7"}
                   buttonOuterColor={
-                    employedStatus === option.value ? "#2196f3" : "#000"
+                    employedStatus === option.value ? "#703BE7" : "#703BE7"
                   }
                   buttonSize={15}
                   buttonOuterSize={25}
@@ -249,8 +251,9 @@ export default function PatientRegEight({ navigation, route }) {
               </RadioButton>
             ))}
           </RadioForm>
-
-          <Button title="All Done" onPress={handleSave} />
+          <View style={styles.buttonContainer}>
+            <Button title="All Done" onPress={handleSave} color="#703BE7" />
+          </View>
         </>
       )}
     </View>
@@ -259,7 +262,18 @@ export default function PatientRegEight({ navigation, route }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+    padding: 16,
     justifyContent: "center",
   },
+  buttonContainer: {
+    width: "100%",
+    marginTop: 10,
+  },
+  separator: {
+    height: 20,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+  },
 });

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

@@ -54,7 +54,8 @@ export default function PatientRegFive({ navigation, route }) {
         onPress={handleRelationshipStatusChange}
         formHorizontal={false}
         labelHorizontal={true}
-        buttonColor={"#2196f3"}
+        buttonColor={"#703BE7"}
+        selectedButtonColor={"#703BE7"}
       />
 
       <Text style={styles.label}>Number of Children:</Text>
@@ -64,8 +65,8 @@ export default function PatientRegFive({ navigation, route }) {
         onChangeText={handleNumberOfChildrenChange}
         keyboardType="numeric"
       />
-
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}></View>
+      <Button title="Next" onPress={handleNext} color="#703BE7"/>
     </View>
   );
 }

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

@@ -43,26 +43,36 @@ export default function PatientRegFour({ navigation, route }) {
 
   return (
     <View style={styles.container}>
-      <Text>Did you grow up with parents?</Text>
+      <Text style={styles.label}>Did you grow up with parents?</Text>
       <RadioForm
         radio_props={radioOptions}
         initial={parentStatus}
         onPress={handleParentStatusChange}
         formHorizontal={false}
         labelHorizontal={true}
-        buttonColor={"#2196f3"}
-        selectedButtonColor={"#2196f3"}
+        buttonColor={"#703BE7"}
+        selectedButtonColor={"#703BE7"}
         labelStyle={{ fontSize: 16, marginHorizontal: 10 }}
         style={{ marginVertical: 10 }}
       />
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={handleNext} color="#703BE7" />
+      </View>
     </View>
   );
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+    padding: 16,
     justifyContent: "center",
   },
+  buttonContainer: {
+    width: "100%",
+    marginTop: 10,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+  },
 });

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

@@ -21,31 +21,42 @@ export default function PatientRegFourOptional({ navigation, route }) {
 
   return (
     <View style={styles.container}>
-      <Text>How many siblings did you have?</Text>
+      <Text style={styles.label}>How many siblings did you have?</Text>
       <TextInput
         style={styles.input}
         onChangeText={(text) => setSiblingCount(text)}
         value={siblingCount.toString()}
         keyboardType="numeric"
       />
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={handleNext} color="#703BE7" />
+      </View>
     </View>
   );
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+    padding: 16,
     justifyContent: "center",
   },
   inputContainer: {
-    marginTop: 20,
+    marginTop: 30,
   },
   input: {
     height: 40,
-    width: 200,
+    width: "100%",
     borderColor: "gray",
     borderWidth: 1,
     paddingHorizontal: 10,
+    marginTop: 20,
+  },
+  buttonContainer: {
+    width: "100%",
+    marginTop: 20,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
   },
 });

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

 import React, { useState } from "react";
-import { View, TextInput, Button, StyleSheet,TouchableHighlight,Text } from "react-native";
+import {
+  View,
+  TextInput,
+  Button,
+  StyleSheet,
+  TouchableHighlight,
+  Text,
+} from "react-native";
 import { useNavigation } from "@react-navigation/native";
 
 export default function PatientRegOne() {
@@ -39,10 +46,7 @@ export default function PatientRegOne() {
         secureTextEntry={true}
       />
       {/* <Button title="Next" onPress={handleNext} color="#703BE7"/> */}
-      <TouchableHighlight
-        style={styles.button}
-        onPress={handleNext}
-      >
+      <TouchableHighlight style={styles.button} onPress={handleNext}>
         <Text style={styles.buttonText}>Next</Text>
       </TouchableHighlight>
     </View>

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

@@ -30,31 +30,32 @@ export default function PatientRegSeven({ navigation, route }) {
 
   return (
     <View style={styles.container}>
-      <Text>Ethnicity:</Text>
       <TextInput
         style={styles.input}
+        placeholder="Ethnicity"
         value={ethnicity}
         onChangeText={setEthnicity}
         maxLength={64}
       />
 
-      <Text>Religion:</Text>
       <TextInput
+        placeholder="Religion"
         style={styles.input}
         value={religion}
         onChangeText={setReligion}
         maxLength={64}
       />
 
-      <Text>Nationality:</Text>
       <TextInput
+        placeholder="Nationality"
         style={styles.input}
         value={nationality}
         onChangeText={setNationality}
         maxLength={64}
       />
-
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={handleNext} color="#703BE7" />
+      </View>
     </View>
   );
 }
@@ -66,8 +67,16 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   input: {
-    borderWidth: 1,
+    width: "80%",
+    height: 40,
+    marginVertical: 10,
+    paddingHorizontal: 10,
     borderColor: "gray",
-    marginBottom: 10,
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  buttonContainer: {
+    width: "80%",
+    marginTop: 10,
   },
 });

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

@@ -49,9 +49,12 @@ export default function PatientRegSix({ navigation, route }) {
         onPress={handleOptionSelect}
         formHorizontal={false}
         labelHorizontal={true}
-        buttonColor={"#2196f3"}
+        buttonColor={"#703BE7"}
+        selectedButtonColor={"#703BE7"}
       />
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={handleNext} color="#703BE7" />
+      </View>
     </View>
   );
 }
@@ -60,11 +63,14 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center",
     padding: 20,
   },
   label: {
     fontSize: 18,
     marginBottom: 10,
   },
+  buttonContainer: {
+    width: "100%",
+    marginTop: 10,
+  },
 });

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

@@ -60,8 +60,14 @@ export default function PatientRegThree({ navigation, route }) {
 
   return (
     <View style={styles.container}>
-      <Text>Date of Birth</Text>
-      <Button title="Pick a date" onPress={() => setShowDatePicker(true)} />
+      <Text style={styles.label}>Date of Birth</Text>
+      <View style={styles.buttonContainer}>
+        <Button
+          title="Pick a date"
+          onPress={() => setShowDatePicker(true)}
+          color="#703BE7"
+        />
+      </View>
       {showDatePicker && (
         <DateTimePicker
           value={birthday}
@@ -71,26 +77,28 @@ export default function PatientRegThree({ navigation, route }) {
         />
       )}
 
-      <Text>Gender</Text>
+      <Text style={styles.label}>Gender</Text>
       <RadioForm
         radio_props={radioOptions}
         initial={0}
         onPress={(value) => setGender(value)}
         formHorizontal={true}
         labelHorizontal={false}
-        buttonColor={"#2196f3"}
-        selectedButtonColor={"#2196f3"}
+        buttonColor={"#703BE7"}
+        selectedButtonColor={"#703BE7"}
         labelStyle={{ fontSize: 16, marginHorizontal: 10 }}
         style={{ marginVertical: 10 }}
       />
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={handleNext} color="#703BE7" />
+      </View>
     </View>
   );
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+    padding: 16,
     justifyContent: "center",
   },
   input: {
@@ -129,4 +137,8 @@ const styles = StyleSheet.create({
   btnTextCancel: {
     color: "#666",
   },
+  buttonContainer: {
+    width: "100%",
+    marginTop: 10,
+  },
 });

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

@@ -47,12 +47,14 @@ export default function PatientRegTwo() {
         onPress={(value) => setPronoun(value)}
         formHorizontal={true}
         labelHorizontal={false}
-        buttonColor={"#2196f3"}
-        selectedButtonColor={"#2196f3"}
+        buttonColor={"#703BE7"}
+        selectedButtonColor={"#703BE7"}
         labelStyle={{ fontSize: 16, marginHorizontal: 10 }}
         style={{ marginVertical: 10 }}
       />
-      <Button title="Next" onPress={handleNext} />
+      <View style={styles.buttonContainer}>
+      <Button title="Next" onPress={handleNext}  color="#703BE7" />
+      </View>
     </View>
   );
 }
@@ -77,4 +79,8 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     marginVertical: 10,
   },
+  buttonContainer: {
+    width: "80%",
+    marginTop: 10,
+  },
 });

emma-frontend/components/practitionerscreens/login.js

 import React, { useState } from "react";
-import { View, TextInput, Button, Alert } from "react-native";
+import { View, TextInput, Button, Alert, StyleSheet } from "react-native";
 import { LOCALBACKEND } from "../../env";
 import EncryptWithServerKey from "../../services/encryptByServerKey";
 
@@ -37,19 +37,51 @@ export default function PractitionerLogin({ navigation, route }) {
   };
 
   return (
-    <View>
+    <View style={styles.container}>
       <TextInput
+        style={styles.input}
         placeholder="Username"
         value={username}
         onChangeText={setUsername}
       />
       <TextInput
+        style={styles.input}
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Login" onPress={handleLogin} />
+      <Button color="#703BE7" title="Login" onPress={handleLogin} />
     </View>
   );
 }
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    width: "80%",
+    height: 40,
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    borderColor: "gray",
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  button: {
+    width: "80%",
+    height: 60, // Adjust the height value to make the button taller
+    backgroundColor: "#560CCE",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 30, // Adjust the border radius value to make the edges rounder
+    marginTop: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

emma-frontend/components/practitionerscreens/mainViewWithMenu.js

@@ -21,16 +21,28 @@ export default function PractitionerMainView({ navigation }) {
   return (
     <View style={styles.container}>
       <View style={styles.buttonContainer}>
-        <Button title="User Requests" onPress={() => handleUserReq()} />
+        <Button
+          color="#703BE7"
+          title="User Requests"
+          onPress={() => handleUserReq()}
+        />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="Request EHRs" onPress={() => handleRequesting()} />
+        <Button
+          color="#703BE7"
+          title="Request EHRs"
+          onPress={() => handleRequesting()}
+        />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="View NFTs" onPress={() => handleView()} />
+        <Button
+          color="#703BE7"
+          title="View NFTs"
+          onPress={() => handleView()}
+        />
       </View>
       <View style={styles.buttonContainer}>
-        <Button title="Logout" onPress={() => handleLogout()} />
+        <Button color="red" title="Logout" onPress={() => handleLogout()} />
       </View>
     </View>
   );

emma-frontend/components/practitionerscreens/nft-view.js

@@ -4,7 +4,14 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import RSADecrypt from "../../services/decryptByRsaKey";
 import DecryptWithAssetKey from "../../services/decryptByAssetKey";
 import { WebView } from "react-native-webview";
-import { View, Text, useWindowDimensions, ScrollView } from "react-native";
+import {
+  View,
+  Text,
+  useWindowDimensions,
+  ScrollView,
+  ActivityIndicator,
+  StyleSheet,
+} from "react-native";
 import RenderHTML from "react-native-render-html";
 
 export default function NftView({ navigation, route }) {
@@ -14,12 +21,14 @@ export default function NftView({ navigation, route }) {
   const [ipfsContent, setIpfsContent] = useState("");
   const [decryptedContent, setDecrypted] = useState("");
   const { width } = useWindowDimensions();
+  const [isLoaded, setLoaded] = useState(false);
 
   useEffect(() => {
     fetchRequests();
   }, []);
 
   const fetchRequests = async () => {
+    setLoaded(true);
     console.log("Asset code ", assetCode);
     const assetCode = route.params.assetcode;
 
@@ -48,20 +57,54 @@ export default function NftView({ navigation, route }) {
         );
         setDecrypted(decryptedIpfsContent);
         console.log(decryptedIpfsContent);
+        setLoaded(false);
       } catch (errorWhenGGettingIPFSContent) {
         console.error(
           "Error when getting IPFS content :",
           errorWhenGGettingIPFSContent
         );
+        setLoaded(false);
       }
     } catch (errorWhenGettingNftDetails) {
       console.log("Error when getting NFT details");
+      setLoaded(false);
     }
   };
 
   return (
     <ScrollView>
-      <RenderHTML contentWidth={width} source={{ html: decryptedContent }} />
+      {isLoaded ? (
+        <ActivityIndicator
+          style={styles.item}
+          color="#000"
+          size="large"
+        ></ActivityIndicator>
+      ) : (
+        <>
+          <RenderHTML
+            contentWidth={width}
+            source={{ html: decryptedContent }}
+            baseStyle={styles.container}
+          />
+        </>
+      )}
     </ScrollView>
   );
 }
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    padding: 30,
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  item: {
+    padding: 100,
+  },
+  sep: {
+    height: 20,
+  },
+});

emma-frontend/components/practitionerscreens/patientRequestsView.js

 import { useEffect, useState } from "react";
 import { LOCALBACKEND } from "../../env";
-import { Button, StyleSheet, View, Text } from "react-native";
+import {
+  Button,
+  StyleSheet,
+  View,
+  Text,
+  ActivityIndicator,
+} from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import EncryptWithServerKey from "../../services/encryptByServerKey";
 
 export default function PatientRequests() {
   const [data, setData] = useState([]);
+  const [isAccepted, setAccepted] = useState(false);
 
   useEffect(() => {
     fetchRequests();
@@ -43,13 +50,17 @@ export default function PatientRequests() {
 
   const renderItem = (item) => {
     return (
-      <View key={item._id}>
+      <View style={styles.item} key={item._id}>
         <Text>Key: {item.patient}</Text>
+        <View style={styles.sep}></View>
         <Button
+          color="#703BE7"
           title="Accept"
           onPress={() => handleAcceptance(item, "Accepted")}
         ></Button>
+        <View style={styles.sep}></View>
         <Button
+          color="red"
           title="Reject"
           onPress={() => handleAcceptance(item, "Rejected")}
         ></Button>
@@ -58,6 +69,7 @@ export default function PatientRequests() {
   };
 
   const handleAcceptance = async (item, status) => {
+    setAccepted(true);
     //get the practitioner keys
     try {
       const practitionerKey = await AsyncStorage.getItem(
@@ -93,27 +105,42 @@ export default function PatientRequests() {
 
         const responseData = await acceptanceResponse.json();
         console.log(responseData);
+        setAccepted(false);
       } catch (errorWhenSendingAcceptance) {
         console.log("Error when sending payload");
+        setAccepted(false);
       }
     } catch (errorWheGettingKeyPair) {
       console.log("Getting key pair from async failed");
+      setAccepted(false);
     }
   };
 
   return (
-    <View style={styles.container}>{data.map((item) => renderItem(item))}</View>
+    <View style={styles.container}>
+      {isAccepted ? (
+        <ActivityIndicator color="#000" size="large"></ActivityIndicator>
+      ) : (
+        <>{data.map((item) => renderItem(item))}</>
+      )}
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
     alignItems: "center",
+    padding: 30,
   },
   text: {
     fontSize: 24,
     fontWeight: "bold",
   },
+  item: {
+    padding: 10,
+  },
+  sep: {
+    height: 20,
+  },
 });

emma-frontend/components/practitionerscreens/recievedNfts.js

@@ -42,9 +42,13 @@ export default function ReceivedNFT({ navigation }) {
 
   const renderItem = (item) => {
     return (
-      <View key={item._id}>
+      <View style={styles.item} key={item._id}>
         <Text>Key: {item.assetcode}</Text>
-        <Button title="View NFT" onPress={() => handleViewNFT(item)}></Button>
+        <Button
+          color="#703BE7"
+          title="View NFT"
+          onPress={() => handleViewNFT(item)}
+        ></Button>
       </View>
     );
   };
@@ -62,11 +66,12 @@ export default function ReceivedNFT({ navigation }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
   },
   text: {
     fontSize: 24,
     fontWeight: "bold",
   },
+  item: {
+    padding: 20,
+  },
 });

emma-frontend/components/practitionerscreens/registration.js

@@ -153,7 +153,7 @@ export default function PractitionerRegistration() {
             value={email}
             onChangeText={(text) => setEmail(text)}
           />
-          <Button title="Register" onPress={handleNext} />
+          <Button color="#703BE7" title="Register" onPress={handleNext} />
         </>
       )}
     </View>

emma-frontend/components/practitionerscreens/treatingPatients.js

 import { useEffect, useState } from "react";
 import { LOCALBACKEND } from "../../env";
-import { Button, StyleSheet, View, Text, Alert } from "react-native";
+import {
+  Button,
+  StyleSheet,
+  View,
+  Text,
+  Alert,
+  ActivityIndicator,
+} from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import EncryptWithServerKey from "../../services/encryptByServerKey";
 import Toast from "react-native-toast-message";
 
 export default function TreatingPatients({ navigation }) {
   const [data, setData] = useState([]);
+  const [isRequested, setRequested] = useState(false);
 
   useEffect(() => {
     fetchRequests();
@@ -43,10 +51,11 @@ export default function TreatingPatients({ navigation }) {
 
   const renderItem = (item) => {
     return (
-      <View key={item._id}>
+      <View style={styles.item} key={item._id}>
         <Text>Key: {item.patient}</Text>
         <Button
           title="Request EHR"
+          color="#703BE7"
           onPress={() => handleRequesting(item)}
         ></Button>
       </View>
@@ -54,6 +63,7 @@ export default function TreatingPatients({ navigation }) {
   };
 
   const handleRequesting = async (item) => {
+    setRequested(true);
     //get the practitioner keys
     try {
       const practitionerKey = await AsyncStorage.getItem(
@@ -92,7 +102,7 @@ export default function TreatingPatients({ navigation }) {
           },
           body: JSON.stringify(requestOj),
         });
-
+        setRequested(false);
         Toast.show({
           type: "success", // 'success', 'error', 'info', 'warning'
           text1: "Request added",
@@ -100,17 +110,28 @@ export default function TreatingPatients({ navigation }) {
           autoHide: true,
         });
         const responseData = await nftRequestResponse.json();
+        setRequested(false);
       } catch (error) {
+        setRequested(false);
+
         console.error("Error when calling the request NFT");
       }
     } catch (errorWheGettingKeyPair) {
+      setRequested(false);
+
       console.error("Error when getting keypair");
     }
   };
 
   return (
     <View style={styles.container}>
-      {data.map((item) => renderItem(item))}
+      {isRequested ? (
+        <ActivityIndicator color="#000" size="large"></ActivityIndicator>
+      ) : (
+        <>
+          <View>{data.map((item) => renderItem(item))}</View>
+        </>
+      )}
       <Toast ref={(ref) => Toast.setRef(ref)} />
     </View>
   );
@@ -119,11 +140,14 @@ export default function TreatingPatients({ navigation }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
+    padding: 30,
     alignItems: "center",
   },
   text: {
     fontSize: 24,
     fontWeight: "bold",
   },
+  item: {
+    padding: 20,
+  },
 });

emma-frontend/components/shared/sharedLogin.js

@@ -8,11 +8,13 @@ export default function SharedLogin({ navigation }) {
         <Button
           title="I am here to get help"
           onPress={() => navigation.navigate("PatientLogin")}
+          color="#703BE7"
         />
         <View style={styles.separator} />
         <Button
           title="I am here to help"
           onPress={() => navigation.navigate("PractitionerLogin")}
+          color="#703BE7"
         />
       </View>
     </View>
@@ -26,10 +28,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   buttonContainer: {
-    flexDirection: "row",
     marginVertical: 20,
   },
   separator: {
     width: 10,
+    height: 20,
   },
 });

emma-frontend/components/shared/sharedRegistration.js

@@ -11,6 +11,7 @@ export default function SharedRegisterScreen({ navigation }) {
             console.log("Patient registration");
             navigation.navigate("PatientConsentForm");
           }}
+          color="#703BE7"
         />
         <View style={styles.separator} />
         <Button
@@ -19,6 +20,7 @@ export default function SharedRegisterScreen({ navigation }) {
             console.log("PractitionerRegistration");
             navigation.navigate("PractitionerRegistration");
           }}
+          color="#703BE7"
         />
       </View>
     </View>
@@ -31,10 +33,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   buttonContainer: {
-    flexDirection: "row",
     marginVertical: 20,
   },
   separator: {
     width: 10,
+    height:20,
   },
 });