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
04. Building the language selector

Episodes

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

Transcript

00:00
Now that we are sharing all of the languages that are available in our app potentially we're going
00:04
to go ahead and build this selector just up here it's not going to look pretty but of course feel free to style this up as you need. So the navigation here lives within the authenticated layout if you're not already aware you can see this over in the dashboard where this wraps the authenticated layout so if we add it into the settings drop down just next to here it's going to be available
00:28
on every page where the user is authenticated but of course because the languages are shared globally you can create another selector you can add this as a component and reuse it pretty much wherever you need to. So we're going to go ahead and find where the settings drop down is for the user just here and we are going to go ahead and add this just next to it so I think if we just
00:51
copy let's just copy this and add this here and get rid of the drop down because we're not going to use this as a standard drop down we should see a selector just next to this let's have a look and there we go great so that will do for now let's go ahead and add in a select element and within here are going to be a list of options so let's just add one in here just to demo this
01:16
and that's okay for now so as long as it works that's good. So for the name and id we can fill this in if we want to let's just call this language and we're going to add eventually an on change to this so we don't have to technically submit anything and then that's what's going to send a request through to the back end to actually set the language but first of all we just want to
01:38
iterate through all of the data that we've got to show these options so we're going to create a v4 here we're going to say language in remember from props and or page props and languages like so we're going to key this because we are iterating so we can key this by the language value because that's always going to be unique and then for the actual option itself for the text that we
02:01
want to show that's just going to be language and label great so that should now show us english and german in that drop down list now of course when we do change this we need to have a value for each of these options so let's go ahead and bind in the language value to this so when it's changed we know whether it's en d or any of the other languages that we have selected so now we
02:25
have that drop down in there nicely working now we do need to know the currently selected language in here we could change that later because technically we haven't set any languages yet let's go ahead and add that in now and then we can update our test to make sure this is always available so just a bit of background if we come over to config and app the locale exists within
02:47
here that's the currently selected locale or language that you're working with in your application what we really want to do is always share this with all of our pages through the share method in handle inertia requests so let's do that first of all handle inertia requests and we're going to create out a new language property in here and to get the locale of your app we just want to say
03:10
get locale app and get locale so we just grab that that's either going to be end or any of the other languages that you have so let's just update our global test here just to make sure that this exists so we're going to say it contains the current selected language or locale again i'm using these terms kind of interchangeably and in here we want to pretty much do the same thing we just want to
03:37
make a request to any of our pages because we know this is shared globally and then we want to go ahead and say assert inertia create our closure in here use the assertable inertia object in here which we're going to call page and in here it's going to be very similar to what we did here we're just going to say page where language but now we've got a problem because we need to set a language to
04:02
test that this works if i were to set this to d at de and say that the current language is set to german that's not the case because our default is set to en so if we run this test now so let's go and run that specific global test that is going to fail let's just check y and yeah that's just a syntax error let's try that again and yeah let's have a look so yeah failed asserting that the two
04:29
strings are identical so we have en but we should have d so in here what we can just do is just set the locale within this test so set locale de and we should be good so let's go over rerun this test and sure enough it works so without even dumping this to the page now of course we know that the correct language or the correct locale is being shared with all of our components so now that we
04:53
are sure of that we can make sure that this option is always selected based on the locale that we have already got so here we can say selected that's a option property within html and we're going to say if the language value equals page props and language so if the current language equals the one that we're currently iterating through then make sure that's selected now of
05:18
course at the moment that is going to be english but what happens if we set the default language over in our config to de well if we come over and refresh sure enough german is now selected and that's going to be the case when we eventually get to switch the language whichever one it's been switched to is always going to show selected in this drop down

Episode summary

In this episode, we're adding the language selector UI to our app, letting users pick their preferred language! We start off by figuring out where to place the selector—in this case, right next to the settings dropdown in the authenticated layout, so it pops up everywhere for logged-in users.

We go ahead and build a simple <select> HTML element, not worrying too much about appearance for now (feel free to style it later). Then, we loop through the available languages and create an option for each one, making sure that the currently active language is selected by default (thanks to the locale that's globally available in the app's config).

Along the way, we update our backend and global tests to make sure that the correct language/locale is being shared with all pages and components. We also show how changing the default locale updates the selected option in the dropdown, so it's always in sync.

By the end, our language selector is fully dynamic and aware of the current selection—setting the stage to actually handle changing the language later on!

Episode discussion

No comments, yet. Be the first!