1+ import AbstractComponent from '../../framework/view/AbstractComponent' ;
2+ import PropTypes from 'prop-types' ;
3+ import { SectionList , StyleSheet , View } from 'react-native' ;
4+ import Colors from '../primitives/Colors' ;
5+ import React from 'react' ;
6+ import Distances from '../primitives/Distances' ;
7+ import { Text } from 'native-base' ;
8+ import Fonts from '../primitives/Fonts' ;
9+ import General from '../../utility/General' ;
10+ import _ from 'lodash' ;
11+
12+ class GlificMessagesTab extends AbstractComponent {
13+ static propTypes = {
14+ dataLoaded : PropTypes . bool . isRequired ,
15+ failedToFetchMessages : PropTypes . bool . isRequired ,
16+ msgList : PropTypes . array . isRequired ,
17+ tabType : PropTypes . string . isRequired ,
18+ } ;
19+
20+ constructor ( props , context ) {
21+ super ( props , context ) ;
22+ }
23+
24+ shouldComponentUpdate ( nextProps , state ) {
25+ return state === null || nextProps === null ||
26+ nextProps . failedToFetchMessages !== state . failedToFetchMessages ||
27+ nextProps . dataLoaded !== state . dataLoaded ||
28+ nextProps . tabType !== state . tabType ||
29+ nextProps . msgList !== state . msgList ;
30+ }
31+
32+ renderMessageView ( msg ) {
33+ const primaryDate = msg . insertedAt ;
34+ const msgBody = msg . body ;
35+ return < View style = { styles . container } >
36+ < View
37+ style = { styles . message } >
38+ < Text style = { { fontSize : Fonts . Medium , color : Colors . DefaultPrimaryColor , } } > { msgBody } </ Text >
39+ < Text style = { { fontSize : Fonts . Small , color : Colors . SecondaryText } } > { General . toDisplayTime ( primaryDate ) } </ Text >
40+ </ View >
41+ </ View > ;
42+ }
43+
44+ renderScheduledMessageView ( msg ) {
45+ const primaryDate = msg . scheduledDateTime ;
46+ const messageRule = msg . messageRule . messageRule ;
47+ const messageTemplateName = msg . messageRule . name ;
48+ const paramsSearchResult = messageRule . match ( / p a r a m e t e r s : \[ .* \] / ) ;
49+ const msgBody = messageTemplateName + ( paramsSearchResult ? '\' with ' + paramsSearchResult [ 0 ] : '\'' ) ;
50+
51+ return < View style = { styles . container } >
52+ < View
53+ style = { styles . message } >
54+ < Text style = { { fontSize : Fonts . Medium , color : Colors . DefaultPrimaryColor , } } > Scheduled to send message using template '{ msgBody } </ Text >
55+ < Text style = { { fontSize : Fonts . Small , color : Colors . SecondaryText } } > { General . toDisplayTime ( primaryDate ) } </ Text >
56+ </ View >
57+ </ View > ;
58+ }
59+
60+ renderSentMessagesList ( tabTypeSentMessages ) {
61+ const sectionWiseList = _
62+ . chain ( this . props . msgList )
63+ . groupBy ( ( msg ) => General . toDisplayDate ( tabTypeSentMessages ? msg . insertedAt : msg . scheduledDateTime ) )
64+ . map ( ( value , key ) => ( { title : key , data : value } ) )
65+ . value ( ) ;
66+ return ( < SectionList
67+ contentContainerStyle = { {
68+ margin : Distances . ScaledContentDistanceFromEdge
69+ } }
70+ inverted = { true }
71+ sections = { sectionWiseList }
72+ ListEmptyComponent = { this . status (
73+ this . props . failedToFetchMessages ? "Could not retrieve messages" :
74+ tabTypeSentMessages ? "No Messages Sent" : "No Messages Scheduled" , this . props . failedToFetchMessages ) }
75+ renderSectionFooter = { ( { section : { title} } ) => (
76+ < View style = { { flex : 1 , flexDirection : 'row' } } >
77+ < View style = { { flex : 1 } } >
78+ </ View >
79+ < Text style = { styles . heading } > { title } </ Text >
80+ < View style = { { flex : 1 } } >
81+ </ View >
82+ </ View >
83+ ) }
84+ renderItem = { ( msg ) =>
85+ tabTypeSentMessages ? this . renderMessageView ( msg . item ) : this . renderScheduledMessageView ( msg . item ) }
86+ keyExtractor = { ( item , index ) => item + index }
87+ /> ) ;
88+ }
89+
90+ status ( text , isErrorMsg = false ) {
91+ return ( < View style = { styles . errorScreen } >
92+ < Text style = { [ styles . statusMessage , isErrorMsg ? styles . errorMessageColor : { } ] } > { this . I18n . t ( text ) } </ Text >
93+ </ View > ) ;
94+ }
95+
96+ render ( ) {
97+ const tabTypeSentMsgs = this . props . tabType === "Sent Messages" ;
98+ return (
99+ < View style = { styles . screen } >
100+ { this . renderSentMessagesList ( tabTypeSentMsgs ) }
101+ </ View >
102+ ) ;
103+ }
104+
105+ }
106+
107+ const styles = StyleSheet . create ( {
108+ container : {
109+ padding : Distances . ScaledContentDistanceFromEdge ,
110+ margin : 4 ,
111+ elevation : 2 ,
112+ backgroundColor : Colors . cardBackgroundColor ,
113+ marginVertical : 3 ,
114+ borderRadius : 10 ,
115+ display : 'flex' ,
116+ width : 'auto' ,
117+ maxWidth : '80%' ,
118+ alignSelf : 'flex-end' ,
119+ } ,
120+ errorScreen : {
121+ padding : Distances . ScaledContentDistanceFromEdge ,
122+ marginVertical : "70%" ,
123+ display : 'flex' ,
124+ alignSelf : 'center' ,
125+ } ,
126+ message : {
127+ flexDirection : 'column' ,
128+ width : 'auto' ,
129+ justifyContent : 'space-around' ,
130+ alignItems : 'flex-end' ,
131+ flexWrap : 'wrap' ,
132+ fontSize : 20 ,
133+ } ,
134+ statusMessage : {
135+ alignItems : 'center' ,
136+ justifyContent : 'center' ,
137+ padding : Distances . ScaledContentDistanceFromEdge ,
138+ margin : Distances . ScaledContentDistanceFromEdge ,
139+ alignSelf : 'center' ,
140+ fontSize : Fonts . Large ,
141+ color : Colors . DefaultPrimaryColor ,
142+ textAlign : 'center' ,
143+ } ,
144+ errorMessageColor : {
145+ color : Colors . RejectionMessageColor ,
146+ } ,
147+ screen : {
148+ flex : 1 ,
149+ backgroundColor : Colors . ChatBackground ,
150+ paddingTop : 10 ,
151+ paddingBottom : 10
152+ } ,
153+ heading : {
154+ borderRadius : 10 ,
155+ marginVertical : 3 ,
156+ alignItems : 'center' ,
157+ justifyContent : 'center' ,
158+ padding : 2 ,
159+ fontSize : Fonts . Large ,
160+ textAlign : 'center' ,
161+ color : Colors . ChatSectionHeaderFontColor ,
162+ backgroundColor : Colors . ChatSectionHeaderBackground ,
163+ }
164+ } ) ;
165+
166+ export default GlificMessagesTab ;
0 commit comments