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