Notes

[sbullocks]

JWT Authentication - STATE 18.. TypeDefs and Resolvers for GraphQL.. - STATE 18.. MERN.. Mutations.. React Forms and Hooks.. PWA..

[sbullocks]

PWA - Lesson 19.

Webpack Intro, Bundle, Loader, Plugin, HMR, Client Server, Workbox Service Workers, Inject Manifest, Indexed DB, CRUD, Manifest = Progressive Web Application.

• I dont think we need GIT Hooks.

[sbullocks]

JWT Authentication - Lesson 21 (MERN).

Activity 22 has code with comments explaining this. Activity 24 - I want to log in to the application and remain logged in.

auth.js file - Create JSON Web Token (Server-side) We require jsonwebtoken on top. We create a JWT secret and an expiration. We export the signToken() function that takes in a user object and adds the email, name, and _id properties to the token, along with the secret and expiration.

resolvers.js file - If email and password are correct, sign user into the application with a JWT.

[sbullocks]

TypeDefs/Resolvers & Mutations - Lesson 21 (MERN).

TypeDefs.js file - Define which fields are accessible from the Class model. Define which queries the front end is allowed to make and what data is returned.

Resolvers.js file - Create the functions that fulfill the queries defined in typeDefs.js. Get and return all documents from the classes collection.

Mutations - index.js file - import { useMutation } from '@apollo/client'; Set up our mutation with an option to handle errors. On form submit, perform mutation and pass in form data object as arguments. It is important that the object fields are match the defined parameters in ADD_THOUGHT mutation.

[sbullocks]

Forms & Hooks - Lesson 20 (React).

Activity 16 for examples with comments. React Forms - practice app and move src folder.. prevent empty input for the email and username fields of a form. improve the user experience by automatically clearing the input fields after the user clicks submit. make the application more robust by adding a password input field. ensure that the email and password provided by the user are valid.

Create state variables for the fields in the form. Setting their initial values to an empty string. Based on the input type, we set the state of either email, username, and password. If everything goes according to plan, we want to clear out the input after a successful registration. Add another input field with a value, name, type, and placeholder of "password". Add a onChange attribute with a value of handleInputChange.

UseEffect() Hook - Activity 18 has example with comments. Use useEffect hook to set the document.title to the current temp.