I render a date with moment but for some reason, the seconds of some objects are changing after every rerender. The strange part is that I'm not sure how can the seconds be more than 60.
{moment(comment?.created_at).format('DD/MM/YYYY hh:ss')}
I also sort them, not sure if that's related:
{comment?.replies?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(reply =>
EDIT: So I render comments and replies which look something like this:
{
"post_content": "Content of post",
"comments": [
{
"comment_content": "First Comment",
"comment_replies": [{
"reply_content": "First reply"
}]
}]
}
I'm sorting the comments and replies and then rendering them:
<List>
{data?.comments?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(comment => {
return (<div>
<Comment comment={comment} data={data} setData={setData}/>
<div>
{comment?.replies?.sort((a,b) => moment(a.created_at) - moment(b.created_at)).map(reply => {
return (
<Box component="div" m={3}>
<Reply commentId={comment.comment_id} data={data} setData={setData} reply={reply}/>
</Box>
)
})}
</div>
</div>);
})}
</List>
EDIT 2: The comment object after the date is rendered.
{
"created_at": "2021-04-03T18:45:57.987068Z",
"comment_id": "7fabbade-23e0-47ab-9e46-af37d07a46b1",
"content": "Second Comment",
"user": "usernametest",
"replies": [
{
"reply_id": "b3f96c47-bd46-481b-b485-ea0b19977031",
"content": "First Reply",
"user": "usernametest"
}
]
}
EDIT 3: The showReply is a flag to show the reply input, and patch is a flag to show the update/edit button.
<Typography
component="span"
variant="body2"
className={classes.inline}
color="textPrimary"
>
{comment?.user}
</Typography>
- {moment(comment?.created_at).format('DD/MM/YYYY hh:mm')}
{console.log(comment)}
<div>
{localStorage.getItem("vettageToken") && localStorage.getItem("vettageToken") !== "undefined" &&
localStorage.getItem("vettageToken") !== null ?
<div>
<a onClick={e => setShowReply(!showReply)}>Reply</a>
{patch ? <a onClick={patchComment}>Update</a> : <a onClick={e => setPatch(!patch)}>Edit</a> }
<a onClick={e => deleteComment()}>Delete</a>
{showReply &&
<div>
<TextField
id="outlined-multiline-static"
label="Add a comment"
multiline
rows={4}
value={reply}
onChange={e => setReply(e.target.value)}
defaultValue="Default Value"
variant="outlined"
/>
<Button onClick={e => postReply()}>Reply</Button>
</div>
}
</div>
