Add the Create Note Page

From @jayair on Mon Apr 10 2017 01:05:29 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/add-the-create-note-page.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/47

From @ScottMTravers on Tue May 02 2017 17:48:44 GMT+0000 (UTC)

Iā€™m having an issue updating the disable attribute to ā€˜falseā€™ on the ā€˜createā€™ button once I type in a few characters into the text field or upload a file. My NewNote.js is identical to the one in the tutorial. Iā€™ve tried multiple times going through the tutorial steps after resetting to a past commit, but to no avail.

Hereā€™s a couple screenshots (First - no text, Second - test note):


From @jayair on Wed May 03 2017 00:28:58 GMT+0000 (UTC)

@ScottMTravers just to make sure, are there any errors that are showing up in the browser console? Also, what browser & OS combo are you on?

From @ScottMTravers on Wed May 03 2017 00:52:02 GMT+0000 (UTC)

Using Chrome & Mac OSX 10.11.

Hereā€™s the error showing up in my console:
Uncaught Error: addComponentAsRefTo(ā€¦): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a componentā€™s render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

From @ScottMTravers on Wed May 03 2017 17:01:40 GMT+0000 (UTC)

Fixed the issue.

My notes-app-client was located inside the root directory of my notes-app-api instead of a separate project folder.

From @jayair on Wed May 03 2017 19:41:49 GMT+0000 (UTC)

@ScottMTravers Oh! Itā€™s a bit of a gotcha. We should make that clear when we start the frontend portion. Thanks for reporting back.

From @walshe on Thu Mar 01 2018 18:12:27 GMT+0000 (UTC)

why does handleSubmit need event.preventDefault ? isnt it only a regular button action that needs this really ?

From @jayair on Thu Mar 01 2018 20:52:21 GMT+0000 (UTC)

@walshe In this case it is a submit button. You could skip it. But if you had another field that you could ā€œenterā€ to submit then youā€™ll need it.

From @nuyulcore on Wed Mar 28 2018 13:01:12 GMT+0000 (UTC)



Hello, I got this error, when I try to post my notes.

From @jayair on Wed Mar 28 2018 15:12:59 GMT+0000 (UTC)

@mbahfauz Are you logged in?

Thanks so much for this amazing tutorial. Iā€™m new to JavaScript and React and Iā€™ve already learned a ton. Love your attention to detail and to getting a real-world example up and running as opposed to only creating toy projects.

Iā€™d like to propose a small improvement for NewNote.js. Iā€™d suggest replacingā€¦

alert("Please pick a file smaller than 5MB");

withā€¦

alert(`Please pick a file smaller than ${config.MAX_ATTACHMENT_SIZE/1000000} MB.`);

That way our maximum attachment size alert dialogue will directly represent the file size limit thatā€™s been set in config.js. So if we decide to change it later, all we need to adjust is the MAX_ATTACHMENT_SIZE value in config.js.

Does that make sense?

2 Likes

Ah good catch. Thanks for the heads up.

Hi, I got stuck at the create note step.
When I submit the form I get this error in the console:

Failed to load https://xxx.execute-api.us-east-1.amazonaws.com/dev/notes: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. The response had HTTP status code 403.

If I inspect the request, I can see that the response is ā€œMissing Authentication Tokenā€.

I think the problem is that I donā€™t want authenticated users to save notes.
How can I make it so everyone can create a note, without being logged in?

Thanks!

1 Like

Answering your other thread.

Iā€™ve created the projects twice and reviewed every line of code many times over. However, I am constantly hitting a network error when trying to create the note in the react app. Creating through terminal works fine and Dynamo has my notes. When viewing the js console, it reports 3 403 errors (attached) but I can not find anything different in my code, other than calling it todo instead of note. All my yml functions have cors: true and the response-lib.js has the headers:

ā€œAccess-Control-Allow-Originā€: ā€œ*ā€,
ā€œAccess-Control-Allow-Credentialsā€: true

as specified. Can anyone help?

Just replying here in case, have you added it to your Identity Pool IAM?

    {
      "Effect": "Allow",
      "Action": [
        "execute-api:Invoke"
      ],
      "Resource": [
        "arn:aws:execute-api:YOUR_API_GATEWAY_REGION:*:YOUR_API_GATEWAY_ID/*/*/*"
      ]
    }

Thanks for the reply, and love the tutorial and community! That helped track it down. I was focused on the code and not the policy. I had an extra character in the gateway ID.

1 Like

Glad you figure it out!

Authenticated and Unauthenticated Routes. Iā€™m assuming those are associated with the Authenticated and Unauthenticated Groups. My question is, is there a way to implement Groups within Cognito that are linked to routes directly or indirectly? Could this be something that goes into extra credit?

Hmm this might be bad naming but they arenā€™t related. The routes we created are just for convenience. Iā€™m not entirely sure if we can create ones that are linked somehow. Iā€™d have to look into it.