Build a Hacker News Client with the Vue 3 Function-based component API, Vuex and vue-hooks

[Music] hello friends welcome to coding garden with CJ welcome to build a hacker news client with the new view 3.0 function based component API yeah so who actually gave him a talk at a meet-up this week on Monday about this topic and I recorded my screen but it turns out I didn't have my microphone on so I'm gonna do the same talk I did at the meetup about just like an introduction to what this API is and then we're gonna build something with it which will be fun let's say hello to all the wonderful people in the chat hello ran with all the fruit emojis welcome welcome hello said who is from Morocco that's great welcome so many emojis from ran hello Daniel garden welcome to the stream hello Louis hello Yossi hello bohon hello Abhishek hello spacey hello deci Louise hello Bias welcome everyone to the show so if you have been on the Internet in the past month or so when you follow a view news you probably saw all of the controversy surrounding this new API in is gonna be introduced in view 3.0 so here's what I'm gonna do I am going to just I'm gonna introduce it I'm gonna do a quick introduction to what this thing is I'll show you some basic examples we'll build a super app and then once we know what it is we're gonna try to build something a little bit more complex we're gonna build basically this using an API this is the hacker news website let's see how this looks might be cutting off some words I can stand like right here alright let's do this so this is an introduction to the view 3.0 function based component API first we're gonna talk about what is it we'll talk about what problems does it solve what are the benefits how do we use it today right now here and then we'll build a simple image search app using that new API so first what is it is a new API for creating components introduced as an RFC in view 3.0 I realize I'm like covering up some of the text so it's a new API it is purely additive to view to meaning when view 3 comes out pretty much most of the things you've done in YouTube will still work but this is sprinkle sprinkling a little bit extra on top that you can it's giving you an alternative way of creating components in view 3 when it does come out and to that point it is currently an open RFC RFC stands for requests for comments meaning it's not set in stone and it can be changed based on user feedback it can be changed based on the core members of the View team if they decide that something isn't feasible things can change I'll say this right now everything you're about to see in this video if you're watching like more than a month from now it's probably wrong it doesn't work any more I mean some of it will still be relevant but I really I'm gonna show you today is like bleeding edge and yeah so keep that in mind now what problems does it solve and what are the benefits first thing it presents a clean and flexible way to compose logic inside between components if you've ever watched worked on large view j/s applications typically you might use things like mix-ins or higher-order components or render lists components or analyst functions to basically share things between your components and throughout your application but this presents a lot of problems and this new API is aiming to solve those problems it is naturally tight friendly so there was an RFC for the class-based API which would allow you to create view components but using like class syntax but that RFC actually got scrapped because it presented some complications with adding or inferring types on your classes and this API because it's just functions is super type friendly you can use typescript with this new API and another one is that it has a smaller bundle size so the API is that is exposed are a bunch of little functions which I'm going to show you and if you're not using any of those functions when you bundle your app you can easily tree shake some of those other functions that you're not using away and then also in the future if they introduce new API is they're simply just going to be new functions that you can import in so you can start using new features later on so it's super interesting it has a lot of benefits how do we use it today so let's say you want to use it right now it's not out yet view 3 isnt out yet there's still a ton of RFC's for view 3.0 it's not official yet so how can we use it today well there is this wonderful package called view - function API and you can install it into your view G UJS 2.0 application so something generated using the CLI or if you have a view app that you're just using a CDN link you can bring in this plugin and it will allow you to use the new API in your view applications so once you've installed it then you can import the plug-in from view function API and then use that plug-in and then you can use it so let's talk about how all this is going to work now if you've ever used view Jas before this template will look very familiar to you there's nothing new here so we have an h1 it's using either a computed property or property from our data right here to display the full name we have an input that's bound to first name which is a reactor property and we have an input that's bound to last name which is reactive property so so far this template is just like you've seen before nothing has changed in the template but when we get into the JavaScript that is where things change so the first thing is you import the functions that you need to use into your component and right now because it doesn't exist in view yet we have to import it from View Function API but once view 3.0 is released you'll be importing these functional functional view function API in this case we're bringing in value which allows us to create reactive properties we're bringing in computed which allows us to create computed properties there are lifecycle hooks you can bring in and lots of other things for now those are just the ones that I need and then your component has one function setup so you don't have data you don't have methods you don't have watch you don't have computed you just have one function called set up and that function will get two arguments it'll get the prop so if this component has props or accepts props then those will be accessible as that argument and then you also get a context argument which has all of the things that used to being on this so things like adders emit parent route all of that can be accessed from context and then inside of the set of setup function is where you do all of your component logic so we saw that template before it has first name last name and full name on there so first name is a reactive property it's of we're using the value function to create a reactive property where the initial value is CJ and then we have this last name reactive property where the initial value is are easy enough so think of these two things as just two properties on your data object and then if you want to create a computed we can use this computed function from the API and you'll notice so computed takes in a function this is going to be the function that reruns any time it needs to be recomputed and here we're just gonna have a string that has first name space last name but you'll notice in order to actually access the actual values of these reactive properties we just say first name value and last name value the reason we do this is because you wouldn't be able to keep track of just like a primitive string changing so it's basically this value creates like an object wrapper with a value property that has the latest value you'll notice though that in the template we didn't have to say dot value we can still just do it the old way which is awesome and then the last thing you do in your setup function is you return an object and then anything that is in this object will be available inside of the template so because we're returning first name last name and full name in our object here that is available inside of the template to use so it's a super simple super yeah super simple API for creating view components and that produces this result so we have our h1 there that has the computed full name we have an input that is bound to first name an input that is bound to last name but now if I update these things coding garden we can see that the computed updates up top and these two are bound to those properties so it's a super simple API there's a lot more you can do with it and like I mentioned before there are quite a few benefits to it right now we're just showing like a super basic example yeah that's it and then we will build an image search api so an image search app using this new api if you watched a while back i did an episode where I was learning spelt and I built an image search we're gonna build something almost exactly the same but we're gonna use this new functional API before I get into that I'm gonna catch up on the chat because I just I just did a presentation I just trade straight talk through everything let's see all the people cool and hello P GOP Cho is based in the Denver area they say you should post about Denver view meetups in the Denver dev slack keep missing it there's a specific Channel so if you check out meetup - huge is I think that's what it is we post in there when the meetups are happening hello Justin welcome to the stream Rand is saying awesome background appreciate ya I'm uh I like to do these cinemagraphs from my slide decks hello Amaro Amado is asking what is the context in JavaScript typically this has to do with when you're creating in an instance of either a class or a constructor function the class or the constructor function is kind of like the blueprint that you can use to make multiple copies each copy needs its own context otherwise but each copy would interfere with each other so a context in JavaScript is the fact that each instance or copy of your object has its own context I keep I use the word in the definition I don't know but cool icy killer is asking how do you use lifecycle hooks so I'll point you to the actual repo for this view function API and you can see here all of the lifecycle hooks you would just import and then pass a function so if I wanted to do on mounted I would import it from View Function API pass in a function and then my mounted code can go inside of there every other life cycle of a event is available as a function that you can just import yeah and Felix says hello from the Dominican Republic hello Felix welcome okay let's build a super simple image search application here we go I have it to do right here so first thing we'll do is we'll create a new view CLI app so the interesting thing about this plug-in is that it works today with you 2.0 so let's say view create you to image search I spelled it wrong like that we're gonna manually select our features is gonna be a super basic app we really just want Babel and the linter we won't need a router or anything it's just gonna be one page we'll use Airbnb went on save put everything in the package.json go yeah and as I mentioned once I'm done making this super simple app I am going to build a hacker news client which will be a little a little bit more complex and hopefully and most likely I'll be able to use some of these lifecycle methods I'm gonna look into using view hooks so this is a collection of hooks composable hooks that you can use with the new functional api things like using view x so you have like you store you state use router if you want to use view router so when we make the more complex app I might actually delve into this and use some of those so that'll that'll be interesting you okay so we're gonna go into view to image search we're going to start it up there we go we've got ourselves a view app and I'm gonna kill that other app that I had going gasp kill this one okay not that that all right what we do first let's actually clean some things up so I really just want one component I'm gonna have my app table view component and everything is going to be inside of there so I'm gonna get rid of everything else let's delete this components folder let's delete this assets folder we're gonna get rid of all these styles we don't need any components we're just gonna start with a super basic component and then we're going to use this new function function based component API that looks good to me let's add some basic CSS and the HTML here and then in our app top view let's just throw like an h1 hello world does it work it works cool no errors in the console okay so the first step is to install this library view function API so in that directory here I'm gonna do NPM install view function API actually I'm gonna kill my slide I think my slide deck is trying to refresh well all the files were changing okay so we installed it now we need to use it so in our main j/s we can import it in so here we'll say import plug-in from View Function API and then we say view dot use plug-in and this now enables that new API so this allows me to add that setup function to my component and I can do all the new all the new stuff okay so we've installed it let's look at our to do that's done now let's actually use it so in our component here it's super basic we're gonna bring in that value function so let's import value from view function API cool and then remember our component has one function it's the setup function so we have setup in this case we don't have any props we don't need to access the context so it's just a super basic set up function and for now let's just test it out make sure that it works let's create a reactive property called message and this is gonna be value that starts off with the value hello world now our set up function returns an object we're gonna add message to it so that we can access it inside of the template so because this returns an object that has message inside of it now in our template we should be able to do this message my keyboard is really acting up today but that should show the message let's see there it is yay let's change it to make sure that it's actually working so if I say hello world rainbow oh no wave globe there it is so it's working so we're using the new function based API the first thing we want to do is create a form so we made our setup function now all of our codes gonna go inside of that we need a form so we can actually search for images so let's create a form inside of it we'll have a label this will say search will then have an input and it will be bound to search on our component and so for this I now need a reactive property called search it's going to start off as an empty string and then I return it in my object so that I can use it in my template just to make sure that it's working we could render out the search value here let's see it happen so if I search for cats we can see that as we type it's bound and it's showing up below so that's great we have our search bound now yeah so we bound it now we're gonna listen for a submit on the form and then set loading to true so this all works the same way that you know it I'll say at submit we'll do dot prevent to prevent the default action and then I'm gonna specify a function that it should call and let's say let's call this search gifts now I need a function search gifs so I will create one and that's just gonna be a simple little function defined in here and for now when the form is submitted let's just log search dot value so we'll log whatever is in the input box and then now to make this accessible in my template I need to add it to this object here so now that we're returning this function inside of the object this makes sense and it should call it whenever the form is submitted okay so if I search for cats and hit enter we see cats is log to the console so it's calling that function that I created that's great what's up next set loading to true so I want to show like a loading Jif while we're waiting for the gifs to come back and then I'll hide it so let's do this I think I have yeah we have this this loading guy here so right below that I'll create a div give it a class of loading throw that image in there and I only want to show this if we are loading so now I need another reactor property called loading that will initially be false and then we'll return it so that way we can use it and then now inside of this submit function will say loading got value equals true so that's that's the one thing about using this new API is when you're modifying reactive properties reactive values you do have to say dot value you can't just modify it directly so that should do it and so now if we search for cats and hit enter we see the loading Jif so that's great what's next call the API with the search term so we have this API URL on the end here it has Q equals and we can pass in our query in this case it's going to be our search term so inside this function I'll make this an async function and then we'll just say response is going to be equal to a wait fetch with the API URL plus search dot value so whatever the user typed into the input box we're gonna append to the end of this URL so it'll search for those types of gifs and then we'll grab the JSON and then we'll just log it out let's see what happens okay so if I search for cats and hit enter there's our data so we're getting data back from the API now we actually want to show it on the page if I go into the data array this is each individual jiff it has an images property that has a fixed type property let's use that and then we can grab the URL so let's copy property path now basically I just want to create an array of all the image URLs so let's create another active property I'll call it gifs this is gonna start off as an empty array and then we'll say gifts equals JSON data map so that's gonna give us each gift and then we want to take that property from each jiff and we do need to do gifs dot value so we're gonna when the component starts up it starts off as an empty array we get the data back from the API and we override that array with a new array of all the image URLs and then we need to show them on the page so let's add a little dip here call this images and we only want to show this if we are not floating and we'll throw a little image tag in here and we're gonna repeat it so we're gonna say v4 gifs and gifs and the key is gonna be the jiff your else because it should be unique and the source is going to be able to if URL great but now I need to make sure that gifs is returned in this object so that it can be accessed in the template so we will also return it there we can set loading to false so that way that the the gifs will show up so let's do that I'm actually just going to do a set timeout of two seconds so that way the the results don't display immediately there's a little bit of time while we're seeing the loading and then the logistical pop up so here we'll say loading value equals false and then let's just add some basic styles so we'll say images has a column count of for any image on the page has a width of 100% and we'll say the loading section image well now we'll say the loading section should have margin:0 auto I think that should put the loading image in the center well let's see what we got ok so I search for cats I hit enter we're loading and then we get all the cats back yay and I should be able to search for laser eyes loading yeah we get them all back cool so this is a super simple app but kind of just demonstrating the new API so in case we're not using computed we're not using any of the lifecycle methods we're simply just using value to create some reactive properties and then everything else kind of works the same way as we know it in view to the one caveat is when you're changing a value you do have to say dot value but then that's pretty nice cool I believe that's all I had for like intro to this API I did mention before it is this library so if you check out this repo on github you can see all of the other functions that are available so you saw me using value there's also state which is equivalent to viewed on observable which which exists today but that would actually allow you to create an object with multiple properties on it and then potentially use that inside of your template instead of having individual reactive properties using the value function there's computed there's watch you have your lifecycle methods yeah that's about it all right catch up on the chat hello indie who says is your mouth still burning actually I'm fine and surprisingly I was like so we're talking about the the hot ones episode of code kados where I eat like really spicy hot wings I was okay within a day I got over it really quick I was actually very surprised bohon is saying what's the hot key for emojis this is actually just a Mac shortcut if you do command ctrl + space you get the emoji menu if you're on Windows 10 you can do Windows key periods and it'll it'll pop up hello Brooks welcome to the stream hello Amy Axl is asking won't you use view X I think I want to so that was an introduction to the API and now we're gonna try to build something a little bit more complex we're gonna try to build this and I think we will use view X I think it just makes sense I want this to be as complicated as possible Daniel guard is asking what icon theme do I use in vs code that is a great question someone suggested it to me actually I think it was was it rabbit works JavaScript but I think it's called BS code icons yeah this is the one I use the s code icons they're very nice very colorful cool yeah and Felix asked a great question so they says they're new to view Jas they came from backbone what I'm learning now in view to will be usable in view 3 yes absolutely so that was a part of a big part of the controversy with this new API is that initially people thought that the old way of doing things with your your data property your methods your lifecycle methods at the top level your computed they thought all of that was going away but it's not it's also going to be there in view 3 you can still write apps the way you're learning today the only difference is you have this functional API available to you and you can use it if you want to I'll link to the questions and answers here about the functional API and then there's this big long thread or a lot of like the whole like Twitter back and forth and people freaking out started I'm not gonna share that because I don't know we don't need to contribute to the drama yeah and hello Ellen leave okay so I wanna I want to I want to make a hacker news client but we're gonna use this new functional API so I may kill my other app oh yeah and I'll point out just real quick that code that I just wrote is available on github it's actually on my personal github and that's kind of slow or github slow I don't know but if you want to check out that code I just wrote and the notes that I just wrote you can check out that repo there okay where are we where were we let's close this yeah this okay so they're actually quite a few hacker news API is out there and this is one that I found it seemed seemed to be the easiest so I'm just gonna use it but you can make a request for news page one it's a bit give you back a JSON array of all the latest stories you can go page two page three etc and then you can get information about an individual item so for instance if I want to see all the comments for this one with this ID I can say item slash ID this gives me back all of the comments and they're like nested if they're replies for that given item so that one is let's see it might be a little bit behind this is show yeah I think this API is a little bit hind behind from the real-time data but regardless all the data is there for us we can also get user information by requesting slash username and this is what we're gonna do so we're gonna we're gonna basically make an app with the new functional API that has a multiple pages so it'll have like new past latest comments ask show and then you'll be able to go into the comments of a given one and then see all the comments we're gonna do it it's gonna be great but we should probably create a to-do so I think the first thing is generate an app with the CLI we're going to need the router I do want to use view X like I said I want to try to make this as as complex as possible we're gonna have tons of little function components we're gonna try to make things reusable we're gonna we're gonna push this API to its limits okay so router UX do I want sass I don't I don't need sass we'll just do regular CSS cool then we need to install the view function API is that what it's called yeah of you function API then we will need to I guess like set up the routes then we will create a reusable list like new news list component so if you look at this site every single page like new past asked show jobs they all have the exact same layout in a very similar data structure it's just different categories of data so my ideas will build one component that can kind of be reused for each different page so we'll do that create a reusable news list component what else create the view single item page and on that page we want the link the description and then we want to show all of the comments including nested comment replies and we'll keep this tab open while we go just to make sure we're not forgetting anything I think I think that's a good that's a good deed good to do let's see if anybody said anything in the chat Shh alka says you always wants us I don't I'm not gonna do sass I mean I'm gonna do my best you just use basic CSS and make it make it look somewhat like this okay let's go let's generate the app so we'll do a few create hacker news client select our features so we want a router we want view X and we don't want cess that's all we want use history mode for the router let's say no we'll just use hash router will use es length width air B&B and we'll put it all in the package.json go Amy thinks basic CSS would be fine it's a pretty basic website I guess I should probably link to how I found this API because there's a there's a there's an entire page that lists all the hacker news clones or client via the source it's super interesting because it's very similar to to do MVC if you've ever seen that before where people create the exact same application in a lot of different different frameworks and so this is very similar but they did it with view trying to see where I found it earlier hacker news API github repo I don't know I should I feel like I should find it and this is like the official API what I'm using is not so official I think this is it yeah so this is the API that I'm using and I think they linked to it somewhere I don't know I found it earlier but basically a lot of people have built this same same app but using view or using reactor using spelt or whatever and we're gonna do it today with the view three function API okay our app generated let's go into it and we'll run it yeah we got that felix is asking don't you prefer to use Axios instead of fetch it depends I actually have lately mainly because Axios is actually just will throw errors if there's like a 404 or something like that whereas fetch you have to handle that manually so I do like that about Axios and yes we absolutely could we're make make like a reusable service class so like a class that just calls these API things directly and we can just say like API dot get news and pass in the page number or something like that we're definitely gonna do something like that Christiaan what's up hello welcome to the stream Orlando is saying fetch versus actually us I think that's just it it's nice that fetch is built into most modern browsers and it's fairly easy to use however you want to do any kind of error handling for like a four oh four or a five hundred status code or something like that you have to do that manually with fetch whereas Axios handles all of that for you already okay so we generated the app we have a router we have view X let's install this view function API package great and now let's set it up so in our source main je s we can import in that plugin from the View Function API and then we need to use it so right here we'll just say view use plug-in cool so now we can use the new API let's clean things up so I'm going to delete this HelloWorld component goodbye we're gonna get rid of those assets goodbye if we look at views there's the home view it's using that hello world component we'll just get rid of that get rid of that get rid of that cool or about component is already super basic our app dot view is set up to use view router will get rid of these default styles let's see what happens cool we have a super basic view app it has absolutely zero styles cool look at our to do okay so we installed it let's set up the routes yeah so we want all of the same routes that the main hacker news site has so you have slash news which is the home page yes slash new which are any like the newest stories and if we look we have those in points so news will give us the most up voted I guess ones newest or the newest show HN ask each in jobs and then individual items so we want one two three four we what we want five different pages so let's set that up in the router [Music] you actually do we we could really just do this with one component that just looks at the URL and then changes which API is hitting I don't know let's just get okay I'm backtracking on my on my to do let's just get the news page news page working like this one and then we'll go from there we'll see what we would need to do to create these other pages I think that's what we'll do okay so great news page all right and we don't want to show any links we're just gonna have our router view I guess actually we would but we probably want something like a navbar component let's do that let's just start okay that's what we do we're gonna make this navbar so here in components imma create a new file we'll call it nav bar dot view scaffold it out this is gonna be a nice little div it'll say hacker news and then we need to show each thing I guess we could show it as a be news rather link new do we have I don't think we have access to pass we just have a news newest show and ask okay news newest show ask and I think they're also a jobs yeah okay that's what we'll do I believe you can save two for now they're all just gonna go slash and now in our app top view we'll bring in this navbar component so we need a script import nav bar from components slash navbar and there is a super chat from Felix thank you so much that's awesome thank you cool yeah super chat from Felix that's great daiquiri says sup what's up Orlando saying a spa is not good for SEO it depends it used to be that search engines did not run the JavaScript on your page but now a lot of them do and that could potentially lead to slower load times though which would make your search ranking show up lower the answer to that is to use something like knucks jeaious if you're using view which is a hybrid of server-side rendering and a single page application or using next Jas if you're using react or using a pre-built site using something like Gatsby or Hugo or some of those other things and it really all depends I see people talking about SEO so much in my job I have never had to deal with SEO I'm always building like internal applications or applications that don't have SEO on them we might have like a marketing site that has SEO but our actual website doesn't need it so I don't know it varies okay how how did this how did this get back in here like I thought I got rid of the nav oh well okay so now in our component we need to specify components and we'll throw a navbar in there and then we'll use it so right above the router view we want to do nav bar and we should see an app bar let's see there it is weave it a little bit of styles let's see what font there using it might just be like a basic sans-serif Virginia let's just add that to our entire app so like inter-app table view let's just say body font family is that nice and then in our nav bar let's make this a flexbox and i guess right now the nav bar doesn't really need any script doesn't need any component stuff so yeah and then our nav bar class will have a display of flex and a flex direction of row which I think it should have by default yep so now it all goes across like that that's great we want to give it this nice orange background color let's see what back what color that is that one is it this one this bgcolor no it's this RGB here so we'll say background color is that what do we get now yes can we just grab this little image here it's the SRC whoa we should probably put it inside of a container so it doesn't stretch because of the Flex box yeah so it's nice like that cool it looks like it has a 1 pixel outline yeah Apple logo realizing I'm spending more time on CSS than at the actual like view functional API but that's fun I don't know CSS is fun it's fun to practice CSS so say outline 1 pixel solid white nice okay this is a flexbox we want everything to be centered like in the middle so I think I can do justify content center when it's the Flex Direction row no will do I mean technically we do want that but we also want a line-items Center which will Center it vertically like that cool there needs to be a little bit of spacing around the nav logo so let's just say margin two pixels ten pixels that's good let's see the font size of this thing up top ten points so let's just move that a paragraph tagged in and will say navbar Pete font size 10 pixels and font-weight:bold nice it actually needs to be increased a little bit what if we do like some relative units way too big one M I like that cool next up we have all these links they need to be spread out a little bit I believe these will just show up as anchor tag so I might be able to style the anchor tags yeah so if I say navbar anchor tag has a margin of 10 pixels just like the image should separate them a little bit that's nice we'll say text decoration is none and color is black nice I like that cool I wonder if I can do something interesting like navbar a after I could do an after and say the content is like one of those well that work whoa that's pretty cool so it does it does add it but it's immediately after it I might just add it in manually sno kilo is saying why not create your own style instead of looking at the x1 mainly because I just want it to be a clone it's using the exact same data sheriff is asking a good question what's the difference between outline and border so border is on the outside of the content so if we look at this element and you can actually use the element inspector here to see what's happening so you'll see that the margin is on the outside the border is on the outside padding is on the inside and you have the actual content itself so outline will not affect the width or the height of the element it just surrounds it but if you did border that would actually in it would be on the outside of the content so the width would actually be increased a little bit so outline won't change the size of it and will keep it in the same place you this can I give after a margin margin left of 10 pixels I'm okay with that yeah perfectly fine all right now let's put all of our items below it so in our app top view this is loading the router view and we do have our home page this is where we're gonna do all the stuff to actually list out the item so we'll get rid of the view logo great we want it to have this background color which i think is that so what a style here background color is that I think something happened oh it doesn't have any content yet that's fine hello yeah so that works and this is we're gonna list out all of our items so yeah for now I'm just gonna make it work and then we can think about how we can refactor this or how we're gonna create multiple pages but let's just make this thing work so ultimately I need to repeat over some items and then to actually request those items so those are going to be coming from this end point here news page one so in our home component let's go ahead and set up our component so we have this setup function and we need to make an API request when the thing is mounted so here's what we need to do we're gonna import value so we can create a reactive property that is all of the news elements and then we also will need on created which is the lifecycle hook so that when the component is created we'll go ahead and request those things from the API then this is gonna come in from you function API cool so we'll create a reactive property called items this is gonna be value starts off as an empty array we could also have like a loading property it actually starts off as true because when this whole thing starts we're waiting for the the data to come back from the API and then now in our on created you pass it a function and this function we pass it will be invoked when the component is created so in here is where I actually want to make that API request let's create a variable like base URL that and then we'll just we'll use fetch for now what's you sketched I know some people asked about fetch versus Axios but we're just gonna use fetch base URL plus that news page one so that should request the first page of news this does need to be an async function and then we'll grab our JSON and then we'll just log it out sooo happens okay our setup function needs to return an object the things we want to access in the view are the items and loading and for now we'll just have a little div b if loading we'll just say loading and let's see what happens look at the console you get our data back and Patrick young donated a dollar ninety-nine through super chat let's read a super chat always enjoy watching and learning thank you so much Patrick that's awesome Oh interesting yeah so snow kilo had the idea of creating our own styles that would be interesting we could do coding garden themed I don't know use like a green and black color instead of the the default one I think the thing is once we create it we can style it any way we want it so we'll go from there but kamon the components mounted or created makes the request out to the API and then logs out the data so we have the data here that's great now we just need to repeat over it and show all of the elements on the page so let's do that and I think for this I'll create a separate component just called like news item and that will basically be this one line here and then we'll repeat the news item component some things okay but right here is where we can say items dot value equals that JSON so that'll set it and then we'll say loading value equals false because we requested the data and then we set it on our items and set loading to false now we'll have a div here and then we'll create a component that's called like news item and we're going to repeat it for each item in items and then we're gonna pass that item down and the key will be item ID I think it has an ID property we'll see let's just keep logging it out so we can see the properties in the console yeah it has an ID property so that should be unique and now news item doesn't exist so we need to create that news item component so that way we can pass the data down to it so in here we'll create a new file we'll call it news item I'll have a super basic template for now we'll just throw like an h3 with item dot title and then we do have to define what our props are so here are props our item and that's it see what happens nothing because we need to register the component okay so I have this super basic component that takes in an item and then just shows its title on the page now in our app we need to bring in that news item component and then we register it and then it should start working did I register the component correctly oh I registered this in the wrong place not in app dot view but in our home component here this is where I need to register it so we'll import news item from go up one directory into the components directory and grab that news item and then we need to specify it on components like that yay cool so super basic so far we make the request we're listing out the news items here let's get the Styles going I know what's his name in the chat wants me to do my own Styles but I kind of like copying the Styles just to see if I can do it who was it smoky low yeah I'm gonna try to copy the Styles just because it's fun to see if you can emulate what their site looks like bohon is asking in question do you follow any rules while styling a page or it's all about common sense how you choose color palette fonts typically for things like color palette all I'll use a color palette generator yeah there's like coolers calm it'll drape create pallets for you fonts I use a website called font pair that code and this gives you some nice pairings of like title fonts and body fonts yeah I just use things like that to me it's it's not really common sense though you do kind of either want to hire a designer or try to develop a bit of a design eye and really you can develop that by just looking at good websites yeah now Felix is asking you did import on created and then declared it that's overwriting it we're not overriding it we're invoking it so we import the on created function and then we invoke it so right here we're actually invoking it and then in a function that should be called whenever on created happens so hey chris says CJ great seeing you use the view API Thanks it's pretty fun I gave a meet-up talk on it on Monday and I'm curious to see what I can do with it yeah oh and I guess I've been coding this thing but I did say we were gonna try to use view X yeah okay I'm gonna style this component but then I'm gonna I'm gonna set up view X I want this data to be coming from the store rather than I just just calling it and using it directly in the component lets style this thing we definitely need to bring that font size way down so on our news item let's give it some styles I will make this scope so it just affects this component yeah we'll put the title there and then below it are gonna go all the details we'll give it a class name of news item in the news item as a font size of 75 M let's see go a little bit bigger 0.9 m okay below that we want to show the number of points cool we'll make that a little bit smaller so let's just put this in a span and give it a class of well actually I think this entire second line will probably have the same font size so let's just give us a class of news item details and then our news item details will have a font size a little bit smaller of like 0.7 m nice so we'll say points points by items username I think now let's see what the property is for user just user by someone three hours ago so I think we do also have the time ago yeah item time ago what else do we need we could allow them to hide it and then we have number of comments comments count cool that's great we want the title to link to it we also want the whole thing to have a little bit of padding so on the home page let's say you have a padding of 2m should push everything in a little bit a little bit too much one in like that we're not going to show them up voting it we could actually show I don't want to show a number I'm not gonna show a number I think that's good cool so Jean in the chat is asking I'm new to view do you have any resources to help a JavaScript and view newbie if you're new to JavaScript I recommend let me think of the name of it so like code along I think there's this one video course watching code that's the one um this is a totally free course it is by a guy named I forget his name but it's a really cool course and if you're totally new to programming and totally new to JavaScript I highly recommend it check it out and then if you're looking to get started with view GIS if you check out on YouTube there's a cat of mind on YouTube that's the one and if you look at their playlists they have a beginner view Jay s playlist yeah view to getting started this one is absolutely great I've recommended it to a lot of people and they've learned the basics of you with that video course so those are some resources I recommend for that Befana is asking can one follow along with this project but using a different framework or library possibly yeah I mean I think the one common thing with this project is that we're using this this API here so if you're contacting the same API you're going to get the same data but you would just have to figure out how to use that data with whatever framework a library that you're using molders is asking what is your secret to be a developer like that no secret I've just been coding for a very long time and I love coding and I just I just keep coding that's my secret yeah in Pedro is mentioning the academy ins view course yeah so a can of Mines has a free course on YouTube but they also have a course on udemy which I haven't taken personally but other people have recommended it hello Hutton welcome to this dream Frank Johnson is saying CSS counter for the number what do you mean do we mean this oh do you mean for the number on the left is that a thing I can do I've never heard of a CSS counter no way this is new to me thanks for introducing it Frank okay yeah so I could do a before content counter Wow that's so we I've never seen this before I had no idea that you could do that with CSS to use the CSS counter it must first be initialized to a value with the counter reset properties 0 by default okay so I want to set it to 1 um [Music] I guess this defaults it this will default to one because it gets incremented I don't know but let's figure it out this is cool I'm excited about this we've never used it before okay so the home element is the parent element so that's where we where we will reset it and we'll call this news that's gonna be the name of our counter variable and then we need to put a counter on it the only issue is my news item is scoped I guess this doesn't have to be scoped because with having it not scoped I should be able to use the counter item for let me call it news and really we just want to have the number and then a period in a space let's see what happens whoa it works we need to style it a little bit but that is so cool yeah look at that thanks thanks for the suggestion Frank oh yeah Bo Han is mentioning free code camp that's another really good resource they have like an entire course start to finish learning web development front end and back in free foul is asking what is your opinion on spelt I think it's really cool it's definitely in its early days so there's not a ton of there's not a large community around it and it's not exactly battle tested yet meaning that like there aren't hundreds of sites using an hundred developers so that's one thing about it but at the same time it has really cool ideas and the syntax is really nice I like it frank says yeah thanks for your streams you're welcome think thanks for the suggestion that's cool yeah Maximilian from macadam I know Maximilian is the guy that does a lot of a kind of mind videos yeah he definitely knows a ton okay so how can I style this though because the news item is a div actually I think I'll I think I can do a news item let's call this let's give this a class of news item title and then we'll put it before the news item title so yeah so that way it shows up on the same line awesome and I think yeah the number is like a slightly different color that color nice I like it free files asking do I do going or any other low-level language no so mainly I've just been using javascript so even for back-end stuff I'm using nodejs haven't really done any lower-level languages recently in a long time actually I used to do C sharp which is it's not a super low level language but it is a compiled language I did that for a while John says I just graduated from college studied CSE D you inspired me so much thanks for the streams you're very welcome that I could inspire you now go out into the world and write some code build some stuff cool ok yeah I think I want to put that in a little bit yeah it should it should be underneath so news item details he's like a margin left of 2m nice yeah and the the details actually have the same color as the number cool look what we made all right now let's make it more interesting we should set up view X so that our data is coming from the store we're gonna try to use these view hooks so we're gonna use use store or use state to actually get the data from the store and then we'll create an action which like gets the latest data okay let's do it so by default because I set this up with the view CLI we have our store it's a super basic store and I could create some sub modules you I don't think I'm gonna do that I'm gonna make them top level items because we have some pretty basic interaction so we have let's call it news items initially is an empty array and then we'll have new like current news item so when someone clicks on a story we'll set this to be the story that they're currently reading and then we'll also have like a loading variable that's initially false but this will allow us to say whether or not we're actually like loading stuff in the background cool we need our mutations so make some simple ones let's pull up the view xbox I haven't worked with UX in a while mutations yeah so there's like increment and stuff like that I'll just say like set news items so it takes in state and then it takes it in the news items as a state the news items equals news items easy similarly we'll have set current news item and so we'll say state current news item equals news item and then lastly we'll have set loading okay so we have our basic state we have our mutations which are updating the state and then we need some actions so one action would be something like get news items let's see actions will take in the context and I believe yeah the second property is like parameters that get passed in so say you get news items got our context and then the the convention is to call this thing payload I don't like that because it's super generic but you know what we can do structure it so we're gonna say the the thing that we're passing into this action is going to be an object and we want to get the type and the page which will default to 1 so type is gonna be things like news newest show ask or jobs and then page will be what page were requesting so that's great okay and then this does need to be async and this is where we can do the fetching so right now we were doing that in home we're gonna do that in here so we will grab that base URL to and instead of just saying news will default to not default well we use the type and we'll pass in the page so that should request it we're gonna get back let's call this items and then we'll say context commit set items and we can just destructor to pull in commit and just because we're here let's create some types what did they call these they were calling them yeah it's call them types and really it's just gonna be the names of these of these functions but we can like the convention typically is to capitalize them like set news items and then that's just a string set current news item and then that's just a string and then set loading and then that's just a string like that and then here we can dynamically name these functions so this would be types set news items types that set current news item types dot set loading yeah so now our functions will have these names but then the useful thing about this is I don't have to pass strings around so right here if I do commit types set news items and then pass in items and I don't just have like strings roaming around for the types of things that I'm gonna be set setting cool [Music] I think this is what we need so we have we have a basic store it has some state oh I think one thing we need to do is set loading before and after so we'll say type set loading to true and then after we'll say it's false okay yeah so we have our store let's actually use it inside of our components so now inside of our component instead of calling the API directly and having like this state here we're actually gonna use the view X store and for that we're going to install these view hooks which have things like use state or use actions and we're gonna want to use both we're going to want to use actions so that way we can call get news items yeah I guess we might actually add the names of the items to the types as well yeah cuz dispatch takes in the type let's put this in our types as well get news items cool and then we'll actually to put these types in a separate file so that way we can use them in our components whenever we're dispatching actions let's create a new file right here we'll call this type a s and here we'll just say export default and then we need to import those in here so we'll say import types from types cool all right now we need to install this view hooks library so we already have the view function API here we'll install view hooks we're in that directory no wrong thing we copy that like that okay you Chris % Perez is saying context or commit so commit is inside of context so this variable is typically you can call it whatever you want but typically it's called context inside of it it has a property called commit which is a function here I'm just destructuring it so I'm pulling commit out of the context tim is asking can I do a portfolio review someday that might actually be pretty fun yeah maybe we'll start like a Twitter thread or something where you can link to your github and your page and I can review it that'd be cool see you later Brooks thanks for tuning in yes I did d structure it in so that way I can just call come in cool yeah okay so we added the view hooks now how do we use them you I think I they this library doesn't have documentation yet and there was an issue yeah example of you state so this is how we would do it okay so inside of the component we import the different hooks that we need or want so in my component I want to use state and I want to use the loading variable and the news items variable so on home now I'll just get rid of everything we have to we have to rewrite this entire component good now that we have of UX um I think yeah technically we still do wonton created and then we're gonna import you state and then I guess there's also what's the other one is it use actions which is a hook for map actions how does map actions work typically you put these on your methods I don't know we'll figure it out okay but you state I want I want to use state so in here [Music] you let's look at their example again so it's passing in an array with count in it I don't like that because I think what that means is so let's say I want the oh no it's Z structuring it okay okay so I want loading and I want news items so on my store I have loading and news items so I'm going to bring those two things into my component here so this will give me loading and news items great now to make those two properties available on the in the template I need to return an object that has those on it great but I called it items before so this needs to be news items cool and then now on created I need to dispatch an action how am I gonna do that I don't know I'm curious like what happens if we log this inside of here like do I have access to like this dot store dollar sign store let's see error in renderer reference error not found the view instance let's make sure we set this up correctly so we installed it oh we got to use it okay so just like we did with the plug-in from View Function API we need to do the same thing with these view hooks so in our main j/s we'll import that in and then we'll use it okay let's see what happens cool this is undefined um let's look at the context see if that has a dollar sign store on it okay so we have a ders emit parent refs root slots we have yeah so technically we have root dollar sign store and that would allow us to not commit but what's the word I want to dispatch dispatch in action however we might be able to say use action which will allow us to basically get a function that we can call inside of our component see what this even returns view X helper use actions looking at the source code of this thing just to see how it all works helpers map actions let's let's just try it I have a I have a hunch on how this might work so we have use actions we need to import that use actions and don't think you don't need those arguments anymore but if I say just call it actions equals use actions and then we pass in the names of the actions that we want in this case I want the action called get news items I'm just gonna pass it in as a string right now but eventually I will want to use the types does that work it works that's a function that I can call okay so yeah let's bring in our types so that way I don't have to pass this in as a string yeah let's import types from types and then here I can say use actions types to get news items and technically eye candy structure this and now in my on created I can pass in a an object that has let's see what we're expecting respecting an object that has a type and a page number so here we'll say the type is news and the page is one so when the component gets created we're gonna dispatch that gives get news items action and tell it the type we want is news our store is gonna see that make the API request it will then set the items on state which in turn we have access to here which in turn we should see in the UI and it works it works Wow okay do I have the view dev tools we can actually see this this stuff happening view if you want to look at view X cool so we did set loading which set loading to true we made the API request we did set news items which put all of those on our state and then we set loading to false and then those news items made it back to our component wowie so these hooks are pretty cool so this made this component super simple because now I can just use the state and the actions from my store and use them there so that's awesome I guess technically we could add like load more let's see how they do it on Hacker News they say more and that just loads a second page let's see what let's see what we can do so if we have a more button at the end of a P tag this needs that nice gray color okay so when I click that and it should load more so let's say at click equals load more and then I'll need a function that loads more yeah okay so we'll have load more this will be a function and I think what I want is I actually want to keep track of what page we've loaded so for that I actually I'm going to use value so inside of the component we know what page were on and then we're just telling the store to get a specific page but the store doesn't know what page were on okay so let's say current page is going to be value starts off at 1 and here we'll pass in current page so when it gets created we request page 1 and if we click low if we do load more we'll say current page value plus equals 1 and then we'll call get news items with current page and actually I think this should be this should be current page about value yeah you and then this is calling the load more function so we need to make the load more function available in the template like that let's see what happens okay no errors more that gets the next ones um one thing I guess we might do is you see how this it has the same numbers and we just kind of like overwrite the ones that are already there because that is technically getting more I guess we can have a logic in our store that says if the page is one reset the array but if the page is greater than 1 we just append to it instead of overwriting it so let's update our store say get news items we'll say if cage is equal to one then set the news items else will say like append news items and then we'll have you spell the pend 1b a pen to piece it looks weird in all caps I think that's that's a pend so let's add another type append news items and then we need another mutation so we'll say tights stat pen news items and then now instead of over writing the news items will just say state that news items equals state news items concat the new news items cool and so now when we click more we should get more there we go more yeah it looks like it's when we get the next page there's a duplicate which I don't like [Music] let's see it looks like you yeah like this ones oh those two are duplicated this API is a little weird and then that one is duplicated I mean I guess technically we could filter out any things that aren't duplicates this is just like extra logic in our store but let's do it so here when we are concatenate um's we want to filter out any news items that we've already seen so let's do this we'll say unique IDs this is gonna be an object and then so this is gonna create a new array with everything in it but then I want to iterate over the array and if we come across a duplicate we won't include it so let's just do a filter on each item and we'll say if not unique IDs at item ID then we're going to set it so we'll say unique IDs item ID equals true and then we'll return true else will returns false so basically the first time we see an item with a given ID will return true which means it will show up in this filter but if we've already seen it before we'll skip over it and that should get rid of the duplicates let's see what happens more nice the interesting thing though is it's now it's not like an even number anymore because instead of loading the next 30 it's like less than the next 30 because we removed any duplicates that might have shown up already cool all right I like this store I like what's going on here our component is interesting I think the I guess the next thing is let's make it so that each of these different pages will work so we have like news newest show ask jobs etc let's take a look at the chat see what people are saying in port view ex map state map state needs to be in a computed property could use watch you see you later Felix thanks for tuning in tim is a saying maybe add even odd background colors to columns I think I like that yeah yeah yeah the code the code worked the first time that's fun okay yeah let's get these let's get these different pages working I think what I'll do is I don't necessarily need totally separate routes I'm thinking I could just do like / news / newest I don't know [Music] hello Emiliano from Argentina and hello limp alcoholic from Germany welcome welcome to this dream um okay let's figure out how we're gonna do this I'm trying to think like I could I could turn this whole thing into a reusable function component right because this is all the logic we need to load the news items for a given page however the thing that's different is the type and so we could make like a function that takes in the type but then it gives you back this component that allows you to load the given news items [Music] kind of like that however we would have to create like several different components I could just use the the type in the URL honestly I think that's what I'm gonna do so if the type isn't defined then we load news yeah so let's do this if we look at our navbar this should go to newest show ask and jobs and if we look at our API newest show asking jobs it's it's the same thing so that that's that's easy enough and if we look at our routes we have this about route we don't need that we'll get rid of it let's get rid of that about view yeah so these are working I guess what I want is the homepage should actually load no matter which route you're on can i define multiple paths with view router dynamic route matching I don't want a dynamic segment I guess I kind of do but the only thing is later on I'm gonna need her out that's like item /id let's just do this so this should be tight so yeah and I think we'll read it yeah here's what we'll do well redirect to slash news by default okay I'm think I'm figuring this out as we go but I think this is how I'm gonna do it so now the home component can look at the URL and know what the type is so that it can it can dispatch that and we'll have to we'll have to watch it so we will use that watch function from the API to watch if the URL changes and then use it to specify the type whenever we do the the dispatch okay so because we have these view hooks installed we definitely want to use router so let's bring it in so in our home component we're gonna bring in use router and let's see how this works let's call it stuff and we'll say use router and see what we get so we get the current route so if I do like route dot value dot uh params dot type that's gonna give me what the current type is so I like that so routes dot value dot params type let's copy that path and then now when we specify the type we're gonna pass that in so so here we'll pull off the route from use router same thing here so when it's news we get the news let's do jobs I'll have to refresh it because I'm not washing the URL just yet but if we load jobs awesome these are jobs if you look at ask again after refresh it but these are questions I go to show they should be a bunch of show HN cool so it's reading the type from the URL but now we actually want to watch if when that URL changes so that we can re like refresh the the data to to be that specific type and technically this should still work so if I do more we should just see more let's look at our network to make sure we're making that request okay so this is news more we get more news cool if we do show and we do more it does show cool cool cool cool cool cool cool cool cool cool cool cool Frau is asking why not try to make this client look better I personally just like the default look of hacker news mainly because I don't know I'm getting carried away I've been streaming for almost two hours now but the may the main point of this whole thing is to demonstrate these hooks in the new function API the style isn't as important however I will push this up to github and you are more than welcome to make a pull request with some new styles snirkle it was asking am i going to do an eight-hour build again I didn't plan on it anytime soon but let's let's see where I'm how I'm doing on subscribers maybe when I get to 15,000 I'm currently at 13,000 maybe baby mm-hmm okay so now we want to use watch because basically we want to work watch for when the type and the params changes so that we can get the the different type and we'll reset it to just start over and all that good stuff okay so we're gonna bring in watch here and the way watch works is we want to watch and the first parameter is the watched value so the thing that we're gonna be watching is that and then the callback is what will be called when it changes so let's just log it and this should do it so anytime the URL changes we're gonna see that type log to the console okay you maybe that's not what I need let's look at again they don't have a lot of documentation but you someone showed how to use this [Music] you oh not this I need oh nevermind I need to look at watch how does watch work and if we see some examples oh so a function yeah so I can do a getter so a function that returns that value so let's do this so it's a function that returns route valued up Rams type and whenever this changes or whenever the return value of that function is different this function will get called let's see what happens okay so it's show and then its newest and then its news and asked and jobs awesome so whenever it changes this function runs this is where we can do something interesting so [Music] yeah I kind of want to create a function so like a function that's called like set current type or something like that and well it's not setting it but it's gonna it's gonna reset so basically I want to do this with the type and the current page is gonna get reset to one so what I would want to do here is say current page value equals one so that way it goes back to the beginning and then we'll get the news items and what I can do on created is say set current type and then pass in type so now whenever we're watching this we basically just want to do this same thing so we have this nice little function which resets the current page 2 1 and then dispatches the action to get the latest news items for that given type and then we're also watching the route params so that whenever they change we're calling the current type to change and it resets it to page 1 let's see what happens all right so we're on jobs we can go to News nice we can go to show go to ask jobs and then if I click more we should see more jobs it might be that there are no more jobs see ya page three is an empty array so that's great if I go back to news everything works just fine I can click more more load this is great it's too easy NU'EST more cool I guess I think one thing I want to do is in the store whenever we set loading to true I think we're gonna reset the year well we don't want to reset the array because we only want to reset the array of pages one let's do let's do this right before will say if page is equal to one then we want to set news items to be the empty array so whenever you're requesting the first page we want to make sure that you don't see anything and it just says loading first so if we go to newest or we are that if I go to news it flashes really quick but the idea is I don't want to show any of the old stuff while it while it's loading and early let's just set a timeout like a two second timeout really just for suspense so loading there they are NU'EST loading there they are I think I also don't want to show the more button if we are loading so we'll say V if not loading you cool you I guess loading we kind maybe we want this to be at the bottom let's see loading there they are more loading they are more loading and they aren't cool and if I go to news loading there it is I can go to more news cool all right mm-hmm I really like this it is very this is very functional so like our watch takes in a function to know what is changing and then the second parameter is a function that will get called when it's changed on created takes in a function yeah it's just a lot of little functions I've been programming in react for like close to a year now and so I've been doing a lot of functional style programming and I don't know it's not for everyone I'll say that like this is this is very different than if you were to build this using the view 2.0 API with like the computed properties and methods and data and stuff like that but I like it kinda like it alright yeah dinner is asking can we do a quick hover pointer effect on the more button absolutely let's say cursor is pointer yeah that way people know that they can click on it there you go harsh Patel is saying I'm changing from reactive you just because of you think CJ you're welcome they're both okay I've slowly gotten used to react but still I prefer much prefer view overreact I know All Right see you later Amy have a good night all right where do we go from here let's let's look at our readme this is fun though we're using hooks we're using these things from the view functional API we have the new pay news page reasonable news list component in a way let's create the view single item page this is where it might get a little more interesting because we actually will want to show all of the comments and that could be interesting how we show like nested comments okay but let's make it so that when we click on comments it goes to that specific page for that for that item so on the news item component we actually want comments to link so we're gonna make this a router link okay so a router link and this is gonna go to and I'm gonna give it an object so the name of the route I want to go to let me get all this going okay the name of the route we want to go to will be a news item and then the params are gonna be ID is item ID so we're gonna create a route called news item that accepts an ID so that it will load that one given news item and then in our router we need to define that route so the path will be and actually we'll define it first so the path will be item slash some ID the name is news item for now we'll just leave it as the home component but we should at least see the URL change whenever we click on comments oh yeah you'll notice if I hover you can see in the bottom left that's going to slash item slash thingy yeah so that works so now we need to create a news item page let's do that so in our views let's create a new file we'll call it a news item dot view scaffold it out and then now in our router will bring that component in I'll use it right there so we formed a load if we click a single item it goes to the news item page with that ID and now we need to request that single news item to get all of the comments and everything else let's do that and we'll do that all in the store so we go to the store we have get news item not items and so we want another function that's going to be get news item but for with a given ID so in our types let's create get news item singular and then we can create an action here types that get news item takes in commit and in this case we'll just take in the ID of a news item that we want okay here we're gonna set loading to true and then we need to make an API request in this case I believe it's just item / ID if you look back at my read me yeah slash item slash the idea of that item that we want cool so that makes the request for it we'll just call this item and then we'll just do a little set timeout this is too long let's do one second I'm really only adding the set timeout so we don't see like a flash of text we see the loading for at least for a little bit and then we'll commit types set current news item to be that item cool so when we dispatch this action it's gonna get the item with that ID from the API and then it will do the set current news item which in turn will set the current news item on our state that's great so now on the news item page we need to bring in those two properties from our state we need to bring in current news item and loading okay so let's import use state from this thing we have our setup function we're gonna say loading and current news item is going to be able to use state whoa now and we pass in an array of the properties you want so we want loading and we want parent news item cool and then this will return an object with those two properties on it and now right here we'll just show current news item that title see what we get there is no title but oh because we need to it we needed to spend dis back to the action okay so we need we need the on created function from the view function API and then on created we need to dispatch an action so we also need to bring into use actions and we'll go ahead and import our types okay so here we can say const actions equals use actions and this will take in the name of the action so we want get news item singular will be structure to grab off that function and now we can call it i guess the other thing we'll need is the router because we need to get this ID from the URL so we also need used router and so on created we are going to say get news item and then the argument is just the ID so we'll say route dot value params ID and that should get the news item with the ID of the page that wrong let's look at the network request there it is cool so if we go back to the news click something else like robin hood's stored passwords in plain text give it a second and there it is so I think again we want to show like loading if it's loading so here we go okay so when the page loads it says loading and then and then they break you oh we need to set loading to false in our store so here we set loading to true and then now we'll say loading is false okay so loading there's the title and then if we go back to news loading there's the items go to this loading there's a title cool so we have all the info now it's just a matter of showing it on the page I guess one we don't necessarily have to look for the change of the ID because right now there's not really a way to go to a different item ID from when you're on a current item ID so we shouldn't have to watch the URL um cool you so now let's um let's get this page going let's look at how this works if we look at the comments we're not gonna let them add a comment I think what's interesting is we can probably use that news item component right here yeah let's do it so on the weight do I have I have a view called news item and a component called news item that's not good yeah that was horrible a horrible naming choice on my part let's call this item page and then we'll have to update it in our router we'll call it news let's call it a news item view how about that and then we'll rename this to news item view okay so we know that news item view is the entire page news item is just an individual news item that shows like the details of that news item but what I want to do is load that in so that way it shows the news item at the top but then we're gonna just load all the comments below it so let's import that component and then we register as it as a component and then we can use it so we'll bind item to be current news item nice let's see yeah that just links back to itself and these are all links but I think that's totally fine I think one thing is we do want to hide that number hmm how can we do that I guess the issue is like this is CSS and technically let's do this you can we be more specific so let's see this a class of like current news item and then in our style if we say current news item that has a descendent news item title and the before the content should be none so if the parent is current news item don't show that yeah nice so it disappears cool but if we go like to like the news page they should still be there and they are cool okay we definitely need to add some padding on here I think our homepage is that where the padding is in the background color okay we're gonna do something very similar on the news item page let's move this class to the top level give cool all right now we want to show all of the comments below so let's do that if we look at the data that we're getting back let's let's log so we can't really log it ah get in the store that item just to see what properties we have I think we're really just gonna do dot comments to show all the comments so let's see user URL link cool so really we just got to do dot comments and then um show the comments yeah let's do it so we'll keep logging it so we can see the properties now we'll have right here let's just call let's create a component called comment and we'll say v4 comment in current news item dot comments the key is gonna be a comment that ID and we'll pass down the comment thanks well what should we call it data I don't like having a component called comment that has a prop called comment let's call it data okay now we need a comment component right now you like an h5 it says comment mm-hmm I guess we could define our props data and the thing we want is data dot content see and now we need to register that component so in our news item view we will import a comment from component slash comment and then we'll register it and there they are I guess technically we could use V - HTML I think vhv - eh no does escape the the content so cool but we're showing the contents I think what we'll do is we'll actually get recursive with it and if it has child comments we just put a comment below it that's indented a little bit that should be pretty easy what do we need to show that we need to show the comment username and then when it was posted so we have comment dot user okay let's let's style this thing so we'll have a div will have a P tag that has data user and then a peek tag below it that has data content and then next to the username we probably have a time ago property C or missing a curly yep [Music] so let's style it a little bit so we'll say comment title has a font size of 0.8 m and comment content has a font size of 0.7 m I move this whole thing in class a comment see what we get cool we do want the font of the title to be that other gray color this not that one this one and then our content will have margin-right of like 2m just so it's in a little bit Oh margin left sorry too much yep and yeah I think here we'll use V HTML just so it will it will render it V - HTML equals data that content yeah so if they have styling or or whatever it renders that that's cool yeah and now we need to show the nested comments so below a given comment you should see all of its comments so how are we gonna do that can we just use the comment component right here I'll say V for comment in data comments the key is comment ID and the data is the comment it broke unknown custom element comment did you register the comic component correctly this is where it gets tricky because I want to use the comment component inside of itself and I don't know how to do that I think I think what I might try doing is a global component registration rather than the local registration like this so [Music] let's see if I go to my main J s it's the way to register a component view dot I specify components here let's look it up you global component registration global registration so far we've only created components using view dot component these components are globally registered that means they can be used in the template of any view instance okay in these cases then define the components you like in a components option yeah yeah okay this is this is weird because the docs say you do like view dot component and I think we do that maybe we do the okay so if I import in the component right here like that and then I say a view dot component and I gave it the name comment pass it in right there will that work works cool what I need to do is put this in a div and then indent it a little so that way each nested comment gets more and more indented comment reply and then comment reply has a margin left up to it nice nice okay so we see like comment we know that these are replies because they're at the same level that's pretty cool pretty cool we could add like minimizing and such yeah let's catch up on the chat see if anybody has said anything interesting legend says are you an angel I'm not an angel I am just but a man Olly oxen says scoped before with no content I think this is in reference to the individual news item I think I figured out where are we I guess I did in a news item view yeah I don't know mr. Taylor says maybe machine learning deep learning in JavaScript view and react yeah I haven't really done any of that stuff before but it would be fun to do the coding cat asks what did you miss you missed everything I'm basically done so this is my hacker news clone we can see the news we can look at the comments for a given post look at that I made that all by myself um just real quick I think I wanna get the things linking because right now the the the title itself doesn't link and we actually want to be able to click on the titles so that they go to that news story where are we okay so on the home page is where we're listing all of the news items okay and the news item this is where we need to add the anchor tags so like right here to make the title link say href equals items URL you yeah and that and that goes to it we do want to remove the styling though so news item title anchor tag has text-decoration:none it has color of initial should make it black I think yeah and I just let's make it bold yeah so those will go out to the actual stories the other thing is you technically could show the domain because I think that's included in the data let's look at the network tab you you yeah we do have domain so we can show that off to the side that would be interesting I guess yeah I actually don't like that it's bold can we not can we do like a lesser yeah like what if we do a hundred for about 200 nothing 300 400 yeah font-weight doesn't work with this particular font that's okay [Music] yeah I guess we do want that to be that other the grayish color so let's do this just create a little span and we'll put that inside of it and give it a class of domain so news item title domain has that nice gray color cool but now the space goes away I don't like that space it is okay anything else what am I missing this is pretty cool honestly worked out pretty nicely [Music] yeah have I used enough hooks and the function API that that is the question okay let's start at the top so if we look at our app top view this component has no no logic in it so there's it's not using the function API but we do have our navbar and we have our router view if you look at our navbar I guess technically we could use a little bit of state in here because maybe we could just iterate over the links to show the link to them but you know I think it's fine honestly and then our app also has the router view which shows the home page the home page shows all the news items and then there's a more button which will load more this is where we get into some serious view function API usage so we're using value to keep track of what page you're on we're using watch to watch the URL to see if you switch between pages and we're using on created so that when the component is created we dispatch an action which loads the data for the given page that we're on and then we're using view hooks to have these things like you state use actions use router so inside of here we can get access to the router or the current route which has the type in it so the current route has things like news newest show ask etc and then we have our action get news items which actually goes off to the API to get them so when the component is created we say set current type to be the type in the URL so either news or newest or show etc and then set current type dispatches the action with that type and the page that we want and then also you can click load more which increments the page value and then gets the next page of results from the API it's pretty simple stuff but it's nice I don't know and then our other components are pretty basic we have news item let's format this real quick yeah [Music] sno kilo is asking what is the eye icon in the bottom of es code I don't know what is it spelling Oh spellcheck English okay what oh it's not it's not doing it okay mr. Taylor is asking have you done any stock market in view or react I have not Danny first is saying oh wow you switched to Hookes - it's it's moving to that yeah so I mentioned at the beginning of the stream that all of the stuff I'm using is like bleeding-edge and it's not actually supported yet so I'm actually using this package called V you put the spell check kicked in suggestions do q su Roo no I don't like that let's try this turn this off so view function API is like someone someone input it's almost like a it's not a polyfill because they created it before it even exists but there's currently an RFC a for view version 3 which will allow you to create these functional components where instead of having like a data and methods and etc you can just have a setup function do all your functional type stuff in there whatever is returned here is accessible in the template so that's the new functional component API and then these hooks were just created by this this guy you through you to show the possibilities in the future where if you are using the view functional API you would probably want to use hook style things in them they work very very like under the hood is completely and totally different than how they work and react you don't have the issue of the use state always has to be defined in the same order it's using views reactive properties like it's weak under the hood it's way cooler on the surface it looks kind of like react we all love pakua on says good morning from India hello good morning yeah and then like this used State thing is actually for view X so I have a store set up that has some basic state like news items that's the array of items current news item that's when you're viewing one individual one and then whether or not anything is loading we have mutations for the state we have actions which will get all of news items or get an individual news item and then those those hooks I actually don't like that they call them hooks because it's it's not react I mean they look similar but under the they're not they're not doing the same thing but then those hooks allow me to grab the state and use them in my setup function here or grab actions and use them in my setup function here yeah what else yeah we're showing the link the description the comments we have nested comment replies I think I'm done so like honestly um I wanted to show the like the advantages of using things like using this new functional component API because the thing about it you'll notice that this is a very simple function that just returns an object so ultimately what that means or the implications of this are that you can define this function in a separate file and then reuse it in different components so it's kind of like a mix in but ultimately you would just end up like spreading the return of it in your return object which makes your view components much more composable and reusable and I really didn't get to demonstrate that in this app because kind of all just worked out without it cool rust chat app let's check it out oh cool is it terminal-based let's see the comments 0 comments yeah there's no comments Oh myspace disappeared 4 the domain on an individual news item view no no on the news item component um there we go mr. Taylor is asking what is your preference viewer react I prefer view 100% I do write react on the daily basis at my job though okay let's deploy this thing to the web and then I'm done I'm streaming for two hours I'm done okay let's build it I'm gonna kill it we'll go into the disk directory create a basic now config we're going to call this hacker news view functional view three function API yeah it's a static app we're gonna deploy the current folder that's our alias great I'm actually gonna get rid of the builds and the alias just so like by default it'll deploy that directory oh not the a man do that I'm gonna get rid of builds because by default if you deploy a folder it does it as a static app so that's all I want deploy Danny Fritz is asking can you do local state with view functional components you absolutely can at the beginning of the stream I showed like a super basic example I actually have it on my personal github but it has a function called value and that allows you to specify a single reactive property you set the initial State but then after that it behaves just like it would in view you can check out my repo here to see some examples but you use it like this so you bring in value from this view function API library eventually you would just import it directly from view but then you say like you define your property you call value and you specify the initial value and then your return object you just specify first name on there and then you can use that inside of your template just like you would with data the one caveat is when you're modifying it or accessing it inside here you actually have to say thing value because it's an object wrapper to help keep track of changes hello Daniel welcome to the stream I'm almost done I just deployed and it Elias tit cool oh yeah I think I need to add a default redirect because by default it just goes to slash but you do have to click on one to get to it or you you cool yeah how do I do a default redirect with view router redirect and alias okay cool so I can say when the path is slash redirect to slash news that's what I'm gonna do like that okay did I kill my app you yeah and that work just because if you go to slash it will redirect news so that's great awesome let's build it again and deploy it curious does it yeah deleted might have to recreate that now config I'm gonna call it I called it this go you you you cool and it does the automatic redirect okay awesome I'll share that you can check it out Muhammad does say good morning from Bangladesh I'm just having my morning tea while watching the stream feels like a nice coincidence I just started a hacker news clone project using next Jas last night that's pretty cool yes you can see how I did some of the things and yeah we have news we have newest show hacker news asked jobs which actually seemed maybe then an old they don't have any comments though but and then on any given a news item you can go into the comments and it loads all the comments up which is nice cool mr. Taylor is asking have you ever used react 360 and is there something like that review I've never heard of it let's see what it is create amazing 360 experiences no I I haven't seen anything like this for vue.js specifically looks cool though I'm sure I'm sure there might be if you just search for like view J SVR or even like view J s3j s cuz I think 3 3 J s actually does support a having like a camera view that kind of thing yeah P Joe is asking how do you not burn out coding three hours after work I don't know I'm just a weird dude this excites me it was was fun to build something like this I really thought it was gonna get a bit more complex like I I was hoping you would get to a point where I actually could reuse one of my functional components but it didn't really seem like I could it was fun to use like the use actions in you state I hadn't done that before so that was fun I don't know it's fun I'm learning it's fun cool umm Galang says good morning from Bali good morning we're all says good night from the Bahamas thank you so much for the feathers Jay s vids helped me so much glad to hear it okay that thing's on the web you can go check it out I'll push up this code to github and I'll see you at some point in the future I might I might hole no I won't be streaming this weekend got some family stuff to take care of maybe the weekend after that but oh well this is super fun thanks everyone for tuning in wherever you are in the world have a wonderful morning afternoon evening or night until next time here's this [Music] you [Music] you

Channel: Coding Garden

Views: 8,394

Rating: 4.9780221 out of 5

Keywords: vue, full stack web development, programming, live coding, learn javascript, hacker news, vscode, beginner, live streaming, web development, javascript, mechanical keyboard, coding, vue-hooks, useState, lesson, function, backend, frontend, html, learn node.js, API, vue.js 3.0, hooks, learning, vue 3, learn to code, vue-function-api, functional, vue.js 3.x, node.js, frameworks, full stack, react, how to code, debug, learn web development, full stack javascript, educational, debugging, css

Id: g9bSmxnx-O0

Length: 164min 48sec (9888 seconds)

Published: Wed Jul 24 2019