1
+ import React , { Component } from 'react' ;
2
+ import { View , Image , Button , FlatList , TouchableOpacity } from 'react-native' ;
3
+ import { Text , Divider } from 'react-native-elements' ;
4
+ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5' ;
5
+
6
+ import { CardStyles as styles } from '../themes/CardStyles'
7
+
8
+ import Moment from 'moment' ;
9
+
10
+
11
+ export default class DCCYUCard extends Component {
12
+
13
+ showQR = ( card ) => {
14
+ this . props . navigation . navigate ( { name : 'QRShow' , params : {
15
+ qr : card . rawQR ,
16
+ title : this . formatPerson ( ) ,
17
+ detail : this . formatCI ( ) ,
18
+ signedBy : this . formatSignedBy ( )
19
+ }
20
+ } ) ;
21
+ }
22
+
23
+ cert = ( ) => {
24
+ return this . props . detail . cert ? this . props . detail . cert : this . props . detail ;
25
+ }
26
+
27
+ formatCI = ( ) => {
28
+ return this . cert ( ) . data . DocumentType + ": " + this . cert ( ) . data . DocumentNumber ;
29
+ }
30
+
31
+ formatExpiresOn = ( ) => {
32
+ if ( this . cert ( ) . exp === undefined || this . cert ( ) . exp === "" ) return "" ;
33
+ return Moment ( this . cert ( ) . exp * 1000 ) . format ( 'MMM DD, YYYY' )
34
+ }
35
+
36
+ formatPerson = ( ) => {
37
+ if ( this . cert ( ) . data . Name )
38
+ return this . cert ( ) . data . Name ;
39
+ else
40
+ return "Unkown" ;
41
+ }
42
+
43
+ formatSignedBy = ( ) => {
44
+ let line = "Signed by " ;
45
+ if ( this . cert ( ) . iss )
46
+ line += this . cert ( ) . iss ;
47
+ else
48
+ line += this . props . detail . pub_key . toLowerCase ( ) ;
49
+
50
+ if ( this . cert ( ) . iat ) {
51
+ line += " on " + Moment ( this . cert ( ) . iat * 1000 ) . format ( 'MMM DD, YYYY' )
52
+ }
53
+
54
+ return line ;
55
+ }
56
+
57
+ renderCard = ( ) => {
58
+ return (
59
+ < View style = { [ styles . card , { backgroundColor :this . props . colors . primary } ] } >
60
+ < View style = { { flexDirection :'row' , justifyContent :'space-between' , alignItems :'center' } } >
61
+ < Text style = { styles . notes } > { Moment ( this . props . detail . scanDate ) . format ( 'MMM DD, hh:mma' ) } - Vaccination</ Text >
62
+ < FontAwesome5 style = { styles . button } name = { 'trash' } onPress = { ( ) => this . props . removeItem ( this . props . detail . signature ) } solid />
63
+ </ View >
64
+
65
+ < View style = { styles . row } >
66
+ < Text style = { styles . title } > { this . formatPerson ( ) } </ Text >
67
+ </ View >
68
+
69
+ < View style = { styles . row } >
70
+ < Text style = { styles . notes } > { this . formatCI ( ) } </ Text >
71
+ </ View >
72
+
73
+ < Divider style = { [ styles . divisor , { borderBottomColor :this . props . colors . cardText } ] } />
74
+
75
+ < FlatList
76
+ listKey = { this . props . detail . signature + "v" }
77
+ data = { this . cert ( ) . data . VaccinationInfo . Doses }
78
+ keyExtractor = { item => ( this . props . detail . signature + item . Date ) }
79
+ renderItem = { ( { item} ) => {
80
+ return (
81
+ < View style = { styles . groupLine } >
82
+
83
+ < View >
84
+ < Text style = { styles . notes } > Shot { item . Number } /{ this . cert ( ) . data . VaccinationInfo . Doses . length } : { Moment ( item . Date ) . format ( 'MMM DD, YYYY' ) } </ Text >
85
+ </ View >
86
+
87
+ < View >
88
+ < Text style = { styles . notes } > Brand: { item . Vaccine } </ Text >
89
+ </ View >
90
+ < Divider style = { [ styles . divisor , { borderBottomColor :this . props . colors . cardText } ] } />
91
+ </ View >
92
+ )
93
+ } } />
94
+
95
+ < View style = { { flexDirection :'row' , alignItems : 'center' , paddingRight : 10 } } >
96
+ < FontAwesome5 style = { styles . icon } name = { 'check-circle' } solid />
97
+ < Text style = { styles . notes } > { this . formatSignedBy ( ) } </ Text >
98
+ </ View >
99
+
100
+ < View style = { { flexDirection :'row' , alignItems : 'center' } } >
101
+ < FontAwesome5 style = { styles . icon } name = { 'clock' } solid />
102
+ < Text style = { styles . notes } > Valid until: { this . formatExpiresOn ( ) } </ Text >
103
+ </ View >
104
+ </ View >
105
+ ) ;
106
+ }
107
+
108
+
109
+ render ( ) {
110
+ return this . props . pressable ?
111
+ ( < TouchableOpacity onPress = { ( ) => this . showQR ( this . props . detail ) } >
112
+ { this . renderCard ( ) }
113
+ </ TouchableOpacity >
114
+ ) : this . renderCard ( ) ;
115
+ }
116
+ }
0 commit comments