Untitled
unknown
plain_text
2 years ago
12 kB
6
Indexable
// Customizable Area Start
// @ts-nocheck
// @ts-ignore
import React from 'react'
import {
StyleSheet,
Text,
Image,
TouchableOpacity,
View,
TextInput,
Dimensions,
SafeAreaView,
StatusBar,
Platform,
FlatList,
Modal,
TouchableHighlight,
} from 'react-native';
import Miniplayer from "../../../categoriessubcategories/src/MainFeed/Miniplayer";
import { FONTS } from "../../../../framework/src/AppFonts";
import { Scale } from '../../../../framework/src/Utilities';
import { lineForEdit, newChatIcon, } from '../assets'
import {
whiteMiniPause,
whiteMiniPlayerForward,
playbutton, searchrit
} from "../../../categoriessubcategories/src/assets";
import styles from './ChatsStyle'
import ChatListScreenController, { Props } from './ChatListScreenController'
import Apptheme from '../../../HamburgerMenu/src/Apptheme';
import { Badge, Icon, ListItem } from 'react-native-elements'
import moment from 'moment'
import FastImage from 'react-native-fast-image'
import {
heartIcon,
menuicon,
} from '../../../HamburgerMenu/src/assets';
import CustomBottomBar from '../../../../components/src/CustomBottomBar';
import { SvgXml } from 'react-native-svg';
import CustomBottomBarClass from '../../../../components/src/CustomBottomBarClass';
const { width, height } = Dimensions.get('screen')
export default class ChatListScreen extends ChatListScreenController {
constructor(props: Props) {
super(props)
}
renderModal = () => {
return (
<View>
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.showDotsModal}
onRequestClose={() => {
this.setState({ showDotsModal: false })
}}
>
<TouchableHighlight
style={styles.modalstyle}
onPress={() => this.setState({ showDotsModal: false })}
>
<View style={styles.dotsView}>
<TouchableOpacity onPress={() => { }}>
<Text style={styles.editTxt}>{configJSON.deleteText} </Text>
</TouchableOpacity>
<Image style={styles.editLine} source={lineForEdit} />
<TouchableOpacity onPress={() => { }}>
<Text style={styles.editTxt}>{configJSON.reportText}</Text>
</TouchableOpacity>
<Image style={styles.editLine} source={lineForEdit} />
<TouchableOpacity>
<Text style={styles.editTxt}>{configJSON.messageText}</Text>
</TouchableOpacity>
<Image style={styles.editLine} source={lineForEdit} />
<TouchableOpacity>
<Text style={styles.editTxt}>{configJSON.settingText}</Text>
</TouchableOpacity>
</View>
</TouchableHighlight>
</Modal>
</View>
)
}
renderHeader = () => {
return (
<>
<View style={statusBarStyle.headerView}>
<TouchableOpacity
onPress={() => this.props.navigation.toggleDrawer()}
>
<FastImage style={statusBarStyle.image_backImage} source={menuicon} />
</TouchableOpacity>
<Text style={statusBarStyle.headertext}>{configJSON.messagesText} </Text>
<TouchableOpacity
testID='navMsgSettingBtn'
onPress={this._navigateToSetting}
>
<Icon
size={Scale(20)}
name="settings"
type="materialIcons "
color={Apptheme.getupanddownarrowcolor()} />
</TouchableOpacity>
</View>
</>
)
}
titleComponent = (item:any) => {
return(
<View style={{ flexDirection: 'row', width: '70%' }} >
<Text numberOfLines={1} style={{ color: '#fff', fontFamily: FONTS.RobotoCondensedBold, fontSize: Scale(16) }} >{item?.attributes?.name} </Text>
<Text numberOfLines={1} style={{ color: item?.attributes?.unread_messages > 0 ? '#FFFFFF' : '#707082', fontFamily: FONTS.AppleSymbols, fontSize: Scale(16), textAlign: 'center', marginTop: Scale(5) }} >@{item?.attributes?.user_name?.length < 10
? `${item?.attributes?.user_name}`
: `${item?.attributes?.user_name.substring(0, 5)}...`}</Text>
</View>
)
}
subtitleComponent = (item:any) => {
return(
<View style={{ flexDirection: 'row',alignItems:'center', marginEnd: Scale(35)}} >
<Text style={{ color: item?.attributes?.unread_messages > 0 ? '#FFFFFF' : '#707082', fontFamily: FONTS.AppleSymbols, fontSize: Scale(19) }} numberOfLines={1} >
{item?.attributes?.last_message_details?.sender < 10
? `${item?.attributes?.last_message_details?.sender}`
: `${item?.attributes?.last_message_details?.sender.substring(0, 8)}`}: </Text>
<Text style={{ color: item?.attributes?.unread_messages > 0 ? '#FFFFFF' : '#707082', fontFamily: FONTS.AppleSymbols, fontSize: Scale(19) }} numberOfLines={1} >
{typeof (item?.attributes?.last_message_details?.message)
=== 'object' ? "Shared Post" : (item?.attributes?.last_message_details?.message.length < 20 ? `${item?.attributes?.last_message_details?.message}`
: `${item?.attributes?.last_message_details?.message.substring(0, 20)}...`)}
</Text>
</View>
)
}
renderList = (item: any) => {
return (
<FlatList
testID='chatLstFltlist'
style={{ marginTop: Scale(15) }}
data={item}
renderItem={({ item }) =>
<ListItem
testID='lstItmComponent'
onPress={() => this.props.navigation.navigate('ChatDetails', {
item: item?.attributes
})}
containerStyle={{ backgroundColor: '#17171D' }}
title={
this.titleComponent(item)
}
subtitle={
this.subtitleComponent(item)
}
leftElement={
<FastImage
source={{ uri: item?.attributes?.receiver_image }}
style={{ height: Scale(51), width: Scale(51), borderRadius: 51, borderWidth: 1.5, borderColor: '#fff' }}
/>
}
subtitleProps={{ numberOfLines: 1 }}
titleStyle={{ color: '#fff', fontFamily: FONTS.RobotoCondensedBold, fontSize: Scale(16) }}
subtitleStyle={{ color: '#707082', fontFamily: FONTS.AppleSymbols, fontSize: Scale(16), marginTop: Scale(3) }}
rightElement={
<View style={{ top: Scale(-10) }} >
<Text style={{ color: item?.attributes?.unread_messages > 0 ? '#FFFFFF' : '#707082', fontSize: Scale(16), fontFamily: FONTS.AppleSymbols, }} >• {item?.attributes?.created_at}</Text>
</View>
}
/>
}
/>
)
}
renderChats = (item: any) => {
return (
<TouchableOpacity
onPress={() => this.props.navigation.navigate('ChatDetails', {
allItem: item?.id,
name: item?.attributes?.name,
token: this.state.token,
conversation_sid: item?.attributes?.conversation_sid,
image: item.attributes?.receiver_image
})}
>
<View>
<View style={styles.direction}>
<View style={styles.row}>
<View style={styles.userview}>
<FastImage
style={styles.personImg}
source={{ uri: item.attributes?.receiver_image }}
/>
</View>
<View style={styles.chatview}>
<View style={{ flexDirection: 'row' }}>
<Text
style={[
styles.chatStyle,
{ color: item?.attributes?.unread_messages > 0 ? COLOR_CONST.themeColor : Apptheme.getsongTextColor() },
]}
>
{item?.attributes?.name ? item?.attributes?.name : "No Name"}
</Text>
</View>
<Text
style={styles.chatTxt}
>
{item.attributes?.last_message_details?.message}
</Text>
</View>
</View>
<View>
<Text style={[styles.timingTxt, { color: '#888693' }]}>{item?.attributes?.last_message_details?.time ? item?.attributes?.last_message_details?.time : moment(item?.attributes?.created_at).format('MM/DD/YY')}</Text>
{item?.attributes?.unread_messages > 0 ?
<Badge value={item.attributes.unread_messages} badgeStyle={styles.messageCount} />
: null}
</View>
</View>
<View style={styles.lineView} />
</View>
</TouchableOpacity>
)
}
// Customizable Area Start
render() {
return (
<>
<MyStatusBar backgroundColor={Apptheme.getfeedHeaderColor()} barStyle="dark-content"/>
<View
style={[styles.container, { backgroundColor: Apptheme.getfeedHeaderColor() }]}
>
{this.renderHeader()}
<View
style={[
styles.searchView,
{
backgroundColor: '#323136',
width: '90%',
alignSelf: 'center'
},
]}
>
<View style={styles.searchview}>
<FastImage
source={searchrit}
style={styles.imagesearch}
resizeMode="contain"
/>
</View>
<TextInput
testID='serchChatTxtIpt'
onChangeText={(e) => this.searchFunction(e)}
style={styles.inputField}
selectionColor="#fff"
placeholderTextColor={"white"}
placeholder="Search for a chat"
/>
</View>
{this.renderList(this.state.conversations)}
</View>
<TouchableOpacity testID='navNewChatBtn' onPress={() => this.props.navigation.navigate('NewChat')}
style={styles.floatingButtonView}>
<SvgXml xml={newChatIcon}></SvgXml>
</TouchableOpacity>
<View style={styles.minplayerview}>
<Miniplayer
songId={this.context?.playSongData?.songId}
playerIcon={Apptheme.getspotifyhomeicon()}
SongImage={this.context?.playSongData?.songImageUrl}
songName={this.context?.playSongData?.songName}
artistName={this.context?.playSongData?.artistName}
playerimg={this.context?.playSongData?.playerimage}
heart={heartIcon}
pausePlay={whiteMiniPlayerForward}
next={this.context.isplay ? playbutton : whiteMiniPause}
onpressPlayPause={this.playPauseSong}
type={this.context?.playSongData?.type}
RadioName={this.context?.playSongData?.RadioName}
playerIcon={this.state.platform === 'apple' ? Apptheme.getapplemusic() : Apptheme.getspotifyhomeicon()}
/>
<CustomBottomBarClass
testID="cstmBtmBar"
showCreatepost={this.state.showCreatePost}
selectedTab={'Chats'}
onCreatePost={(value) => {
this.setState({ showCreatePost: value });
}}
navigation={this.props.navigation}
onRefresh={this._onRefresh}
/>
</View>
</>
)
}
// Customizable Area End
}
const APPBAR_HEIGHT = Platform.OS === 'ios' ? height * 0.013 : height * 0.015
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[statusBarStyle.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar translucent backgroundColor={backgroundColor} {...props} barStyle=
'light-content' />
</SafeAreaView>
</View>
)
const statusBarStyle = StyleSheet.create({
statusBar: {
height: APPBAR_HEIGHT,
paddingTop: Scale(20),
},
appBar: {
backgroundColor: '#F9705B',
height: APPBAR_HEIGHT,
},
headertext: {
color: '#FFF',
fontSize: Scale(20),
fontFamily: FONTS.RobotoCondensedBold
},
headerView: {
padding: Scale(20),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
marginTop: Scale(5)
},
image_backImage: {
width: Scale(22),
height: Scale(22),
},
image_MoreImage: {
width: Scale(25),
height: Scale(25),
marginRight: Scale(7),
resizeMode: "contain",
alignSelf: "flex-end",
}
})
// Customizable Area EndEditor is loading...