Translations with Laravel and Inertia
This episode is for members only

Sign up to access "Translations with Laravel and Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
05. Storing the chosen language in a session

Episodes

0%
Your progress
  • Total: 57m
  • Played: 0m
  • Remaining: 57m
Join or sign in to track your progress

Transcript

00:00
There are two steps now to setting the actual language within our application. And that is the first one, when we change this, we want to go ahead and send a
00:08
request to our backend to set the value that we've just selected within this dropdown, within a session. And then we're going to need some middleware that makes sure that every time we have a request to our application, the correct locale or
00:22
language is set globally for our app. So in this episode, we're going to work on sending a request through to the backend, when we choose one of these options, and then we're going to work on that middleware, which will set this.
00:36
And we're going to test both of these things as well. So the first thing that we're going to do, we'll write the test afterwards. We're going to make out a controller here. And we're going to call this language store controller.
00:48
You can call this whatever you want. So let's go over to our web routes and create this out. We'll just do this under our dashboard here. So we're going to make a post request through to slash language.
00:59
We're going to reference that language store controller. And let's give this a name as well. So we can reference it over on the client and we'll just call that language dot store.
01:10
Okay. So what we want to happen here, if we just create out an invoke magic method in here and die dump store. When we change one of the options over here, we want that to make a request
01:23
through to this end point just here. So how do we do this? Well, over in our authenticated layout, we've got our selected. It's not a form and we don't really want a form because we don't want the users
01:32
have to manually click a submit button. What we do want to do is create a V on change in here. And we want to send a request using inertia's router through to our backend to make a request here.
01:44
So for this, we need to go ahead and make sure that our inertia router is imported. So the only change we need to add here is also import router from inertia JS view three. So let's go down to our language selector here. And we're going to say router host, of course, through to that language end point.
02:02
Now we gave this a name earlier and using Ziggy, we can just use the route helper and say language store. So if you ever change the name of that end point, of course, that's still going to work. Now this isn't good enough because of course we need to actually send
02:15
the language that we have chosen down. So as the second argument to this, this is the data that we want to send down with this. So if we go ahead and choose the language in here, where is this coming from? Well, it comes from the event and from this, we can go into the target.
02:31
The target is the select itself. Then we can grab the value of the select. So when we change this from English to German, this will be DE because the thing that we are, have this event on has a value of DE and the same with EN and
02:44
any other languages that you choose. So this should now work. Let's go ahead and select German. And sure enough, we get died up to store.
02:52
We can just improve our kind of manual testing here by grabbing the actual value that we take down from the request. So we can go ahead and say request and language, which we called here. And let's go ahead and change this to German.
03:08
And then we go, we get DE. Let's change this back to English and we get EN. Great. So we've got both of them values.
03:14
We know that that is working. So what do we want to do inside of this controller? Well, the first thing I'm going to do is just return back. That's going to probably handle our inertia request here, but in here,
03:23
we just want to set a session value. So for this, we're going to say session and put, and we're going to add this into a key. I'm just going to call this language.
03:32
And here we want to grab that value. Now we don't really want to go ahead and say request language, because technically this value could be anything. We could go ahead and validate this and you can validate that
03:45
something exists within enum. But what I'm going to do here is I'm going to kind of bypass that and I'm going to use our enum and I'm going to say try from, so we already looked at the from method within enum, try from will return a null value if this doesn't exist.
04:00
So we can grab that language from there. Let's say language. And that's going to be EN DE or something that doesn't exist. If it doesn't exist, then it's not going to give us back a value.
04:14
It's going to give us back a null value. So what we can do in here is we can say, well, if we try this and we don't end up with a value that we want, we can just go ahead and say config app locale, and let's just make sure we add in a null safe here as well, just so if this doesn't work and
04:34
we get a null back, then value just doesn't exist. So we'll add tests to cover this. But basically now what's happening is we are making sure that the language that we get set actually comes from this enum.
04:45
Like I said, you can use validation, but I find it a little bit easier to do this all in one line and then just default really nicely to the default locale or the locale that's currently selected. So if we just go ahead and switch this like so, nothing really changes.
05:01
We give this page a refresh. Nothing has changed whatsoever, but we can write a test just to make sure that this is putting the correct value in based on what we've chosen. So let's go ahead and create our test for this.
05:11
So let's say PHP artisan pest test. Let's just call this language test. And we will make this obviously not a unit test. It's going to be a feature test.
05:19
So let's go over to that language test over in features and let's go and write our first test. So we'll say sets the language correctly. So we'll make sure that whatever we pass down to this endpoint, remember
05:35
this is a post endpoint actually get set. So we will choose to pass down a language here of DE, and let's just go ahead and set that to a language variable so we can reference it later on down here. And we want to assert that the status.
05:54
Now this is a tricky one because we are hitting an endpoint that redirects us back, the status is actually going to be a 302 we can change that over, or we can just ignore it. Of course, with inertia, it's just the way that this works, where
06:05
we've always redirected back. So, uh, as well as a saying that the status is 302, we want to assert that the session has under the language key, the value of the language that we've just set, that is pretty much it.
06:20
Let's pull these two things down. Let's run this and see how we get on. So let's run pest tests and feature and language test. And that pass is great.
06:32
Obviously, if we were to change this over to something that wasn't correct, it's going to fail. So we know that that is now successfully setting that language. So next up, we can just duplicate this whole test down.
06:45
We want to make sure that it sets the default language. If the chosen language is invalid. So we want to pass down a language here and we can get rid of this language variable, let's say Spanish.
07:03
And in here we want to make sure that the session contains EN because that's how default locale. We could even reference this from config just to make this a little bit less brittle so we can say app locale and that should be good.
07:19
So if we pass down one that doesn't exist, this should set it to EN by default. Let's go ahead and rerun that test. And there we go. Sure enough, it's green.
07:26
So that pretty much sums up how we initially set this, but now we need to do something with this within middleware. So for every request, it actually sets the current locale to the one that we have contained within that long running session.

Episode summary

In this episode, we focus on making language selection in our app actually work long-term by connecting it to the session. When a user chooses a different language from the dropdown, we want that choice to "stick" by storing it in the session rather than just updating things on the client.

Here's what we do step by step:

  • First, we set up a new backend route and controller that accepts a POST request when the language is changed in the UI. We use Inertia's router to send this change from Vue to Laravel.
  • In the controller, we make sure that only allowed language values (from our enum) are saved to the session. If the language is invalid, we fall back to the app's default.
  • We write tests to make sure this all works: one test for valid language changes, one for when the user tries to select something invalid (like Spanish, if that wasn’t an option). The tests check that the session is getting the correct value each time.

By the end of this episode, we have the language preference saving to the session reliably, and we’re ready to move on to the next step: hooking up middleware so every request uses the user's chosen language.

Episode discussion

No comments, yet. Be the first!