Render a Comment Section in React - javascript

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

Related

In what form to keep a chat list and their messages in client side

I have 2 options for storing the received data
1.
[
{
chatId: 'chatId1',
author: 'authorId1',
members: [],
messages: []
},
{
chatId: 'chatId2',
author: 'authorId2',
members: [],
messages: []
},
...
]
2.
{
'chatId1': {
author: 'authorId1',
members: [],
messages: []
},
'chatId2': {
author: 'authorId2',
members: [],
messages: []
},
...
}
In the first option, to add a message in chat with the chatId2 ID, I have to loop and find the missing chat, but in the second option, I can get the chatId2 property of an object.
What form do you recommend?
P.S. Sorry for my English. Thanks ;)
It depends on what you need to do, size of the data, requirements, etc.
You can easily combine these options by keeping the id field and looping though values if needed. But depending on your tasks you may also need to add additional sorting then.

Handlebars not rendering object props and arrays in x:mailgun variables passed to custom templates through AWS lambda

I am passing the following payload through my AWS lambda:
{
from: 'Someone <example#email.here>',
cc: 'Chris <example#email.here>',
to: 'example#email.here',
template: 'payment-request',
'v:name': 'Client name',
'v:lawyerName': 'Chris',
'v:hoursBooked': '{"name":"1 hours","price":"£200","url":"https://www.example.com/booking","value":1,"selected":true,"type":"hour"}',
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
}
In the actual template I am using handlebars as follows:
{{name}} // Renders "Client name"
{{#each workTypes}}
{{this.name}} // Doesn't render anything
{{/each}}
or even accessing an object like:
{{hoursBooked.name}} // Doesn't render anything
{{hoursBooked.price}} // Doesn't render anything
In other words, strings seems to be fine but handlebars 3.0 specifically in mailgun templates doesnt' seem to render object's property values or arrays.
Any help would be greatly appreciated.
The key is:
JSON.stringify
Because few months ago i implemented this code (picture below, coming from mailgun.com inside template option menu) and doesn't worked and instead used like you did, and worked for a while and then it just stopped worked.
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
Now my code work just fine
var data = {
//Specify email data
from: from_who,
//The email to contact
to: mail,
//Subject and text data
subject: 'Mailing List',
template: "main_template",
'h:X-Mailgun-Variables': ''
}
var workTypes = [ { name: "something 1" }, { name: "something 2" } ];
data['h:X-Mailgun-Variables'] = JSON.stringify({
name: 'Client Name',
workTypes
});
Just solved my own problem:
apparently we need to use an undocumented hidden and not deductible parameter:
h:X-Mailgun-Variables in the payload we send
We also need to put on our wizardry hat 🧙🏻‍♂️ to debug their own api: if you follow their example in the official website you will never get anywhere in node.js as it will error out (source.on). Make sure you stringify instead as follows:
'h:X-Mailgun-Variables': JSON.stringify({
name: 'Client name',
lawyerName: lawyerName,
hoursBooked: hoursBooked,
workTypes: workTypes
})
bonus: if your account is from eu, well best of luck the normal implementation won't work! But I got you covered...when passing the parameters to the mailgun.client({}) constructor, add in the following:
mailgun.client({
username: 'api',
key: process.env.yourkey,
url: 'https://api.eu.mailgun.net' // This
)}

How to create a list of custom objects in GraphQL

I am currently playing around with a bunch of new technology of Facebook.
I have a little problem with GraphQL schemas.
I have this model of an object:
{
id: '1',
participants: ['A', 'B'],
messages: [
{
content: 'Hi there',
sender: 'A'
},
{
content: 'Hey! How are you doing?',
sender: 'B'
},
{
content: 'Pretty good and you?',
sender: 'A'
},
];
}
Now I want to create a GraphQL model for this. I did this:
var theadType = new GraphQLObjectType({
name: 'Thread',
description: 'A Thread',
fields: () => ({
id: {
type: new GraphQLNonNull(GraphQLString),
description: 'id of the thread'
},
participants: {
type: new GraphQLList(GraphQLString),
description: 'Participants of thread'
},
messages: {
type: new GraphQLList(),
description: 'Messages in thread'
}
})
});
I know there are more elegant ways to structure the data in the first place. But for the sake of experimenting, I wanted to try it like this.
Everything works fine, besides my messages array, since I do not specify the Array type. I have to specify what kind of data goes into that array. But since it is an custom object, I don't know what to pass into the GraphQLList().
Any idea how to resolve this besides creating an own type for messages?
You can define your own custom messageType the same way you defined theadType, and then you do new GraphQLList(messageType) to specify the type of your list of messages.
I don't think you can do this in GraphQL. Think that it's a bit against GraphQL philosophy of asking for the fields "you need" in each component against asking for "them all".
When the app scales, your approach will provoque higher loads of data. I know that for the purpose of testing the library looks a bit too much but it seems this is how it is designed. Types allowed in current GraphQL library (0.2.6) are:
GraphQLSchema
GraphQLScalarType
GraphQLObjectType
GraphQLInterfaceType
GraphQLUnionType
GraphQLEnumType
GraphQLInputObjectType
GraphQLList
GraphQLNonNull
GraphQLInt
GraphQLFloat
GraphQLString
GraphQLBoolean
GraphQLID

Insert data in collection at Meteor's startup

I would like to insert data at Meteor's startup. (And after from a JSON file)
At startup, I create a new account and I would like to insert data and link it to this account once this one created.
This is the code that creates the new account at startup:
if(!Meteor.users.findOne({emails: { $elemMatch: { address: "test#test.com"}}})){
var id = Accounts.createUser({ email: "test#test.com", password: "1234", profile: { name: 'Test' } });
Meteor.users.update({_id: id }, { $set: { admin: false }});
}
And after that, I need to insert data and link it to this account with its ID. (In different collections).
So I tried to do something like that, but obviously It didn't work:
UserData = new Mongo.Collection('user_data');
if(!Meteor.users.findOne({emails: { $elemMatch: { address: "test#test.com"}}})){
var id = Accounts.createUser({ email: "test#test.com", password: "1234", profile: { name: 'Test' } });
Meteor.users.update({_id: id }, { $set: { admin: false }});
UserData.insert({
createdBy: id,
firstname: "test",
/* ... */
});
}
EDIT
Sorry for not have been clear.
The real issue is the :
UserData = new Mongo.Collection('user_data');
declaration is in another file, so I can't do like above.
As it's not in the same file, I tried to get the userId that got "test#test.com" as the email (the account's email created at startup). And once I got it, I want to use it in "createdBy: ID_HERE".
Ok, you'll want to check out Structuring your application. You'll have to make the file with the definition load earlier, or the one with the fixture later.
Normally you have your collections inside lib/ and your fixtures inside server/fixtures.js.
So if you put your insert code into server/fixtures.js it'll work.

How to get result with specific fields in StrongLoop?

I am currently using StrongLoop as my API backend server and Mongodb as data storage engine.
Let's say there is a collection called article. It has two fields title, and content. And there are two frontend pages to display a list of articles and view a single article.
Obviously the data list page only need title field and the view page need both. Currently the GET method of StrongLoop API return all fields including content. It cost extra traffic. Is there any way that can just return specific field?
Mongodb support projection in find() method for this. How can I do the same thing by StrongLoop?
Have you taken a look at the filters offered. http://docs.strongloop.com/display/LB/Querying+models
Query for NodeAPI:
server.models.Student.findOne({where: {RFID: id},fields: {id: true,schoolId: true,classId: true}}, function (err, data) {
if (err)
callback(err);
else {
callback();
}
})
Query for RestAPI :
$http.get('http://localhost:3000/api/services?filter[fields][id]=true&filter[fields][make]=true&filter[fields][model]=true')
.then(function (response) {
}, function (error) {
});
You can use fields projections,
Sample Record:
{ name: 'Something', title: 'mr', description: 'some desc', patient: { name: 'Asvf', age: 20, address: { street: 1 }}}
First Level Projection:
model.find({ fields: { name: 1, description: 1, title: 0 } })
and I think Strong loop is not yet supporting for second-level object filter, does anyone know how to filter second-level object properties or is yet to implement?.
Second Level Projection: (Need help here)
Ex: 2
model.find({ fields: { name: 1, 'patient.name': 1, 'patient.age': 1, 'patient.address': 0 } })
// Which results { name } only

Categories