Backend refactor [WIP]

api.txt

@@ -0,0 +1,67 @@
+Websocket API Protocol
+
+=== Objects ===
+
+"""
+ObjectName {
+    requiredProp: type
+    optionalProp: type?
+}
+"""
+
+Location {
+    lat: float,
+    lon: float,
+    geohash: string? (generated if not provided)
+}
+
+Message {
+    author: string,
+    content: {
+        text?: string,
+        attachment?: string,
+    },
+    location: Location,
+    replyTo?: string,
+    reactions: {
+        [key: string]: int,
+    }
+}
+
+UserProfile {
+    displayName: string,
+    profilePicture: int,
+}
+
+===
+
+=== Client -> Server Methods ===
+
+"""
+methodName(
+    arguments / inputs...
+) ack -> ackResponse
+"""
+
+// Must be called at least once before calling any other methods
+updateLocation(
+    location: Location
+    ack: func?
+) ack -> "success"
+
+sendMessage(
+    message: Message
+    ack: func?
+) ack -> "success"
+
+getNearbyUsers(
+    callback: func(nearbyUserUids: { [uid: string]: UserProfile }) -> _,
+) callback -> map of nearby user uids to user profiles
+
+// Call after the client has already updated their profile document in firestore
+notifyUpdateProfile(
+    ack: func?
+) ack -> "success"
+
+
+===

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

client/app/components/auth/AuthButtons.tsx

@@ -1,65 +1,15 @@
 import { useFonts } from "expo-font";
 import React, { useState } from "react";
 import {
   StyleSheet,
   Text,
   TouchableOpacity,
   Dimensions,
   Alert,
   Image,
   ImageSourcePropType,
 } from "react-native";
 
-// Migrated to SettingsScree.tsx
-
-// import { appSignOut } from "../../services/AuthStore";
-// interface SignOutButtonProps {}
-// export const SignOutButton: React.FC<SignOutButtonProps> = () => {
-//   const [loading, setLoading] = useState(false);
-
-//   const handleSignOut = async () => {
-//     Alert.alert(
-//       "Confirm Sign Out",
-//       "Are you sure you want to sign out?",
-//       [
-//         {
-//           text: "Cancel",
-//           style: "cancel",
-//         },
-//         {
-//           text: "Sign Out",
-//           onPress: async () => {
-//             setLoading(true);
-//             const response = await appSignOut();
-//             setLoading(false);
-
-//             if (response?.user === null) {
-//               console.log("Sign out successful");
-//             } else if (response?.error) {
-//               console.log(response.error);
-//               Alert.alert(
-//                 "Sign Out Failed",
-//                 "An error occurred during sign out. Please try again.",
-//               );
-//             }
-//           },
-//         },
-//       ],
-//       { cancelable: false },
-//     );
-//   };
-
-//   return (
-//     <TouchableOpacity
-//       style={styles.sign_out_button}
-//       onPress={handleSignOut}
-//       disabled={loading}>
-//       <Text style={styles.button_text}>Sign Out</Text>
-//     </TouchableOpacity>
-
-//   );
-// };
-
 export const ExternalAuthButton: React.FC<{
   onPress?: () => void;
   companyName: string;

client/app/components/chat/ChatScreenFooter.tsx

@@ -5,9 +5,9 @@
   StyleSheet,
   Dimensions,
   Platform,
   TouchableOpacity,
 } from "react-native";
 import { Smile, Image } from "react-native-feather";
 
 import { ChatSendButton } from "../common/CustomButtons";
 
@@ -26,12 +26,12 @@
   return (
     <View style={styles.container}>
       <View style={styles.iconContainer}>
-        <TouchableOpacity>
+        {/* <TouchableOpacity>
           <Image color="black" strokeWidth={1.8} style={styles.icons} />
         </TouchableOpacity>
         <TouchableOpacity>
           <Smile color="black" strokeWidth={1.8} style={styles.icons} />
-        </TouchableOpacity>
+        </TouchableOpacity> */}
       </View>
       <TextInput
         placeholder="Say Something..."
@@ -57,7 +57,7 @@
     borderWidth: 1,
     borderRadius: Dimensions.get("window").width * 0.058,
     marginHorizontal: Dimensions.get("window").width * 0.005,
-    marginBottom: Platform.OS === "ios" ? 0 : 5,
+    marginBottom: 3,
     minHeight: Dimensions.get("window").width * 0.113,
     maxHeight: Dimensions.get("window").width * 0.3,
   },

client/app/components/chat/MessageChannel.tsx

@@ -4,7 +4,7 @@ import { FlatList } from "react-native";
 import Message from "./ChatMessage";
 import { MessageChannelProps } from "../../types/Props";
 
-const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
+const MessageChannel: React.FC<MessageChannelProps> = ({ nearbyUsers, messages }) => {
   const reverseMessages = [...messages].reverse();
 
   return (
@@ -13,16 +13,20 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
         width: "100%",
       }}
       data={reverseMessages}
-      keyExtractor={(item) => item.msgId}
-      renderItem={({ item }) => (
-        <Message
-          messageContent={item.msgContent}
-          author={item.author.displayName} // TODO: call server to get author name from UID. Or should this stored with MessageType?
-          time={item.timestamp}
-        />
-      )}
+      renderItem={({ item }) => {
+        const user = nearbyUsers[item.author];
+        console.log(nearbyUsers);
+        if (user === undefined) return null;
+        return (
+          <Message
+            messageContent={item.content.text!}
+            author={user.displayName}
+            time={item.timestamp}
+          />
+        );
+      }}
       inverted // This will render items from the bottom
-      onLayout={() => {}} // This will make sure the list is scrolled to the bottom on first render
+      onLayout={() => { }} // This will make sure the list is scrolled to the bottom on first render
     />
   );
 };

client/app/components/chat/NearbyHeader.tsx

@@ -7,20 +7,26 @@
   Image,
   TouchableOpacity,
 } 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}>
-      <ChevronLeft color="white" strokeWidth={1.4} width={40} height={40} />
       <Text style={styles.nearbyText}>Nearby</Text>
-      <View style={styles.iconContainer}>
-        <Image
-          style={styles.peopleIcon}
-          source={require("../../../assets/icons/misc/nearby_icon.png")}
-        />
-        <Text style={styles.countText}>{5}</Text>
-      </View>
+      <TouchableOpacity onPress={onClick}>
+        <View style={styles.iconContainer}>
+          <Image
+            style={styles.peopleIcon}
+            source={require("../../../assets/icons/misc/nearby_icon.png")}
+          />
+
+          <Text style={styles.countText}>{5}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -38,9 +44,10 @@
     shadowOpacity: 0.3,
     shadowRadius: 2,
     paddingVertical: 15,
-    paddingRight: 25,
-    paddingLeft: 10,
+    paddingRight: "5%",
+    paddingLeft: "10%",
     gap: 10,
+    zIndex: 1,
   },
   nearbyText: {
     fontFamily: "Quicksand",

client/app/components/chat/NearbyUserDrawer.tsx

@@ -0,0 +1,99 @@
+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";
+
+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 (
+    <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({
+  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;

client/app/components/common/CustomInputs.tsx

@@ -25,8 +25,6 @@ export const WelcomeEmailInput: React.FC<ChatInputProps> = ({
   );
 };
 
-// Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component
-
 export const EmailInput: React.FC<ChatInputProps & { invalid: boolean }> = ({
   value,
   onChangeText,
@@ -43,6 +41,20 @@ export const EmailInput: React.FC<ChatInputProps & { invalid: boolean }> = ({
   );
 };
 
+export const DisplayNameInput: React.FC<
+  ChatInputProps & { invalid: boolean }
+> = ({ value, onChangeText, invalid }) => {
+  return (
+    <TextInput
+      style={[styles.loginInput, invalid && styles.invalidLoginInput]}
+      placeholder="Display Name"
+      multiline={false}
+      value={value}
+      onChangeText={onChangeText}
+    />
+  );
+};
+
 export const PasswordInput: React.FC<ChatInputProps & { invalid: boolean }> = ({
   value,
   onChangeText,

client/app/configs/firebaseConfig.ts

@@ -18,7 +18,7 @@ const firebaseConfig = {
 let app;
 let auth: Auth;
 
-// Checks if auth and app have already been initilized as Firebase will throw an error if we try to initialize twice!
+// Checks if auth and app have already been initialized as Firebase will throw an error if we try to initialize twice!
 if (!getApps().length) {
   try {
     app = initializeApp(firebaseConfig);