Scribd
Upload
16 views6 pages

Untitled Document-8

This React Native code defines a NewChatScreen component that allows users to search for and select other users to start a new chat with. It uses Redux to manage the searched users state. It displays a search bar to find users by name. As the user types, it searches, displays any results, and shows a loading indicator. If no matches are found it shows a no results message. When a user is selected, it navigates to the chat. It also supports group chat creation by allowing entry of a group name.

Uploaded by

Fred
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views6 pages

Untitled Document-8

This React Native code defines a NewChatScreen component that allows users to search for and select other users to start a new chat with. It uses Redux to manage the searched users state. It displays a search bar to find users by name. As the user types, it searches, displays any results, and shows a loading indicator. If no matches are found it shows a no results message. When a user is selected, it navigates to the chat. It also supports group chat creation by allowing entry of a group name.

Uploaded by

Fred
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

import React, { useEffect, useState } from "react";

import { View, Text, StyleSheet, Button, TextInput, ActivityIndicator, FlatList } from


"react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import CustomHeaderButton from "../components/CustomHeaderButton";
import PageContainer from "../components/PageContainer";
import { Feather } from "@expo/vector-icons";
import colors from "../constants/colors";
import commonStyles from "../constants/commonStyles";
import { searchUsers } from "../components/utils/actions/userActions";
import DataItem from "../components/DataItem";
import { useDispatch, useSelector } from "react-redux";
import { setStoredUsers } from "../store/userSlice";

const NewChatScreen = (props) => {

const dispatch = useDispatch();

const [isLoading, setIsLoading] = useState(false);


const [users, setUsers] = useState();
const [noResultsFound, setNoResultsFound] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [chatName, setChatName] = useState('');

//Gets the logged in user's data


const userData = useSelector((state) => state.auth.userData);

//Checks if it is a group chat


const isGroupChat = props.route.params && props.route.params.isGroupChat;

//Disables group chat creation button


const isGroupChatDisabled = chatName === "";

//this will be the button that allows us to close the page or create group chat
useEffect(() => {
props.navigation.setOptions({
headerLeft: () => {
return (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item title="Close" onPress={() => props.navigation.goBack()} />
</HeaderButtons>
);
},
headerRight: () => {
return (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
{ //Only renders if it is a group chat
isGroupChat &&
<Item title="Create" onPress={() => {}} />
}
</HeaderButtons>
);
},
headerTitle: isGroupChat ? "Add participants" : "New chat",
});
}, []);

//auto searching for users, to make it less expensive


useEffect(() => {
const delaySearch = setTimeout(async () => {
if (!searchTerm || searchTerm === "") {
setUsers();
setNoResultsFound(false);
return;
}

//Toggles the no users found page


setIsLoading(true);

const usersResult = await searchUsers(searchTerm);


delete usersResult[userData.userId];
setUsers(usersResult);

if (Object.keys(usersResult).length === 0){


setNoResultsFound(true);
}
else {
setNoResultsFound(false);

dispatch(setStoredUsers({ newUsers: usersResult}))


}
setIsLoading(false);
}, 500);
//Each time use effect renders, clear the timeout
return () => clearTimeout(delaySearch);
}, [searchTerm])

const userPressed = userId => {


props.navigation.navigate("ChatList", {
selectedUserId: userId,
});
}

//This will return the searchbox for chats


return (
//if GroupChat?
<PageContainer>
{isGroupChat && (
<View style={styles.chatNameContainer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.textbox}
placeholder="Enter a chat name"
autoCorrect={false}
autoComplete={false}
/>
</View>
</View>
)}
{/*Sets the view for the search bar*/}
<View style={styles.searchContainer}>
<Feather name="search" size={15} color={colors.lightGrey} />

<TextInput
placeholder="Search"
style={styles.searchBox}
onChangeText={(text) => setSearchTerm(text)}
/>
</View>

{/*Activity indicator when loading*/}


{isLoading && (
<View style={commonStyles.center}>
<ActivityIndicator size={"large"} color={colors.primary} />
</View>
)}

{/*Passes the data through and displays it in the search tab */}
{!isLoading && !noResultsFound && users && (
<FlatList
data={Object.keys(users)}
renderItem={(itemData) => {
const userId = itemData.item;
const userData = users[userId];

return (
<DataItem
title={`${userData.firstName} ${userData.lastName}`}
subTitle={userData.about}
image={userData.profilePicture}
onPress={() => userPressed(userId)}
/>
);
}}
/>
)}

{!isLoading && noResultsFound && (


<View style={commonStyles.center}>
<Feather
name="help-circle"
size={55}
color={colors.lightGrey}
style={styles.noResultsIcon}
/>
<Text style={styles.noResultsText}>No users found...</Text>
</View>
)}

{!isLoading && !users && (


<View style={commonStyles.center}>
<Feather
name="users"
size={55}
color={colors.lightGrey}
style={styles.noResultsIcon}
/>
<Text style={styles.noResultsText}>
Enter a name to search for a user
</Text>
</View>
)}
</PageContainer>
);
};

const styles = StyleSheet.create({


searchContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.extraLightGrey,
height: 30,
marginVertical: 8,
paddingHorizontal: 8,
paddingVertical: 5,
borderRadius: 5
},
searchBox: {
marginleft: 8,
fontSize: 15,
width: '100%'
},
noResultsicon: {
marginBottom: 20
},
noResultsText: {
color: colors.textColor,
fontFamily: 'regular',
letterSpacing: 0.3
},
chatNameContainer: {
paddingVertical: 10,

},
inputContainer: {
width: '100%',
paddingHorizontal: 15,
paddingVertical: 15,
backgroundColor: colors.nearlyWhite,
flexDirection: 'row',
borderRadius: 2
},
textbox: {
color: colors.textColor,
width: '100%',
fontFamily: 'regular',
letterSpacing: 0.3
}
});

export default NewChatScreen;

You might also like