Develop Reference

Best way to update multiple attributes in nested state?

Just before I go about having to learn Redux or use Immer, I was wondering if anyone knew of a simple way to do this. I checked the React docs but I must be making a mistake somewhere, and need new sets of eyes on this.
I've got a users array of objects that is set to state {i.e. users, setUsers) , where each user object that has nested within it posts and concerts. Here's an example of one of them:
{
"id": 305,
"username": "L0V3MUSIC",
"email": "kanisha.hansen#bayer.co",
"posts": [
{
"id": 129,
"body": "PLEASE EMAIL IF YOU HAVE 4 TICKETS ALTOGETHER! MY DAUGHTERS LOVE HER -- THX ",
"for_sale": false,
"tickets": 4,
"concert_id": 51,
"user_id": 305
}
],
"concerts": [
{
"id": 51,
"date": "2023-07-22T00:00:00.000Z",
"location": "Brooklyn Steel",
"image": "https://i.imgur.com/SmFrzTC.jpg",
"artist_id": 37
}
]
},
I've also got concerts state holding an array of objects with the same information also and in the same way as above with users.
{
"id": 51,
"date": "2023-07-22T00:00:00.000Z",
"location": "Brooklyn Steel",
"image": "https://i.imgur.com/SmFrzTC.jpg",
"artist_id": 37,
"artist": {
"id": 37,
"name": "Adele",
"image": "https://i.imgur.com/zmGbfKS.jpg",
"genre": "Pop"
},
"posts": [
{
"id": 123,
"body": "2 tickets, $100 total OBO -- CHEAPEST YOU'LL EVER FIND FOR ADELE!!",
"for_sale": true,
"tickets": 2,
"concert_id": 51,
"user_id": 289
},
{
"id": 124,
"body": "3 tickets, $400 total OBO!",
"for_sale": true,
"tickets": 3,
"concert_id": 51,
"user_id": 289
},
{
"id": 129,
"body": "PLEASE EMAIL IF YOU HAVE 4 TICKETS ALTOGETHER! MY DAUGHTERS LOVE HER -- THX ",
"for_sale": false,
"tickets": 4,
"concert_id": 51,
"user_id": 305
}
],
"users": [
{
"id": 289,
"username": "onlineguy1",
"email": "su#cronin.name"
},
{
"id": 305,
"username": "L0V3MUSIC",
"email": "kanisha.hansen#bayer.co"
}
]
},
My issue is that I want to update a post that a user enters. I'd like to iterate either through users or through concerts, as I'm not sure which is best just yet given that both are 'symmetrical' in a sense. I don't want to have a posts state object though as I'm being graded on my ability to access users through concerts, and concerts through users.
currentUser is just the user that is currently logged in, and who would be the author of the created post. What I've tried to do a bunch of different ways is this: (here's my latest iteration)
if (response.status >= 200 && response.status <= 299) {
response.json().then((createdPost) => {
console.log('createdPost: ', createdPost);
const updatedPosts = currentUser.posts.map((eachPost) => {
if (eachPost.id === createdPost.id) {
return createdPost;
} else {
return eachPost;
}
});
console.log('updatedPosts: ', updatedPosts);
setCurrentUser(...currentUser, currentUser.posts: updatedPosts)
// FIGURE OUT HOW TO UPDATE THE STATE OF THE ABOVE
// THEN MAP THROUGH USERS AND UPDATE THAT USER WITH CURRENTUSER INSTEAD
});
setError([]);
setSuccess('Your post has been created!');
setSubmitted(true);
} else {
What I have above is updating the currentUser's posts and have an updated collection of the currentUser's post, and then ideally update the users state itself with this currentUser (and his updated posts) replacing currentUser (and his now outdated posts, given that they don't include the newly created post). But I've managed to confuse myself through the nesting and mapping and staring at this too long.
Is there a concise way to go about either updating the posts altogether then iterating through the user then updating users state, in a way that doesn't require redux or a plugin? Or is there a better way to go about handling this entirely? I'm assuming for sure that I'm being sloppy in getting this done so I'll take any steps in the right direction

.find() returns undefined using JSON data, using node.js

I'm creating a server using node and want to output JSON data, when a specific ID is clicked.
I've set up a dynamic URL which will pull the data from the clicked video using params and then compare it with the one from the JSON data, using .find()
When I log out the "req.params.id" I get the clicked ID. However, when I log out the .find() function it just gives me an undefined.
const selectedVideoData = fs.readFileSync("./data/video-details.json");
app.get("/videos/:id", (req, res) => {
const id = req.params.id;
const findClickedId = selectedVideoData.find((video) => video.id === id);
res.send(findClickedId);
});
[
{
"id": "84e96018-4022-434e-80bf-000ce4cd12b8",
"title": "BMX Rampage: 2021 Highlights",
"channel": "Red Cow",
"image": "https://i.imgur.com/l2Xfgpl.jpg",
"description": "On a gusty day in Southern Utah, a group of 25 daring mountain bikers blew the doors off what is possible on two wheels, unleashing some of the biggest moments the sport has ever seen. While mother nature only allowed for one full run before the conditions made it impossible to ride, that was all that was needed for event veteran Kyle Strait, who won the event for the second time -- eight years after his first Red Cow Rampage title",
"views": "1,001,023",
"likes": "110,985",
"duration": "4:01",
"video": "https://project-2-api.herokuapp.com/stream",
"timestamp": 1626032763000,
"comments": [
{
"id": "35bba08b-1b51-4153-ba7e-6da76b5ec1b9",
"name": "Micheal Lyons",
"comment": "They BLEW the ROOF off at their last event, once everyone started figuring out they were going. This is still simply the greatest opening of an event I have EVER witnessed.",
"likes": 0,
"timestamp": 1628522461000
},
{
"id": "091de676-61af-4ee6-90de-3a7a53af7521",
"name": "Gary Wong",
"comment": "Every time I see him shred I feel so motivated to get off my couch and hop on my board. He’s so talented! I wish I can ride like him one day so I can really enjoy myself!",
"likes": 0,
"timestamp": 1626359541000
},
{
"id": "66b7d3c7-4023-47f1-a02c-520c9ca187a6",
"name": "Theodore Duncan",
"comment": "How can someone be so good!!! You can tell he lives for this and loves to do it every day. Every time I see him I feel instantly happy! He’s definitely my favorite ever!",
"likes": 0,
"timestamp": 1626011132000
}
]
},
{
"id": "c05b9a93-8682-4ab6-aff2-92ebb4bbfc14",
"title": "Become A Travel Pro In One Easy Lesson",
"channel": "Todd Welch",
"image": "https://i.imgur.com/5qyCZrD.jpg",
"description": "Luxury is something everyone deserves from time to time. Such an indulgence can make a vacation a truly rejuvenating experience. This video will focus a lot on helping the first time or inexperienced traveler head out prepared and confident in themselves.",
"views": "2,043,765",
"likes": "400,058",
"duration": "7:26",
"video": "https://project-2-api.herokuapp.com/stream",
"timestamp": 1625158995000,
"comments": [
{
"id": "ade82e25-6c87-4403-ba35-47bdff93a51c",
"name": "Mattie Casarez",
"comment": "This is exactly the kind of advice I’ve been looking for! One minute you’re packing your bags, the next you’re dancing around in the streets without a care in the world.",
"likes": 0,
"timestamp": 1625250720000
},
{
"id": "bf704c76-cba9-462e-ac0a-166315df756c",
"name": "Taylor Jade",
"comment": "Excellent tips! Another idea is to keep all of your important belongings like your passport inside a waterproof bag. Perfect for those last minute trips to the beach, trust me.",
"likes": 0,
"timestamp": 1625238122000
},
{
"id": "ec2bec8d-ea2b-458e-9d93-b7f929a8659b",
"name": "Adnan Natt",
"comment": "Who ever knew travel could be so easy? Looking forward to getting to put this into practice when I fly away in the near future. Wish me good luck!",
"likes": 0,
"timestamp": 1625177192000
}
]
}
]

You need to parse json since fs.readFileSync return string
const rawSelectedVideoData = fs.readFileSync("./data/video-details.json");
const selectedVideoData = JSON.parse(rawSelectedVideoData)
app.get("/videos/:id", (req, res) => {
const id = req.params.id;
const findClickedId = selectedVideoData.find((video) => video.id === id);
res.send(findClickedId);
});

fs.readFileSync returns a string and an object literal, so .find shouldn't work at all.
Try instead:
const selectedVideoData = require("./data/video-details.json");

If the array you posted is the exact response you get from const selectedVideoData = fs.readFileSync("./data/video-details.json"); then make sure that id from const id = req.params.id; is a string and it should work. I have tested it on my end and it works perfectly. Though I've subbed const id = req.params.id; for const id = "84e96018-4022-434e-80bf-000ce4cd12b8"; which is the first element in your array as I don't have access to your server and it works.

Try this one:
const selectedVideoData = require("./data/video-details.json");
app.get("/videos/:id", (req, res) => {
const id = req.params.id;
const findClickedId = selectedVideoData.find((video) => video.id === id);
res.send(findClickedId);
});

How to add specified images for buttons clicked in java script node/html?(I am new)

I am having troubles in adding images to my adventure game.
I am doing this for school. I got the information down, but I am stuck in trying to add specific images so they can show up once I press the button to progress the story.
Sorry if how I describe my problem comes across confusing...
The code shows up fine. All I want to do is add some images to my game.
Here's a link to the code, and here's the script within the HTML. I am not sure if I am doing it right.
EDIT:: (UPDATED LINK TO JSFIDDLE)
fiddle
var db = [
{
"question": "<br><b> From where he stands, there is a door way. To the left, there is a mirror.</b>",
"answers": [{
"title": "Go through the doorway.",
"response": 1
},
{
"title": "Look into the mirror.",
"response": 2
}
]
}, {
"question": "<b> As he was approaching the doorway, he asked himself: <i> Why Would I want to do that?</i></b>",
"answers": [
{
"title": "Go back.",
"response": 0
}
]
},
{
"question": "<b>The man looks at himself and sees that he appear to be a blue-haired man. For some reason, the man feels unsettled with the reflection that's being projected.</b>",
"answers": [{
"title": "Check pockets",
"response": 3
}]
},
{
"question": "<b>In his pockets there's a wallet, small notebook and a watch. The Watch isn't working, so he puts the watch away. Both of the objects has the name <i> Dimitri Zimmerman </i> written on them. The man now remembers his name.</b>",
"answers": [{
"title": "Check wallet.",
"response": 4
},
{
"title": "Check the note-book.",
"response": 6
}
]
},
{
"question": "<b> Dimitri opened the wallet and quickly figured out as to why he felt this disembodied feeling when faced with the refection. Dimitri's appearance changed entirely. The ID photo presents a more mundane appearance than the demonic appearance that now presents him. Dimitri also finds out he's a Detective by examining his ID.</b>",
"answers": [{
"title": "Check the note-book.",
"response": 5
} ]
},
{
"question": "<b> While putting the wallet back in his pocket, Dimitri began flipping through the pages.</b>",
"answers": [
{
"title": "...How odd",
"response": 6
}
]
},
{
"question": "<b>There appears to be some sort of writing within the pages that Dimitri can't comprehend. Briskly he raffled through the pages to find anything legible.</b>",
"answers": [{
"title": "Keep Looking",
"response": 7
}]
},
{
"question": "<b> Dimitri continue to flip through the illegable pages. On the last page you are able read what's written.</b>",
"answers": [
{
"title": "Read.",
"response": 8
}]
},
{
"question": "<b> Crudely written in red-ink, it read:<br> <i> I have gone beyond than any mortal should, I might lose my mind or something once making contact with the Black Lodge... Remember I am looking for ----- R---. I must not forget why I am here, so I have this notebook to remember if I were to become lost. I must apprehend that murder.</i> Where the name should be displayed, it's the same incoherent scribbles on the pages before.</b>",
"answers": [
{
"title": "Put the note-book away.",
"response": 9
}]
},
{
"question": " <b> After putting the notebook away, Dimitri stepped away from the mirror and looked over to the doorway, still hazed with the details of why he is here. All that Dimitri knows that he's a Detective who's after a murder.</b>",
"answers": [
{
"title": "Leave the room.",
"response": 10
}]
},
{
"question": "<b>To be Continued...</b>",
}];

If you want to add different image for different question, you can modify the json as below.
Can add the individual image path to each json, or can ignore if no need of image for any question.
if(db[currentLocation].img){
document.getElementById("img").src = db[currentLocation].img
}else{
document.getElementById("img").src = ''
}
overall code
function pictureChange() {
document.getElementById("theImage").src = "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}
var db = [
{
"question": "<br><b> From where he stands, there is a door way. To the left, there is a mirror.</b>",
"answers": [{
"title": "Go through the doorway.",
"response": 1
},
{
"title": "Look into the mirror.",
"response": 2
},
]
}, {
"question": "<b> As he was approaching the doorway, he asked himself: <i> Why Would I want to do that?</i></b>",
"img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
"answers": [
{
"title": "Go back.",
"response": 0
},
]
},
{
"question": "<b>The man looks at himself and sees that he appear to be a blue-haired man. For some reason the man feels unsettled with the reflection that's being projected.</b>",
"img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
"answers": [{
"title": "Check pockets",
"response": 3
}]
},
{
"question": "<b>In his pockets there's a wallet, small note-book and a watch. The Watch isn't working, so he puts the watch away. Both of the objects has the name <i> Dimitri Zimmerman </i> written on them. The man now remembers his name.</b>",
"answers": [{
"title": "Check wallet.",
"response": 4
},
{
"title": "Check the note-book.",
"response": 6
},
]
},
{
"question": "<b> Dimitri opened the wallet and quickly figured out as to why he felt this disembodied feeling when faced with the refection. Dimitri's appearance changed entirely. The ID photo presents a more mundane appearance than the demonic appearance that now presents him. Dimitri also finds out he's a Detective by examining his ID.</b>",
"answers": [{
"title": "Check the note-book.",
"response": 5
},]
},
{
"question": "<b> While putting the wallet back in his pocket, Dimitri began flipping through the pages.</b>",
"answers": [
{
"title": "...How odd",
"response": 6
},
]
},
{
"question": "<b>There appears to be some sort of writing with in the pages that Dimitri can't comprehend. Briskly he raffled through the pages to find anything legable.</b>",
"answers": [{
"title": "Keep Looking",
"response": 7
},]
},
{
"question": "<b> Dimitri continue to flip through the illegable pages. On the last page you are able read what's written.</b>",
"answers": [
{
"title": "Read.",
"response": 8
},
]
},
{
"question": "<b> Crudely written in red-ink, it read:<br> <i> I have gone beyond than any mortal should, I might lose my mind or something once making contact with the Black Lodge... Remember I am looking for ----- R---. I must not forget why I am here, so I have this note-book to remember if I were to become lost. I must apprehend that murder.</i> Where the name should be displayed, it's the same incohearent scribbles on the pages before.</b>",
"answers": [
{
"title": "Put the note-book away.",
"response": 9
},
]
},
{
"question": " <b> After putting the note book away, Dimitri stepped away from the mirror and looked over to the doorway, still hazed with the details of why he is here. All that Dimitri knows that he's a Detective who's after a murder.</b>",
"img": "http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png",
"answers": [
{
"title": "Leave the room.",
"response": 10
},
]
},
{
"question": "<b>To be Continued...</b>",
},
];
var currentLocation = 0;
window.printCurrentLocation = function () {
document.getElementById("question").innerHTML = db[currentLocation].question;
debugger;
if (db[currentLocation].img) {
document.getElementById("img").src = db[currentLocation].img
} else {
document.getElementById("img").src = ''
}
var answers = "";
for (var i = 0, l = db[currentLocation].answers.length; i < l; i++) {
answers += "<p><button onclick='setLocation(" + db[currentLocation].answers[i].response + ")'>" + db[currentLocation].answers[i].title + "</button></p>";
}
document.getElementById("answers").innerHTML = answers;
}
window.setLocation = function (num) {
currentLocation = num;
window.printCurrentLocation();
}
window.printCurrentLocation();

Get the list of users that liked a post

A friend of mine decided to run a sweepstakes on Instagram without giving much thought to how to get the full list of users that liked a post. He's saying he can just pick a random user from the available/visible list, but that wouldn't be fair, so I decided to step in.
The post in question, currently, has 1.4k likes.
First, I created a tiny script in JS to view, scroll down (to populate the list) and finally get the users that liked the post. This was troublesome to create, but it works. Then I realized I could not view all the users. While there are 1.4k users, I could only list 675 of them.
In the name of fairness, this is not enough. So I started digging more and examined the HTTP Requests made by the (Instagram) post page to the Instagram Graph API to load more users. This is what the URL looks like:
https://www.instagram.com/graphql/query/?query_id=SOME_ID&variables={\"shortcode\":\"SHORTCODE\",\"first\":20}
When I make a request to this URL, I get the following:
{
"data": {
"shortcode_media": {
"id": "SOME_ID",
"shortcode": "SHORTCODE",
"edge_liked_by": {
"count": 675,
"page_info": {
"has_next_page": false,
"end_cursor": "AQBPkM1xm2XgBx8ZQ8lR6GDsFAvQBx_Eqxg2NnTXN-GUPGhlpUa9_10UoMcJ6xNcIH4"
},
"edges": [{
"node": {
"id": "", // value omitted intentionally
"username": "", // value omitted intentionally
"full_name": "", // value omitted intentionally
"profile_pic_url": "", // value omitted intentionally
"is_verified": false,
"followed_by_viewer": false,
"requested_by_viewer": false
}
},
...
There's this ["edge_liked_by"]["count"] property and it is set to 675. I'm guessing this is a server-side restriction. When I increase the "first" parameter in the URL and make it greater than 675, it still returns 675 users.
Can I overcome this restriction and get the full list in any way?
Update: I've just tried the same thing with comments. The post has 11.8k comments and this is what the request returns:
{
"data": {
"shortcode_media": {
"edge_media_to_comment": {
"count": 11809,
"page_info": {
"has_next_page": true,
"end_cursor": "AQBV53OxNFkaHwJ6xjgHmlI-hwtpHCEeButMmGLwZJ_sjdyUy49gY_WZo1iH_aRcuAFOCzfrKPEktMaQLRjFVAsmQTincJpr4ZTITbTT1BZkJQ"
},
"edges": [{
"node": {
"id": "",
"text": "",
"created_at": ,
"owner": {
"id": "",
"profile_pic_url": "",
"username": ""
}
}
},
...
The exact count of the comments is 11809 and the request listed first 10259, but there's a next page. So I requested the next page and this is it:
{
"data": {
"shortcode_media": {
"edge_media_to_comment": {
"count": 11809,
"page_info": {
"has_next_page": false,
"end_cursor": null
},
"edges": [{
"node": {
"id": "",
"text": "",
"created_at": ,
"owner": {
"id": "",
"profile_pic_url": "",
"username": ""
}
}
},
...
This time it didn't return the remaining 1550 (11809 - 10259) users, but just 356 of them. And there's no next page. So there seems to be some inconsistencies. (Perhaps, there's a privacy issue that prevents some users to be listed?)

Defining relation between models in loopback application

I am working on an app using loopback .
Need help and suggestions on models relationship and role.
Multiple organisations
An organisation have multiple admin and multiple user.
I'm using relation like
Organisation hasMany. User
User belongs to organisation
Created a admin role.Don't want use $owner because in future may owner is not available.
created two models users and organization
How can I list all user belongs to a organisation.
How to differentiate b/w Admins/Users of different org.
Do I have to create custom filter for that?
//user.json
"properties": {
"email": {
"type": "string",
"required": true
}
},
"validations": [],
"relations": {
"organization": {
"type": "belongsTo",
"model": "Organization",
"foreignKey": "orgUserId"
},
"templates": {
"type": "hasMany",
"model": "Template",
"through": "Share"
}
}
}
//organization.json
"properties": {
"name": {
"type": "string"
}
},
"validations": [],
"relations": {
"users": {
"type": "hasMany",
"model": "user",
"foreignKey": "orgUserId",
"properties" :{
"name": "realm"
}
},
"templates": {
"type": "hasMany",
"model": "Template",
"through": "Share"
}
},
Please help.
Thanks

How can I list all user belongs to a organization ?
Since you've defined User belongsTo and Organization hasMany relationship you could simply make the following request :
GET api\Organization\{ID}\users
How to differentiate b/w Admins/Users of different org.`
First you should setup admin and team member (for instance) roles, then check in a role resolver script (example) that any user with admin role for a given organizationID is well indeed trying to make admin operation for that organization and not an other.
This is well documented in there
https://docs.strongloop.com/display/public/LB/Defining+and+using+roles
You should also check and study all this github repository, it has most of the information you're looking for:
https://github.com/strongloop/loopback-example-access-control