Menu containers for the patient chat view

emma-frontend/App.js

@@ -16,6 +16,8 @@ import PatientRegSeven from "./components/patientscreens/registration/regSeven";
 import PatientRegEight from "./components/patientscreens/registration/regEight";
 import PatientConsentForm from "./components/patientscreens/consent";
 import PatientMainChatView from "./components/patientscreens/patientMainChatView";
+import PatientAllPractitioners from "./components/patientscreens/allPractitioners";
+import PatientNFTRequests from "./components/patientscreens/nftRequests";
 
 const Stack = createStackNavigator();
 
@@ -101,6 +103,16 @@ export default function App() {
             name="PatientMainChatView"
             component={PatientMainChatView}
           />
+          <Stack.Screen
+            name="PatientAllPractitioners"
+            component={PatientAllPractitioners}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="PatientNFTRequests"
+            component={PatientNFTRequests}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       ) : (
         <SplashScreenComponent />

emma-frontend/components/patientscreens/allPractitioners.js

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export default function PatientAllPractitioners({ navigation, router }) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>All practitioners</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+});

emma-frontend/components/patientscreens/nftRequests.js

+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export default function PatientNFTRequests({ navigation, router }) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>All NFTrequests</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+});

emma-frontend/components/patientscreens/patientMainChatView.js

 import React, { useState } from "react";
 import { View, TextInput, TouchableOpacity, Text } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
 
-export default function PatientMainChatView({ navigation, route }) {
+export default function PatientMainChatView({ route }) {
   const [message, setMessage] = useState("");
   const [chatMessages, setChatMessages] = useState([]);
+  const navigation = useNavigation();
 
   const sendMessage = () => {
     if (message.trim() === "") {
@@ -22,12 +24,27 @@ export default function PatientMainChatView({ navigation, route }) {
     setMessage("");
   };
 
+  const navigateToAllPractitioners = () => {
+    // Navigate to the "All practitioners" view
+    // Replace "AllPractitionersView" with the actual name of the view
+    navigation.navigate("PatientAllPractitioners");
+  };
+
+  const navigateToNFTRequests = () => {
+    // Navigate to the "NFT requests" view
+    // Replace "NFTRequestsView" with the actual name of the view
+    navigation.navigate("PatientNFTRequests");
+  };
+
+  const navigateToOthers = () => {
+    // Navigate to the "Others" view
+    // Replace "OthersView" with the actual name of the view
+    navigation.navigate("OthersView");
+  };
+
   return (
     <View style={{ flex: 1 }}>
       <View style={{ flexDirection: "row", alignItems: "center", padding: 10 }}>
-        <TouchableOpacity onPress={() => navigation.openDrawer()}>
-          <Ionicons name="menu-outline" size={24} color="black" />
-        </TouchableOpacity>
         <Text style={{ fontSize: 20, marginLeft: 10 }}>Chat</Text>
       </View>
       {/* Chat messages */}
@@ -63,6 +80,26 @@ export default function PatientMainChatView({ navigation, route }) {
           <Ionicons name="send" size={24} color="blue" />
         </TouchableOpacity>
       </View>
+
+      {/* Bottom buttons */}
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-around",
+          backgroundColor: "lightgray",
+          padding: 10,
+        }}
+      >
+        <TouchableOpacity onPress={navigateToAllPractitioners}>
+          <Text>All practitioners</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={navigateToNFTRequests}>
+          <Text>NFT requests</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={navigateToOthers}>
+          <Text>Others</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }

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

@@ -9,7 +9,6 @@ import EncryptWithServerKey from "../../../services/encryptByServerKey";
 import { LOCALBACKEND } from "../../../env";
 import DecryptWithServerKey from "../../../services/decryptByServerKey";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import Clipboard from "@react-native-clipboard/clipboard";
 
 export default function PatientRegEight({ navigation, route }) {
   const [educationLevel, setEducationLevel] = useState("");

emma-frontend/components/shared/menuContainers.js

-import { createAppContainer } from "react-navigation";
-import { createStackNavigator } from "react-navigation-stack";
-import { createDrawerNavigator } from "react-navigation-drawer";
-
-// Create a Drawer Navigator for the first hamburger menu component
-const DrawerNavigatorPatient = createDrawerNavigator(
-  {
-    Home: HomeScreen,
-    Profile: ProfileScreen,
-  },
-  {
-    initialRouteName: "Home",
-    contentOptions: {
-      // Customization options for the drawer content
-    },
-  }
-);
-
-// Create a Drawer Navigator for the second hamburger menu component
-const DrawerNavigatorPractitioner = createDrawerNavigator(
-  {
-    Home: HomeScreen,
-    Settings: SettingsScreen,
-  },
-  {
-    initialRouteName: "Home",
-    contentOptions: {
-      // Customization options for the drawer content
-    },
-  }
-);
-
-// Create separate stacks for each hamburger menu component
-const StackNavigatorPatient = createStackNavigator({
-  Drawer1: { screen: DrawerNavigatorPatient },
-});
-
-const StackNavigatorPractitioner = createStackNavigator({
-  Drawer2: { screen: DrawerNavigatorPractitioner },
-});
-
-// Create the app containers for each hamburger menu component
-const AppContainerPatient = createAppContainer(StackNavigatorPatient);
-const AppContainerPractitioner = createAppContainer(StackNavigatorPractitioner);
-
-export { AppContainerPatient, AppContainerPractitioner };

emma-frontend/env.js

 export const AES_KEY = "QfTjWnZr4u7x!A%D";
-export const LOCALBACKEND = "http://192.168.8.117:4000";
+export const LOCALBACKEND = "http://192.168.1.100:4000";

emma-frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@react-native-async-storage/async-storage": "1.17.11",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-community/datetimepicker": "6.7.3",
+        "@react-navigation/drawer": "^6.6.2",
         "@react-navigation/native": "^6.1.6",
         "@react-navigation/stack": "^6.3.16",
         "expo": "~48.0.15",
@@ -1297,6 +1298,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
+      "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-super": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@@ -4691,6 +4707,25 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/@react-navigation/drawer": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.6.2.tgz",
+      "integrity": "sha512-6qt4guBdz7bkdo/8BLSCcFNdQdSPYyNn05D9cD+VCY3mGThSiD8bRiP9ju+64im7LsSU+bNWXaP8RxA/FtTVQg==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.17",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-reanimated": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/elements": {
       "version": "1.3.17",
       "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
@@ -11299,6 +11334,34 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz",
       "integrity": "sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA=="
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.1.0.tgz",
+      "integrity": "sha512-8YJR7yHnrqK6yKWzkGLVEawi1WZqJ9bGIehKEnE8zG58yLrSwUZe1T220XTbftpkA3r37Sy0kJJ/HOOiaIU+HQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "peer": true
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.2.tgz",
@@ -14366,6 +14429,15 @@
         "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
+    "@babel/plugin-transform-object-assign": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
+      "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
+      "peer": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
     "@babel/plugin-transform-object-super": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@@ -16927,6 +16999,16 @@
         }
       }
     },
+    "@react-navigation/drawer": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.6.2.tgz",
+      "integrity": "sha512-6qt4guBdz7bkdo/8BLSCcFNdQdSPYyNn05D9cD+VCY3mGThSiD8bRiP9ju+64im7LsSU+bNWXaP8RxA/FtTVQg==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.17",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      }
+    },
     "@react-navigation/elements": {
       "version": "1.3.17",
       "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
@@ -21988,6 +22070,26 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz",
       "integrity": "sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA=="
     },
+    "react-native-reanimated": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.1.0.tgz",
+      "integrity": "sha512-8YJR7yHnrqK6yKWzkGLVEawi1WZqJ9bGIehKEnE8zG58yLrSwUZe1T220XTbftpkA3r37Sy0kJJ/HOOiaIU+HQ==",
+      "peer": true,
+      "requires": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "convert-source-map": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+          "peer": true
+        }
+      }
+    },
     "react-native-safe-area-context": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.2.tgz",

emma-frontend/package.json

@@ -12,6 +12,7 @@
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/datetimepicker": "6.7.3",
+    "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "expo": "~48.0.15",