Merge branch 'main-view-with-hamburger-menu' into 'master'

Main view with hamburger menu

See merge request !35

emma-frontend/App.js

@@ -15,6 +15,9 @@ import PatientRegSix from "./components/patientscreens/registration/regSix";
 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();
 
@@ -96,6 +99,20 @@ export default function App() {
             component={PatientConsentForm}
             options={{ headerShown: false }}
           />
+          <Stack.Screen
+            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({ route }) {
+  const [message, setMessage] = useState("");
+  const [chatMessages, setChatMessages] = useState([]);
+  const navigation = useNavigation();
+
+  const sendMessage = () => {
+    if (message.trim() === "") {
+      return; // Don't send empty messages
+    }
+
+    const newMessage = {
+      id: chatMessages.length + 1,
+      text: message,
+      sender: "Me",
+      timestamp: new Date().toISOString(),
+    };
+
+    setChatMessages([...chatMessages, newMessage]);
+    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 }}>
+        <Text style={{ fontSize: 20, marginLeft: 10 }}>Chat</Text>
+      </View>
+      {/* Chat messages */}
+      <View style={{ flex: 1, padding: 10 }}>
+        {chatMessages.map((msg) => (
+          <View
+            key={msg.id}
+            style={{
+              marginBottom: 10,
+              alignSelf: msg.sender === "Me" ? "flex-end" : "flex-start",
+            }}
+          >
+            <Text>{msg.text}</Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Message input and send button */}
+      <View style={{ flexDirection: "row", alignItems: "center", padding: 10 }}>
+        <TextInput
+          style={{
+            flex: 1,
+            borderWidth: 1,
+            borderColor: "gray",
+            borderRadius: 10,
+            paddingHorizontal: 10,
+          }}
+          placeholder="Type your message..."
+          value={message}
+          onChangeText={(text) => setMessage(text)}
+        />
+        <TouchableOpacity onPress={sendMessage} style={{ marginLeft: 10 }}>
+          <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("");
@@ -146,7 +145,13 @@ export default function PatientRegEight({ navigation, route }) {
                 );
               },
             },
-            { text: "Close", style: "cancel" },
+            {
+              text: "Close",
+              style: "cancel",
+              onPress: () => {
+                navigation.navigate("PatientMainChatView");
+              },
+            },
           ]);
           //on close send to main UI
         } catch (errorWhenStoringInAsyncStorage) {

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",