From ae880c1ab31c8590a04104a871b8e19da29e9359 Mon Sep 17 00:00:00 2001
From: Dylan <dylan.coben@gmail.com>
Date: Sun, 17 Nov 2024 20:09:54 -0500
Subject: [PATCH 1/3] Testing for creating drawers

---
 client/app.json                               |  5 +-
 client/app/components/chat/NearbyHeader.tsx   | 10 ++--
 .../app/components/chat/NearbyUserDrawer.tsx  | 36 +++++++++++++
 client/app/index.js                           |  4 +-
 client/app/screens/chat/ChatScreen.tsx        |  2 +
 client/gesture-handler.js                     |  2 +
 client/gesture-handler.native.js              |  2 +
 client/package-lock.json                      | 50 +++++++++++++++++++
 client/package.json                           |  1 +
 9 files changed, 102 insertions(+), 10 deletions(-)
 create mode 100644 client/app/components/chat/NearbyUserDrawer.tsx
 create mode 100644 client/gesture-handler.js
 create mode 100644 client/gesture-handler.native.js

diff --git a/client/app.json b/client/app.json
index 69e66da8b..cc2c81b15 100644
--- a/client/app.json
+++ b/client/app.json
@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "34D1BF"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -27,6 +25,7 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
+    "newArchEnabled": true,
     "plugins": [
       "expo-router",
       [
diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
index f9b61f9a2..f86d32ad3 100644
--- a/client/app/components/chat/NearbyHeader.tsx
+++ b/client/app/components/chat/NearbyHeader.tsx
@@ -14,10 +14,12 @@ export const NearbyHeader: React.FC = () => {
     <View style={styles.nearbyContainer}>
       <Text style={styles.nearbyText}>Nearby</Text>
       <View style={styles.iconContainer}>
-        <Image
-          style={styles.peopleIcon}
-          source={require("../../../assets/icons/misc/nearby_icon.png")}
-        />
+        <TouchableOpacity onPress={() => {}}>
+          <Image
+            style={styles.peopleIcon}
+            source={require("../../../assets/icons/misc/nearby_icon.png")}
+          />
+        </TouchableOpacity>
         <Text style={styles.countText}>{5}</Text>
       </View>
     </View>
diff --git a/client/app/components/chat/NearbyUserDrawer.tsx b/client/app/components/chat/NearbyUserDrawer.tsx
new file mode 100644
index 000000000..3f520573f
--- /dev/null
+++ b/client/app/components/chat/NearbyUserDrawer.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Dimensions, Text, StyleSheet, View } from "react-native";
+import { Drawer } from "react-native-drawer-layout";
+import { Button } from "react-native";
+
+export const NearbyUserDrawer = () => {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <Drawer
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      drawerType={"front"}
+      renderDrawerContent={() => {
+        return (
+          <View style={styles.drawerContent}>
+            <Text>Drawer content</Text>
+          </View>
+        );
+      }}>
+      <Button
+        onPress={() => setOpen((prevOpen) => !prevOpen)}
+        title={`${open ? "Close" : "Open"} drawer`}
+      />
+    </Drawer>
+  );
+};
+
+const styles = StyleSheet.create({
+  drawerContent: {
+    height: Dimensions.get("window").height,
+    width: Dimensions.get("window").width,
+    backgroundColor: "white",
+  },
+});
diff --git a/client/app/index.js b/client/app/index.js
index 3e0dc8607..f55f6536f 100644
--- a/client/app/index.js
+++ b/client/app/index.js
@@ -16,9 +16,7 @@ const App = () => {
 
   if (!initialized) return <Text>Loading...</Text>;
 
-  return (
-    isLoggedin ? <AppNavigator /> : <AuthNavigator />
-  );
+  return isLoggedin ? <AppNavigator /> : <AuthNavigator />;
 };
 
 export default App;
diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index 7616b7925..c4a79c843 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -19,6 +19,7 @@ import { useState, useEffect } from "react";
 import { useUser } from "@app/contexts/UserContext";
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
+import { NearbyUserDrawer } from "@app/components/chat/NearbyUserDrawer";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -90,6 +91,7 @@ const ChatScreen = () => {
         keyboardVerticalOffset={
           Platform.OS === "ios" ? screenHeight * 0.055 : 0
         }>
+        <NearbyUserDrawer />
         <View style={styles.mainContainer}>
           <NearbyHeader />
           <View style={styles.chatContainer}>
diff --git a/client/gesture-handler.js b/client/gesture-handler.js
new file mode 100644
index 000000000..8a56fae40
--- /dev/null
+++ b/client/gesture-handler.js
@@ -0,0 +1,2 @@
+// Don't import react-native-gesture-handler on web
+// React docs say to keep this file to prevent errors in production even for mobile development
diff --git a/client/gesture-handler.native.js b/client/gesture-handler.native.js
new file mode 100644
index 000000000..7b0751605
--- /dev/null
+++ b/client/gesture-handler.native.js
@@ -0,0 +1,2 @@
+// Only import react-native-gesture-handler on native platforms
+import "react-native-gesture-handler";
diff --git a/client/package-lock.json b/client/package-lock.json
index 4062245b1..7aad5c5d6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -30,6 +30,7 @@
         "react": "18.3.1",
         "react-native": "0.76.2",
         "react-native-dotenv": "^3.4.11",
+        "react-native-drawer-layout": "^4.0.1",
         "react-native-feather": "^1.1.2",
         "react-native-gesture-handler": "~2.20.2",
         "react-native-safe-area-context": "4.12.0",
@@ -41,6 +42,7 @@
       "devDependencies": {
         "@types/react": "~18.3.12",
         "@types/react-native": "^0.73.0",
+        "@types/react-native-drawer": "^2.5.9",
         "eslint": "^8.57.0",
         "eslint-config-expo": "~8.0.1",
         "jest": "^29.2.1",
@@ -5511,6 +5513,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/@types/react-native-drawer": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@types/react-native-drawer/-/react-native-drawer-2.5.9.tgz",
+      "integrity": "sha512-kKjpzDYgPHpYPyn+c42WAw3Xkcz8R92v3KsimYeNls7XwsJfb4hyFtTW7BQXSoJRTwuvJiLRohlkejMRuUHutg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -15898,6 +15910,20 @@
         "@babel/runtime": "^7.20.6"
       }
     },
+    "node_modules/react-native-drawer-layout": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-4.0.1.tgz",
+      "integrity": "sha512-395LypsQKNqcaMFHDj41jPXe3m9LbQRF7XKR1BzJh8B/kkc95OTZhwpXzMRBOLUiq4y4yL0loRzQtQRiruG+fQ==",
+      "dependencies": {
+        "use-latest-callback": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 2.0.0",
+        "react-native-reanimated": ">= 2.0.0"
+      }
+    },
     "node_modules/react-native-feather": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/react-native-feather/-/react-native-feather-1.1.2.tgz",
@@ -15944,6 +15970,30 @@
         "react-native": ">=0.73.0"
       }
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.1.tgz",
+      "integrity": "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-class-properties": "^7.0.0-0",
+        "@babel/plugin-transform-classes": "^7.0.0-0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-transform-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.12.0.tgz",
diff --git a/client/package.json b/client/package.json
index b883f4890..2d1ed01e6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -37,6 +37,7 @@
     "react": "18.3.1",
     "react-native": "0.76.2",
     "react-native-dotenv": "^3.4.11",
+    "react-native-drawer-layout": "^4.0.1",
     "react-native-feather": "^1.1.2",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-safe-area-context": "4.12.0",

From 6e5a2abc11ed1ae4b87fab103e4efcbde42c78ee Mon Sep 17 00:00:00 2001
From: Dylan <dylan.coben@gmail.com>
Date: Mon, 18 Nov 2024 22:50:05 -0500
Subject: [PATCH 2/3] Added right side drawer with mock values and adjusted
 chat footer padding

---
 .../app/components/chat/ChatScreenFooter.tsx  |   2 +-
 client/app/components/chat/NearbyHeader.tsx   |  18 ++-
 .../app/components/chat/NearbyUserDrawer.tsx  | 117 ++++++++++++++----
 client/app/screens/chat/ChatScreen.tsx        |   6 +-
 client/package-lock.json                      |  14 +--
 client/package.json                           |   1 +
 6 files changed, 107 insertions(+), 51 deletions(-)

diff --git a/client/app/components/chat/ChatScreenFooter.tsx b/client/app/components/chat/ChatScreenFooter.tsx
index c96420f44..c0ea4ff2b 100644
--- a/client/app/components/chat/ChatScreenFooter.tsx
+++ b/client/app/components/chat/ChatScreenFooter.tsx
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: Dimensions.get("window").width * 0.058,
     marginHorizontal: Dimensions.get("window").width * 0.005,
-    marginBottom: Platform.OS === "ios" ? 0 : 5,
+    marginBottom: 5,
     minHeight: Dimensions.get("window").width * 0.113,
     maxHeight: Dimensions.get("window").width * 0.3,
   },
diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
index f86d32ad3..03b8db8b2 100644
--- a/client/app/components/chat/NearbyHeader.tsx
+++ b/client/app/components/chat/NearbyHeader.tsx
@@ -9,19 +9,24 @@ import {
 } from "react-native";
 import { ChevronLeft } from "react-native-feather";
 
-export const NearbyHeader: React.FC = () => {
+interface NearbyHeaderProps {
+  onClick: () => void;
+}
+
+export const NearbyHeader: React.FC<NearbyHeaderProps> = ({ onClick }) => {
   return (
     <View style={styles.nearbyContainer}>
       <Text style={styles.nearbyText}>Nearby</Text>
-      <View style={styles.iconContainer}>
-        <TouchableOpacity onPress={() => {}}>
+      <TouchableOpacity onPress={onClick}>
+        <View style={styles.iconContainer}>
           <Image
             style={styles.peopleIcon}
             source={require("../../../assets/icons/misc/nearby_icon.png")}
           />
-        </TouchableOpacity>
-        <Text style={styles.countText}>{5}</Text>
-      </View>
+
+          <Text style={styles.countText}>{5}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -42,6 +47,7 @@ const styles = StyleSheet.create({
     paddingRight: "5%",
     paddingLeft: "10%",
     gap: 10,
+    zIndex: 1,
   },
   nearbyText: {
     fontFamily: "Quicksand",
diff --git a/client/app/components/chat/NearbyUserDrawer.tsx b/client/app/components/chat/NearbyUserDrawer.tsx
index 3f520573f..058a752fb 100644
--- a/client/app/components/chat/NearbyUserDrawer.tsx
+++ b/client/app/components/chat/NearbyUserDrawer.tsx
@@ -1,36 +1,99 @@
-import * as React from "react";
-import { Dimensions, Text, StyleSheet, View } from "react-native";
-import { Drawer } from "react-native-drawer-layout";
-import { Button } from "react-native";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, FlatList, Dimensions } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import NearbyHeader from "./NearbyHeader";
+import { Pressable } from "react-native";
 
-export const NearbyUserDrawer = () => {
-  const [open, setOpen] = React.useState(true);
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const NearbyUserDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const translateX = useSharedValue(SCREEN_WIDTH);
+
+  const toggleDrawer = () => {
+    translateX.value = isOpen
+      ? withTiming(SCREEN_WIDTH, {
+          duration: 300, // Duration in milliseconds
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        })
+      : withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease), // Smooth easing out
+        });
+    setIsOpen(!isOpen);
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const nearbyUsers = ["Alice", "Bob", "Charlie", "Diana", "Eve"]; // Example names
 
   return (
-    <Drawer
-      open={open}
-      onOpen={() => setOpen(true)}
-      onClose={() => setOpen(false)}
-      drawerType={"front"}
-      renderDrawerContent={() => {
-        return (
-          <View style={styles.drawerContent}>
-            <Text>Drawer content</Text>
-          </View>
-        );
-      }}>
-      <Button
-        onPress={() => setOpen((prevOpen) => !prevOpen)}
-        title={`${open ? "Close" : "Open"} drawer`}
-      />
-    </Drawer>
+    <View style={styles.container}>
+      <NearbyHeader onClick={toggleDrawer} />
+      {/* Overlay and Drawer */}
+      {isOpen && <Pressable style={styles.overlay} onPress={toggleDrawer} />}
+      <Animated.View style={[styles.drawer, animatedStyle]}>
+        <Text style={styles.headerText}>Nearby Users</Text>
+        <FlatList
+          data={nearbyUsers}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item }) => <Text style={styles.name}>{item}</Text>}
+        />
+      </Animated.View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  drawerContent: {
-    height: Dimensions.get("window").height,
-    width: Dimensions.get("window").width,
-    backgroundColor: "white",
+  container: {
+    display: "flex",
+    height: Dimensions.get("screen").height,
+    flexDirection: "column",
+    alignItems: "center",
+    position: "absolute",
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.15)",
+    zIndex: 1,
+  },
+  drawer: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    width: SCREEN_WIDTH * 0.6,
+    height: "100%",
+    backgroundColor: "#fff",
+    borderLeftWidth: 1,
+    borderLeftColor: "#ddd",
+    padding: 30,
+    shadowColor: "#000",
+    shadowOffset: { width: -2, height: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    zIndex: 2,
+    gap: 20,
+  },
+  headerText: {
+    fontFamily: "Quicksand",
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  name: {
+    fontSize: 18,
+    marginVertical: 10,
   },
 });
+
+export default NearbyUserDrawer;
diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index c4a79c843..1f9df6d55 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -19,7 +19,7 @@ import { useState, useEffect } from "react";
 import { useUser } from "@app/contexts/UserContext";
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
-import { NearbyUserDrawer } from "@app/components/chat/NearbyUserDrawer";
+import NearbyUserDrawer from "@app/components/chat/NearbyUserDrawer";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -91,9 +91,8 @@ const ChatScreen = () => {
         keyboardVerticalOffset={
           Platform.OS === "ios" ? screenHeight * 0.055 : 0
         }>
-        <NearbyUserDrawer />
         <View style={styles.mainContainer}>
-          <NearbyHeader />
+          <NearbyUserDrawer />
           <View style={styles.chatContainer}>
             <MessageChannel messages={messages} />
           </View>
@@ -137,7 +136,6 @@ const styles = StyleSheet.create({
 
   footerContainer: {
     width: "95%",
-
     maxHeight: Dimensions.get("window").height * 0.15,
     display: "flex",
     flexDirection: "row",
diff --git a/client/package-lock.json b/client/package-lock.json
index 7aad5c5d6..9d1b6b9ba 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -33,6 +33,7 @@
         "react-native-drawer-layout": "^4.0.1",
         "react-native-feather": "^1.1.2",
         "react-native-gesture-handler": "~2.20.2",
+        "react-native-reanimated": "^3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.0.0",
         "react-native-svg": "15.8.0",
@@ -42,7 +43,6 @@
       "devDependencies": {
         "@types/react": "~18.3.12",
         "@types/react-native": "^0.73.0",
-        "@types/react-native-drawer": "^2.5.9",
         "eslint": "^8.57.0",
         "eslint-config-expo": "~8.0.1",
         "jest": "^29.2.1",
@@ -1676,7 +1676,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
       "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -5513,16 +5512,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/@types/react-native-drawer": {
-      "version": "2.5.9",
-      "resolved": "https://registry.npmjs.org/@types/react-native-drawer/-/react-native-drawer-2.5.9.tgz",
-      "integrity": "sha512-kKjpzDYgPHpYPyn+c42WAw3Xkcz8R92v3KsimYeNls7XwsJfb4hyFtTW7BQXSoJRTwuvJiLRohlkejMRuUHutg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -15974,7 +15963,6 @@
       "version": "3.16.1",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.1.tgz",
       "integrity": "sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==",
-      "peer": true,
       "dependencies": {
         "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
         "@babel/plugin-transform-class-properties": "^7.0.0-0",
diff --git a/client/package.json b/client/package.json
index 2d1ed01e6..271eb5391 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,6 +40,7 @@
     "react-native-drawer-layout": "^4.0.1",
     "react-native-feather": "^1.1.2",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.0.0",
     "react-native-svg": "15.8.0",

From 1ccc15d5e647510b4b6d38ed25e7ee453564411b Mon Sep 17 00:00:00 2001
From: Dylan <dylan.coben@gmail.com>
Date: Tue, 19 Nov 2024 10:09:51 -0500
Subject: [PATCH 3/3] Slightly adjusted margin for chat screen footer

---
 client/app/components/chat/ChatScreenFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/components/chat/ChatScreenFooter.tsx b/client/app/components/chat/ChatScreenFooter.tsx
index c0ea4ff2b..d4be7fc9c 100644
--- a/client/app/components/chat/ChatScreenFooter.tsx
+++ b/client/app/components/chat/ChatScreenFooter.tsx
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: Dimensions.get("window").width * 0.058,
     marginHorizontal: Dimensions.get("window").width * 0.005,
-    marginBottom: 5,
+    marginBottom: 3,
     minHeight: Dimensions.get("window").width * 0.113,
     maxHeight: Dimensions.get("window").width * 0.3,
   },