Skip to main content

· 3 min read
Peter Dyer

All the way back in post 1 (Dev setup) in this blog series I talked about types and I said I was not going to use prop-types. I've had a change or heart, when working on the previous post (State Login) I ran into an issue that would have been easily found had I been using prop-types. So, as an agile, pragmatic developer I always reserve the right to change me mind and I will be using prop-types going forward.

· 6 min read
Peter Dyer

Back in Part 7 we blew away our initial testing strategy and decided to move forward with react-testing-library (and jest-dom). In part 10 we wrote tests to confirm our auth library works as expected where we leveraged Jest directly as we were not testing any parts of React. In this post we will start to create tests for the React components we built in the previous post where we created the login, register and forgot password pages in our application.

· 8 min read
Peter Dyer

In this post we will finally start bringing our application to life. We will create a handful of the pages that our application will use. I want to create (update) the user registration, login and forgot password pages. You may recall that those are all of the pages that can be accessed without logging in to our application.

A key part of what we will create in this post will leverage a library called Formik. I am a big fan of Formik, it reduces a tremendous amount of the boilerplate required by forms. Using libraries like Formik is a cornerstone to my development philosophy - don't be precious about code, if there is a good library available that will save time, use it. Formik can be integrated with another library called Yup which provides field level validation.

· 5 min read
Peter Dyer

We will continue from where we left off in the last post. We setup some basic navigation. In this post we will explore how to adjust navigation based on who is logged in - a regular user or and administrator.

Our menus will only be seen once a user has logged in. This is, if a user is not logged in they will have access to the login, register and forgot password screens and nothing else. We will create two different sets of routes depending on whether a user is logged in, and, if logged in, we will wrap our routes in a container that holds our top level navigation.