- Read Tutorial
- Watch Guide Video
In this guide, we're going to go a couple different ways we need to improve this algorithm to work. I believe we put it in our code so that it's actually working. If I remember correctly. Okay, we didn't, but basically, all we need to do to throw it in there.
So let's take our code in here and copy just the n and res. Let's keep it as res, that just means result. Let's copy that, those two lines, and let's head over to our app.
In our post.js, let's just write a function above our renderLinks. Let's call it getNameForPostLink(). Then we need to pass in the string. The URL in this case. Then let's paste this in.
Basically, we're saying: last index of the string and substring and so on. Now let's return the string or the result rather. Then we can just call this over here instead of saying useful link. So let's get rid of useful link and then here and some just in some curly braces. Let's just say:
post.js
getNameForPostLink(str) {
var n = str.lastIndexOf('/');
var link = str.substring(n + 1, str.length);
return res;
}
renderLinks() {
let links = this.props.post_links.map((post_link, index) => {
return (
<div className="post-link" key={index}>
<div className="post-link__box"></div>
<div className="post-link__link">
<a href={post_link.link_url}>{this.getNameForPostLink(post_link.link_url)}</a>
</div>
</div>
)
})
return links;
}
Now we can just pass this in, and it will get the substring and display it to us, which is great. So lets search rails, let's hover on the second one, and you'll see that it's there. Ruby on Rails Code Audits 8 Steps to Review Your App.
Now you'll notice that on some of these, we have on this one for example, .html. So we don't want that in there. We'll add that in after we fix the first error I want to get rid of.
If we search with search results, on Basic Mongo DBI Commands you'll notice that the box is rendering, but no link rendering, which is a problem.
So Let's open our Redux Devtools using right-click. Then click to the left, and let's select our posts using log monitor. Select it in Redux Devtools, let's go to resultsPosts, and select case #5.
Let's open that, and go down to the links. It's a lot of content. Okay, so post-links and the first one. You'll notice that we have it in there, but it's not rendering for some reason. When we open 1 that one is not rendering either and neither is 2.
The problem is you'll notice that there is a / at the end of this link. Whereas there wasn't one link we were dealing with. This one has a .htm, but that doesn't matter. It should still be rendering because the first slashe is right there.
The reason these two aren't rendering is because the / is right here and our algorithm we wrote is looking for the last one. So basically, what it's doing is it's getting the last index, which is 80 because let's say there's 80 characters in that string.
Then it's saying + 1. So it's 81. It's getting string.length, which is 81. Then we have nothing left in that substring. So that's why that's happening. We can go into the Tryit editor here and test that. You'll see with the code we left off with, if we put a / on the end of this, we don't get anything.
Now, if you log a console.log(n + 1), since that's what we're using right here, and then you console.log(str.length). You'll notice that the same exact lenght in the console here. 89 and 89. Make sure that you understand why that's not working.
The reason this is another problem, a third problem, the reason the last one isn't rendering is because of a CSS styling issue, which we'll get to later. Basically, the two errors we want to fix in this guide are actually here. The /, and we don't want it to say .htm or .html after it. We just want it to say Mongo Create Database.
Let's handle the first one and it's pretty simple. All we have to do is after we get the result, we just want to say:
Tryit Console
var n = str.lastIndexOf('/'); var link = str.substring(n + 1, str.length); if((n+1) == str.length) { res = str.slice(0, n); console.log(res); }
Hit run and try it. You'll notice that we are printing the same string, except for this time it doesn't have this end /. Basically, we're left with the original string. Now if we try it, we get the right string or we should at least.
Basically, the reason it's just displaying this is because we're saying res = str.slice(0, n), and we're just getting the whole entire string. What we need to do is get the last index of the new string. Now we need to get this one, since we have it in the format we want it.
We are basically applying the same logic. So we want to say n = res.lastIndexOf('/'). The reason for using res is because we've now set result equal to this new string. String is still set to that. Now what we want to do is close this off. Let's just console.log this.
Let's say console.log(res, n);. Let's hit run, let's try it, and you'll see we have our string again. Obviously, we didn't change it, and then we have the new index, which is 35.
Now, all we need to do is get the new substring. We just have to say res = str.substring(n, str.length);. Now let's just console.log(res). This is going to still have a problem. Let's let it run, try it and you'll notice there's two / on here now, which we don't want.
We can easily change that by just saying the res = res.slice(1, res.length - 1);. Basically, we're just saying 1 - 1. If we run it, and hit try, we get what we want.
We could also just say n + 1 like we are above, and then saying length - 1. Then we could just get rid of this. If we hit run, try it, we get what we need. So that works. I'm going to put this in here and comment it out just in case we need it.
Now there's a problem. If get rid of the / and hit run, and then try it. I guess it works. No problem at all. If we were to get rid of the 1 here, then obviously, there would be a problem. That's just what I tried earlier. Everything's functional and that looks great.
Let's go ahead and put this new logic into our code. I'm going to get rid of the console.log and the comment. I'm going to place this new piece of logic into our function in our app. So let's copy the if. Let's go and place it in here. Let's hit save.
Now, if we go to our application, we can test this out and it should be good. Let's type in results. Let's go down to the Mongo one and you'll see we have Mongo shell.
Now, if we go to our Redux and go check that one again. So I believe it was the fifth one. Great, so that is working awesome. Now, this is not displaying. We need to fix this so it doesn't say .htm. If we go to the search engine, and search rails.
This isn't displaying just because there are no links on this one. We have to fix that later on. Basically, if we go to rails route notes you'll see is writing that routing.html. We can quickly fix this actually by just writing in another if statement. We'll do the same with the .htm link.
Right after this, let's just say:
post.js
getNameForPostLink(str) {
var n = str.lastIndexOf('/');
var res = str.substring(n + 1, str.length);
if((n+1) == str.length) {
res = str.slice(0, n);
n = res.lastIndexOf('/');
res = str.substring(n + 1, str.length - 1);
}
if(res.includes('.html')) {
res = res.substring(0, name.length - 5);
}
if(res.includes('.htm')) {
res = res.substring(0, name.length - 4);
}
return res;
}
This is pretty hard-coded. There's a bunch of ways we can optimize this, make it better, and fix everything, but we're not going to go into depth with a bunch of fancy substring algorithms. We want to build React apps.
Obviously, we want to learn how to code well, but this is a little bit more suited for different courses in Devcamp. We will put this aside, having dipped our toes into it, and we will be satisfied with the good results. Let's go ahead. It looks like it's not working, it's displaying nothing.
That's because I said name. What I want to do is actually rename this to link, instead of res or result. We want to do all instances. So I'm going to use a fancy option Visual Studio Code. I'm going to click this so it's completely selected.
If you're in Visual Studio Code, you can hit command + d, and you'll see it selecting each of these items. So every time you hit command + d, it will select them and then you can just type, and it will replace them all. So I'm going to type in link and it replaces all the res with link.
post.js
getNameForPostLink(str) {
var n = str.lastIndexOf('/');
var link = str.substring(n + 1, str.length);
if((n+1) == str.length) {
link = str.slice(0, n);
n = link.lastIndexOf('/');
link = str.substring(n + 1, str.length - 1);
}
if(link.includes('.html')) {
link = link.substring(0, link.length - 5);
}
if(link.includes('.htm')) {
link = link.substring(0, link.length - 4);
}
return link;
}
Now, let's search rails, let's hover over rails route notes, and you'll see it says routing now, instead of routing.html. That's really nice.
Now we could optimize the list to get rid of the numbers really easily, but we don't want to go into another in-depth algorithm. What we should do is finish there. We have a nice looking URL. I mean we could even pretty easily get rid of these dashes and make it capital after all these.
I might add that in later, but for now, let's get back to the more of the React stuff and the styling. Let's make it so when it hovers it just says No post links. Let's do that in the next guide.
Let's go to our code here. Let's say git status, git add ., and let's say git commit -m "finished JS substrings for post links". Let's push, so let's say git push origin master.
In the next guide, we will basically add in the no posts here. After that, we'll push our app up to Heroku, and then we will be done with the application. I will add more guides to it later on. If it is required.
Basically, we finished the entire app. We just have to fix this little issue and push to Heroku. I'll see you in the next guide, where we will fix that issue and move on.