Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
12 kB
3
Indexable
Never
// 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 End