notifikesyen

App/Components/BaseHeader.js

@@ -22,6 +22,8 @@ export default class BaseHeader extends Component {
     withBack: PropTypes.bool,
     complain: PropTypes.bool,
     complainPress: PropTypes.func,
+    notification: PropTypes.bool,
+    notificationPress: PropTypes.func,
     onSubmitEditing: PropTypes.func,
     onChangeText: PropTypes.func,
     value: PropTypes.string,
@@ -42,7 +44,7 @@ export default class BaseHeader extends Component {
   render() {
     return (
       <View>
-        {!this.props.typeSearch && !this.props.complain && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
+        {!this.props.typeSearch && !this.props.complain && !this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             {this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
               <Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
@@ -81,6 +83,15 @@ export default class BaseHeader extends Component {
             <BaseText type={"bold"} text={'+ Komplain'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
           </TouchableOpacity>
         </View>}
+        {this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
+          <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
+            <Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
+            <BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
+          </TouchableOpacity>
+          <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.notificationPress}>
+            <BaseText type={"bold"} text={'Baca Semua'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
+          </TouchableOpacity>
+        </View>}
       </View>
     )
   }

App/Containers/DetailNotificationScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View, Dimensions } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/DetailNotificationScreenStyle'
+import Api from '../Services/Api';
+import BaseHeader from '../Components/BaseHeader';
+import BaseText from '../Components/BaseText';
+import HTML from 'react-native-render-html';
+
+class DetailNotificationScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      judul: "",
+      message: "",
+    }
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+    let data = this.props.navigation.state.params.data
+    this.setState({ judul: data.notif_title, message: data.notif_message }, () => this.readNotif(data.notif_id))
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  readNotif(id) {
+    let body = {
+      "notif_id": id
+    }
+    Api.create().readNotification(body).then(response => {
+      if (response.data.status == "success") {
+        
+      }
+    })
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
+        <BaseHeader leftText={'Notifikasi'} withBack={false} />
+        <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, paddingTop: 20, paddingHorizontal: 20 }}>
+          <BaseText type={"bold"} text={this.state.judul} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
+          <HTML html={`${this.state.message}`} imagesMaxWidth={Dimensions.get('window').width} onLinkPress={() => alert('tes')} />
+        </View>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DetailNotificationScreen)

App/Containers/NotificationScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView, View, Image, BackHandler, Alert, FlatList } from 'react-native'
+import { ScrollView, Text, Dimensions, View, Image, BackHandler, Alert, FlatList, TouchableOpacity } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
@@ -9,6 +9,8 @@ import styles from './Styles/NotificationScreenStyle'
 import { Images } from '../Themes'
 import BaseText from '../Components/BaseText'
 import BaseHeader from '../Components/BaseHeader'
+import Api from '../Services/Api'
+import HTML from 'react-native-render-html';
 
 class NotificationScreen extends Component {
   constructor(props) {
@@ -18,7 +20,8 @@ class NotificationScreen extends Component {
         { judul: 'Selamat! transaksi Anda berhasil!', isi: 'Transaksi Anda dengan nomor order 12345 telah berhasil. Silahkan cek untuk mengetahui riwayat pesanan Anda.' },
         { judul: 'Transaksi Anda gagal', isi: 'Transaksi Anda dengan nomor order 54321 gagal. Silahkan melakukan transaksi kembali atau hubungi…' },
         { judul: 'Chat', isi: 'Anda mendapatkan sebuah pesan untuk produk 88Rising x Guess Hooded Sweatshirt, silahkan lihat pada halama…' },
-      ]
+      ],
+      listNotif: []
     }
   }
   backAction = () => {
@@ -35,32 +38,58 @@ class NotificationScreen extends Component {
 
   componentDidMount() {
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
+    this.getNotif()
   }
 
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
 
+  getNotif() {
+    Api.create().getNotification().then(response => {
+      if (response.data.status == "success") {
+        this.setState({ listNotif: response.data.data })
+      }
+    })
+  }
+
+  readAllNotif(){
+    Api.create().readAllNotification()
+  }
+
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
-        <BaseHeader leftText={'Notifikasi'} withBack={false} />
-        <View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20 }}>
+        <BaseHeader leftText={'Notifikasi'} withBack={false} onBackPress={this.backAction} notification={true} notificationPress={()=> this.readAllNotif()}/>
+        <ScrollView style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, }}>
+          <View style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: 'white' }}>
+            {this.state.listNotif.map((item, index) => {
+              return (
+                <TouchableOpacity style={{ backgroundColor: item.read_by_user == 0 ? '#d6f5ff' : '#ededed', paddingHorizontal: 20, paddingVertical: 10 }} onPress={() => this.props.navigation.navigate('DetailNotificationScreen', { data: item })}>
+                  <BaseText type={"bold"} text={item.notif_title} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
+                  <BaseText type={"regular"} text={item.notif_message} style={{ fontSize: 12, color: 'black', textAlign: 'left', marginTop: 5 }} ellipsizeMode={"tail"} numberOfLines={2} />
+                  {/* <HTML html={`${item.notif_message}`} imagesMaxWidth={Dimensions.get('window').width} /> */}
+                </TouchableOpacity>
+              )
+            })}
+          </View>
+        </ScrollView>
+        {/* <View style={{ flex: 1,  width: '100%'}}>
           <FlatList
-            style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, marginTop: 20}}
+            style={{ flex: 1}}
             showsVerticalScrollIndicator={false}
-            data={this.state.dummyList}
+            data={this.state.listNotif}
             renderItem={({ item, index }) => (
-              <View style={{ flex: 1, backgroundColor: '#fff', padding: 10, paddingHorizontal: 20 }}>
-                <BaseText type={"bold"} text={item.judul} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
-                <BaseText type={"regular"} text={item.isi} style={{ fontSize: 12, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
+              <View style={{ flex: 1, backgroundColor: item.read_by_user == 0 ? '#d6f5ff' : '#ededed', paddingHorizontal: 20, opacity: .7,}}>
+                <BaseText type={"bold"} text={item.notif_title} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5, zIndex: 99 }} />
+                <HTML html={`${item.notif_message}`} imagesMaxWidth={Dimensions.get('window').width} />
               </View>
             )}
             //Setting the number of column
             numColumns={1}
             keyExtractor={(item, index) => index.toString()}
           />
-        </View>
+        </View>*/}
       </View>
     )
   }

App/Containers/Styles/DetailNotificationScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import DetailNotificationScreen from '../Containers/DetailNotificationScreen'
 import ChatScreen from '../Containers/ChatScreen'
 import DeliveryScreen from '../Containers/DeliveryScreen'
 import DetailProductScreen from '../Containers/DetailProductScreen'
@@ -45,6 +46,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  DetailNotificationScreen: { screen: DetailNotificationScreen },
   ChatScreen: { screen: ChatScreen },
   DeliveryScreen: { screen: DeliveryScreen },
   DetailProductScreen: { screen: DetailProductScreen },

App/Services/Api.js

@@ -119,6 +119,11 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const termsCondition = () => api.get('terms_mobile')
   const contactUs = () => api.get('contact_us_mobile')
 
+  // Notification
+  const getNotification = () => api.get('get_notification')
+  const getDetailNotif = (id) => api.get(`detail_notification/${id}`)
+  const readNotification = (body) => api.post('read_notification', body)
+  const readAllNotification = () => api.get('mark_all_as_read')
 
   // ------
   // STEP 3
@@ -180,7 +185,11 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     topUpWallet,
     getPeriodeDeal,
     getPaymentMethod,
-    getCategoryCourier
+    getCategoryCourier,
+    getNotification,
+    getDetailNotif,
+    readNotification,
+    readAllNotification
   }
 }