Estoy trabajando en react js y quiero desarrollar un componente de notificaciones relacionado con las actividades relacionadas con la cuenta. Tengo que mostrar todas las actividades relacionadas con la cuenta en la lista de notificaciones y ordenarlas como notificaciones read y unread .
Entonces, mi pregunta es ¿cómo administrar las notificaciones leídas y no leídas en react/ next js?
¿Necesito hacer que sea almacenamiento de estado o de sesión?
considera que esta es mi lista de notificaciones:
const notificationArray = [ { id: 1, msg: 'one' }, { id: 2, msg: 'two' }, { id: 3, msg: 'three' }, { id: 4, msg: 'four' }, { id: 5, msg: 'five' }, ];Y en la siguiente lista he recibido una nueva notificación:
const notificationArray = [ { id: 1, msg: 'one' }, { id: 2, msg: 'two' }, { id: 3, msg: 'three' }, { id: 4, msg: 'four' }, { id: 5, msg: 'five' }, { id: 6, msg: 'six' } ];Si los datos de su notificación provienen de la base de datos, debe agregar una nueva propiedad que indique si se lee o no. Y luego puede usar simplemente Indicar que no es necesaria una sesión cada vez que el usuario lee la notificación, actualiza la lista en el lado del cliente y asíncrono. back-end que la notificación ha sido leída
los datos se verán así:
[{id:1,msg:'msg',read:false}.....]y el código del lado del cliente se verá así:
const [notifs,setNotifs] = useState() function setRead(id){ for (var i in notifs) { if (notifs[i].id === id) { notifs[i].read = true; break; } } setNotifs(notifs) callYourBackEnd(id,readStatus) // here just call your api service or something and send to it id of the notif and the read status 'true of false' which is probably true } //maping the notifs list here and pass the id to setRead notifs?.map(notif=> <NotifComonent onClick={e=>setRead(notif.id)} />¿Cómo administrar las notificaciones leídas y no leídas en react/next js?
Después de crear una nueva notificación, en el lado del servidor o en el lado del cliente, agregue una propiedad en la notificación llamada hasRead o algo así, que se establece de forma predeterminada en falso. Luego, cada vez que el usuario lea la notificación, establezca esa propiedad en verdadero.
¿Necesito hacer que sea almacenamiento de estado o de sesión?
Depende del tipo de aplicación que estés creando. Para una aplicación del mundo real, los datos probablemente provengan de una base de datos. Existen múltiples opciones para almacenar datos de usuario: bases de datos, almacenamiento local, almacenamiento de sesión, memoria. Elija lo que se adapte a su necesidad.
Hazlo asi
const notificationArray = [ { id: 1, msg: 'one' , read: true }, { id: 2, msg: 'two' , read: true}, { id: 3, msg: 'three', read: true }, { id: 4, msg: 'four' , read: true}, { id: 5, msg: 'five' , read: true }, { id: 6, msg: 'six' , read: false } ];cuando se recibe el mensaje, envía una notificación al usuario y luego almacena estos datos en el servidor o en localStorage