Mi API ( NotesData ) devuelve una matriz de objetos donde uno de los pares clave/valor es una marca de tiempo de PostgreSQL con el formato 2022-04-12T19:25:39.950747+00:00 .
Estoy creando una línea de tiempo de notas, donde cada objeto de la matriz es su propia nota con su propia marca de tiempo. Hasta ahora, he mapeado la matriz para crear una línea de tiempo de notas, con la hora de creación de la nota al lado de cada una de las notas.
Estoy tratando de averiguar cómo puedo separar estas notas por los días en que se crearon. Por ejemplo, todas las notas creadas el 18/04/2022 estarán bajo el encabezado del lunes 18 de abril, y así sucesivamente.
Hasta ahora, tengo tres componentes funcionales, la línea de tiempo principal ( NotesStream ), NoteCard (que es esencialmente la nota con HH:MM al lado) y NoteDate . NoteDate es el componente que me cuesta descubrir cómo renderizar condicionalmente.
Esencialmente, necesito un componente NoteDate renderizado para cada componente NoteCard que contenga la misma fecha y hora.
¡Muchas gracias!
Cronología:
import NoteCard from './NoteCard'; import NoteDate from './NoteDate'; function NotesStream({ notesData, deleteNote, }: { notesData: any; deleteNote: any; }) { return ( <div className="notes-stream column"> {notesData && ( <> {notesData.map((note: any) => ( <NoteCard key={note.id} id={note.id} content={note.note_content} time={note.created_at} deleteNote={deleteNote} /> ))} </> )} </div> ); } export default NotesStream;Tarjeta de nota:
function NoteCard({ id, content, time, deleteNote, }: { id: number; content: string; time: string; deleteNote: any; }) { const dateTime = new Date(time); return ( <div className="note-card note-card__alternate"> <div className="note-card--content"> <p>{content}</p> </div> <div className="note-card--time note-card--time__alternate"> <span> {dateTime.toLocaleTimeString('uk', { hour: '2-digit', minute: '2-digit', })} </span> </div> <div className="note-card--delete"> <p onClick={() => { deleteNote(id); }} > Delete </p> </div> </div> ); } export default NoteCard;Fecha de la nota:
function NoteDate({ date }: { date: string }) { return <h2 className="notes-date">{date}</h2>; } export default NoteDate;Puede lograrlo remodelando primero los datos usando la función de reducción , para agrupar sus notas por fecha. El siguiente fragmento muestra una posible implementación:
const groupByDate = (notesData) => { return notesData.reduce((groups, note) => { const date = new Date(note.timestamp).toDateString() if (!groups.hasOwnProperty(date)) { groups[date] = [] } groups[date].push(note) return groups }, {}) } const testData = [ { timestamp: "2022-04-12T19:25:39.950747+00:00", name : "note 1" }, { timestamp: "2022-04-12T19:25:39.950747+00:00", name : "note 2" }, { timestamp: "2022-05-12T19:25:39.950747+00:00", name : "note 3" }, { timestamp: "2022-05-12T19:25:39.950747+00:00", name : "note 4" } ] console.log(groupByDate(testData)) Luego, puede representar en NoteDate para cada tecla del objeto resultante y una NoteCard para cada nota.
Tenga en cuenta que esta es una operación costosa, y es posible que deba memorizarla con useMemo para evitar volver a calcular la fecha agrupada con cada renderizado.
Finalmente, si tiene acceso al código API del que obtiene la información, la forma correcta de manejar esto probablemente sea hacerlo del lado del servidor. ¡Agrupar las notas por fecha sería mucho más eficaz si lo hiciera PostgreSQL!