From @jayair on Mon Apr 10 2017 01:06:33 GMT+0000 (UTC)
Link to chapter - http://serverless-stack.com/chapters/call-the-list-api.html
Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/52
From @johnkorzhuk on Sat Apr 22 2017 21:11:49 GMT+0000 (UTC)
Isn’t it an antipattern to fetch data in componentWillMount? In this issue tracker, at least from my understanding, people agree that it’s discouraged: https://github.com/facebook/react/issues/7671
On top of which, if my memory serves me correct in React 16, cwm may be called multiple times.
From @jayair on Sat Apr 22 2017 22:28:38 GMT+0000 (UTC)
You are right. I’ll go through and update it. Thanks for pointing it out.
From @jayair on Sat Apr 22 2017 23:13:26 GMT+0000 (UTC)
@johnkorzhuk updated - b3984640a56c4b01b7f66d9c5505599b5831d671
From @ryanjcruz on Mon May 15 2017 03:14:50 GMT+0000 (UTC)
Odd, I’m getting a 502 when trying to load the notes
Fetch API cannot load https://u1wagfic06.execute-api.us-west-2.amazonaws.com/prod/notes. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 502. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Do we need to have Chrome’s CORS disabled?
From @jayair on Mon May 15 2017 17:26:58 GMT+0000 (UTC)
@ryanjcruz I don’t think so. This is saying that the API is not returning the Access-Control-Allow-Origin header. Check out this thread, it might help you find the issue - https://github.com/AnomalyInnovations/serverless-stack-com/issues/56#issuecomment-297721513
From @rogueturnip on Mon May 15 2017 18:37:10 GMT+0000 (UTC)
Just want to clarify something in case I’m missing something. Because userToken is passed through props when I do a reload on the homepage the userToken is now null and thus the note list won’t render.
I’m guessing I can’t just add userToken to state because the Login component state will be different than Home. Is this a good use case for Redux?
Thanks!
From @jayair on Mon May 15 2017 21:44:14 GMT+0000 (UTC)
@rogueturnip the userToken is indeed passed through the props and it starts off as null. But when the page is reloaded we get the user token from local storage (this is handled by the AWS JS SDK) and update our components with it. You can see this code here - https://github.com/AnomalyInnovations/serverless-stack-demo-client/blob/call-the-list-api/src/App.js#L38. This means that the note list should render on reload.
There is however a case for redux in the app. If for example you navigate to the create note page from the note list and you hit the browser back button; the note list reloads it’s data from the API. This is because the component (and it’s state) is unmounted when the route changes. If we were storing the note list in redux separately, then we can simply initialize our component with the state from redux.
Let me know if that makes sense.
From @ryanjcruz on Mon May 15 2017 22:23:46 GMT+0000 (UTC)
@jayair Thanks for the link! Turns out the arn property under authorizer in server.yml for list API isn’t indented correctly like what was mentioned there. Will deploy this again with the fix.
From @rogueturnip on Tue May 16 2017 15:02:39 GMT+0000 (UTC)
@jayair Thanks! I must have something in there wrong. If this was using redux, would it be appropriate to store the whole user detail from Cognito this way? I was thinking of trying to set this up and better learn redux. I could hold all the tokens and also fetch details about the user to hold locally.
From @jayair on Tue May 16 2017 17:12:13 GMT+0000 (UTC)
@rogueturnip Yeah I would do it that way. Everything that we store in the component’s state would go into Redux.
From @rogueturnip on Thu Jun 08 2017 15:35:07 GMT+0000 (UTC)
I was doing some more work on this and using not just Redux but also localStorage is a good idea for tokens. This way the login state persists through browser restarts, if that’s important.
From @jayair on Thu Jun 08 2017 15:47:23 GMT+0000 (UTC)
@rogueturnip Currently, the AWS JS SDK does the localStorage bit for you. That is how we make the login state persist in the demo app. But you can decide to do it on your own as well.
From @designpressure on Thu Sep 21 2017 13:20:11 GMT+0000 (UTC)
I’m facing with a strange behaviour on notesId. Currently i’m retrieving the list of notes properly (can be seen by console.log(notes) but it does not render href and key… as a result I don’t have a link to the note (but if I manually write on the browser bar the link notes/xxxxxx will work perfectly):
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Home`. See https://fb.me/react-warning-keys for more information.
in ListGroupItem (at Home.js:45)
in Home (at AppliedRoute.js:5)
this is my home.js
renderNotesList(notes) {
console.log(notes);
return [{}].concat(notes).map(
(note, i) =>
i !== 0
? <ListGroupItem
key={note.noteId}
href={`/notes/${note.noteId}`}
onClick={this.handleNoteClick}
header={note.content.trim().split("\n")[0]}
>
{"Created: " + new Date(note.createdAt).toLocaleString()}
</ListGroupItem>
: <ListGroupItem
key="new"
href="/notes/new"
onClick={this.handleNoteClick}
>
<h4>
<b>{"\uFF0B"}</b> Create a new note
</h4>
</ListGroupItem>
);
}
any clue about this matter?
From @jayair on Fri Sep 22 2017 01:08:18 GMT+0000 (UTC)
@designpressure It could be the format notes are in. What does console.log(notes) show?
From @designpressure on Fri Sep 22 2017 09:36:17 GMT+0000 (UTC)
```
[{…}]
0 :
attachment : null
content : “new note 1”
createdAt : 1505999501488
notesId : “68af9b00-9ece-11e7-gggg-eeeeee”
userId : “eu-central-1:xxxx-yyy-zzz-www-ffff”
From @jayair on Fri Sep 22 2017 20:55:05 GMT+0000 (UTC)
@designpressure I’m not sure if it’s a typo but the returned data has notesId but in the code we look for noteId.
From @designpressure on Mon Sep 25 2017 07:32:50 GMT+0000 (UTC)
Oops, I’ve used throughout the examples notesId instead of noteId… solved, thanks
From @x11joe on Fri Nov 10 2017 09:33:07 GMT+0000 (UTC)
The only thing confusing for me in this chapter is this line.
return [{}].concat(notes).map(
If I understand correctly you need to return an array of objects so it can show the notes, but why is concat method needed? couldn’t we just use map without concat?
From @jayair on Fri Nov 10 2017 19:32:03 GMT+0000 (UTC)
@x11joe It’s a bit of a trick I guess. We want to display the Create a new note button as the first item on the list. So we always start with an array with one empty item in it. Inside the map we treat the item at index 0 as a special case and render a button.