🔴 LIVE CODING: Let's Build a To-Do List App | FRONT END SETUP PT 2

Okay, so last time we wrote the backend for the to do backend, the crud, the create, read, update and delete. Last time I was calling it task id, but I did make some updates to call it to do item id. I think that makes a little bit more sense because we're talking about the to DOS collection. So instead this used to say task ID like 33 seconds ago, but I just changed it and I updated the we used the update to do item on the deleted ad, but I added them to all the endpoints now. So we'll work on the front end now. So if you guys remember, we had the to dos get tasks and then I'll open up my insomnia. So we created. So this is the what molecular gives us. So we. These are just auto generated. I don't use these. So we have the add task, get tasks, update task, update status, delete task, and recover task. So if I open up my insomnia here, I'll put this guy over here. I'll get these guys back up there. All right, so if we do update, say add task or add task on newest. Oops. Newest task. We send it. We'll get a newest task and we get that id. Update task. If we update the task with the task here and updated newest task. Updated newest task on that ID and you can update the status. So it should be at not started because we just created that, right? And we can say it's in progress now. So updated newest task is in progress. We change it to completed this or not completely started. All right, and then if we just delete the task, I think that id. If we delete the task. Delete the task. You should have deleted that there. And then I think the last one was recover. So v1 to DOS, recover task to do item ID. Change this to do item ID. All right, so I think the recover task was like HTTP global host 3000 API v1 to DOS recover task and then add the id and let's just look at the API real quick. Recover to do item id. All right, send it over. Cannot connect to the server. HTTP will post out 300,000. So now it goes back to null Updated newest task. So that's cool. So we got them all done. And then we see all the tasks here. Updated newest task, not started and deleted at null. Great. So now we need to start on the front end, which. Well, I made a front end with vite and it's on react. So I'll open another shell here. I'll just do an NPM run Dev. I think it is. Let me just check. Check the package JSON. Yes. NPM run dev. So, okay, NPM run dev. So now we have a front end to connect local host 5173 to do front end. So let's go quick. And I like to use Axios for my HTTP requests. So I'm going to install Axios now. Let me just check the package JSON. It doesn't have it. So just NPM install Axios. All right. I think that's all I need for now. NPM run dev and then make it like this. All right, cool. App tsx. So first things first. We have our export default function app. And then this is where everything's going to go. I don't know if we're going to need components for now, but we'll make a components folder and then apps tsx. Let's see what's in the CSS too. I don't think we really need any of it. Let's just delete it. Let's see where it says not CSS isn't my favorite thing to do, but we'll get through it. I'll just delete all of it. All right, so app tsx and these CSS files are being loaded in the main TS. Main CSS file. So index CSS and then the app CSS is somewhere. I don't know. Let's look for it. App css. I guess it's not being loaded anymore. I don't know. All right, so app tsx we're in here. So what are we going to need? Try to open that real quick. All right, just make a services folder and we'll just make a to do. To do service js. Whoops. TS. All right, so let's just do import Axios from Axios here. Yeah, let's do it correctly. New file Axios or let's call it API TS and we're actually not going to use Axios there. So we'll go import Axios from Axios and then do I have an environment file here? No, just do something like config dot. Let's just do config index TS in here and let's do like app config ts. Oh, no, no, no. JSON and then let's do a class config app Config class app. Oh, no, no, no. Like this. And we just do server. Server URL or. Yeah, server URL. This could be the HTTP. Maybe you could do like this too. Dev and in dev mode. HTTP localhost3000 this produce and then you have staging control it all here later. And maybe like a language put en for now. And so and in index tss we can kind of just make a class config and then say import appconfig from appconfig JSON. All right, See, appconfig is clear, but it's never used. All right, constructor. Take the app config and then you just type of app content this. Now app comp. Let's just do something like server app config equals. Oh no, this.app config equals app config. There we go. Not allowed to use that. So we need to app config. I think you just say type up app. You like this. That's a little better. Object. Let's just do that for now. All right, and then we can say get a server URL. Let me just say return appconfig server URL. I don't think this is the correct way to do it, but let's just go with it with no red lines. And export default. Can we make it a static? Static maybe. All right, let's go. All right, now we go to API, go in import config from slash dot dot slash config slash index like this. And then we can say const API equals axios create base URL at config server URL and that's going to be.dev and then you can say export default API and we can say headers app content type. I think it is application JSON. I think that's what it looks like. All right, and we can do a little bit more here, but let's just, let's just go with this for now. And then in here we'll do an import API from dot slash API and now we don't have to do any setup. And then we can make like an export function async function. Get to do's. Let's just do it like this. All right, get to do's. And then we can try catching. And here we can say row error and then Const data equals API dot get at 8. Oh, and I would like to do one more thing. In the app config, it's always going to be API V1 for now. So we'll just do it like that. And actually, all right, now v1 to DOS slash get tasks I think it was. And we'll say a wait on there. And then we just. If beta, I think you can get like status too. And then if status doesn't equal 200 we need to just like throw, just return null and then if all is good, we can just return the data. What's going on here? Unnecessary. Try catch wrapper. Okay. Because we're not throwing anything. That's fine. All right, so now if we, if we hit get to do's in the front end like this, import get to do's from the to do service and let's just do something like import use use effect from react and use effect const do items get request and then we can say await and we can make that an async function like this. And that's kind of the way to get around using await inside of useeffect. Because it's not allowed to use await, it cannot make an async. You cannot make this an async function. It's not allowed. So you can make it in there and then call it inside of here. And so what do we want to do? We want to say const todos equals get to DOS like this, which is console log to dos. See what happens. CORS has been blocked by the CORS policy. No access control allow origin header is present. All right, so let's go back to the back end and let's go back to the API gateway API service and the whitelist would work, but cors. So we do have the CORS issue. We'll go to the API service and inside of use after use, of course, and then I'll just allow allow everybody. Or you could specifically just say localhost 5173. And then on methods you can put like get put, delete and all that stuff. Post. And now if we refresh here, it's going to run the use effect and we get the todo items here. So now if we have to display it on the front end, what we're going to have to do is go here and then we'll get another hook that React has called use date and states const do set to DOS equals use date. And let's just, let's just do it. It's all right, all right, let's just do it. Let's go. New folder types. Maybe we'll just say to dos TS export default type todos equals export untype to dos, export type to DOS and then we have a createdat. It's gonna be a string deletedat can be a null or a string status. It's going to be something like type status to do status equals and then you can say it's going to be not started or in progress or. Or Completed. And then you can say to do status on status and then task, which is a string, and then updated at, which is a string, and then an id, which is string. All right, cool. All right, cool. So now I'll just import to do's from the type of todos and in the use state I'll say to DOS as an array and then I'll start off or null, start off as null. All right. And then we can just say to do items set to do items better. And then you can say kind of like set to do items on to do's set up there. And then here we can just say JSON stringify on to do items null. All right. Maybe if we wrap it with the pre. All right, cool. Now our front end kind of. We can kind of see that it's pulling the data and it's putting it on the. Putting it on the. The dom, which is kind of cool. All right. Okay. All right. So now I think we can make like a todo card. So maybe we'll make todo card tsx and say export default function to do card. And then we can kind of say interface itodo card. And in here we'll expect something like task string status, which is that to do status that we had before. So I'll just import that guy import to do to dos. Maybe I can just do like todos status. Can I do that? No. So let's go here. Export to do status too. Thought you could export to do. No? All right, so to do status there like this and what else do we need here? I guess updated at would be good and created at would be good, but we'll make them optional. And then I'll do an I to do card like this. And that's going to take a task status, updated ad and created ad. Let's switch that over and they're not being used yet. So. And then we'll just return on like a div. And for now I'll just put P on task, paragraph on status, paragraph on created at and update that. Cool. So now we have our to do card. So now we'll use our to do card instead of this div. So what do we need to do here? So we can just say if to do items is null at in the beginning I would like to just return maybe just like a H2 that says loading. All right. And then in here, when there is todo items, I can say to do items.map and to do on to do items and IDX return todo card. That'll If I just press enter, it'll automatically import it to do card and then I can say on what is it gonna need? Task which is the todo item dot task and it's going to need a status which is going to be the todo item status. And that's all that it really needs right now. So. And then you need to keep key so we can say on key and kind of create one. So we can say like to do item dot task at the IDX to string something like this. All right, cool. Now we have updated news task not started. New task not started and test test to. Right. Okay, cool. Now we just need to make some style. So let's call this class name equals to do card. All right. And then I think the index CSS is still there. So we'll just put to do card. And then I just want to do a border width at one border. I think it's a semi point border color black and border radius. Like 3 should get put into there, I think. Let me check here. To do card first name to the card and the app TSX inside of the index css and the todo card has that. So I need to import windows css. Let's try putting this in here. Why isn't it eating it? Let's see. Inspect class to do card and the sources. Sources. It has the app css and then it has. It's getting loaded. It's getting loaded and. Oh, it did get loaded. It's just. It's not being there. So I want to take this one out maybe and f css. I don't think we need that anymore. Oops. Inspect one to do card. So what is the problem here? Index css. Maybe I need a PX like this. Okay. And the to do card, it should have a border around the cards. Right? Not working. Okay, that works a little better, I guess. Okay, so now we have the updated newest task margin bottom and we'll just put like a 5px. All right. And then let's put just some padding inside too of like 12px. All right, now it's starting to look a little bit better. All right, so we have these cards. We have updated, updated news task, updated news task task, new task, test task. And we kind of have to see why that's happening. I think it's. It's the capitals. So. All right. All right, let's go. Let's just do something like this. Only if created, that is there. I want that. Only if updated ad is there. I want that. Coolio. Now what do we need to do? We need to be able to add a new task. So we should probably make like a little input on the top that hits the post request. So let's make. Let's make like a component called like add to do input and then. And just export default add to do input. Here we're going to need something called input. We're also going to need something called import, use, date, react, pass, add to do item as an object. So it would be like this, I think, and then this. And then make a button on the side. Make this a span, actually. So we can cut, span, make a button on the side and then it says add to do add. And this one will say on click add the add to do item and say value equals to do item to do item. Now we can say on change text, I think just on change equals set to do item. And we're going to need to todo item set to do item equals use date on the string. Just take that out there to do either. On either target dot, current value, I think. Okay. All right, so here. I don't think we can. We're gonna pass this here. Screw it. We're just gonna put all the logic inside of this component. Then add to item. Right now we'll just log the todo item. So, and then we use this guy inside of the app tsx. We'll add him here. Just command period. Oh, crap. Not find, add to do item. Save this guy. Import, add to input. All right, so now we have a string here. If we add it makes the. It gives us the string. Cool. Let's make it a little bit bigger. Make it a little bit bigger. So add to input. You can say class name, add to do input. Class Name equals button, CSS, item, input. And we'll just put a height of 35px and a width of 100 200px, 300px. All right, cool. And then we'll say something like font size 20px. All right, and maybe we'll just put margin all around the 10px. Like so let's just put a margin vertical. I think it is margin top. Cool. All right, and then we'll just make the button height 35px. All right. And a little bit bigger. Just make it 35. And let's give him a little bit of margin left. So too much. Maybe like four. Whoops. All right, there we go. And then like a width of 80px. Cool. And then if we want it to move a little bit up, I think we can do like margin, bottom 3px, just bottom. All right, this is. I don't, I don't think it's moving, but we'll just keep it the way it is. All right, cool. So if we say hello world and add an ad, we can get a todo item, hello world. So on app TSX now, or actually inside of the to do service, maybe even called to do's requests. All right, Export requests, call it requests and app tsx. Cool. So here, export async function add to do and we can say const data. So add to do. We're going to need to take a task which is a string, right? And then we can say const data and status equals await API.post on what is it to do add task and then at the body it's just going to be task like so. And then we can just say if status doesn't equal 200, return null or else just return data. All right, cool, cool, cool, cool. So then if we add the new task, we need to add this add to do. So actually I'd like to do it this way. Add to do item and then we're going to just send the. Okay, we're going to do this interface. I add to do. I add to do input and then we're going to. We're going to do item and that's going to be a string set to do item and that's going to be like a function void. And then I think there's like a actual. Wait, let me figure it out. React set states, type. I guess we can do it this way. All right. Whoops, there you are. So, and then we're gonna send the function here too. And then I add to do input puto item, set to do item and add to do. I'm just pulling all the logic out of here so we can control it from the top. And then this will just take. It'll just do the add to do right here. All right, so let's figure that out. Now in the app tsx we're going to make piece of state that we had earlier this and then I think add todo item needs to do item like this. And then set to do item will be set to do item that we send here and then add to do. For now, it'll just be. It'll just log out the to do. All right, cool. All right, so works the same. So now when we do the todo item, I'd like to redo re get the request so it resets the to do. Right. I'M gonna put this out here. That's good. And then we have the ad get to DOS and then we should have an add to do right here. And then add to do. We can just say here async and then kind of like await add to do on the to do item. And then if const add equals and then if add if add. So if the value comes back and it's not null and then an error, we can kind of say we would like to do the to do get items request again. So let's see if that works. And we can a wait on that as well. Refresh new task here, add and then new task here pops up and it's the newest one. Right? And then actually we need to clear this. So after we add we need to anyways we need to do it. So set to do item back to empty string. So let's try one more time. Newest task, all capital task add and then it gets added here. Amazing. So now we need to be able to remove delete a task. So we can add a button on the bottom here that says delete task. Okay, so let's do that real quick. In the ad, in the to do card we can say kind of some kind of div and then we can add a button like an X pro. So if we put an x there and then here we can add remove to do or delete to do. And that's going to just be anonymous function. From here you can say remove delete to do. That would be a function like this. Press this should remove this guy. Let's go back. Add to do input to do card, delete to do delete to do. And then in the button we need to actually call it or invoke it. So delete to do. Cool. So remove this guy, remove this guy. And then from here we can actually in the app tsx remove this guy at the to do item dot id. So that's what we need to send over, right? Cool. And let's make that request now. Export async function delete to do. That takes the to do item id. That's going to be a string. Status equals await API post no delete and then it's going to be to dos. Let's go look at it again. Delete task and then we can just choose the backticks to do item ID and if status whoops, if status doesn't equal 200, you can just return null and then return data. All right, cool. So delete todo app tsx. So we can just say const. Remove delete delete item equals delete to do add to do item ID at the import there. And then if delete item the item you can say whoops. You can kind of add the import there. And then if delete item the item you can say whoops. You can kind of say get to do's get to do items get request. Oh. Await async. All right, cool. Now we're here. Now, if we remove this task, we should be able to remove them. Now they're all removed. Great. And in the next part, we will work on recover and update and make it a little bit better. Ui. Thank you.