skycatch / acopio-ui Goto Github PK

Each acopio has products and each product has a fechaDeActualizacion string. Surface the latest fechaDeActualización on AcopioCard

If needed, use date-fns to sort the dates.

La primer página de la app muestra una lista de centros de acopio cerca de donde estás. Pero si no encuentra ninguno cercano te da el mensaje "No encontramos centros de acopio". Si yo como usuario novato entro y lo primero que me sale es eso, pienso que es un error porque parece que no hubiera centros de acopio en ningún lado. Así que hay que modificar el texto para que diga "No encontramos centros de acopio cerca de ti".

Once you create a center, you should be able to add contacts.

The endpoint to work with is /acopios/{acopio-id}/contactos (it should already support POST/PUT/)

A contact object would end up looking like:

{ "nombre": "Juan Perez", "email": "[email protected]", "twitter": "@blah", "facebook": "fb.com/blah", "telefono": "55 2561 9561", "id": "59c4c11400220a53359e0983", "acopioId": "59c4c11400220a53359e0982" }

id: being the id of the contact (auto-generated) and acopioId being the id of the center in question.

Some centers only provide an email, others a facebook page, others the name of a person and a phone. Therefore, all fields are optional but we need at least one of the fields to be filled.

This is more of a nice to have, but we should be able to translate between Spanish and English for the site.

No estamos usándolo. Quitarlo de dependencias y scripts

We need to display a marker on the map for each collection center. The markers should also be in clusters since there may be quite a few centers in a relatively small area. They will need to be clickable (especially on mobile); clicking a marker should bring up a card with the center's information on it, but building the card will be a separate task.

Import Material UI for quick development of nicer forms

Implement a form so that users can create new "Centro de acopio".
Info: Name of the center, address.

The user will be able to geolocate the map on themselves. We should automatically find the closest center to them and display its card. This works roughly in tandem with #13 Geolocate user on the map.

Es muy probable que los centros de acopio actualizados más recientemente sean los que necesitan más ayuda. Tenemos que ordenar siempre los centros de acopio por fecha de última actualización.

related: #72

If we're unable to get the user's geolocation, the best UX is to present a useful list of featured centers. Decide on a list of 5-10 centers to feature.

https://github.com/Skycatch/acopio-api

Should have CRUD functionality for:

• collection centers
• collection center managers
• products

Add/edit the needs (productos) for a center.

/admin/centers <- Agregar bulk delete aquí.

El componente de la tabla ya trae opcion para checkboxes

La API regresa cosas como "voluntarios para relevos en Alvaro Obregon 286". Necesidades es una mejor descripción.

Mostrar al usuario necesidades y en la medida de lo posible cambiar el código.

discusión: https://codeandomexico.slack.com/archives/C76TGK6AG/p1506214440000053

Usar CardActions para enlazar al telefono, twitter, y direcciones via Google Maps.

Al buscar por producto, hay teléfonos que por default te ponen mayúscula la primer letra. Entonces si tecleas 'agua' sale 'Agua' y la búsqueda no regresa resultados (porque todo está lower case en la api).

The user should be able to press a button to center the map on their current location.

Mar (slack) y yo estamos trabajando en el UI (diseño y estilos)

Use the AppBar component for Layout component. Ideally it will be positioned as a sticky header

Queremos una nueva homepage que muestre resultados y permita al usuario navegar rápidamente a lo que quiere. La pantalla debería de mostrar

• 5 AcopioCards con los centros de acopio actualizados más recientemente
• 5 AcopioCards con los productos necesitados más recientes
• Si el usuario tiene activada la localización (currentPosition), mostrar AcopioCards 5 centros de acopio más cercanos, de lo contrario, mostrar un mensaje que lo invite a activar su posicionamiento.

Para puntos extras de karma, los AcopioCards pueden ser mostrados en un carrusel.

cc @clasig

Actualmente hay 3 vistas con lista

• CenterSearch
• Supply
• List

y una vista Map.

• Map

La idea de esta es tener sólo las 3 vistas de Lista, y en cada una un Floating Action Button que permita mostrar la misma información de la lista en el Mapa.

Adicionalmente, quitar de la navegación el botón de mapa.

According to mockups

Change the loader in withLoading to a RefreshIndicator

File https://github.com/Skycatch/acopio-ui/blob/develop/src/components/withLoading.js

Necesitamos una vista para buscar centros de acopio por producto.

APIs a usar:

• api.getProductosByPartialName

Componentes

AutoComplete

We should be able to search and filter the centers that appear on the map based on products that they need. This will help facilitate the movement of goods from centers with extra of an item to centers that need the item. It might be good to filter based on what the centers have as well to allow people who need certain items to find the closest center with that item.

"Quiero ayudar" (I want to help) => Opens the detail bar with a prompt to search by product needed

Necesitamos una vista más completa del centro de acopio a la cual se pueda acceder desde AcopioCard

Debe de tener una ruta
/acopios/:id

Y debe de cargar los datos necesarios para que sea compartible via URL

Esta vista debe de tener

• imagen con mapa de ubicación
• link a google maps usando Image API
• formas de contacto, enlazadas (teléfono, twitter, sitio web)
• lista de productos necesitados
• enlace al editor de productos necesitados
• enlace al editor de contactos.

Right now there's a commented out test function in App.js that makes requests to the endpoints of the Acopio API. We should remove this and write test cases for interacting with each endpoint.

When you click a marker to bring up a center's details, the map should center on that marker. It would be nice if the active marker also displayed differently than the other markers (maybe a different color).

1. Go to /admin/centers

En esa lista hay que agregar paginación.

We need further definition on what the API is expecting before we can implement this. I believe the API is using auth0 so we may be able to get away with using their built in UI, maybe just customized with the project logo.

Once a user has geolocated themselves and selects a center, we should provide them with the option to get directions to the center. This can be achieved with Mapbox's directions API.

Se necesita limpiar el código del mapa para que sea útil

• Quitar el drawer o confinarlo a esta vista
• usar las APIs que hemos desarrollado para las otras vistas como withCurrentLocation
• Hacer que use el router para enviar a la vista de detalle de centro de acopio ( #73 )
• Add a pin with current user location in map
• Re-importar Map.css con los estilos que correspondan al mapa

Necesitamos una mejor forma de navegación. Actualmente tenemos

• Todos los centros
• centros cercanos
• Mapa de ambas

Tambien estamos desarrollando

• Buscar producto en centros
• Centros por estado / municipio
• Vistas de detalle de centros

El entregable de este PR crea navegación usando el componente Tabs

This might have to be one of the Skycatch team members @chubas @javierbyte or myself

Mapbox GL will be used to render a map of collection centers. Expect the API to return lat/lng coordinates for each center.

A full page map has disadvantages like long load time and has issues being displayed in mobile phones. We will make a new proposal to see how it works and decide what to do.

Yesterday we changed the url of the endpoint, and eventually it might end up being somewhere else under the sismomexico.org domain, so it would be nice to be able to change that value quickly and it not be hardcoded in the calls.

Al iniciar la app, el usuario debería de ver una lista limitada de centros (20 items). En esta pantalla el usuario puede explorar y permitir el acceso a geolocalización.

Cuando se permite la geolocalización, se debe de cambiar la información por los centros más cercanos.

"Quiero ayudar" button should look like:

Current UI has some usability issues.

• Density of information is low
• There are some points very close together some space doesn't have points
• Slow Androids might choke on loading large JS for map rendering

Proposal is to

• Add a List based UI that displays Acopios
• Set this new UI as the default
• Add a mode in the UI to use the map
• Add a button in the UI that triggers a change between the two modes.

Link to discussion: https://codeandomexico.slack.com/messages/C76TGK6AG/convo/C76TGK6AG-1506134554.000011/

We need a new Index screen that shows all the acopios. We can use the api.getAcopios() call and display the resulting data on an AcopioList

This screen will be very similar to Supply but without geolocation

Sort the list of products alphabetically.

Relevant file: https://github.com/Skycatch/acopio-ui/blob/develop/src/components/AcopioCard.js

• Create REACT_APP_NAME environment variable to save app name
• Dynamically set page title when app is opened
• Dynamically update page title when switching screens