index.js
4.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import moment from 'moment'
import React, { Component } from 'react'
import {
View,
ScrollView,
Share
} from 'react-native'
import { connect } from 'react-redux'
import { HeaderBackButton } from 'react-navigation'
import { map, contains } from 'ramda'
import { Card, Divider, Text, Button } from 'react-native-elements'
import HTML from 'react-native-render-html'
import { INFO_PY_URL, ESTADOS_SOLICITUDES } from '../../constants'
import { fetchFlujo } from '../../redux/actions/solicitudes'
import { requestValoracion } from '../../redux/actions/valoraciones'
import { requestReporte } from '../../redux/actions/reportes'
import css from './style'
import DefaultIndicator from '../../components/DefaultIndicator'
import BotonValoracion from '../../components/BotonValoracion'
const makeSolicitudURL = (solicitud) => `${INFO_PY_URL}/#!/ciudadano/solicitud/${solicitud.id}`
const esFinal = (solicitud) => contains(
solicitud.estado.nombre,
ESTADOS_SOLICITUDES.finalizados)
class PaginaDetalle extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Detalles de solicitud',
headerStyle: css.headerStyle,
headerTitleStyle: css.headerTitleStyle,
headerLeft: (<HeaderBackButton
tintColor='#FFFFFF' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })}
/>),
headerRight:
<Button
icon={{ name: 'share', size: 27, color: 'white' }}
buttonStyle={{ backgroundColor: 'transparent' }}
onPress={() => Share.share({ message: makeSolicitudURL(navigation.state.params) })}
/>
});
componentDidMount() {
this.props.fetchFlujo(this.props.token, this.props.solicitud.id)
this.props.requestValoracion(this.props.solicitud.id, this.props.miUsuario.mail)
this.props.requestReporte(this.props.solicitud.id, this.props.miUsuario.mail)
}
render() {
const props = this.props
const spinner = <DefaultIndicator />
const flujos = map((flujo) => (
<Card key={flujo.id}>
<HTML html={flujo.comentario} />
<Divider />
<View style={css.cardFooter} >
<Text style={css.fechaSolicitud}>
{moment(flujo.fechaCambio).locale('es-ES').fromNow()}
</Text>
</View>
</Card>))
const title = ({ titulo, id }) => (
<View style={css.cardFooter} >
<Text style={css.fechaSolicitud}>
{id}
</Text>
<Text style={css.nombreUsuario} >
{titulo}
</Text>
</View>
)
return (
<View style={[css.pane, css.view]}>
<ScrollView style={css.pane} contentContainerStyle={css.contentContainer} >
<Card >
{title(props.solicitud)}
<Divider />
<HTML html={props.solicitud.descripcionModificada} />
<Divider />
<View style={css.cardFooter} >
<Text style={css.fechaSolicitud}>
{moment(props.solicitud.fecha).locale('es-ES').fromNow()}
</Text>
<Text style={css.nombreUsuario} >
{props.usuario.nombre} {props.usuario.apellido}
</Text>
</View>
</Card>
{props.flujos.loading ? spinner : flujos(props.flujos.datos)}
</ScrollView>
<BotonValoracion
mostrar={esFinal(props.solicitud)}
reporte={props.reporte}
valoracion={props.valoracion}
/>
</View>
)
}
}
const mapStateToProps = (state) => ({
solicitud: state.solicitudes.current,
token: state.autenticacion.token,
flujos: state.solicitudes.flujos,
usuario: state.solicitudes.current.usuario,
miUsuario: state.usuario.datos,
valoracion: state.valoracion,
repote: state.reporte
})
const mapDispatchToProps = dispatch => ({
fetchFlujo: (token, solicitudId) => dispatch(fetchFlujo(token, solicitudId)),
requestValoracion: (solicitud, usuario) => dispatch(requestValoracion(solicitud, usuario)),
requestReporte: (solicitud, usuario) => dispatch(requestReporte(solicitud, usuario))
})
export default connect(mapStateToProps, mapDispatchToProps)(PaginaDetalle)