Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Authentication!
You have completed React Authentication!
Preview
In this video we’ll practice our cookie manipulation skills by preserving the theme states. We’ll practice how to set a cookie and update the cookie with a new value.
Resources
Check Cookies in Firefox:
- Open developer console by right clicking and selecting Inspect Element
- Go to Storage tab
- Expand the Cookies menu and select "http://localhost:3000"
Check Cookies in Safari:
- Open developer console by right clicking and selecting Inspect Element
- Go to Storage tab
- Click on Cookies
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's get some practice in and
create one more cookie.
0:00
Sign back in and
navigate to the settings route.
0:04
When we update the settings
preferences and reload the page,
0:08
all our settings are reset
back to the default.
0:13
Let's fix that.
0:17
The file ThemeContext.js contains
our states that control the theme.
0:18
We'll start off by importing cookies
with import Cookies from 'js-cookie'.
0:27
We could create three cookies,
one for each thing.
0:36
Instead, we'll create one cookie that
holds the values for all the theme states.
0:39
We'll want to create or update a cookie
each time any of the theme states update.
0:46
A great place to do this is in
the useEffect hook because it runs
0:53
the provided function each time any
state in the dependency array updates.
0:58
Currently, the function passed
to this useEffect hook runs
1:03
every time the isDarkMode and or
fontPercentage states update.
1:09
In the useEffect hook's function,
let's create an object called
1:15
theme which will hold the value
we'll want to store in the cookie.
1:20
In the object, we'll add a property for
each state and set its value to the state.
1:24
So we'll add a property called isDarkMode
and set it equal to the isDarkMode state.
1:31
Since the key and value match,
1:38
we can use the shorthand syntax and
just pass isDarkMode.
1:40
We'll do the same for
the rest of the states and
1:45
add accentColor and
fontPercentage to the object.
1:50
We'll now call Cookies.set() to create
a cookie named defaultTheme and
1:56
set its value to
the stringified theme object we
2:03
just created with JSON.stringify(theme).
2:08
The Cookies.set method not only
creates a cookie, but it also updates
2:12
a cookies value if you provided a name
of a cookie that already exists.
2:18
So for the first time Cookies.set runs,
2:23
it will create a cookie
named defaultTheme.
2:27
And then next time it's called, instead
of creating a cookie named defaultTheme,
2:31
it will update the existing defaultTheme
cookie with the new value.
2:37
Currently, the function pass to useEffect
will only run when there is dark mode and
2:42
or fontPercentage states change.
2:48
But we also wanted to update the cookie
anytime the accentColors the updates.
2:51
So we'll add accentColor
to the dependency array.
2:57
All right, let's save our changes and
test out our code.
3:01
Open up the developer tools and
in Chrome, click the applications tab.
3:06
We can see our defaultTheme
cookie was created.
3:12
Great, let's adjust the settings to
make sure our cookie updates as well.
3:16
I'll turn on dark mode,
update the accentColor to this green,
3:22
and change the font size to 75%.
3:27
I'll refresh the cookies panel and
notice that the value for
3:30
a default theme cookie updated.
3:34
Refreshing the browser however
still resets the theme.
3:36
Let's fix this.
3:41
At the top of ThemeProvider,
will retrieve the value of
3:43
the cookie with
const cookie = Cookies.get("defaultTheme").
3:49
Instead of adding a ternary operator
to each of the used state hooks,
3:55
I'll create an object that will
store the default values or
4:00
the defaultTheme cookies value.
4:05
So first, let's create
a variable called defaultTheme.
4:07
We'll set it equal to a ternary operator
that checks if cookie exists with cookie ?
4:12
If so, defaultTheme will equal the value
of the cookie with JSON.parse(cookie).
4:20
If there isn't a cookie,
4:31
we'll set defaultTheme to an object
that contains all the default values.
4:33
In the object, we'll pass the property
isDarkMode and set its value to false.
4:39
Add the accentColor property and
4:46
copy over the initial value from useState.
4:49
Lastly, add the fontPercentage
property with the value set to 100.
4:54
We will now need to update each
state's initial value to the value
5:00
from our defaultTheme object.
5:05
So the initial value for isDarkMode
will be defaultTheme.isDarkMode.
5:07
AccentColor will be
defaultTheme.accentColor and
5:15
fontPercentage will be
defaultTheme.fontPercentage.
5:20
Now each time the user refreshes
the page or opens the app in a new tab,
5:26
our app first checks if there's
a cookie named defaultTheme.
5:31
If so, the defaultTheme variable
will equal the value of the cookie.
5:36
If the cookie doesn't exist,
then the defaultTheme
5:41
variable will equal an object
with a set of initial values.
5:46
Each theme state's initial
value will equal the value
5:51
in the defaultTheme object.
5:55
Let's save and test our changes.
5:57
Over in the browser,
I'll turn on dark mode,
6:00
set the accentColor to pink,
and change font size to 125%.
6:05
Let's refresh the page and
our theme stayed the same.
6:12
I'll even open the app in a new tab and
it has our same theme.
6:15
Great.
6:21
We can even sign out and see our theme
in the sign up and sign in route.
6:22
You now know how to preserve
a user's authenticated state, and
6:29
theme states across page refreshes
with the help of cookies.
6:33
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up