آموزش Firebase و React-Native: Private Message App

export default function Chats() {
  const [rooms, setRooms] = React.useState([]);
  const { user } = useContext(UserContext);
  const router = useRouter();

  React.useEffect(() => {
    const userRef = doc(firestore, 'users', user.uid);

    const unSub = onSnapshot(userRef, (doc) => {
      doc.exists() && setRooms(doc.data().rooms);
    });

    return () => {
      unSub();
    };
  }, []);

  return (
    <View style={styles.container}>
      <ScrollView>
        {rooms ? (
          rooms.map((room) => <ChatGroup roomId={room} key={room} />)
        ) : (
          <View
            style={{
              padding: 6,
              borderRadius: 6,
              borderWidth: 1,
              borderColor: '#ffffff60',
              margin: 20,
            }}>
            <Text>You aren't in any rooms. Press the "+" to start a chat.</Text>
          </View>
        )}
      </ScrollView>
      <FAB icon="plus" style={styles.fab} onPress={() => router.push('/(chat)/newChat')} />
    </View>
  );
}

export default function Messages() {
  const [messages, setMessages] = React.useState<IMessage[]>([]);
  const { user } = React.useContext(UserContext);
  const { id } = useSearchParams();

  React.useEffect(() => {
    const roomRef = doc(firestore, 'rooms', id as string);

    const unSub = onSnapshot(roomRef, (doc) => {
      doc.exists() &&
        setMessages(
          doc.data().messages.map((message: any) => ({
            ...message,
            createdAt: message.createdAt.toDate(),
          }))
        );
    });

    return () => {
      unSub();
    };
  }, [id]);

  const onSend = async (messages: IMessage[]) => {
    const roomRef = doc(firestore, 'rooms', id as string);
    await updateDoc(roomRef, {
      messages: arrayUnion(messages[0]),
      lastMessage: messages[0],
    });
  };

  return (
    <View style={styles.container}>
      <Stack.Screen
        options={{
          title: 'Messages',
        }}
      />
      <GiftedChat
        renderBubble={ThemedBubble}
        renderInputToolbar={ThemedInputToolbar}
        minInputToolbarHeight={60}
        messages={messages.reverse()}
        showAvatarForEveryMessage
        onSend={(messages) => onSend(messages)}
        user={{
          _id: user ? user.uid : 'Not logged it',
          name: user ? (user.displayName as string) : 'No Display Name',
          avatar: user?.photoURL ? user.photoURL : '',
        }}
      />
    </View>
  );
}

export default function NewChat() {
  const [search, setSearch] = React.useState('');
  const [results, setResults] = React.useState<UserInfo[]>([]);

  const onSearchHandler = async (text: string) => {
    setSearch(text);
    const q = query(collection(firestore, 'users'), where('displayName', '==', text.toLowerCase()));

    try {
      const querySnapshot = await getDocs(q);

      const list = [] as UserInfo[];
      querySnapshot.forEach((doc) => list.push(doc.data() as UserInfo));
      setResults(list);
    } catch (err) {
      console.log('error', err);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <TextInput value={search} onChangeText={onSearchHandler} />
      {results.map((user) => (
        <SearchResult username={user.displayName} email={user.email} id={user.uid} key={user.uid} />
      ))}
    </View>
  );
}