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
03. Sharing available languages globally

Episodes

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

Transcript

00:00
So the goal of this episode is to share a list of all of the languages that we have defined within this enum in a nice structure that we can use anywhere in our app. Now, we're only going to be
00:10
using this in the header just up here with this dropdown. But of course, when we make this global, it's just going to work on every page. Our dropdown will then be available on any page that we need to switch the language out for. So to do this, we're going to head over to the handle inertia requests middleware. And this is where we can go ahead and share data with all of
00:32
our page components. You can see we've already got a couple here, Auth and Ziggy, which you might already be familiar with if you've worked with inertia. But we're going to add in a new one called languages. And that's going to be an array of all of the languages that we have available. Now, with this, it would be good just to be able to say lang and then cases. Cases is a method
00:54
on PHP enums that allows us to grab all of the cases. We will take a look at that, but then we'll quickly realize that we need a little bit more information. So let's go ahead and just dump this over on our dashboard component just to see what this looks like. To dump this and access this, we just need to go ahead and access the page variable and then props and then languages.
01:18
So let's just see what this gives us. OK, so we've got EN and DE. Now, this isn't ideal because we do need these values, but we also need the labels that are associated with these as well. So really, the best thing to do here would be to create out an API resource since we want some nice structured data for our languages. So we're going to go ahead and create out an API
01:39
resource. So let's make a resource here and let's just call this language resource. And let's open this up here. Language resource. And we're going to go ahead and modify this to give us the data that we need. So let's just set this as an empty array for now. And we're going to head over to handle inertia requests. And we're going to wrap the cases of this, which each of these will actually
02:03
give us back an enum inside of that resource. So language resource. And we're going to have a collection here because we have multiple languages in there. And that is now, of course, at the moment, just going to give us two empty arrays, which is not ideal. But now we can head over to our language resource and we can output the items that we need. So we're going to have a value and
02:23
each of these items now that we're iterating through will be an enum. So we can just say this and value. Value will give us back, if we just head over to our enum here, will give us back this value here. So EN or DE. And then we can just invoke the label method for each of these iterations to give us back the label that we want to see. So let's go ahead and say label and this
02:47
and label. Now we know we've got a nice structure to this that we can actually use. We can use the value as the actual value for each of them options in the dropdown. And of course, we can use the label to display this. I'm just going to go ahead and get rid of the data wrapper here because I don't typically include these within any of my API resources. So we're going to come over to our app
03:07
service provider and inside of the boot method, we're going to reference the JSON resource class and we're just going to say without wrapping. That's going to go ahead and get rid of that data. So we've just got a nice array here within JavaScript now with each of these objects that we can iterate through within our dropdown. Now what we want to do is write a test for this just
03:26
to make sure that we are always sharing the data with our page and we want to make sure that the structure of this is always going to be the same just in case someone or ourselves make a modification to this. So we're going to write a test for this, but this is going to be an inertia specific request. So I'm going to show you an inertia helper that you can use within your test. So let's go ahead
03:47
and say PHP artisan pest test and let's call this language globals test. Of course, you can call that whatever you want. We're not going to make that a unit test. It's going to be a feature test where we hit any of our pages and just make sure that this prop data is available on the page. We know it is here because we've dumped it out on the dashboard, but it doesn't hurt to write a test
04:07
to make sure. So let's go over to the language globals test and in here this doesn't look great at the moment, but let's go ahead and say it contains a list of available languages and let's go ahead and make a request just to the home page. It should be output on every single page. We'll get rid of the status assertion because we don't really need that at the moment and we don't
04:29
need to assign a response here either. So we get the home page and let's just make sure that this works first of all. So pest tests and feature and language globals test and of course we have a risky test because we don't have any assertions. Now to work out whether inertia has shared these props globally or do anything within inertia, we're going to go ahead and use the assert
04:53
inertia method which has been added with the installation of inertia automatically. So we're going to go ahead and create a closure inside of here. Inside of this we get a page which we can type into assertable. I think it is let's find this assertable inertia. So we're going to go ahead and pull that in that will just help our editor show us the available methods here
05:15
and what we need to do here is say from this page that we have here which happens to be the home page, we're going to add to this assertion and say where and then in here we're going to go into if we just open up handler inertial request we're going to go into languages so languages and we can use dot notation here so we can say well the first language that we output should have a value of en
05:37
the second one might have a value of de depending on the languages that we've chosen. Now we need to be really careful here because of course our enum can change and we don't really want that to break our tests so within our tests we're assuming that the first language is going to be english so we can just use that as our kind of test value so we're going to say well for the first language e.g
05:58
at key zero the value should equal en and then we can continue to chain on where we can say languages and the first values label should be english so basically do the props under languages for the first one have en as the value and the second label have english that's pretty much what we're doing just making sure that it contains the structure that we need and also contains the
06:26
actual data and of course that this actually exists in the first place so let's go ahead and just run that test again and sure enough we get that it passes now the problem with this is if we over in our lang change the order of these around like so you'll probably find that it will fail so we're going to make sure we keep en at the top and of course it doesn't really matter we're just really
06:48
asserting this and we can be pretty confident that en is always going to be at the top of the list so there is our test just to make sure we are sharing this data with our pages all of our page components now we can look in the next episode of building up this drop down to actually display these values

Episode summary

In this episode, we tackle the task of making our available languages accessible throughout the entire app. Our end goal is to have a nice, structured list of the languages (with both their code and display label) that we can use globally — for example, to power a language-switching dropdown in the header.

We start by pulling all the language enum cases using PHP’s built-in features, but quickly realize we need more than just their codes (e.g. EN, DE). So, we set up a custom API Resource (a LanguageResource) to format each language as an object with both its value and label, making it much more convenient for use on the front-end.

To keep our shared data from being unnecessarily wrapped inside a data array, we configure our app’s JSON resources to not wrap their responses by default. This gives us a simple, clean array available to our JavaScript.

Finally, to make sure everything’s working (and stays working as things change), we write a feature test. The test checks that the languages are always included as a prop in our Inertia pages, and that they’re properly structured with the correct values and labels. This sets us up nicely so that, in the next episode, we can build a dropdown that actually displays and uses these language choices.

Episode discussion

No comments, yet. Be the first!