Página profile

[omiras]

Análisis

Posible inspiración sobre una página de profile https://dribbble.com/search/mobile

A. Tienes que crear una ruta en Layout.js para ir a /profile B. Dicha ruta, debería renderizar la vista views/profile.jsx

Dentro de profile.jsx, debes implementar un componente React con todo esto:

1. Avatar random
2. Apódo/tagName
3. Rating: Estrellitas con el número de valoraciones. Componente tipo : https://github.com/ironhack-labs/lab-react-training#iteration-6--component-rating. En vez de estrellitas usar

Intenar usar componentes de DaiyUI: https://daisyui.com/ Se puede maquetar genéricamente con tailwind: https://tailwindcss.com/docs/installation

4. La ciudad del usuario

5. Primero, hacer un JSX totalmente estático. Crear tus H2, con una foto random, las valoraciones random, etc.

6. Segundo, usar los datos que tenemos en store.profile. Tienes que seguir el ejemplo de newsletter.jsx

[omiras]

@aldjavierdavid @Davidps99 Hola! Alguna actualización sobre esta issue para comentar mañana?

[Davidps99]

Referencia de como quedemos que quede maquetado: https://www.mockplus.com/blog/post/profile-page-design

Para el rating vamos a usar estos iconos:

1. Municipalities - Spain https://data.opendatasoft.com/explore/dataset/georef-spain-municipio%40public/export/?disjunctive.acom_code&disjunctive.acom_name&disjunctive.prov_code&disjunctive.prov_name&disjunctive.mun_code&disjunctive.mun_name&dataChart=eyJxdWVyaWVzIjpbeyJjb25maWciOnsiZGF0YXNldCI6Imdlb3JlZi1zcGFpbi1tdW5pY2lwaW9AcHVibGljIiwib3B0aW9ucyI6eyJkaXNqdW5jdGl2ZS5hY29tX2NvZGUiOnRydWUsImRpc2p1bmN0aXZlLmFjb21fbmFtZSI6dHJ1ZSwiZGlzanVuY3RpdmUucHJvdl9jb2RlIjp0cnVlLCJkaXNqdW5jdGl2ZS5wcm92X25hbWUiOnRydWUsImRpc2p1bmN0aXZlLm11bl9jb2RlIjp0cnVlLCJkaXNqdW5jdGl2ZS5tdW5fbmFtZSI6dHJ1ZX19LCJjaGFydHMiOlt7ImFsaWduTW9udGgiOnRydWUsInR5cGUiOiJsaW5lIiwiZnVuYyI6IkNPVU5UIiwic2NpZW50aWZpY0Rpc3BsYXkiOnRydWUsImNvbG9yIjoiIzE0MkU3QiJ9XSwieEF4aXMiOiJ5ZWFyIiwibWF4cG9pbnRzIjoiIiwidGltZXNjYWxlIjoieWVhciIsInNvcnQiOiIifV0sImRpc3BsYXlMZWdlbmQiOnRydWUsImFsaWduTW9udGgiOnRydWV9&location=12,41.57693,2.15864&basemap=jawg.streets

• Pes 78 MB y visual studio no nos dejaba abrirlo

2. SimpleMaps (Spain Cities Database) https://simplemaps.com/data/es-cities

• Pesa mucho menos pero solo tiene las ciudades principales de España

[omiras]

Diseño y contenido aproximado:

Modificad la variable store.profile

[omiras]

Necesitamos que el componetne no sea dependiente del store. Para ello, debería ser capaz de invocarlo de esta manera en profile.jsx

<StaticRating rating={store.profile.rating}/>

Modificar StaticRating.jsx para recuperar la prop rating y pintar las manos en consecuencia. Solo tenéis que modificar ligeramente el componente, y eliminar la funcion ImageLoop