552 lines
15 KiB
JavaScript
552 lines
15 KiB
JavaScript
import React, {Component} from 'react'
|
|
import {FlatList, View, TouchableOpacity, RefreshControl, ScrollView, ActivityIndicator, SafeAreaView} from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import {BackgroundImage} from '../../components/BackgroundImage'
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
import Text from '../../components/Text';
|
|
import { get_notification, news, read_notification} from '../../api/UserApi'
|
|
import {bindActionCreators} from 'redux'
|
|
import {appSetNotification} from '../../redux/app/action'
|
|
import {connect} from 'react-redux';
|
|
import { t } from '../../utils/i18n';
|
|
import parseDateLocale from '../../utils/parseDateLocale';
|
|
import { NavigationEvents } from "react-navigation";
|
|
|
|
const injectScript = `
|
|
(function () {
|
|
window.onclick = function(e) {
|
|
e.preventDefault();
|
|
window.postMessage(e.target.href);
|
|
e.stopPropagation()
|
|
}
|
|
}());
|
|
`;
|
|
|
|
class NotificationScreen extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
new_noti: [],
|
|
page: 1,
|
|
last_page: 1,
|
|
refreshing: false,
|
|
}
|
|
}
|
|
|
|
_set_read(item) {
|
|
switch (item.source_type) {
|
|
case 'payment_success':
|
|
case 'update_app':
|
|
return false;
|
|
default:
|
|
read_notification(item.id).then(res => {
|
|
this.navigateNotification(item)
|
|
})
|
|
}
|
|
}
|
|
|
|
getContentId(item) {
|
|
let data = item.data;
|
|
let dataJson = JSON.parse(data);
|
|
if(dataJson.id){
|
|
return dataJson.id;
|
|
}else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
navigateNotification = (item) => {
|
|
switch (item.source_type) {
|
|
case 'news':
|
|
case 'general':
|
|
case 'promotion':
|
|
this.props.navigation.navigate('NewsDetail', {
|
|
news_id: item.source_id,
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
});
|
|
break;
|
|
case 'parcels':
|
|
if(item.parcel_status === 'PENDING'){
|
|
this.props.navigation.navigate('ObjectDetail', {
|
|
object_id: item.source_id,
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
})
|
|
}else {
|
|
this.props.navigation.navigate('Object', {
|
|
user: this.props.user,
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
break;
|
|
case 'message':
|
|
this.props.navigation.navigate('Question', {
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
});
|
|
break;
|
|
case 'meter':
|
|
this.props.navigation.navigate('Meter', {
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
});
|
|
break;
|
|
case 'invoice':
|
|
case 'invoice_overdue':
|
|
this.props.navigation.navigate('Payment', {
|
|
payment_id: this.getContentId(item),
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
});
|
|
break;
|
|
case 'repair':
|
|
case 'effect_repair':
|
|
case 'effect_responsible':
|
|
case 'edit_repair':
|
|
case 'appointment_repair':
|
|
case 'cancel_repair':
|
|
case 'success_repair':
|
|
case 'renew_appointment':
|
|
this.props.navigation.navigate('RepairHistoryDetail', {
|
|
repair_id: this.getContentId(item),
|
|
type: item.source_type,
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
})
|
|
break;
|
|
case 'request_contact':
|
|
this.props.navigation.navigate('Question', {
|
|
getNotification: () => {
|
|
this.setState({
|
|
page: 1
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
})
|
|
break;
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.props.token != null && this.props.user != null) {
|
|
this.setState({
|
|
auth: true,
|
|
})
|
|
} else {
|
|
this.setState({
|
|
auth: false,
|
|
})
|
|
}
|
|
|
|
this.setState({
|
|
page: 1,
|
|
refreshing: true
|
|
}, () => {
|
|
this.getNotification()
|
|
})
|
|
}
|
|
|
|
getNotification() {
|
|
let user_noti_id = 0;
|
|
if(this.props.user && this.props.user.id){
|
|
user_noti_id = this.props.user.id
|
|
}else if(this.props.device && this.props.device.customer_id){
|
|
user_noti_id = this.props.device.customer_id
|
|
}
|
|
|
|
// console.log('user_noti_id => ', user_noti_id)
|
|
if(this.props.token != null){
|
|
get_notification(user_noti_id, this.state.page).then(res => {
|
|
if (res.data) {
|
|
this.setState({
|
|
new_noti: res.data.data,
|
|
page: res.data.current_page,
|
|
refreshing: false,
|
|
last_page: res.data.last_page
|
|
});
|
|
}
|
|
})
|
|
}else{
|
|
this.setState({
|
|
refreshing: false
|
|
})
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
let user_noti_id = 0;
|
|
if(this.props.user && this.props.user.id){
|
|
user_noti_id = this.props.user.id
|
|
}else if(this.props.device && this.props.device.customer_id){
|
|
user_noti_id = this.props.device.customer_id
|
|
}
|
|
this.props.appSetNotification(0)
|
|
}
|
|
|
|
loadMoreNoti() {
|
|
// console.log('check loadmore -------------> ');
|
|
let user_noti_id = 0;
|
|
if(this.props.user && this.props.user.id){
|
|
user_noti_id = this.props.user.id
|
|
}else if(this.props.device && this.props.device.customer_id){
|
|
user_noti_id = this.props.device.customer_id
|
|
}
|
|
|
|
if(parseInt(this.state.page) < parseInt(this.state.last_page) && !this.state.refreshing){
|
|
this.setState({
|
|
page: this.state.page + 1,
|
|
refreshing: true
|
|
}, () => {
|
|
get_notification(user_noti_id, this.state.page).then(res => {
|
|
if (res.data) {
|
|
let listData = this.state.new_noti
|
|
let new_listdata = listData.concat(res.data.data)
|
|
this.setState({
|
|
new_noti: new_listdata,
|
|
page: res.data.current_page,
|
|
refreshing: false,
|
|
last_page: res.data.last_page
|
|
});
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
_onRefresh = () => {
|
|
this.setState({refreshing: true, page: 1}, () => {
|
|
this.getNotification()
|
|
});
|
|
}
|
|
|
|
getTypeNoti(item) {
|
|
let type = 'ข่าวใหม่';
|
|
switch (item.source_type) {
|
|
case 'news':
|
|
case 'general':
|
|
type = t('latest_news');
|
|
break;
|
|
case 'rooms':
|
|
type = t('new_room');
|
|
break;
|
|
case 'parcels':
|
|
type = t('new_parcel');
|
|
break;
|
|
case 'promotion':
|
|
type = t('latest_promotion');
|
|
break;
|
|
case 'message':
|
|
type = t('new_message');
|
|
break;
|
|
case 'invoice':
|
|
case 'invoice_overdue':
|
|
type = t('bill_payment');
|
|
break;
|
|
case 'meter':
|
|
type = t('meter_noti');
|
|
break;
|
|
case 'repair':
|
|
case 'effect_repair':
|
|
case 'effect_responsible':
|
|
case 'edit_repair':
|
|
case 'appointment_repair':
|
|
case 'request_contact':
|
|
case 'cancel_repair':
|
|
case 'success_repair':
|
|
case 'renew_appointment':
|
|
type = item.title;
|
|
break;
|
|
case 'update_app':
|
|
type = t('update_app');
|
|
break;
|
|
case 'payment_success':
|
|
type = t('payment_success');
|
|
break;
|
|
default:
|
|
type = '';
|
|
break;
|
|
}
|
|
|
|
return type;
|
|
}
|
|
|
|
getStatusParcel (status) {
|
|
switch (status) {
|
|
case 'PENDING':
|
|
return t('waiting_for_pickup');
|
|
case 'WAIT_PICKUP':
|
|
return t('awaiting_payment');
|
|
case 'RECEIVE':
|
|
return t('paid');
|
|
case 'OTHER':
|
|
return t('other');
|
|
case 'ERROR':
|
|
default:
|
|
return t('contact_front_desk');
|
|
}
|
|
}
|
|
|
|
displayParcelContent (data) {
|
|
console.log('data >>> ', JSON.parse(data.data))
|
|
if(data.parcel_status){
|
|
return t('status') + ' : ' + this.getStatusParcel(data.parcel_status)
|
|
}
|
|
return '';
|
|
}
|
|
|
|
renderSeparator() {
|
|
return (
|
|
<View
|
|
style={{
|
|
height: 2,
|
|
width: '100%',
|
|
backgroundColor: '#CED0CE'
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
renderFooter() {
|
|
if (!this.state.refreshing) return null;
|
|
return (
|
|
<ActivityIndicator
|
|
size="large"
|
|
color={'white'}
|
|
/>
|
|
);
|
|
}
|
|
|
|
getImageCover = (item) => {
|
|
if (item.image_path) {
|
|
return {uri: item.image_path};
|
|
} else {
|
|
switch (item.source_type) {
|
|
case 'invoice':
|
|
return require('../../../assets/images/invoice_icon.png');
|
|
case 'invoice_overdue':
|
|
return require('../../../assets/images/invoice_overdue_icon.png');
|
|
case 'meter':
|
|
return require('../../../assets/images/meter_icon.png');
|
|
case 'repair':
|
|
case 'effect_repair':
|
|
case 'effect_responsible':
|
|
case 'edit_repair':
|
|
case 'request_contact':
|
|
case 'cancel_repair':
|
|
case 'renew_appointment':
|
|
return require('../../../assets/images/repair_noti.png');
|
|
case 'appointment_repair':
|
|
return require('../../../assets/images/appointment_repair.png');
|
|
case 'success_repair':
|
|
return require('../../../assets/images/success_repair.png');
|
|
default:
|
|
return require('../../../assets/images/logo_5.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
getContent = (item) => {
|
|
switch (item.source_type) {
|
|
// case 'parcels':
|
|
// return this.displayParcelContent(item);
|
|
case 'message':
|
|
if(item && item.source && item.source.media){
|
|
console.log('media >> ', item.source.media)
|
|
return <Image style={styles.image} source={item && item.source && item.source.media ? {uri: item.source.media} : require('../../../assets/images/default_small.png')}/>;
|
|
}else {
|
|
return item.content;
|
|
}
|
|
default:
|
|
return item.content;
|
|
}
|
|
}
|
|
|
|
_keyExtractorNewNoti = (item, index) => 'new_noti_'+index
|
|
|
|
render() {
|
|
return (
|
|
<LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
|
|
flex: 1,
|
|
width: null,
|
|
height: null,
|
|
resizeMode: 'cover'
|
|
}}>
|
|
<BackgroundImage>
|
|
{/*<ScrollView contentContainerStyle={styles.contentContainer}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={this.state.refreshing}
|
|
onRefresh={this._onRefresh}
|
|
/>
|
|
}
|
|
>*/}
|
|
<View style={styles.container}>
|
|
<NavigationEvents
|
|
onWillFocus={payload => {
|
|
this._onRefresh()
|
|
}}
|
|
/>
|
|
<SafeAreaView style={styles.container}>
|
|
<FlatList
|
|
data={this.state.new_noti}
|
|
refreshing={true}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={this.state.refreshing}
|
|
onRefresh={this._onRefresh}
|
|
/>
|
|
}
|
|
keyExtractor={this._keyExtractorNewNoti}
|
|
ListEmptyComponent={() =>
|
|
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
|
|
<Text style={{fontSize: 16}}> {t('no_notification')} </Text>
|
|
</View>
|
|
}
|
|
ItemSeparatorComponent={this.renderSeparator}
|
|
ListFooterComponent={this.renderFooter.bind(this)}
|
|
onEndReachedThreshold={0.01}
|
|
onEndReached={this.loadMoreNoti.bind(this)}
|
|
renderItem={({item, rowData, index}) =>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this._set_read(item)
|
|
/*this.props.navigation.navigate('NewsDetail', {
|
|
news_id: item.source_id,
|
|
getNotification: () => this.getNotification()
|
|
})*/
|
|
}}
|
|
key={index}
|
|
delayPressIn={50}
|
|
activeOpacity={0.8}
|
|
style={[ item && item.is_read === false ? styles.isReadFalse : styles.isReadTrue]}
|
|
>
|
|
<View style={styles.viewimages} key={index}>
|
|
<Image style={styles.image} //source={{uri: rowData.image}}
|
|
source={this.getImageCover(item)}
|
|
defaultSource={require('../../../assets/images/default_small.png')}
|
|
/>
|
|
<View style={styles.viewcontainer}>
|
|
<Text style={{fontSize: 14, color: '#145EB3', marginBottom: 3,}}>
|
|
{/*{this.getTypeNoti(item.source_type)}*/}
|
|
{
|
|
item && item.source_type && this.getTypeNoti(item)
|
|
}
|
|
</Text>
|
|
<Text
|
|
numberOfLines={item.source_type === 'payment_success' ? 0 : 3}
|
|
style={{fontSize: 14, color: 'black', marginBottom: 3,}}>
|
|
{this.getContent(item)}
|
|
</Text>
|
|
<Text style={{fontSize: 10, color: 'rgba(0, 0, 0, 0.5)',}}>
|
|
{ item && item.notified_at && parseDateLocale(item.notified_at, 'D MMM Y, HH:mm')}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
}
|
|
/>
|
|
</SafeAreaView>
|
|
</View>
|
|
{/*</ScrollView>*/}
|
|
</BackgroundImage>
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
paddingVertical: 0,
|
|
},
|
|
isReadFalse: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
backgroundColor: '#E1EDD2',
|
|
borderBottomColor: '#7CBB33',
|
|
borderBottomWidth: 1
|
|
},
|
|
isReadTrue: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
backgroundColor: '#ffffff',
|
|
borderBottomColor: 'rgba(0, 0, 0, 0.25)',
|
|
borderBottomWidth: 1
|
|
},
|
|
viewimages: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
marginBottom: 3
|
|
},
|
|
image: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 5,
|
|
marginLeft: 16,
|
|
marginTop: 16
|
|
},
|
|
viewcontainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
marginLeft: 5,
|
|
padding: 12
|
|
},
|
|
text_emply_noti: {
|
|
marginTop: 10,
|
|
// fontFamily: Fonts.KrungthaiRegular,
|
|
fontSize: 14,
|
|
lineHeight: 22,
|
|
color: 'rgba(0, 0, 0, 0.5)',
|
|
alignItems: 'center'
|
|
}
|
|
}
|
|
const mapDisPatchToProps = state => {
|
|
return state.app
|
|
}
|
|
|
|
const countNotification = dispatch => bindActionCreators({ appSetNotification }, dispatch)
|
|
export default connect(mapDisPatchToProps, countNotification)(NotificationScreen)
|