import AsyncStorage from '@react-native-async-storage/async-storage'; import axios from 'axios'; import { result } from 'lodash'; import React, {useState,useContext,useEffect} from 'react'; import {Modal, Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, ToastAndroid} from 'react-native'; import { userApiUrl } from '../../constants/config'; import {userData} from '../../constants/store'; import { GlobalContext } from '../../context/GlobalState'; import SearchBox from '../Search/SearchBox'; import InputBox from './InputBox'; import LinearGradient from './LinearGradient'; const ChatModal = ({modalVisible, toggleVisibility,selectedSong}) => { const [searchQuery, setSearchQuery] = useState(null); const {user,updateUser,updateMessages,token} = useContext(GlobalContext); const [isSending,setIsSending] = useState({}); const [searchResults,setSearchResults] = useState([]); const {album_image,track_name,track_url,artist_name,track_id} = selectedSong; console.log(user,"user"); useEffect(() => { if(searchQuery == null){ setSearchResults(user.friends); } },[]) const search = (value) => { //Searching using regex let re = new RegExp(value, "i") let results = []; user.friends.map((friend) => { console.log("lol"); if(friend.username.match(re)){ results.push(friend); setSearchResults(results); } else if(value == ""){ results.push(friend); setSearchResults(results); } else{ setSearchResults([]); console.log("lol"); } }) }; const playlistData = { trackName:track_name, artistName:artist_name, albumArt:album_image, to:"lol", trackUrl:track_url, track_id } const sendSong = (userId) => { setIsSending({ id:userId._id, switch:true }); axios.post(`${userApiUrl}/messages/send`, { ...playlistData, to:userId._id, },{ headers: { Authorization: "Bearer " + token, }, }) .then(async (res) => { setIsSending({ id:userId._id, switch:false }); ToastAndroid.show("Song sent", ToastAndroid.SHORT); //?Todo remove this request later on and optimize in single request only axios.get(`${userApiUrl}/messages/getMessages`,{ headers: { Authorization: "Bearer " + token, } } ) .then(async (res) => { console.log(res.data,"from local messages"); updateMessages(res.data); await AsyncStorage.setItem("messages",JSON.stringify(res.data)); }).catch((err) => { console.log(err,"err"); }) }).catch((err) => { console.log(err,"err"); setIsSending({ id:userId._id, switch:false }); if (Array.isArray(err.response.data.errors)) { if (Platform.OS === 'android') { ToastAndroid.show("Error sending the message", ToastAndroid.SHORT); } } }) } return ( <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { toggleVisibility(!modalVisible); }}> <LinearGradient bgcolors={{ colorOne: 'rgba(0, 0, 0, 0.25)', colorTwo: 'rgba(0, 0, 0, 1)', }}> <View> <View style={styles.modalView}> <SearchBox placeholder="Search Friends" searchQuery={searchQuery} setSearchQuery={search} /> <ScrollView showsVerticalScrollIndicator={true} style={{ color: 'white', }}> {searchResults.map((user, i) => ( <View key={i} style={{ flexDirection: 'column', alignContent: 'space-between', margin: '2%', }}> <View style={{ flexDirection: 'row', justifyContent: 'flex-start', }}> <Image source={{"uri": user.photo}} style={{ borderRadius: 20, left: 10, width: 50, height: 50, }} /> <Text style={styles.options}> {user.username} </Text> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', marginRight: 20, }}> <TouchableOpacity onPress={() => sendSong(user)}> <View style={styles.button}> <Text style={styles.textButton}> { isSending.id === user._id && isSending.switch ? "Sending" : "Send" } </Text> </View> </TouchableOpacity> </View> </View> </View> ))} </ScrollView> </View> </View> </LinearGradient> </Modal> ); }; const styles = StyleSheet.create({ modalView: { marginTop: '100%', width: '100%', height: '50%', }, options: { color: 'white', left: 70, fontFamily: 'NotoSans-Bold', fontSize: 18, marginTop: 7.5, marginLeft: -20, }, button: { backgroundColor: '#09a0eb', // backgroundColor: '#7200ca', height: 35, width: 70, opacity: 0.8, borderRadius: 5, paddingVertical: 7.5, alignContent: 'center', textAlign: 'center', textAlignVertical: 'center', }, textButton: { textAlign: 'center', color: 'white', fontWeight: 'bold', fontSize: 14, }, }); export default ChatModal;