We Keep Coding

Render a Comment Section in React

I can't seem to figure out what method or way I should do to render a comment section which is optimized, where the data is coming from the backend.
I'm Learning Sanity(Headless CMS) with React.
I have a post Details Section and respond is like this:
about: "dasdasdfasdasd",
category: "wallpaper",
destination: "https://asdsadasdasdasdffdbhdfgbsdrg.com",
title: "sddsfasdf",
_createdAt: "2023-01-25T06:13:09Z",
_id: "RufnFSfPPKW3IsZZtUTfLg", // post id
_updatedAt: "2023-01-27T15:43:12Z",
postedBy: {
_ref: '104425784919246942925', // post creator id
_type: 'reference'
},
comments: [{
comment: "This is another trial commment"
postedBy: {
_ref: '1044257823419246942925' // commented user id
}
_key: "67dc6eb1996a"
},
{
comment: "This is another trial commment 2"
postedBy: {
_ref: '104425123125415123412' // commented user id
}
_key: "67dc6eb1996a"
}
]
Now, tell me how should I render the comment section, I want to display 3 items in the comment section.
Image
name
comment message

Firebase data structure for one to chat app or private

Currently I am developing a web applications where i need to add chat functionality. A user publish his product, and another user interested can chat with the seller to stay or know more details about product.
I got stuck on implantation of chat, I can't find out a suitable data structure for need.
My need is; let's say John is the seller and publish his phone to sell. Charles got interest on John phone's and he want to know more details about that, so start chatting with John. They don't know each other before chatting, not like WhatsApp. Where a user know another user before send a message.
John could have published so many products and Charles could interest on different products of him, for each product will create a new conversation (chat).
I want that, if john delete a message, then that should delete from his chat not from Charles.
The chat is private or one to one.
Until now i have done this data structure. I don't know if it is the best way? please suggest me
chats
sender_ID _ Reciever_id
product_id
message:''
Timestamp:''
SenderName:''

When a user publishes a product (the potential seller), you'll need to associate their user ID with that product. Based on that, the interested user (potential buyer) can make the connection.
Given your other requirements, I'd nest the chats:
chats: {
uid1_uid2_productid: {
pushid: { message: ..., timestamp: ..., sender: ... },
pushid: { message: ..., timestamp: ..., sender: ... }
}
}
And then associate these chats with the correct users in user-specific lists:
user_chats: {
uid1: {
uid1_uid2_productid: true
},
uid2: {
uid1_uid2_productid: true
}
}
Instead of true you could also store a value (or more properties) that help you display the list of chats for that specific user.
If you want each user to have a completely separate copy of the chat/room, your easiest approach is to duplicate the rooms. So:
chats: {
uid1_uid2_productid: {
pushid: { message: ..., timestamp: ..., sender: ... },
pushid: { message: ..., timestamp: ..., sender: ... }
}
uid2_uid1_productid: {
pushid: { message: ..., timestamp: ..., sender: ... },
pushid: { message: ..., timestamp: ..., sender: ... }
}
}
And then:
user_chats: {
uid1: {
uid1_uid2_productid: true
},
uid2: {
uid2_uid1_productid: true
}
}

Getting 'image_overlay_spec' to work Facebook Dynamic Ad Creative

I'm trying to get 'image_overlay_spec' to work when creating Facebook Dynamic ADs. I've already gotten the templating for the actual ad itself to work, but I want to also be able to have info on top of the image.
object_story_spec: JSON.stringify({
page_id: process.env.FB_PAGE_ID,
template_data: {
description: '{{product.description}}',
link: 'REDACTED',
name: '{{product.name | titleize}}',
},
}),
image_overlay_spec: JSON.stringify({
text_template_tags: ['{{product.price}}'],
text_type: 'price',
theme_color: 'background_e50900_text_fffff',
}),
This is what I have right now. The object_story_spec works as expected, but the image_overlay_spec does not. The API doesn't have any concrete examples on how to make it work.

Found it!
object_story_spec: JSON.stringify({
page_id: process.env.FB_PAGE_ID,
template_data: {
description: '{{product.description}}',
link: 'redacted',
name: '{{product.name | titleize}}',
},
image_overlay_spec: JSON.stringify({
overlay_template: 'pill_with_text',
text_font: 'droid_serif_regular',
text_type: 'price',
position: 'top_right',
theme_color: 'background_e50900_text_fffff',
float_with_margin: 'true',
}),
}),

How to Structure Normalized Redux Store When Loading Data

I am trying to create a React/Redux app which lists books. Each book then has related books. I know I should structure my redux store in some sort of normalized fashion like so:
{
books: {
'book1id': {
title: 'Book 1',
author: 'Author 1',
relatedBooks: ['book2id', 'book3id']
},
'book2id': {
title: 'Book 2',
author: 'Author 2',
relatedBooks: ['book1id']
}
}
}
and load each book as necessary.
The issue is where to store loading/error data from the API requests? Some ideas I had were to create an object for every book such as
books: {
'book1id': {
isLoading: false,
error: null,
book: {
title: 'Book 1',
...
}
},
...
}
But that seems to detract slightly from the readability/intuitiveness of the state. Is there a better way to structure the state?

I structure my redux store so that it includes an entities object for all of my relational data and I store things specific to a page or a set of routes in separate parts of the state. My state tree might look something like this:
const state = {
entities: {
books: {
...
},
authors: {
...
},
...
},
booksPage: {
isLoading: false
}
}
Now I am keeping track of my relational state separate from the state of my UI components. I would not recommend trying to store a isLoading state in an individual entity since that entity may or may not exist. If you need more granular loading/error state on a per entity basis then rather on a set of entities you have a few options. The first option is keep a set of IDs that are currently loading. This is not a very practical solution because you can't track success or failure with an ID simply being in a set or not.
The next, better solution is to keep a map from ID to a status object that includes if an individual entity is loading, if it was successful or if it failed to load and what the errors were.
const state = {
entities: {
books: {
...
},
authors: {
...
},
...
},
booksPage: {
loading: {
book1: {
status: 'FAILED',
error: 'Network request failed.'
},
book2: {
status: 'SUCCESS',
},
book3: {,
status: 'IN_PROGRESS'
}
}
}
}
In summary, I find separating out your relational state into an entities child object while having page specific sections of state to be working quite well for me.

Does ember.js still support embedded relationships? [duplicate]

I am really stuck with tons of problems caused by Ember-data and it lacks of embedded records support.
I have searched the entire web, most of the posts are outdated others are outdated + requires me to use 3rd party libraries or to wire up 300 lines of special code with lots of drawbacks.
I've no idea how to use embedded records with ember-data as it stands today?
edit: there is a new documentation now http://emberjs.com/api/data/classes/DS.EmbeddedRecordsMixin.html

Using the ActiveModelSerializer you can include the EmbeddedRecordsMixin which allows you to use embedded records. (In the canary versions, 1.0 beta 9+, you can use the JsonSerializer/RESTSerializer as well)
Serializer
App.ColorSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
foos: {embedded: 'always'}
}
});
Models
App.Color = DS.Model.extend({
color: DS.attr(),
foos: DS.hasMany('foo')
});
App.Foo = DS.Model.extend({
name: DS.attr()
});
JSON
{
colors:[
{
id: 1,
color: "red",
foos:[
{
id:1,
name:'something 1'
},
{
id:2,
name:'something 2'
}
]
},
...
http://emberjs.jsbin.com/qagalabaso/1/edit
For the RESTSerializer and JsonSerializer it follows the same pattern
App.ColorSerializer = DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
foos: {embedded: 'always'}
}
});
http://emberjs.jsbin.com/lesiwebobi/1/edit