Today we are going to refactor the code on this language toggle that I've been working on, this React Next.js TypeScript money stack project that I'm working on in my full-time job. My name is Zach. I'm living in Japan. I'm kind of a self-taught web developer, and I'm working full-time for a Japanese software company, and I'm working fully remote, so I'm... I'm here in my home office working all day and that's about it for my story.
So probably most of you all watching this already know me. If you're new here, thanks for stopping by. And let's just, let's get into the code. I got it working across the whole page.
But then, you know, I refactored the code. I changed some things up. So thank you for people who left comments. That was helpful.
But first, let me show you... what I did before we got to the refactoring. The toggle is working here.
We're switching between Japanese and English and the whole thing, the whole page is doing it. All of these and it's working across all pages. We'll go to the next page. It's doing it. Scroll down here.
It's all working go to the about us page. It's all going So I've checked I've checked it all already. It's it's all working, but there was some serious issues Halfway through doing this whole thing.
I Realized some serious issues with the way I was doing it some people left some good comments here. Let's see This guy had a really good one, but that's a little bit too much work for right now. I might try to do something like this later.
Some people talked about using some libraries or something, but we don't want to do Google Translates. I'm actually going to go in here and translate the stuff by hand and make sure it's accurate translation. It looks like you had a separate Is Japanese state for each page, which is true. What do you need to lift the state up? so that the entire site shares the same state yes and uh here we go yeah so my mentor chen who was the the star of my big video here the 80 000 views video he pointed something out to me uh refactoring to make the code more dry is important Oh yeah, this is using an already existing localization tool.
I mean, if we have to do a bunch of languages, maybe, but yeah, I'm going to do it by hand because we want the translations to be accurate 100%. So we want to use that state. The state needs to be across.
It needs to be kind of like globally across the whole project. But the other big problem that nobody noticed is the state isn't saved when they go to a new page. So let's say we're on this recruit page, we switch to English.
Okay, great, the whole page is English. But now if we switch back to let's say the home page, uh oh, it went back to Japanese. So the default language, it's always going to be the original language.
If we switch to English and then move over to another tab, it's going to go back to Japanese. I realized this partway through, but I was like, okay, I'm just going to finish the thing first and get it all working, all toggling, and then figure out how to deal with that later. Now it's later and I'm dealing with it.
So let's go into the code a bit. We're going to switch to a different branch that I made where I'm using I'm using react create context. Okay, you see we've got some errors here because I'm I'm not finished yet. I did the bulk of the work but I've got some small details still to take care of.
So now I think we should this should be on the new branch. Ah yeah so it yeah it's saving. Now it's saving the state. So we're on the English version of the page.
Let's go over to services. It takes a second, but it is still English. Go to the About Us. Perfect. Go to the recruit page.
It's all English. So the state is being saved. So what the heck did I do? I made this outline of what exactly I did more just for myself because, you know, sometimes when you're going through these projects like this, you're kind of just like you're going through and you're doing all this stuff and you might feel lost. You don't really know what you're doing.
And then. Somehow you get everything working, but you look back and you might not even really remember what you did. I think you saw that in the last video. I was trying to do something and I didn't even remember what I did the day before.
So sometimes if it's complicated for me like this, I like to look back at what I did and try to really understand it. And sometimes if you try to go through like this and... explain what you actually did, you'll realize that you have no idea what you did.
You just did it, you know, through a series of cycles of googling and checking stack overflow and all that stuff. So this is what we did. Context creation using React create context.
It holds the state of the language and the toggle language function. So that is where in the code. Language context is here.
We've got the create context use state use effect. I guess it was more like a refactor because I already had this language toggle function created and we're just changing it up a little bit. I added in this use effect function because we're going to store the state of the language in the local storage.
So we got that. So we created this component language provider. It provides the context to its children, and that does the local storage thing for the state of the language, all that. So I had to go in and actually wrap my app, wrap the whole app in that context.
Let's see, where is it? Where is the thing? components app what was all this uh ah here we go providers.tsx so we already had these other things like the chakra provider so that we can use chakra for the styling now it's also being wrapped in that language provider that i created so we've got the language context dot provider there yes then we have to create a custom hook to access the language context the use language context where is that in the code use use language context in Let's see this page I already finished so you can see it's It's being used here use language context We're importing it here Use language context and the next thing is yeah the language toggle function so Components that need to use the language state or toggle function use that use language context custom hook to access the is japanese state and that toggle language function so that's a lot that was a lot of stuff it was took me a lot of time to refactor this code but as you can see in the app it is all working the page is in english here there's that little delay we can work on that later you know just just one step at a time just take it one step at a time right now it's pretty much doing everything we wanted to do so that's good that's very good is this working uh okay so these three pages are done so i'm on the last page you know where we're at the very end of it and there's just one thing This part, I think, oh, that part and these are working.
Where is it? No, these are working. Ah, this.
So yeah, just this little text, I have a custom text component that I need to update language context and all that stuff. So just these two last spots, this thing isn't toggling. That's just because this is its own component.
So I need to just kind of set that up. So let's go into the code more. That is the recruit page here. You can see there are a bunch of errors. And this is what my mentor was talking about, dry, do not repeat yourself.
You can see now that I've added the context and, you know, the state is kind of, it's global across the whole project. We don't need all of these now. You can see before I was doing this in every, like everywhere.
So this is not good, but now, I mean, the bulk of the work is basically done. All we have to do is just get rid of this. So we're going to go through here and get rid of all these things.
Goodbye, goodbye. I bet if you're a wizard on the keyboard, you can just select all these, but I'm not, so I'm just going to delete all this stuff. Like this. Just delete it all.
We don't need it. What's going on here? Okay. Looks like there's still an error up here. What is this?
Oh, we also don't need this language toggle because that's also global now. Yeah, we don't need any of these is Japanese anymore. And just like that, all the red things are gone.
Save it. Alright, everything's still working. So now it's time just this last this text box component and this benefits component So, where is that in the recruit page? Let's find it in here comp headline, where did it go?
Where is that in the page? Benefits, we want to look for something that says benefits. Benefits here.
Here we go. Comp benefit. So you can see there's not an error here because I haven't gone to where this is defined and actually changed it. it's still using the old way so here's a shortcut i learned um you know when i was doing these projects by myself and my practice projects they the the projects were small obviously but when i got into my job here and the projects started being really big it's not so simple you know if i want to change this and i look over here on the left and there's like a million files. Then you're like, okay, where is this thing?
And yeah, I remember the first time we were doing kind of like a code review with the lead engineer, and he showed me the most amazing shortcut ever. You can just right-click on this thing and go to definition, and it'll pull up the file where that component is defined. Pretty amazing, right?
I know it's just, uh, those are just the kind of simple little tricks that you pick up on the job that you, I mean, you might not know when you're just studying on your own. Okay, so it's here. So we have to change this so it leverages the context directly instead of passing isJapanese as a prop.
First we want to import the use language context there we go all right this is probably gonna have to change let me look how it changed it on the other on the other things so we have to yeah like i said we're not going to pass this as a prop it needs to use it um We're going to do const isJobEqual useLanguageContext. Okay, looking good so far. Now, I think we might have to change something.
Let's just save this, go back to the recruit page. So this is still requiring that it's Japanese. So what did I forget? The heck? Oh.
Yeah, we don't want that. What? What's going on here? I forgot to remove it from the props up here. Okay, there we go.
So now we're getting all the errors. You can see all these errors here. the is japanese does not exist we don't need it anymore so we want to delete all of these is japanese yeah the original way i did this was just horrible but i mean sometimes you just you gotta do it the bad way first just to get it working and then whoops what do i do and then figure out the the better way later okay all right that should be good go back to the recruit page and comp benefit is missing do we actually need it Now I don't even know what's going on anymore, man.
Is Japanese... Do we need that? Dude, I don't even know, man. All right, let's go back to the page. See what's going on here.
Well, it's working. I know this benefits component was set up in a bit of a different way compared to the other components. So that's it, man.
The only other thing is this small little text box. But it's basically the same process, just going in there. making sure that it's not taking in the is Japanese as a prop it's doing it's Getting it through the use context and and then we've got to go and delete all of those is Japanese Props that are everywhere and I think that's a much better way to do it so again, thank you all for leaving comments on the first video and giving me some pointers and I hope this was helpful in some way to kind of see what I'm doing at work. And yeah, now the page is kind of working. I guess the next step would be to see if there's a way to not have this little lag because it is lagging a little bit.
Like it's originally Japanese just for a second, half a second. That'll be the next step. but I think we're headed in the right direction. So yeah, that's it for today. If you're not in contact with me already, you can join the Discord and talk to other people in the groups, send messages to me, whatever.
Schedule a call with me. My Calendly link should be somewhere, maybe in the description of this video or something. So that's it for today. And as always, let's go hard in the code. All right, see you guys later.