I want to list the data one by one in a side panel based on the time it was updated /created and the type of data in type field. Based on its type it should be appended with a svg related to that type in a list.
What I am trying to do?
I have the data as an array of objects as below.
[
{
"attributes": {
"image_id": 8,
"recipient": {
"email": "someone@example.com",
"id": 21
},
"share_id": 68
},
"id": 50,
"timestamp": "2019-04-03T21:00:00+00:00",
"type": "image_share_expired"
},
{
"attributes": {
"after": {
"description": "Add description.",
"imagename": "changed",
},
"before": {
"description": "",
"imagename": "sphere",
},
"image_id": 1
},
"id": 54,
"timestamp": "2019-04-03T09:24:27.179190+00:00",
"type": "settings_updated"
},
{
"attributes": {
"after": {
"description": "",
"imagename": "somename",
},
"before": {
"description": "",
"imagename": "noname",
},
"image_id": 1
},
"id": 53,
"timestamp": "2019-04-03T08:54:06.721557+00:00",
"type": "settings_updated"
},
{
"attributes": {
"after": {
"expires": "2019-04-03T21:00:00+00:00"
},
"before": {
"expires": null
},
"image_id": 8,
"share_id": 68
},
"id": 52,
"timestamp": "2019-04-03T04:54:56.227415+00:00",
"type": "share_updated"
},
]
So I have three types of data to filter image_share_updated, image_share_expired, image_share_updated....
All of these data should list first in the order of timestamp field...the recent ones should be first in the list and then should filter based on type field.
If type field is image_share_expired it should be appended with the svg_share_expired (some svg which is not given here in the question) followed by text "share has been expired for {image_name} variable. also from this image_name is got from image_id which is another array of objects containing images with image_names and image_id.
If type field is image_share_updated it should be appended with the svg_share_updated and some text for it.. and so on....
How can I first sort the array of objects based on recent time (timestamp field), store it in a variable and then filter the data based on type field and show them to the user in a list using reactjs.
Could someone help me with this?