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