Session Set

Loading "Adding Toast Notifications to Delete Functionality"

Adding Toast Notifications to Delete Functionality

🦉 The toastSessionStorage object we've created has a few methods on it we'll need to use:

const cookie = request.headers.get('cookie')
const cookieSession = await toastSessionStorage.getSession(cookie)

This will get the session data from the cookie. If no cookie is present, it will create a new session. In either case, that session has a few methods on it we're going to need for this bit:

cookieSession.set('key', 'value')
// objects are serialized automatically
cookieSession.set('tasty', { candy: 'twix' })

Once you've set those values in the session storage, you can create a serialized cookie value out of it using the toastSessionStorage.commitSession method:

const setCookieHeader = await toastSessionStorage.commitSession(cookieSession)

return redirect('/some/url', {
	headers: {
		'set-cookie': setCookieHeader,
	},
})

// this works the same way with `json` and `new Response` as well

Once that's been set in the cookie, you can access it again using the toastSessionStorage.getSession method:

const cookie = request.headers.get('cookie')
const cookieSession = await toastSessionStorage.getSession(cookie)

And then you can use cookieSession.get to get the values:

const value = cookieSession.get('key')

// and values are deserialized for you:
const object = cookieSession.get('tasty')
// { candy: 'twix' }

👨‍💼 Alright, so now let's go to

app/routes/users+/$username_+/notes.$noteId.tsx

and use these APIs to set a toast message.

Once you're done with that, go to

app/root.tsx

to read that value and pass it along to the UI to display it.

Once you're finished with that you should be able to get a toast notification when you delete a note.

Try one of Kody's

02. Session Storage/02. Session Set (💪 problem)

Session Set