Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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