Untitled
unknown
plain_text
6 months ago
7.8 kB
1
Indexable
Never
// @ts-ignore // @ts-nocheck import { View, Text, TouchableOpacity, Image } from "react-native"; import React, { useEffect, useState } from "react"; import Apptheme from "../../blocks/HamburgerMenu/src/Apptheme"; import Scale from "./Scale"; import StorageProvider from "../../framework/src/StorageProvider" import styles from "./bottomStyle"; import CreatePostModal from "./CreatePostModal"; import { SvgXml } from 'react-native-svg'; import { ActionCable, Cable, } from '@kesha-antonov/react-native-action-cable' import { add, chatFill, chatPlain, notificationfill, notificationPlain, plusIcon, profileFill, profilePlain, vFill, vPlain } from "../../blocks/HamburgerMenu/src/assets"; import { FONTS } from "framework/src/AppFonts"; interface Props { navigation: any; onRefresh: () => any; onCreatePost: (value: any) => any; showCreatepost: boolean; selectedTab: string; testID: any; testrefresh: string; } export default function CustomBottomBar(props: Props) { const { navigation, onRefresh } = props; const [showCreatepost, setShowCreatePost] = useState<boolean>(props.showCreatepost); const [count, setCount] = useState(10) const [time_count, setTime_count] = useState(0) const [time, setTime] = useState(false) const [cableCon, setcableCon] = useState('') useEffect(() => { _checkActionCableConnection() },[]); const _checkActionCableConnection = async()=> { console.log('conacole from custom bottom bar') const token = await StorageProvider.get('USER_TOKEN') const link = 'vibesocialmusic-82830-ruby.b82830.dev.us-east-1.aws.svc.builder.cafe' const actionCable = ActionCable.createConsumer(`wss://${link}/cable?token=${token}`) const cable = new Cable({}) const channel = cable.setChannel( `UnreadCountsChannel`, // channel name to which we will pass data from Rails app with `stream_from` actionCable.subscriptions.create({ channel: 'UnreadCountsChannel', // from Rails app app/channels/chat_channel.rb }) ) setcableCon(cable) channel .on( 'received', handleReceived ) .on( 'connected', handleConnected ) .on( 'rejected', handleDisconnected ) .on( 'disconnected', handleDisconnected ) } const handleConnected = async(handleConnected:any) => { // console.log( 'Connected',handleConnected) cableCon.channel('UnreadCountsChannel').perform('unread_messages_count') } const handleReceived = async(handleReceived:any) => { if (handleReceived.unread_messages_count != count) { console.log('count') setCount(handleReceived.unread_messages_count) } console.log( 'handleReceived',handleReceived) } const handleDisconnected = async () => { console.log( 'handleDisconnected') } return ( <View> <View style={[ styles.smallCard2 ]} > <View style={{ width: "100%", paddingHorizontal: Scale(25), flexDirection: "row", justifyContent: "space-between", alignItems:'center', }} > <TouchableOpacity testID={props.testID} onPress={() => { navigation.navigate("ChatListScreen") }} style={styles.touchablestyle} > <SvgXml xml={props?.selectedTab == "Chats" ? chatFill : chatPlain} width={Scale(24)} height={Scale(24)} /> {count > 0 ? <View style={{ borderWidth:3, borderColor:'#17161F', height:Scale(22), width:Scale(22), padding: Scale(10), borderRadius:100, position: 'absolute', left: Scale(10), justifyContent:'center', alignItems:'center', bottom: Scale(10)}}> <View style={{height:Scale(22), width:Scale(22),backgroundColor:Apptheme.getartisttextcolor(), borderRadius:100, justifyContent:'center', alignItems:'center',flexDirection:'row'}}> <Text style={{color:'white',fontSize:Scale(12),fontFamily:FONTS.AppleSymbols,letterSpacing: 1}}>{count ? (count > 99 ? 99:count ) : 0 }</Text> {count > 99 ? <SvgXml xml={plusIcon} width={Scale(4)} height={Scale(4)} style={{ alignItems: 'center', marginBottom:Scale(5) }}/> :null} </View> </View> :null} </TouchableOpacity> <TouchableOpacity onPress={() => { navigation.navigate("MyProfile") }} style={styles.touchablestyle} > <SvgXml xml={props?.selectedTab == 'MyProfile' ? profileFill : profilePlain} width={Scale(24)} height={Scale(24)} /> </TouchableOpacity> <TouchableOpacity onPress={() => { props.onCreatePost(true) setShowCreatePost(true) } } style={styles.touchablestyle} > <SvgXml xml={add} width={Scale(32)} height={Scale(32)} /> </TouchableOpacity> <TouchableOpacity onPress={() => { navigation.navigate("Notifications") }} style={styles.touchablestyle} > <SvgXml xml={props?.selectedTab === 'Notifications' ? notificationfill : notificationPlain} width={Scale(24)} height={Scale(24)} /> {count > 0 ? <View style={{ borderWidth:3, borderColor:'#17161F', height:Scale(22), width:Scale(22), padding: Scale(10), borderRadius:100, position: 'absolute', left: Scale(10), justifyContent:'center', alignItems:'center', bottom: Scale(10)}}> <View style={{height:Scale(22), width:Scale(22),backgroundColor:Apptheme.getartisttextcolor(), borderRadius:100, justifyContent:'center', alignItems:'center',flexDirection:'row'}}> <Text style={{color:'white',fontSize:Scale(12),fontFamily:FONTS.AppleSymbols,letterSpacing: 1}}>{count ? (count > 99 ? 99:count ) : 0 }</Text> {count > 99 ? <SvgXml xml={plusIcon} width={Scale(4)} height={Scale(4)} style={{ alignItems: 'center', marginBottom:Scale(5) }}/> :null} </View> </View> :null} </TouchableOpacity> <TouchableOpacity disabled={time} testID={props.testrefresh} onPress={() => { navigation.navigate("FeedBlock", { index:1 }) // navigation.navigate("FeedBlock") timerCountFun() onRefresh() }} style={styles.touchablestyle}> <SvgXml xml={(props?.selectedTab === 'Feed' && props?.tab === false ) ? vFill : vPlain} width={Scale(19)} height={Scale(24)} /> </TouchableOpacity> </View> </View> <CreatePostModal navigation={props.navigation} showCreatepost={showCreatepost} onDismiss={() => { setShowCreatePost(false); props.onCreatePost(false); }} onRequestClose={() => { setShowCreatePost(false); props.onCreatePost(false); }} onDah={() => { setShowCreatePost(false); props.onCreatePost(false); }} /> </View> ); }