Fetching and displaying markdown: Build a Forum with Inertia and Laravel

00:10

What we now want to do is watch whether this is being enabled and then send a request to the back end and set this HTML. And that's what we can show within that div that we've styled like a text area. So the first thing that we're going to do is pull in watch from view, and then we can just go ahead and watch on this markdown preview enabled value to detect whether it's true or not.

00:32

So we'll actually get the toggled value in here. And if it's not being toggled, we can just return false. So if we have this set to false, we just want to go ahead and return and not do anything. If we have it set to true outside of this condition, we can then go ahead and send a request to the back end.

00:51

Now, we're going to build out that controller first, and then we're going to look at the best way that we can actually send this request, whether that is through inertia itself by the router or another method. So let's build out this controller. Let's go ahead and make our controller here called Markdown Preview Controller,

01:09

or we could just call this Markdown Controller, whatever we want to say. So over in our web routes, let's go ahead and register this. This, of course, can be outside or inside of auth. It doesn't really matter too much.

01:21

Let's just call this Markdown. And we're actually going to make this a post request as well, because we're kind of like posting a form. And let's create the Markdown Controller here. And let's give this a name of just Markdown.

01:33

We can always change that over later. So the Markdown Preview Controller, the Markdown Controller, is just going to take in a single piece of data, which is, in this case, going to be the body. And it's going to return to us the Markdown that we would see if we were using this directly within a post.

01:50

So we're pretty much going to use exactly the same thing that we did over in the post resource, because we want this to be exactly the same. So let's go ahead and just grab the line that we've got here. And we can go ahead and return a response in here.

02:02

So just a standard JSON response. We don't really need to use an API resource for this. And let's return an HTML key in here with exactly what we've just seen. Of course, this time it's going to be request body or whatever we want to say.

02:16

And if there is no request body, let's just go ahead and output an empty string, just in case no data is getting sent down at all. So that's really all we need to do here. Again, you can protect this under the auth middleware if you want to.

02:29

But let's just leave it like that just for now. So how are we going to send a request through to this controller when really there's no need to use Inertia's router? This isn't something that we are passing down directly from our controller to this view.

02:46

So it's going to get a little bit more complicated if we are doing that. And in these cases, it's perfectly reasonable just to lean on making a standard request to your backend. So for this, we're actually going to use Axios. Now, Axios already comes with Laravel Breeze.

03:03

If we open up the app.js file, you'll notice that we've got this bootstrap file which lives next to this. This goes ahead and imports Axios and sets it on our window object. So we can just use this right out of installing Breeze. So we're going to go ahead and use Axios to post through.

03:20

We can still use Ziggy routes here, so we can still reference the markdown route by name. And we're going to go ahead and pass in a payload here, which is going to be the body. So where is this body coming from? Because at the moment we are inside a fixed form wrapper, which doesn't have access to our form.

03:40

Now, what we did earlier over in the create discussion form. Remember, we attached the form for our create discussion to this composable. So we had that state kept. What we don't want to do is use create discussion over in our fixed form wrapper, because this could be also used to create replies.

04:00

So ideally, what we want to do is over in the create discussion form, pass this form as a prop down to our fixed form wrapper. So let's go ahead and do that now. So it's sort of just sharing data back and forth between these two components just to make our lives a lot easier when it comes to building out another form. So we're passing that form down as a prop.

04:20

If we come over to the fixed form wrapper, we can go ahead and define this out as a prop just here. So let's create our form prop with object. We'll go ahead and set this to prop so we can reference it. And now all we need to do for the body is access the form and the body from that.

04:39

So basically from the create discussion form, we're allowing the fixed form wrapper access to our form via the props. And we're just passing the body down in there instead. So let's just send a request and just make sure that this works. So let's go ahead and open up our developer tools, open up our network tab.

04:58

And I'm just going to type something in here and click turn on Markdown preview. So we're sending a request through to Markdown, which at the moment we're getting through a 500. That's probably just because we haven't pulled our Markdown renderer in. Let's just try this one more time.

05:15

And let's go ahead and add some text in. And there we go. So we're making a request now, and you can see we're actually getting the correct response back within that HTML property. And of course, this is toggling, but we're not actually seeing the data in there just yet.

05:29

So back over to our fixed form wrapper after we get this successful response back. And let's go ahead and actually pull this in here as a response. We're going to go ahead and do something with that data. And that is going to be setting the Markdown preview HTML.

05:44

So let's go ahead and set the value to this response data. And remember, we're returning it within that HTML property. So now that we've got that, we can actually use the Markdown preview HTML to fill in the fake text area that we have just up here. So we can go ahead and say vHTML and set that in there and get rid of all of this.

06:06

And we should be good. So let's just try this out. So let's say hey, and then just make that bold. Click turn on Markdown preview.

06:14

And there we go. We can toggle that on and off now. Now, for larger blocks of code and things that are going to take a little bit more processing time, let's just grab all of this code here and put that into our text area over in our browser. And if we just put that in there, make that into a code block, just say HTML for now.

06:38

What you'll notice is we get a slight delay from when it comes on. This can be a little bit confusing, particularly if you're changing any data around here. So if I put something up the top here and then click turn on Markdown preview, we get a kind of flash of this just looking like it was the previous data that we had. So what you could also do, and we're not going to make this look great, but you can do this as well and add in maybe a loading spinner.

07:05

You could go ahead and say Markdown preview loading. You could set that to false by default, and then down here you could set Markdown preview loading to true. And then once the request has finished, you could set that back to false. So now what we can do is use Markdown preview loading to do something with the text area here, whether that is adding in a loading spinner.

07:34

In my case, what I'm going to do is just add some opacity. So it kind of looks like it's a bit grayed out before we do anything. So let's go ahead and have a look at this. So if I click on that, we can't really see at the moment because we've got a little bit, well, we've got all of the same code in here.

07:49

Let's just grab some other code and just add that to that just to see what we can do. And if you look at it now, we get a slight delay and then the new stuff rolls in. So it's really up to you what you want to do. But adding a really quick loading indicator is very simple just via these refs.

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion