implemented front-end for contacts page

[rgao]

#447

• Created contacts page according to wireframe on Figma
• Includes a small adjustment for responsiveness for mobile-sized screens
• Includes input validation, though needs to be more specific for email

I pushed my backend file for dealing with the github API as well, though it's useless for now. I'm also looking into integrating Sanic's email sending package.

@adamkendis @jmensch1

Here's what most of the page looks like on my localhost

[rgao]

Alright so I got a ton of linting errors for my jsx files. It seems like I don't have the linting software for front-end installed...

[jmensch1]

hey @rgao, you just need to run npm run lint and it will tell you how to fix the linting errors

[rgao]

fixed the linting errors

[adamkendis]

Looks good, just a few small changes.

[rgao]

Alright, did all of the above @adamkendis

Minor annoyance: my input validation checks for only if the fields have input, For email, HTML5 natively checks the email format, but I'm not sure how to integrate that into a conditional in js

[adamkendis]

Looks good @rgao . We can beef up the validation or use some validation library before launch if necessary. Okay to update this branch with latest dev so I can merge?

[rgao]

Alright, updated

[adamkendis]

Going to hold off on merging for now. I pushed the github code in PR #481 . Could you finish up the form to send the data to /feedback? The request body should look like:

{
"title": "test-email@fakeemail.com",
"body": "First Name: John\nLast Name: Doe\nEmail: test-email@fakeemail.com\nAssociation: Something or Not Provided\nMessage: Message content goes here."

}

We're also using redux-saga to make all of our calls at the moment. We don't necessarily need to store the form data in redux, but it would be ideal to make the axios call to /feedback via redux-saga since we're handling errors with redux. Could you take a look and see if this is doable?

[rgao]

@adamkendis @sellnat77
OK I pushed the redux code for contacts. It's my first time dealing with redux so it probably has errors or inconsistencies in it. Could you please take a look at it?

[adamkendis]

Hey Ryan, left a few comments. Thanks!

[jmensch1]

hey @rgao, one other thing. Sorry to ask for more work, but it's pretty easy.

Right now all of the styles in .contactform.scss file will apply globally, because they aren't nested within anything. So you'll end up affecting the styles of every input, label and textarea in the entire frontend.

All you need to do to avoid that is nest all of the styles in that file under the .form-container class, and then the styles will only apply to elements within that div. And maybe rename .form-container to something more specific, because that's a pretty generic name and if anyone else tried to use it they'd be getting all of your styles.

[rgao]

Alright, working on all these changes

[sellnat77]

i defer to @jmensch1 and @adamkendis haha i looked it over though, once they approve we can merge this in

[brodly]

The comparison tool made a lot of changes so once you resolve your merge conflicts we can push this to dev and catch any issues during QA.

[rgao]

there are two linting errors but that's due to my linting dependencies being broken

parseForESLint from parser /home/xin/code/projects/311-fork/node_modules/babel-eslint/lib/index.js

Seems like there's a dependency conflict

[rgao]

Alright that's my final push for tonight. @adamkendis The linting issues should be solved; I think it's better if you take over any potential problems with redux here

[adamkendis]

@brodly @jmensch1 @sellnat77 @rgao
The Contact page is finished. A few things:

• Fixed contact form stylesheet so we shouldn't have unintentional global styles.
• Added loader, error display, and success message display to contact form.
• Added email validation.
• Back end: fixed feedbackService error handling. I wasn't properly returning the errors to the client, so the browser would get a 200 even on error.

Review re-requested.

[jmensch1]

that's some bad-ass error handling