invite modal search bar fixed: params issue

COS301-SE-2024 · Sep 27, 2024 · ed21beb · ed21beb
1 parent b224e6c
commit ed21beb
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 13 deletions.
diff --git a/frontend/src/Components/InviteList.js b/frontend/src/Components/InviteList.js
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
+import { useTheme } from "../styles/ThemeContext";
+import { inviteUserToRoom } from '../Services/RoomApiService';
+
+const InviteList = ({ route, uid, username, userHandle, userAvatar }) => {
+    const { theme } = useTheme();
+    const { userInfo } = route.params;
+    const [isInvited, setIsInvited] = useState(false);
+
+    const handleInvite = async (item) => {
+        try {
+            const response = await inviteUserToRoom(props.userInfo.userId, item.uid, roomId);
+            console.log(response);
+            Alert.alert("Success", "User invited successfully.");
+        } catch (error) {
+            Alert.alert("Error", error.message);
+        }
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: theme.backgroundColor,
+            paddingHorizontal: 25,
+            paddingVertical: 15,
+            shadowColor: "#000",
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+        avatar: {
+            width: 50,
+            height: 50,
+            borderRadius: 50,
+            marginRight: 10,
+            backgroundColor: "black",
+        },
+        username: {
+            fontSize: 18,
+            fontWeight: "bold",
+            color: theme.textColor,
+        },
+        userHandle: {
+            color: theme.gray,
+        },
+        profileInfo: {
+            flexDirection: "row",
+            alignItems: "center",
+        },
+        followButton: {
+            backgroundColor: theme.primaryColor,
+            padding: 8,
+            borderRadius: 5,
+            paddingHorizontal: 16,
+        },
+        followingButton: {
+            backgroundColor: theme.gray,
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.profileInfo}>
+                <Image source={{ uri: userAvatar }} style={styles.avatar} />
+                <View>
+                    <Text style={styles.username}>{username}</Text>
+                    <Text style={styles.userHandle}>@{userHandle}</Text>
+                </View>
+            </View>
+            <TouchableOpacity style={[styles.followButton]}>
+                <Text style={{ color: "white" }}>Invite</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+export default InviteList;
diff --git a/frontend/src/Components/InviteModal.js b/frontend/src/Components/InviteModal.js
@@ -2,11 +2,12 @@ import React, { useState, useCallback, useMemo, useEffect, forwardRef } from "re
 import { View, Text, StyleSheet, TouchableOpacity, TextInput, Share, Alert, FlatList } from "react-native";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import { Ionicons } from "@expo/vector-icons";
-import { getFriends, searchUser } from "../Services/UsersApiService"; // Import the getFriends function
+import { getFriends, searchUser, getFollowing } from "../Services/UsersApiService"; // Import the getFriends function
 import { useTheme } from "../styles/ThemeContext";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import SearchBar from '../Components/SearchBar';
 import FollowList from '../Components/FollowList';
+import InviteList from "./InviteList";
 import { inviteUserToRoom } from '../Services/RoomApiService';
 
 const InviteModal = forwardRef((props, ref) => {
@@ -103,12 +104,14 @@ const InviteModal = forwardRef((props, ref) => {
 
     const renderFollower = ({ item }) => (
         <TouchableOpacity onPress={() => handleInvite(item)}>
-        <FollowList 
-            username={item.username}
-            userHandle={item.name}
-            userAvatar={item.avatar}
-        />
-         </TouchableOpacity>
+            <InviteList 
+                route={props.route}
+                uid={item.uid}
+                username={item.username}
+                userHandle={item.name}
+                userAvatar={item.avatar}
+            />
+        </TouchableOpacity>
     );
 
     const renderContent = () => (
@@ -127,7 +130,7 @@ const InviteModal = forwardRef((props, ref) => {
             </View>
 
             <SearchBar onChangeText={handleSearch} />
-                {searchResults.length > 0 && (
+            {searchResults.length > 0 && (
                 <FlatList
                     data={searchResults}
                     keyExtractor={(item) => item.uid}
@@ -159,12 +162,14 @@ const InviteModal = forwardRef((props, ref) => {
             backgroundColor: theme.backgroundColor,
             padding: 16,
             height: "100%",
+            paddingHorizontal: 10
         },
         title: {
             fontSize: 18,
             fontWeight: "bold",
             marginBottom: 16,
             color: theme.textColor,
+            paddingLeft: 8
         },
         icons: {
             flexDirection: "row",
@@ -180,7 +185,7 @@ const InviteModal = forwardRef((props, ref) => {
             paddingVertical: 8,
             marginTop: 8,
             alignItems: "center",
-            borderColor: "#ccc",
+            borderColor: theme.borderColor,
             borderWidth: 1,
             borderRadius: 20,
             marginBottom: 20,

diff --git a/frontend/src/Components/RoomModal.js b/frontend/src/Components/RoomModal.js
@@ -122,6 +122,7 @@ const RoomModal = forwardRef((props, ref) => {
                 onInvite={handleInviteUser}
                 userInfo={userInfo}
                 roomId={roomId}
+                route={props.route}
             />
         </>
     );

diff --git a/frontend/src/Components/SearchBar.js b/frontend/src/Components/SearchBar.js
@@ -16,10 +16,10 @@ const SearchBar = ({ onChangeText }) => {
             flexDirection: "row",
             alignItems: "center",
             borderRadius: 25,
-            borderWidth: 0.5,
+            borderWidth: 1,
             paddingHorizontal: 12,
             height: 40,
-            borderColor: theme.textColor,
+            borderColor: theme.borderColor,
         },
         searchIcon: {
             marginRight: 8,
@@ -35,7 +35,7 @@ const SearchBar = ({ onChangeText }) => {
         <View style={styles.searchBarContainer}>
             <View style={[styles.searchBar, { backgroundColor: theme.secondaryBackgroundColor, borderColor: theme.borderColor }]}>
                 <Ionicons name="search" size={20} color={theme.textColor} style={styles.searchIcon} />
-                <TextInput style={[styles.input, { color: theme.textColor }]} placeholder="Search by username or name" placeholderTextColor={theme.textColor} onChangeText={onChangeText} />
+                <TextInput style={[styles.input, { color: theme.textColor }]} placeholder="Search by username or name" placeholderTextColor={theme.gray} selectionColor={theme.textColor} color={theme.textColor} onChangeText={onChangeText} />
             </View>
         </View>
     );

diff --git a/frontend/src/Services/getLocalIP.js b/frontend/src/Services/getLocalIP.js
@@ -2,7 +2,7 @@
 export const getLocalIP = () => {
     // Replace this with the actual URL you get from Expo CLI
 
-    const expoURL = 'exp://192.168.3.87:8081';
+    const expoURL = 'exp://192.168.11.197:8081';
 
 
     // Extract the IP address from the URL