Git Product home page Git Product logo

lost_pets_react's Introduction

apx-challenge-m8

URL:

https://dwf-m8-fe7d6.firebaseapp.com/

About it

For this web app i used the React framework and used the backend of my past project: "Lost_pets-webapp".

It was made with the same purpose of my past project, but this time in React.

lost_pets_react's People

Contributors

alvax10 avatar

Watchers

 avatar

lost_pets_react's Issues

Issue rompe el back y otros.

Buenas Alva! Pude reportar mascotas y ver un poco mas de la pagina, pero te dejo nuevos issues:

Rompi la app cuando puse "reportar como encontrado". Levantar de vuelta el back del m7

Arreglar modal de reportar informacion.

Editar mi mascota se ve raro, una X (cruz) tapa el titulo.

Cuando modifique la foto de mi mascota en buscar cercanos estaba la ultima imagen publicada, pero en mis reportados seguia la anterior.

Problema al reportar/ver reportados

Buenas Alva! Estoy teniendo un inconveniente no se si para reportar o para ver los que yo reporte. Reporte sin que me tire ningun error en consola, me fue a la home y de ahi fui a la pagina de "mis-mascotas" y no cargo nada. Espere un rato, hice refresh para ver si pasaba algo y me salio esto en consola:

image

Por otra parte en mi home hace un rato veia solo 1 animal reportado (si mal recuerdo el nombre era mascota0) y ahora otra vez el error de cors de la imagen anterior.
Bueno, sigo probando y arroja error de cors con cualquier solicitud que mande a la api, ahora tampoco puedo loguearme. Reenvia el desafio cuando tengas nuevamente funcional la parte de cors

Problemas al reportar mascota

Hola @Alvax10 como estas ? Probando la app tengo un error de CORS que creo que esta desencadenando otros errores, esto pasa despues de reportar una mascota e ir a la seccion "mis mascotas reportadas"
image

Despublicar rompe el back (o eso creo)

Buenas Alva. Estuve viendo el desafio y la gran mayoria de las interacciones se hace bien, pero me parece que despues de moverme mucho por la pagina y hacer click en "despublicar" rompi el back. Yo creo que esta ahi el problema pero no se, intenta hacer muchisimas interaccoines (sin despublicar) y si despues de eso te vuelve a saltar el back entonces ahi esta el error.

Por otra parte el front hay que pulirlo un poco, este desafio es puro front y tiene que estar bien:
image

Eso tiene que estar centrado.
Ahora no puedo acceder pero el modal donde pones la informacion de donde se vio a la mascota tiene que estar mejor, algo que lo resalte por sobre el resto de la pagina, como un border, color, en fin, en decision tuya que hacerle.
Cuando tu pagina este 100% funcional vamos a ir viendo el codigo.

Cors

Hola Alvaro como andas?? Estuve probando un poco la page pero en un momento me empezó a saltar errores de cors y no puedo ingresar mas a la page, te muestro el error que me salta, igual es raro porque por un tiempo la pude probar lo mas bien
cors 2
No se si habrás hecho lo que dice el Marce que capaz lo puede solucionar
cors

Pero en el tiempo que pude entrar a la page y la probé note 2 cositas

  1. Cuando daba mi ubicación aunque si había mascotas perdidas cerca mío por un segundito me aparecía el cartel de que no había mascotas perdidas cerca mío y ahí se actualizaba y aparecían todas las mascotas, habría que ver que no aparezca ese cartel si sí hay mascotas perdidas cerca mío

  2. Cuando hice el usuario funciono todo perfectamente pero al momento de ingresar si ponía una contraseña incorrecta se rompía la page y no hacia mas nada, no le indicaba al usuario que estaba mal la contraseña ni nada. Habría que ver eso y también agregarle algún estilo de carga al botón cuando se esta esperando alguna respuesta de la API así el usuario sabe que esta pasando algo

Los datos de la mascota no se editan correctamente

Alva, cuando se editan los datos de una mascota reportada, solamente una vez pude modificar los datos de la misma, luego no hubo manera de modificar los mismos, intente refrescando la page pero tampoco funciona

Review

Buenas, Alvax!!
Estuve viendo tu desafío ayer y me quedé con algunas cositas para dejarte acá.

Lo primero que me pasó fue que no pude modificar mis datos. Lo probé en dos momentos diferentes.
Primero me dio que no existía PUT a esa ruta y la segunda me lo rechazó por internal server error. En la segunda vi que era posible sólo cambiar el password.
image
image

Después reporté una mascota y me dio otro error. También pareciera del server se rompe en algún momento del flujo.
De todas formas, en este momento del flujo me di cuenta que los endpoints requieren un email pero el mismo no se guarda en los atomos o el storage que se use. Tal vez el uso del mail se podría reemplazar por el token. O quitarlo, sobre todo en la parte de reportar mascotas si es que se piensa para que lo reporte cualquier usuario loggeado o no.
image
image

Lo mismo del mail me sucedió cuando quise acceder a mis mascotas para editarlas. No me las mostró por la falta del mail.
image

Por otro lado, tema código.
En hooks.ts tal vez podrías separar los mismos hooks de los atoms para escalar más prolijamente el módulo. O convendría no exportar los átomos para no exponer esa capa.

Sobre los buttons, podrías evitar la repetición de los botones pasandolé el color que quieras utilizar por props para hacelo más reutilizable y ahorrar el peso de las importaciones cuando usas muchos en la misma page.

Como sugerencia, sobre la page montada en / sólo toma la ubicación. Podrías evitarte ese paso con un hook y darle la page home como entrada. Digo esto por dos cositas, si el user no da la ubicación no es 100% excluyente para el uso de la app, puede querer publicar una mascota y ahí tenés el mapa. Lo otro, la página de entrada debería darte información de la página como buena práctica. No es un must-have de este desafío pero está bueno para tenerlo en cuenta.

Y lo último, también enfocado en las buenas prácticas, tenés dos o tres componentes mezclados en algunas carpetas. Por ejemplo Home+Card Teniendo en cuenta que Card puede ser un ui y home una page, podría llegar a ser confuso al momento de buscar alguno de los dos módulos para reutilizarlo o para arreglar algo en ellos. En esto también podrías dentro de las carpetas trabajar sólo algo en particular pero tener tu módulo principal (el que exporta el componente) como index para facilitar la importación.

Estos últimos temas son más para ir puliendoló. Dejo el desafío como "necesita ajustes" para arreglar el flujo que se corta por los bugs con los endpoints.

Saludos!

Review

Alva ahora si, el desafío cumple con las condiciones de ser aprobado!

  • Hay algunos detalles por corregir:

  • Cuando editas una mascota y no se ingresa el nombre de la mascota, setea el mismo con un string vasío, podrías hacer que si el campo está vacío, el valor sea el nombre actual de la mascota:
    Captura de pantalla de 2022-03-28 23-03-03

  • Estaría bueno que en mis datos aparezcan mis datos, como el mail y el nombre:
    https://user-images.githubusercontent.com/77214476/160142336-8cb93c01-cc29-4271-87d7-7d150cc02f27.png

  • Se dice que es una buena práctica pasar 2 o 3 argumentos como mucho a una función, lo recomendable en este caso sería pasar un parámetro en forma de objeto:
    https://user-images.githubusercontent.com/77214476/160142574-910d9f0f-1f86-4af5-a6ea-b84c8d9883ec.png

  • Lo demás está bien y más allá de esos detalles son cosas que se van aprendiendo a medida que se labura con la herramienta (react), éxitos en lo que sigue!!

Issues varios.

Buenas Alva!

-Revisando la pagina veo que apenas la abris hay un error de badstate, te dejo la cap:
image
En la info dentro del error dice que el problema esta en giveLocation.tsx, en la funcion ExtractLocation. Leyendo un poco el codigo me la juego que el problema esta en este if, creo que con un useEffect se soluciona:
image

-Otro es que cuando voy a reportar mascota y vuelvo al menu sin reportar sigue la pagina cargada detras (Fijate que en la franja blanca de arriba aparece el titulo reportar mascota perdida y si scrolleo aparece nombre)
image
Yo creo que este error puede deberse a que sigue en la misma ruta. Es decir, estoy en el menu pero la ruta sigue siendo /reportar-mascota. Lo mismo si voy a mis datos y voy al menu la direccion sigue siendo /mis-datos. Yo lo que hice fue crear una pagina que sea exclusivamente menu, porque lo que entiendo que esta pasando es que esta cargando el menu solapando/por encima de la direccion indicada. Creo que hacer una pagina dedicada al menu puede ahorrarte dolores de cabeza.

-Al fin intentando reportar me tiro estos errores en consola:
image
Al parecer por el primer Warning el error estaria en MapboxComp. Y el segundo error parecer ser una promesa sin resolver? O tal vez no le llego respuesta, pero dice que esta evaluando algo en mascotas-cerca-api.ts

Al saltar ese error no reporta la mascota que quise y mis reportados aparece vacio.

Arregla esos errores, consulta en discord todas las dudas y reenvia el desafio !

Editar mascota bug

Buenas Alva! Tuve una falla cuando edite una mascota reportada. Te dejo las caps:

image

Pero en el menu esta con el cambio incluido:

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.