You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: sprint.md
+35-81Lines changed: 35 additions & 81 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,74 +38,7 @@ Los temas aprendidos sobre React a partir del desarrollo de estas tareas son los
38
38
39
39
En este último componente vamos a **presentar en formato tabla los resultados obtenidos desde el servicio WFS** de la Junta de Andalucía con datos sobre servicios sanitarios. Son los mismos datos que usamos para [añadir el GeoJSON al mapa](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/).
40
40
41
-
Queremos que sea totalmente reutilizable. Es decir en un futuro desarrollo una funcionalidad que permitiera consultar otra capa de datos, seguramente los atributos (properties) serían distintas respecto a su denominación y número.Para solucionar esto he creado dentro *TableList* dos "subcompontes" funcionales.
42
-
43
-
El primero llamado *TableHeader* se va a encargar de obtener los nombres de las columnas. La información se encuentra del objeto GeoJSON. He usado la función *map()* para obtener los datos y el método [Object.keys()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys) que devuelve un array de las propiedades *names* del objeto. Los datos los añadimos al elemento *th* dentro de la tabla.
44
-
45
-
```javascript
46
-
//TableList.js
47
-
...
48
-
constTableHeader= (props) => {
49
-
if (props) {
50
-
let features =props.features;
51
-
if (features) {
52
-
let rowName ="";
53
-
features.map((f) => {
54
-
rowName =Object.keys(f.properties);
55
-
});
56
-
57
-
return (
58
-
<thead>
59
-
<tr>
60
-
<th></th>
61
-
{rowName.map((th) => (
62
-
<th> {th.toUpperCase()} </th>
63
-
))}
64
-
</tr>
65
-
</thead>
66
-
);
67
-
}
68
-
}
69
-
};
70
-
71
-
```
72
-
73
-
Para las filas, seguimos el mismo procedimiento, pero en esta ocasión usamos [Object.values()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values) que *"devuelve un array con los valores correspondientes a las propiedades enumerables de un objeto".*
74
-
75
-
```javascript
76
-
//TableList.js
77
-
...
78
-
constTableRows= (props) => {
79
-
if (props) {
80
-
let features =props.features;
81
-
if (features) {
82
-
let row ="";
83
-
features.map((f) => {
84
-
row =Object.values(f.properties);
85
-
});
86
-
87
-
return (
88
-
<tbody>
89
-
{features &&
90
-
features.map((f) => (
91
-
<tr key={f.id}>
92
-
<td>
93
-
<ButtonZoom coor={f.geometry.coordinates} />
94
-
</td>
95
-
{row.map((td) => (
96
-
<td> {td} </td>
97
-
))}
98
-
</tr>
99
-
))}
100
-
</tbody>
101
-
);
102
-
}
103
-
}
104
-
};
105
-
...
106
-
```
107
-
108
-
El componente *TableList* quedará así.
41
+
Para el componente usamos los datos que nos vienen desde sus propiedades y montamos una tabla con cabecera y cuerpo de datos que devuelve la información usando la función map(). El componente *TableList* quedará así.
Para futuras mejoras, se debería refactorizar el código y que pudiera servir para cualquier tipo de datos temáticos que se consultaran. Ahora mismos está desarrollado pensando en el modelo de datos de servicios sanitarios.
88
+
134
89
```
135
90
136
91
# Implementando un botón de zum con el patrón de diseño Pub-Sub.
137
92
138
-
Es interesante añadir un **bótón que permita hacer zum al elemento dentro desde la tabla**. Para obtener una comunicación directa entre componentes, y que permita usar ejecutar el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o))
139
-
93
+
Es interesante añadir un **bótón que permita hacer zum al elemento dentro desde la tabla**. Para obtener una comunicación directa entre componentes, y que ejecute el método *flyTo()* de Leaflet en el compomente *MapView*, he usado el [**patrón de diseño **Observador**](https://es.wikipedia.org/wiki/Observer_(patr%C3%B3n_de_dise%C3%B1o))
140
94
141
-
Este patrón permite definir una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos.
95
+
Este patrón define una dependencia de uno a muchos entre objetos, de forma que cuando un objeto (sujeto) cambie de estado, se notifique y se actualicen automáticamente todos los objetos (observadores) que depende de él. Esta notificación se realiza normalmente a través de uno de sus métodos.
142
96
143
-
El patrón se ha usado para comunicar dos componentes hijos, en este caso *ButtonZoom* que obtiene las coordenadas desde las propiedades de cada *TableRows* y *MapView* que es donde se encuentra el evento del zum a las coordenadas pasadas.
97
+
El patrón se ha usado para comunicar dos componentes hijos, en este caso *ButtonZoom* que obtiene las coordenadas desde las propiedades de cada fila y *MapView* que es donde se encuentra el evento del zum a las coordenadas pasadas.
144
98
145
99
Para ser más específicos se ha usado el **patrón Pub-Sub(Publisher-Subscriber)** que añade un evento intermedio. La implementación de este patrón se a realizado gracias a la librería [PubSub](https://www.npmjs.com/package/pubsub-js). En esta [entrada](https://medium.com/@Aida_Pro_/observer-vs-eventbus-patrones-de-dise%C3%B1o-cd8178f48c7d) es donde he obtenido la parte teórica sobre el usos de ambos patrones.
146
100
@@ -174,11 +128,11 @@ class ButtonZoom extends Component {
174
128
}
175
129
}
176
130
```
177
-
*ButtonZoom* es usado dentro del componente TableRows y tiene como propiedades el array de coordenadas del elemento.
131
+
*ButtonZoom* es usado dentro del componente *TableList* y tiene como propiedades el array de coordenadas del elemento.
178
132
179
133
180
134
181
-
Ahora vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente MapView que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante *PubSub.unsubscribe*.
135
+
Vamos a definir los observadores/suscriptores de nuetro evento. En la aplicación será el compomente MapView que es donde podemos usar los métodos de Leaflet gracias al [uso de referencias en React como comentamos en el artículo anterior](http://www.sigdeletras.com/2020/side-project-4-react-y-leaflet-wfs/). La suscripción la hacemos dentro del cliclo de vida *componentDidMount()*. Es importante también eliminar la suscripción ya puede ocurrir fugas de memoria. Esto lo haremos con el método *component WillUnmount()* mediante *PubSub.unsubscribe*.
0 commit comments