Commit 16d4fdc9 by Giang Tran

control notification

parent 85e40365
...@@ -5,51 +5,16 @@ import {connect} from 'react-redux'; ...@@ -5,51 +5,16 @@ import {connect} from 'react-redux';
import StackNavigation from './routers/StackNavigation'; import StackNavigation from './routers/StackNavigation';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import {SkypeIndicator} from 'react-native-indicators'; import {SkypeIndicator} from 'react-native-indicators';
import {HEIGHT, HEIGHTXD} from './Config/Functions'; import FirebaseNotification from './helper/FirebaseNotification';
import R from './assets/R';
import messaging from '@react-native-firebase/messaging';
import {enableScreens} from 'react-native-screens'; import {enableScreens} from 'react-native-screens';
import AsyncStorage from '@react-native-community/async-storage';
import KEY from './assets/AsynStorage';
enableScreens(); enableScreens();
const RootView = (props) => { const RootView = (props) => {
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
console.log('Message handled in the background!', remoteMessage);
});
useEffect(() => {
requestUserPermission();
const unsubscribe = messaging().onMessage(async (remoteMessage) => {
console.log('A new FCM message arrived!', remoteMessage);
});
return unsubscribe;
}, []);
const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
getFcmToken();
console.log('Authorization status:', authStatus);
}
};
const getFcmToken = async () => {
let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);
console.log('Dat tao', fcmToken);
if (!fcmToken) {
fcmToken = await messaging().getToken();
console.log('Vua tao', fcmToken);
if (fcmToken) {
AsyncStorage.setItem(KEY.FIREBASE, fcmToken);
}
}
};
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<FirebaseNotification />
<Modal isVisible={props.loadingModal.isVisible}> <Modal isVisible={props.loadingModal.isVisible}>
<SkypeIndicator color={'white'} /> <SkypeIndicator color={'white'} />
</Modal> </Modal>
......
...@@ -67,6 +67,17 @@ const Success = (props) => { ...@@ -67,6 +67,17 @@ const Success = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text
style={{
fontSize: 18,
fontWeight: 'bold',
}}>
Không có thông báo nào!
</Text>
</View>
) : (
<FlatList <FlatList
keyExtractor={(item) => item.transection_id + 'a'} keyExtractor={(item) => item.transection_id + 'a'}
refreshing={isRefresh} refreshing={isRefresh}
...@@ -78,6 +89,7 @@ const Success = (props) => { ...@@ -78,6 +89,7 @@ const Success = (props) => {
data={data} data={data}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item} />}
/> />
)}
</View> </View>
); );
}; };
......
...@@ -3,16 +3,21 @@ import {View, Text, FlatList} from 'react-native'; ...@@ -3,16 +3,21 @@ import {View, Text, FlatList} from 'react-native';
import HeaderBack from '../../../../components/Header/HeaderBack'; import HeaderBack from '../../../../components/Header/HeaderBack';
import Item from './Item'; import Item from './Item';
import {getListTransaction} from '../../../../apis/Functions/Widthdraw'; import {getListTransaction} from '../../../../apis/Functions/Widthdraw';
import {useNavigation} from '@react-navigation/native';
const Watting = (props) => { const Watting = (props) => {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1); const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false); const [isRefresh, setisRefresh] = useState(false);
const navigation = useNavigation();
useEffect(() => { useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
getData(); getData();
}, []); });
return unsubscribe;
}, [navigation]);
const getData = async () => { const getData = async () => {
setisRefresh(true); setisRefresh(true);
...@@ -67,6 +72,17 @@ const Watting = (props) => { ...@@ -67,6 +72,17 @@ const Watting = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text
style={{
fontSize: 18,
fontWeight: 'bold',
}}>
Không có thông báo nào!
</Text>
</View>
) : (
<FlatList <FlatList
keyExtractor={(item) => item.transection_id + 'a'} keyExtractor={(item) => item.transection_id + 'a'}
refreshing={isRefresh} refreshing={isRefresh}
...@@ -78,6 +94,7 @@ const Watting = (props) => { ...@@ -78,6 +94,7 @@ const Watting = (props) => {
data={data} data={data}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item} />}
/> />
)}
</View> </View>
); );
}; };
......
...@@ -62,7 +62,7 @@ const FeedbackView = (props) => { ...@@ -62,7 +62,7 @@ const FeedbackView = (props) => {
keyboardVerticalOffset={-50}> keyboardVerticalOffset={-50}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'GỬI FEEDBACK'} /> <HeaderBack isWhite={true} title={'Gửi phản hồi'} />
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.txt}>Đánh giá dch v ca DCV Invest</Text> <Text style={styles.txt}>Đánh giá dch v ca DCV Invest</Text>
...@@ -149,7 +149,7 @@ const FeedbackView = (props) => { ...@@ -149,7 +149,7 @@ const FeedbackView = (props) => {
<View style={styles.containerBtn}> <View style={styles.containerBtn}>
<Button <Button
onClick={() => console.log('hello')} onClick={() => console.log('hello')}
title={'Gửi feedback'} title={'Gửi phản hồi'}
/> />
</View> </View>
</View> </View>
......
...@@ -9,7 +9,7 @@ const Customer = (props) => { ...@@ -9,7 +9,7 @@ const Customer = (props) => {
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<HeaderBack title={'Kinh doanh chung'} /> <HeaderBack title={'Khách hàng'} />
<View style={styles.container}> <View style={styles.container}>
<Text <Text
style={{ style={{
......
...@@ -113,11 +113,11 @@ const GeneralInfor = (props) => { ...@@ -113,11 +113,11 @@ const GeneralInfor = (props) => {
<View style={{height: 40}} /> <View style={{height: 40}} />
<View style={{justifyContent: 'center', alignItems: 'center'}}> <View style={{justifyContent: 'center', alignItems: 'center'}}>
{/* <TouchableOpacity <TouchableOpacity
onPress={() => console.log('Hello')} onPress={() => console.log('Hello')}
style={styles.btn}> style={styles.btn}>
<Text style={styles.txtBtn}>Cp nht</Text> <Text style={styles.txtBtn}>Cp nht</Text>
</TouchableOpacity> */} </TouchableOpacity>
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
......
...@@ -70,7 +70,7 @@ const AddMethodPay = (props) => { ...@@ -70,7 +70,7 @@ const AddMethodPay = (props) => {
platform: Platform.OS, platform: Platform.OS,
bank_id: bank_id.id, bank_id: bank_id.id,
branch_name, branch_name,
account_name, account_name: account_name.toUpperCase(),
account_no, account_no,
}); });
props.hideLoading(); props.hideLoading();
......
...@@ -37,16 +37,16 @@ const NewFeed = (props) => { ...@@ -37,16 +37,16 @@ const NewFeed = (props) => {
const scrollToCurrent = () => { const scrollToCurrent = () => {
const date = new Date(); const date = new Date();
let index = 0; let index = 0;
const today = convertTimeApi(date); const today = convertTimeApi(date);
if (data.length > 0) { if (data.length > 0) {
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
if (data[i].start_date.substring(0, 10) == today) { if (data[i].start_date.substring(0, 10) == today) {
index = i; index = i;
break; break;
} else {
index = 30 - today.substring(8);
} }
} }
setTimeout(() => { setTimeout(() => {
ListDayRef.current.scrollToIndex({ ListDayRef.current.scrollToIndex({
animated: true, animated: true,
...@@ -58,7 +58,7 @@ const NewFeed = (props) => { ...@@ -58,7 +58,7 @@ const NewFeed = (props) => {
const getItemLayout = (data, index) => ({ const getItemLayout = (data, index) => ({
length: 100, length: 100,
offset: 70 * index, offset: 60 * index,
index, index,
}); });
......
...@@ -35,7 +35,7 @@ const styles = StyleSheet.create({ ...@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
}, },
right: { right: {
marginLeft: 20, marginLeft: 20,
paddingVertical: 20, paddingVertical: 10,
borderTopWidth: 0.6, borderTopWidth: 0.6,
borderBottomWidth: 0.6, borderBottomWidth: 0.6,
borderColor: '#CECECE', borderColor: '#CECECE',
...@@ -52,7 +52,7 @@ const styles = StyleSheet.create({ ...@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
backgroundColor: R.colors.main, backgroundColor: R.colors.main,
borderRadius: 5, borderRadius: 5,
marginLeft: -5, marginLeft: -5,
marginTop: 25, marginTop: 15,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
......
...@@ -38,11 +38,11 @@ const Item = (props) => { ...@@ -38,11 +38,11 @@ const Item = (props) => {
</ImageBackground> </ImageBackground>
<View style={styles.wrapRight}> <View style={styles.wrapRight}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={styles.txtTitle} numberOfLines={2}> <Text style={styles.txtTitle} numberOfLines={4}>
{title} {title}
</Text> </Text>
</View> </View>
<Text>{published_at}</Text> <Text style={{color: '#8E8C8C'}}>{published_at}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
......
...@@ -68,7 +68,7 @@ const NotificaitonView = (props) => { ...@@ -68,7 +68,7 @@ const NotificaitonView = (props) => {
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}> <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text <Text
style={{ style={{
fontSize: getFontXD(46), fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
}}> }}>
Không có thông báo nào! Không có thông báo nào!
......
import { import {PUSHNOTI, HIDENOTI} from './actionTypes';
PUSHNOTI,
HIDENOTI
} from './actionTypes';
export const showNotificaton = (data) => { export const showNotificaton = (data) => {
return { return {
type: PUSHNOTI, type: PUSHNOTI,
data data,
}; };
}; };
export const hideNotification = () => { export const hideNotification = () => {
return { return {
type: HIDENOTI type: HIDENOTI,
}; };
}; };
...@@ -77,7 +77,7 @@ const Drawer = (props) => { ...@@ -77,7 +77,7 @@ const Drawer = (props) => {
navigate.navigate(PROFILE); navigate.navigate(PROFILE);
}}> }}>
<Text style={styles.txtTop}>{props.user.fullname}</Text> <Text style={styles.txtTop}>{props.user.fullname}</Text>
<Text>{props.user.sponsor_id}</Text> <Text>{props.user.user_id}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
......
...@@ -18,6 +18,7 @@ import LinearGradient from 'react-native-linear-gradient'; ...@@ -18,6 +18,7 @@ import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions'; import {HEIGHTXD} from '../../Config/Functions';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import SnackBar from '../SnackBar';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const {title, isWhite} = props; const {title, isWhite} = props;
const navigate = useNavigation(); const navigate = useNavigation();
...@@ -26,6 +27,7 @@ const HeaderHome = (props) => { ...@@ -26,6 +27,7 @@ const HeaderHome = (props) => {
imageStyle={{resizeMode: 'stretch'}} imageStyle={{resizeMode: 'stretch'}}
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]} style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}> source={R.images.bgHeader}>
<SnackBar />
<StatusBar backgroundColor="transparent" translucent={true} /> <StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<TouchableOpacity onPress={() => navigate.goBack()}> <TouchableOpacity onPress={() => navigate.goBack()}>
......
...@@ -19,7 +19,7 @@ import {connect} from 'react-redux'; ...@@ -19,7 +19,7 @@ import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions'; import {HEIGHTXD} from '../../Config/Functions';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import Drawer from './Drawer'; import Drawer from './Drawer';
import SnackBar from '../SnackBar';
const HeaderDrawer = (props) => { const HeaderDrawer = (props) => {
const {title, isWhite} = props; const {title, isWhite} = props;
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
...@@ -33,7 +33,9 @@ const HeaderDrawer = (props) => { ...@@ -33,7 +33,9 @@ const HeaderDrawer = (props) => {
imageStyle={{resizeMode: 'stretch'}} imageStyle={{resizeMode: 'stretch'}}
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]} style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}> source={R.images.bgHeader}>
<SnackBar />
<StatusBar backgroundColor="transparent" translucent={true} /> <StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<TouchableOpacity onPress={toggleModal}> <TouchableOpacity onPress={toggleModal}>
<Image source={R.images.iconMenu} style={styles.imgIcon} /> <Image source={R.images.iconMenu} style={styles.imgIcon} />
......
...@@ -17,7 +17,7 @@ import LinearGradient from 'react-native-linear-gradient'; ...@@ -17,7 +17,7 @@ import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {HEIGHTXD, toPriceVnd} from '../../Config/Functions'; import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import SnackBar from '../SnackBar';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import { import {
WITHDRAW, WITHDRAW,
...@@ -117,6 +117,7 @@ const HeaderHome = (props) => { ...@@ -117,6 +117,7 @@ const HeaderHome = (props) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<SnackBar />
<StatusBar backgroundColor="transparent" translucent={true} /> <StatusBar backgroundColor="transparent" translucent={true} />
<View <View
style={{ style={{
......
...@@ -18,7 +18,7 @@ import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions'; ...@@ -18,7 +18,7 @@ import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions'; import {HEIGHTXD} from '../../Config/Functions';
import SnackBar from '../SnackBar';
import Icon from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/Ionicons';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
...@@ -39,6 +39,7 @@ const HeaderSearch = (props) => { ...@@ -39,6 +39,7 @@ const HeaderSearch = (props) => {
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]} style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}> source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} /> <StatusBar backgroundColor="transparent" translucent={true} />
<SnackBar />
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<TouchableOpacity onPress={() => navigate.goBack()}> <TouchableOpacity onPress={() => navigate.goBack()}>
<Image source={R.images.iconBack} style={styles.imgIcon} /> <Image source={R.images.iconBack} style={styles.imgIcon} />
......
import React,{useState,useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {View,Text,StyleSheet,TouchableOpacity,StatusBar,TouchableWithoutFeedback} from 'react-native'; import {
import R from '../assets/R' View,
import Block from './Block' Text,
import {getFontXD,HEIGHTXD} from "../config/Functions"; StyleSheet,
import LinearGradient from "react-native-linear-gradient"; TouchableOpacity,
StatusBar,
TouchableWithoutFeedback,
} from 'react-native';
import R from '../assets/R';
import Block from './Block';
import {getFontXD, HEIGHTXD} from '../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import SnackReducer from "../reducers/SnackReducer"; import {connect} from 'react-redux';
import {connect} from 'react-redux' import {showNotificaton, hideNotification} from '../actions/SnackBarAction';
import {showNotificaton,hideNotification} from '../actions/SnackBarAction'
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const SnackBar=(props)=>{ const SnackBar = (props) => {
const navigate = useNavigation();
const {isOpen, title, content, screen, id_record} = props.snackReducer;
useEffect(() => {
console.log('Reducer', props.snackReducer);
if (isOpen)
setTimeout(() => {
props.hideNotification();
}, 10000);
}, [props.snackReducer]);
const navigation = useNavigation(); return (
<Modal
style={{padding: 0, margin: 0}}
const {isOpen,title,content,screen,id_record}=props.snackReducer animationInTiming={1500}
useEffect(()=>{ animationOutTiming={800}
if(isOpen) backdropOpacity={0}
setTimeout(()=>{ animationIn={'slideInDown'}
props.hideNotification() animationOut={'slideOutUp'}
},10000) isVisible={isOpen}>
<View style={styles.container}>
},[props.snackReducer]) <View style={{flex: 1}}>
return(
<Modal style={{padding:0,margin:0}} animationInTiming={1500} animationOutTiming={800} backdropOpacity={0}
animationIn={'slideInDown'} animationOut={'slideOutUp'} isVisible={isOpen} >
<View style={styles.container} >
<View style={{flex:1}}>
<Text style={styles.txtTitle}>{title}</Text> <Text style={styles.txtTitle}>{title}</Text>
<Text numberOfLines={2} style={styles.txt} >{content}</Text> <Text numberOfLines={2} style={styles.txt}>
{content}
</Text>
</View> </View>
<View style={styles.row}> <View style={styles.row}>
<TouchableOpacity onPress={ ()=>props.hideNotification()} style={styles.btn} > <TouchableOpacity
onPress={() => props.hideNotification()}
style={styles.btn}>
<Text style={styles.txtBtn}>Đóng</Text> <Text style={styles.txtBtn}>Đóng</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={()=>{ <TouchableOpacity
props.hideNotification() onPress={() => {
navigation.navigate(screen,{id:id_record}) props.hideNotification();
} navigate.navigate(screen, {id: id_record});
} style={[styles.btn,{marginLeft:20}]}> }}
<Text style={styles.txtBtn} >Chi tiết</Text> style={[styles.btn, {marginLeft: 20}]}>
<Text style={styles.txtBtn}>Chi tiết</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<TouchableWithoutFeedback onPress={ ()=>props.hideNotification()} > <TouchableWithoutFeedback onPress={() => props.hideNotification()}>
<View style={{flex:1}}> <View style={{flex: 1}}></View>
</View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</Modal> </Modal>
);
};
const mapStateToProps = (state) => {
)
}
const mapStateToProps =(state) => {
return { return {
snackReducer: state.SnackReducer, snackReducer: state.SnackReducer,
}; };
}; };
export default connect(mapStateToProps, {showNotificaton,hideNotification})(SnackBar); export default connect(mapStateToProps, {showNotificaton, hideNotification})(
SnackBar,
);
const styles=StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
marginTop:10, marginTop: 10,
height:HEIGHTXD(380), height: HEIGHTXD(380),
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
marginHorizontal:10, marginHorizontal: 10,
borderRadius:10, borderRadius: 10,
paddingVertical:10, paddingVertical: 10,
paddingHorizontal:10, paddingHorizontal: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
...@@ -83,21 +95,21 @@ const styles=StyleSheet.create({ ...@@ -83,21 +95,21 @@ const styles=StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 3, elevation: 3,
}, },
row:{ row: {
flexDirection:'row', flexDirection: 'row',
justifyContent:'flex-end', justifyContent: 'flex-end',
}, },
txt:{ txt: {
color:R.colors.black color: R.colors.black,
}, },
txtBtn:{ txtBtn: {
fontSize:getFontXD(42), fontSize: getFontXD(42),
color:R.colors.txtMain, color: R.colors.txtMain,
fontWeight: 'bold' fontWeight: 'bold',
}, },
txtTitle:{ txtTitle: {
fontSize :getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight:'bold' fontWeight: 'bold',
} },
}) });
/* eslint-disable no-console */ /* eslint-disable no-console */
import React from 'react'; import React, {useEffect} from 'react';
import {Platform, View, Alert} from 'react-native'; import {Platform, View, Alert} from 'react-native';
import firebase from '@react-native-firebase/app'; import messaging from '@react-native-firebase/messaging';
import sampleaudio from '../../sampleaudio.mp3';
import AsyncStorage from '@react-native-community/async-storage'; import AsyncStorage from '@react-native-community/async-storage';
import KEY from '../assets/AsynStorage'; import KEY from '../assets/AsynStorage';
import {showNotificaton, updateNotification} from '../actions/SnackBarAction';
import {connect} from 'react-redux';
const FirebaseNotification = (props) => {
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
console.log('Message handled in the background!', remoteMessage);
});
useEffect(() => {
requestUserPermission();
const unsubscribe = messaging().onMessage(async (remoteMessage) => {
console.log('A new FCM message arrived!', remoteMessage);
props.showNotificaton({
title: 'Title',
content: 'Content notification',
screen: 'NOTIFICATION',
id_record: 9,
});
});
return unsubscribe;
}, []);
const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
class FirebaseNotification extends React.PureComponent {
checkPermission = () => {
firebase
.messaging()
.hasPermission()
.then((enabled) => {
if (enabled) { if (enabled) {
this.getToken(); getFcmToken();
} else {
this.requestPermission();
} }
});
};
requestPermission = async () => {
try {
await firebase.messaging().requestPermission();
this.getToken();
} catch (error) {}
}; };
const getFcmToken = async () => {
getToken = async () => {
let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE); let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);
console.log('Dat tao', fcmToken);
if (!fcmToken) { if (!fcmToken) {
fcmToken = await firebase.messaging().getToken(); fcmToken = await messaging().getToken();
console.log('Vua tao', fcmToken);
if (fcmToken) { if (fcmToken) {
AsyncStorage.setItem(KEY.FIREBASE, fcmToken); AsyncStorage.setItem(KEY.FIREBASE, fcmToken);
} }
} }
}; };
async componentDidMount() {
this.checkPermission();
this.createNotificationListeners();
this.removeNotificationDisplayedListener = firebase
.notifications()
.onNotificationDisplayed((notification) => {
console.log('Can alert', notification);
this.props.onReceived(notification);
// Process your notification as required
// ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
});
}
componentWillUnmount() {
this.removeNotificationDisplayedListener;
this.notificationListener;
this.notificationOpenedListener;
}
async createNotificationListeners() {
/*
* Triggered when a particular notification has been received in foreground
* */
console.log('Notification log');
const channel = new firebase.notifications.Android.Channel(
'500',
'Channel Name 1001',
firebase.notifications.Android.Importance.Max,
)
.setDescription('A natural description of the channel')
.setSound('default');
firebase.notifications().android.createChannel(channel);
this.notificationListener = firebase
.notifications()
.onNotification((notification) => {
console.log('notificaiton', notification);
if (Platform.OS === 'android') {
const localNotification = new firebase.notifications.Notification({
sound: sampleaudio,
show_in_foreground: true,
})
.setSound('default')
.setNotificationId(notification.notificationId)
.setTitle(notification.title)
.setBody(notification.body)
.setData(notification.data)
.android.setChannelId('default_notification_channel_id') // e.g. the id you chose above
// .android.setSmallIcon('@mipmap/ic_launcher') // create this icon in Android Studio
// .android.setColor('red') // you can set a color here
.android.setPriority(firebase.notifications.Android.Priority.High)
.android.setVibrate([300])
.android.setDefaults([
firebase.notifications.Android.Defaults.Vibrate,
]);
console.log('Notification:', localNotification);
firebase
.notifications()
.displayNotification(localNotification)
.catch((err) => console.error('Chay vao day android', err));
} else if (Platform.OS === 'ios') {
const localNotification = new firebase.notifications.Notification()
.setNotificationId(notification.notificationId)
.setTitle(notification.title)
.setSubtitle(notification.subtitle)
.setBody(notification.body)
.setData(notification.data)
.ios.setBadge(notification.ios.badge)
.ios.setLaunchImage('@mipmap/ic_stat_ic_notification');
firebase
.notifications()
.displayNotification(localNotification)
.catch((err) => console.error('Chay vao day', err));
}
// this.getNotifyNumber();
});
/*
* If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
* */
this.notificationOpenedListener = firebase
.notifications()
.onNotificationOpened((notificationOpen) => {
this.props.onOpened(notificationOpen.notification);
});
/*
* If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
* */
const notificationOpen = await firebase
.notifications()
.getInitialNotification();
if (notificationOpen) {
this.props.onOpened(notificationOpen.notification);
}
/*
* Triggered for data only payload in foreground
* */
this.messageListener = firebase.messaging().onMessage((message) => {
// process data message
console.log('message---', message);
this.props.onReceived(message);
});
}
render() {
return <View />; return <View />;
} };
}
const mapStateToProps = (state) => {
return {
loadingModal: state.ModalLoadingReducer,
};
};
export default FirebaseNotification; export default connect(mapStateToProps, {showNotificaton, updateNotification})(
FirebaseNotification,
);
...@@ -43,6 +43,7 @@ import LegaDocument from '../Screens/LegalDocument/LegalDocument'; ...@@ -43,6 +43,7 @@ import LegaDocument from '../Screens/LegalDocument/LegalDocument';
import Business from '../Screens/LegalDocument/Business'; import Business from '../Screens/LegalDocument/Business';
import Customer from '../Screens/LegalDocument/Customer'; import Customer from '../Screens/LegalDocument/Customer';
import Partner from '../Screens/LegalDocument/Partner'; import Partner from '../Screens/LegalDocument/Partner';
import SnackBar from '../components/SnackBar';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment