Make A Personal GitHub Dashboard/Progress Tracker!

Key Takeaways

[Music] hello everybody and welcome to another youtube video so in today's video i am going to be showing you how to build a personal dashboard which is going to allow you to track your progress towards something like 100 days of code and view all of your github statistics now i'm just going to give you kind of the foundation and then you guys can extend this and build on it as you please but since it's pretty difficult for me to explain what this is without showing you let me show you a demonstration of what we're going to be building so this is kind of going to act as an internal tool a dashboard for yourself and of course you can customize this just what i've come up with so far so you can see we have a commit history in the top left we have all of our repositories from github showing here along with the description the branch the primary language and then i have 100 days of code tracker now i know a lot of you guys do this where you participate in 100 days of code and i see people posting tweets about it and trying to kind of keep track of their progress so i figured this would be a cool thing to showcase how you can come up with a very simple form here where you can implement the day the date maybe the repository that you used put a resource url and then add a bunch of notes about maybe what you accomplished for this day of 100 days of code then you could click log and what would happen is you would log this down here in kind of i guess your logs and of course this is just showing you a very rough look at what it is that you typed in you could display this in a different format just trying to show you that it's very easy to actually kind of make a log with the tool we're going to be using here which i'll get to in a second anyways let's just go to the commit history i'm going to type in my username which is tech with tim if i type it correctly i spelt it wrong then you'll see it'll give me all of my history here as a bar chart so there's all kinds of stuff we can do with this software i'm going to talk about a lot of it in this video but this is kind of going to be the final project building this nice personal dashboard shows you your commit history or any user's commit history for that matter shows you all of your repositories and gives you a way to actually track your progress of course you can do something other than 100 days of code i'm going to show you how to add something into a database and have this stored persistently so with that said let me head over to another website and i'll talk to you about the tool we're actually going to be using to build this project alright so i'm here on retool.com now retool is the sponsor of this video but they're also the platform that we're going to be using to build this internal dashboard now retool is an awesome platform it is built for developers but it's also low code so what it lets you do is very rapidly build internal applications and aggregate a ton of data sources together so say you have data from a rest api a few sql databases maybe a mongodb database maybe you have your own database that you're creating whatever it may be you can aggregate all of that in one location have some preset queries that you want to run on this data and then use those queries to update your dashboard so maybe you have a few different tables some charts whatever it's going to be retool will automatically refresh those whenever you rerun the queries and it's really awesome to just quickly build an internal tool and kind of visualize data in fact the application that i built here took me about an hour when i was kind of tinkering and still learning the platform and so i'm going to show you how to build it here even quicker and we are messing with multiple databases multiple data sources and showing a bunch of different components now retool also has a graphical user interface that allows you to drag components directly onto the screen use javascript code to dynamically render what's inside of those components it's very cool and anyways i'll show you more about it when we actually get into the platform now retool is free you can try it for free by going to the link in the description and signing up for an account and everything i do in this video is going to be from a free trial account so i'm not showing you any features that you won't directly have access to now even once your free trial ends if you've already built the application you can still view it use it as you normally would it's like a functioning application it's hosted online for you for free and yeah that's pretty much all i need to talk about for retool so let's sign into an account i'm going to assume you guys have done that at this point in time and then we'll create a new project and we'll start building out this application all right so i've just set up a fresh retool account and now i've been brought to this page now this is so we can set up our first application and you can see it's asking me to connect a database or an api now there's a ton of different options here we are going to set up a postgres database later on but for now i want to do the github integration or the github api because that's how we're going to retrieve the different repositories that we have as well as our contribution history so i'm going to click on github here and i'm just going to give this a name i'll just say github and then i'll go with tech with tim because that's my username now for the username i'm going to do this and then we need a personal access token now you can click on this link and it will allow you to generate a token i already have one so i will insert one here test my connection and then create this resource i'm going to assume you guys can get through this step again just read this kind of thing here to make a personal access token paste it in and then you should be good to go all right so i've just inserted my personal access token and now the github resource is set up now you're going to see that it brings you through a tutorial feel free to go through this it's probably helpful i've already looked at how to do this though so i'm just going to skip the tutorial for now so let's just kind of do a quick platform overview and then we'll start building the application so right down here you have kind of your query view now this is where you can view all of your different resources and you can set up queries that can run whenever you want so for example we just have a sql query here that's going to select everything from a database this is just a database that's provided to you to do some testing operations it's called onboardingdb now we're not going to use that but you can see we have github tech with tim that's our github resource and now inside of here i can write graphql if i want and actually do queries if you're unfamiliar with graphql you're going to have to find a tutorial on that i'm not really going to explain it a ton in this video but i will show you a few queries that you can run that will give you repository information contribution information all that type of stuff anyways though you select your resource you can choose when you want this query to run and then you can actually have the query in here you can put variables headers and then transformers and event handlers these are really cool because for example if the query fails you can show like an error message on the screen to the user all kinds of other stuff you can do and then of course you save as many queries as you want here and you can have them triggered when other queries run and do all kinds of stuff okay so i'm going to close that for now that's kind of the query view we'll get to that in a second on the right hand side we have i guess the component view and this is where you're actually able to view all of the components that you can just drag right onto the user interface so i can just take a table and just put it here and then i could select the data that i want here it's saying query1.data so that would be this now currently we don't actually have anything in query one i also haven't saved query one and so that's why it's not updated anyways i'm going to delete the table i just wanted to showcase that to you okay come on delete let's delete it like that all right continuing we have our inspect so if i click on an element like this i can view all the different properties of it you know i can change the layout of the menu change the styles i can also change the name of it because i can access this in javascript code when i'm actually i guess dynamically showing stuff on the screen alright so i think that's pretty much it for the platform overview very simple and intuitive to use i'll also mention you can preview the app here and you can share this app with other people by clicking on the share button for now though what i want to do is just modify the name of this app and i'll just call this personal dashboard for now uh feel free to name it whatever you want all right so my screen just updated now we are on the personal dashboard project and the first thing i want to do is just set up a few interface components and then we'll actually link some data to them and you can see how it kind of updates in live time so i'm going to drag in a text input here from the right hand side and this is going to be to enter the github username that you want to view the commit history for so for the placeholder here i'm going to call this and i'm going to make this enter and then github like that and then username for the label i'm actually going to hide the label i don't want any label here i'm going to show the clear button that's fine and then for the prefix icon let's go with a user so let's click user like this and we'll just do a little user icon looks good to me um other than that i want kind of a chart so that i can actually view the github history right so let's go with chart let's drag this in i'll make this a little bit bigger and then we can extend this so it just lines up with the chart now we will write the content of the chart in a second but for now i just want to put that in and for the title of the chart i should be able to find this somewhere bar chart data source okay title here we are let's go with commit history like that perfect that's our title and we'll leave it as a bar chart for now now i will change the name to just be commit history and i'm also going to change the name of this input field here to be github and then username because we're going to reference this in our code perfect okay so now we have our input and we have our chart the next thing i'm going to do is insert a table and this table is going to show all of our github repositories so right now you can see the data is from query1.data we'll change that in a minute but let's put some text above this and i'll show you that with the text it's really cool you can actually directly just use markdown inside of this text so if i go here i can select markdown or plain text with markdown what i can do is something like this i can do let's go with three pound signs for heading three and then let's make this repositories did i spell that right repositories i think i did okay now if i want this to be center let's just lay that out in the center i'm going to make that go down just so it lines up a bit with that field and for now that looks good to me perfect now let's just change the name of this table and let's make this repo table great okay so there we go we have kind of the first part of our ui so let's deal with this part right now and then we'll work with the hundred days of code track okay so i want to display some data in the commit history and this data is going to be based on whatever i type in here right so if i type tech with tim then i want to display tech with tim's commit history so what i need to do is run a query on my github resource here and that's going to give me all of the commit history for a specific user so the first thing i'm going to do here is just change the name of this query so let's just click rename here and let's make this get commit like this and then data now before i even do the query i'll show you that if we want to use the data from this query in commit history what we can do is just go to data source here and just put the name of the query so getcommit.data you can see the autocomplete showing up and the reason why i'm putting this inside of two curly braces is because this is a javascript code so whenever you want to embed javascript code you just do it inside of two curly braces and you can see it's actually going to give me whatever the return data is right here and i can view it underneath and if i want to pop this out i just click this button and then this little bit larger so i can read this easier okay so i'm not going to go through the query and kind of how you come up with it i'm just going to paste it in from my other screen because it will be pretty complicated if i explained all of these these queries so i'm just going to paste in this query i'll pop this up so you guys can read this a little bit easier we have query user the login is going to be text input one dot value now this is actually the incorrect name i need to reference this field right here which is the github username so i'm going to put github username like that and now whatever they type in this field is going to be passed as the login and the login is just the username of the user now i need to make sure i do value to actually get the text value and what i'm looking for here is the name the contributions collection contribution calendar colors total contributions weeks and then all of this other data again i can't necessarily explain how you come up with this query because you have to look at the github api for that but this is going to give us every single day or sorry every single week and how many commits we had during each day of that week so we'll be able to kind of parse through this data here and then access what it is that we want which is going to be the number of commits per day which will display in this chart as a bar chart so anyways i'll click done here and now what i can do is i can save and run this query so let's do that and if i go here notice it gives me that my name is timmersica right it shows me the different colors gives me all of my weeks for each week we have the contribution days let me make this a bit larger so we can read this alright so i've made this a bit larger and we can see that when we ran this query we're going to get weeks now weeks will be a list all of the elements in this list are going to be json objects and they're going to have the contribution days key i guess and that's going to allow us to access other json objects that have a color and the number of contributions that we did in that specific day so you can see i haven't done too many contributions this year regardless though if we scroll through here we will see all the different contributions that i have for the entire year and it also gives us the color that would have shown up on kind of like the github colored commit history bar chart whatever you want to call okay so that is that query so now that we've ran this query we can access the data of this query from anywhere now the format of this data is not going to be in the correct format for us to actually graph it directly so we'll have to transform it slightly but i'll show you how to do that so for now when i have getcommit.org getcommitdata.data notice it's not showing anything in here the reason it's not showing anything is again because the format of this data is kind of incorrect to be graphed so what i'm going to do now is actually add a javascript transformer and what this is going to allow me to do is view the return value of that query and transform that data using javascript into a format that's going to be easier for me to graph so essentially what i want to do here in this transformer is i want to take the data from this query and i want to flatten all of the weeks so that i have each individual day as one element in an array because what i want to do here when i'm graphing this is i want to use the date of each of my days as the x-axis and the number of contributions on that day is the y-axis so i need to flatten these into individual elements so that i can choose the x and y axis anyways let me show you how we do that so i'm going to rename this transformer to flatten commit data and then what i'll do here is the following i will say return and then to access my query i'm going to put inside of curly braces the get commit data like that now i want the data so i'm going to do dot data now the reason i'm doing dot data is because let's save this first if we look here we have data that's going to be returned as a key then we have user then we're going to have contribution collection then calendar then weeks then contribution days so on and so forth so i'll show you how we get all of that but that's why i'm doing data and if i hover this you can see it actually shows me that the other key is user so now i'm going to access dot user then after user i want contribution collection then contribution calendar then dot weeks now since doll weeks is going to be a list as it's showing me right here i need to map all of the values in these weeks to a function that's going to give me all of the days in those weeks so i'm going to put after the curly braces here dot map and then inside of parentheses i'll put week because i'm mapping all of my weeks to a week and then what i'm going to do is return from here the week dot and then this is going to be the contribution days okay i think that is good let me just save this and now go check this data so we can see yeah we have contribution days so let's go to flat and commit data let's preview this and this is what it's returning so let's make this a bit larger so we now have a bunch of lists inside of a list however i want all of these lists to be flattened so what i'm going to do is do dot flat and then 1 and now if i save this and i preview it notice that each element now is going to be an individual day so i have all of my different days and then i have each day which is a color contribution count date and weekday hopefully that makes sense but i'm just going to use the date and the contribution count again for my x and y axis perfect so now we have this transformer so what i can do is go to my commit history and i can change the data here to rather than get commit data to be the return value of my transformer so i'm going to say flatten commit data dot and then dot value and also just in case you're confused on how to write this you can click on this little button right here to learn more about how to write js transformers anyways i have the value now but the issue is i'm not seeing the graph and the reason why i'm not seeing the graph is because if we look at value we just have a bunch of json objects that's not good enough to actually graph this i need to manually specify the x and the y axis so i can do that from plotly so if i go to plotly here what i can actually do inside of here is i can write a specification for this graph now i'm not going to necessarily explain plotly again you can click here to read more about plotly but i will show you how we specify the x and y axis values as well as the name of the graph the type of the graph that type of stuff so for the type of this graph i want this to be a bar graph so i'll just specify bar like that and then for the x-axis i'm going to say x and i'm going to reference the flatten commit data dot and then this is going to be value and then i need to map every single one of these values here which is going to be my individual days to the contribution or sorry to the date because that's going to be my x-axis so i'm going to say dot map and then inside of here we will take in i guess a day and we will map this to day and then this is going to be dot date like that so now we should have all the dates on our x-axis but i of course need to do the y-axis so let's go here and let's do y so we're going to go y and then rather than date this is going to be contribution like that and then count okay let's hit done and now if i put in a name uh hopefully this should actually start graphing all right so i realized i made a quick mistake here i accidentally added the the curly braces when i don't need to do that because i'm just going to directly have the return value here from this map function so let me just remove these and now we should see that it's actually showing up okay awesome now we're actually getting the graph i was looking at that like why is this not working now one thing we see here is that we have this trace zero for kind of the legend of what these blue bars are so what i'm going to do is just put something in here that says a name and the name is just going to be commit and then that will tell us if i spell commits correctly what the legend should be for this all right hopefully that makes sense there's a ton of other things you can add to this plotly i guess json specification again you can read those from this link right here this is the basics you pass all the values for x and all of the values for y and then it should automatically plot it for you as we can see it's showing up with my commit history now if we put someone else's commit history in this will work as well i don't know anyone else's username off the top of my head i know mine though tech with tim and if you guys do this you put in my username you will see my commits because those are publicly available you won't see any commits to private repositories but any of my public commits you can see right here that's why i have so few of them anyways now what we can do is update this repository table because i've showed you how we can actually write the uh the query how we save the query how we have the transformer so now let's delete query one and let's make a new one here that's going to give us all the repositories that we have in our account so i'm going to go for new query i'm going to go resource query and yes we're going to use github again we'll run query automatically when inputs change perfect so that means like when we change this here it's going to automatically update the query although this is not going to be for this table which i'll show you in a second so what i'm going to do is paste in a query i just have to find it from my other screen here so let's grab the query and let's paste this in okay so this is the query to get all the data about your repositories this will just give you the public repositories i believe it may give you the private ones but i think it's just your public repositories and you'll see that you'll get all the information like name description the default branch the primary language etc so let's rename this query after i save it so let's rename this to say get repo info like that again you guys can pause the video and type this out i'm not going to explain the query and now if i preview this you're going to see that we will get all of the data for my repos so we'll get data we'll get viewer repositories total count then it gives me the nodes and every single node is going to have the information about the repository so i have pi game tutorials golf game side scroller game etc so now what i want to do is use that data inside of this table so to do that i'm going to change from query1.data to be get repo info.data and it says invalid value try passing in an array of objects or the result of a sql query with something like query1.data now if i actually look at data you can see that we're getting.viewer.repositories etc so what i need to do here is i just need to access the specific key that i want to display which in this case is going to be repositories and then note so let's go data dot and then viewer dot and then repositories dot and then nodes and now you can see it's going to show me all of this information right the name the default branch and the primary language however this doesn't look very attractive it's kind of all you know like jsonified we have like name master name python so what i can do is i can specify for each column what i actually want to display by going to the columns and then having a specific mapped value for this column so i'm going to say self this is inside of actually the name column can stay the same sorry i don't want to do name let's do let's go here let's do default branch ref and for here we will just say self dot and then name now when i do that it's going to access the name attribute on the json object representing this column and so i just get the actual name rather than all that other stuff so like the key beforehand okay now let's go to primary language so i keep clicking out of this let's go primary language and same thing here we're just going to say self dot and then this is going to be name and now it should just show us python perfect and then i also want to view the description as one of the columns although for some reason it's not showing up so let's see if we can enable that if i go to description let me just hide that and show that and then there we go we can see the description now if i want to resize these i can just kind of move them around so that's what i'll do here and that looks good to me so that's as simple as it is to display your repositories now we could change like the cosmetics of this if we want you can see i can click on columns and sort them by name and whatnot let me click back on this table and let's go and have compact mode now when i do compact mode it's going to show me a bunch in the table which is kind of what i want here and then i'll have less pages to click through so i'm just going to select that and then you can toggle the download button loading state refresh button all that type of stuff perfect now let's just look at this query again because i didn't really explain this at all if i go to get repo info that's not what i want to look at i want to look at this right here notice how i have affiliations owner now what this is doing is specifying that you can only view the data of the owner of the github account that's currently linked so when you actually connected the github api you would have done some authentication right by putting in your personal access token now that means that you are the owner of this github account and so when i put owner that's what it's showing you it's showing you all of the repositories for the owner so me changing this here isn't going to modify this and i can't look up the repositories of everyone else at least not using this query so in this case i'm just using owner and showing me my current repositories which is what i want to see now i also have first being 100 so it's only going to show me the first 100 repositories if you wanted more you could put say 200 or if you wanted less maybe go with like 50 whatever right so i'm just going to go with 104 right now anyways that's kind of how the query works again don't really want to get too much into the graphql you can look at the github api to see how these work just showing you a few of them kind of for example purposes okay so now that we have that let's start building the form that's going to allow us to log information about 100 days of code so to build this component i'm going to start by dragging in a container now this container is just going to hold everything or all of our components for kind of the form and for the form what i want people to enter is the day the date the repository that they used if they use any repository that will be optional and then any resource url they want to store and then any notes right so you saw what it looks like in the demo but that's kind of the information we want and then there'll be a button that says log and when you click that it will add that information to the database assuming it's not conflicting with any other data so let's just start dragging in some components here for the date i'm going to have or sorry for the day i'm going to have a number input so let's drag this guy in we can make it pretty small then what else do we want we're going to want the date so let's see if we can find a date input here perfect there's one right here so let's go with date i don't really care about the time so we can just make a date and then we want to have the repository so we need like a select or like a drop down uh yeah i think select is fine we go with select like that uh yep okay awesome and then we also want to have a url so we'll put a url like that okay so let's start styling these and make them look a little bit better first this guy can be a little bit larger so let's drag that over gotta move this over now too okay label will go in here nice okay so for this one let's call this the day input let's spell input correctly let's make the default value 1 because day 0 doesn't make too much sense we don't really need enter value i mean we could say enter day if we want and for the minimum let's make it one and for the maximum we don't really need a maximum because i guess you theoretically could go over 100 days now for the label i'm just going to say day and then number like that all right so that's good for day now for the date let's just add the name here of date let's make this date input like that and then new date is fine and the default value will just be the current date which is great okay now for this one here we want to have repository so i'm going to say select a repo like that and then for the label we'll say repository and what we want is we want a list of all of our repositories now thankfully we already have a query that gives us all of the repositories so let's actually use the list of all of the repository names here as our options for the dropdown so if i go back here i can see that how i get this is getrepoinfo.data.viewer.repositories.nodes so now what i want to do is just map every single node to the name of the repositories so that's what we'll do so let's go here let's go to values and for values this is going to be getrepoinfo.data.viewer.repositories.nodes.map and then we'll map a repo to the repo oops type that in incorrectly okay again to the repo dot name okay so that should be good now we have all that now for the labels i'm going to paste the exact same thing because theoretically you could have different labels than values and that means when you click on a value or you click on a label sorry it would associate with the value in this case i just want them to be the same thing you can see if i highlight over this here we're getting all of the names of our different repositories perfect okay so now if i click on this we can see that we have all of our repositories showing up in here i can select one awesome looks good now one thing i want to do is make it so that the label and the input field are closer together now i forget exactly how to do that but i think i can do something like specify the width of my label yes that's right here so let's make the label width just something like 20 so that we have a larger kind of field here for our uh our input now we're gonna do the same thing with url so we're gonna call this the url input okay and then for the label width can i find that somewhere okay that's right here let's make that 20 and instead of retool.com actually we can leave retool.com and url let's name this instead oh no pattern will be you are okay that's fine but for the label where is the label here it is i want this to be resource url perfect okay so that's kind of the top of our container now we can set the title of this container we don't really need to name it anything for the title i will say a hundred days of code tracker that's fine we want to center this so let's put it in the center and then if you want to make it larger just remove one of those and there we go okay so now we want some notes or something so let's see if i can find maybe not note maybe this is going to be like text input okay rich text editor that's what i want to drag in here so let's try to get this inside of the component okay there we go and now let's just make this a lot larger and you can see that we have all the formatting options here too right so we're able to actually bold uh italicize underscore or underline whatever right let's make that even larger and now we just want a button at the bottom let's call this though notes input and we want a button and this button will let us log so let's put the button right if i could get this in it's a little bit tricky to get it in the component here okay i successfully placed the button at the bottom of the component now let's just resize this a little bit and for the text on the button let's call this log and then we can just call this log button like that all right so now what i want to do is actually utilize a sql database to store the information in here when i hit this log button so i'm going to need to make a new query here to actually create the new database table so i'm going to make a new resource query this is going to use the manage db this is an internal database that you have access to and that you can create new tables with manageddb postgresql and then from here i'm just going to again copy in a query feel free to pause the video and paste this if you want it's going to create a table called days of code it's going to have an id key a day key a date time a repo a resource url and notes which will be text now i'm not going to explain sql again you can read all kinds of tutorials about sql online but essentially it will create this table if it does not exist and then it will have all of these keys inside of it so i can just run this query it should just create the table for me i'm not going to get any data back now that the table exists i'll be able to actually add data to it so the first thing i'm going to do is add a or rename this query let's make this create table and now let's make a query that can just give us all of the data from the table and insert data into the table so actually it probably makes sense to do the insert first let's make a new resource query let's call this insert log and then again i'm going to paste something in here and i will explain how this works so i'm going to say insert into days of code and i'm going to put all of the columns that i want to insert values for so in this case day date time repo resource url and notes and then the values i'm going to modify here to be equal to the corresponding fields that i have so for the first value which is my day i want this to be let's go with day input and then dot value okay for the next value i need to put inside of curly braces because i'm accessing variables here i want the date so i'm going to go with the date input dot value okay and then for the repo i'm gonna go with the repo input or what did i call this um oh select one i gotta rename this let's call this repo input okay so now we're going to make this the repo input dot value and you can probably guess what we're going to do for the next one we're going to do the resource url what i call this this is the url and input spelled incorrectly so let's fix that name okay so let's go with the url and then input dot value and then finally after this we want the notes so i'm going to go with the note input dot value okay so there we go now we have all of the information that would have been typed into this form so what happens is we're now going to need to trigger this query whenever we hit the log button which i will show you in a second however we're not really going to know if this works yet until we actually able to display the data so now let's make a table that can display the data from another query that we're going to write which will give us essentially all of the rows from this new table that we made so i'm going to go to insert let's go with table okay we'll add a heading for it later but for now i just want the data and for the data in this table i'm going to delete all of this and we'll make it equal to a query that we're going to create now so i'm going to make a new query and let's call this query get logs and we're just going to say select asterisks from and then a hundred again it's not going to be 100 it's going to be days of code okay so let's actually preview this query we're gonna see that we get id day date time repo resource url and notes because those are all the columns that we have but we currently have no data in here so we're not getting any rows okay uh if i go to create table i'll just mention to you that the name of the table is days of code so that's why i'm using days of code when i'm selecting from the table same with inserting i'm inserting into days of code okay so let's go to get logs here this is the query that we want to now run or we want to use for this table so for this table here i'm going to say get logs dot and then it's either data or values okay data is good you can see all of our columns are showing up now what we want to do is make it so we hit the log button we actually call the insert log query and then we run that query and insert the data so let's go to the log button and let's go to our event handlers now let's make a new event the event is on click the action is trigger query but we could do a bunch of other things like confetti as well i'm going to show you that in a second actually because the confetti is really cool but now for the query it's going to be insert log and that's actually all we need to do we just run the insert log query it already has that there for us perfect now we can make another event handler so i'm going to go event handler and if i wanted to i can make it so confetti is going to go on the screen when we click this so i could go confetti or export data or anything else however i only want to show confetti if this is successful so i'm going to show you how we can do that it's not going to be from here anyways now let's actually insert some data and let's see if this works so for a repository let me select kibi let's just go https coloncolontechwithtim.net okay for the text i will go with hello world because this is day one and then let's hit lock okay so it looks like that happened successfully but notice this table didn't update now the reason this table didn't update is because we haven't re-ran the get logs query so it's only going to show us what this query is displaying and we haven't re-ran it so i need to manually run this to update it or we can actually have it so this query gets triggered when the insert log query is finished which i'll show you how to do in a second for now though let me just refresh which is going to rerun the query so i did that and now we can see we have id 1 day 1 date time repo resource url and notes and it's going to give us to them give it to us in html sorry perfect okay so that is showing up that is working now one thing i do want to add is an ability to delete this i'll do that last though because that's pretty easy for now though i want to make it so when we hit the log button and we run the insert log query if this is successful we update this table automatically we don't have to hit refresh so to do that i'm going to add an event handler to this query which is something you can do which is really cool and i'm going to say on success trigger query and the query i want to trigger is get logs so now that query will be reran and the table will automatically be updated whenever we add an item in so let's test this let's make the day 2. let's increment the date to the 16th we can change the repo here hello world two all right so let's hit the log button and now notice when i do this it automatically updates the table for us and adds this new entry awesome okay so now what i will do is make it so confetti shows up when this is successful so to do that i can go to the insert log and i can add a new event handler and on success i can simply put confetti awesome and that means whenever i hit log in is successful confetti will show up on the screen i can also add another event handler and say on failure then what i want to do is not run a query but i actually want to show a notification so i'm going to say show notification i'm going to say failure like that and we'll go failed to create lock okay and then let's go for type let's go with error duration we'll just leave it at the default of 4.5 and that looks good to me okay so let's save and i'll show you actually how we can do a failure if i try to add a day that already exists because of a constraint i have in the database this will fail so if i hit log now notice we get failure failed to create log right because this day already exists now if i make this day three and i log then we get confetti showing up on the screen awesome okay so that is now updating the table we're able to create the logs let's now see how we can delete the logs so to delete the logs i want to add a new column in here that says actions or something like that and i have a little button that says delete and when i hit delete i'm going to run another query that's going to delete this from the table so we can make that query first let's go new resource query let's say delete log and then let me reference my cheat sheet here although this is pretty straightforward to write we're going to say delete from this is going to be days of code i could put capitals but lowercase is fine and i'm going to say where day is equal to and then this is going to be what's this table name let's call this logs table okay so let's go logs table like that dot selected row dot id uh actually n is id going to work yes i think id will work i think that's fine okay so logs table dot selected row and then sorry this is going to be data dot id and that should give me the correct id perfect now notice if i select say this here and i go to id it's showing me four so it's going to delete the item with id equals that which actually means i need to change this sorry to be where id equals this because i was going to do day but i changed my mind and now we're going to do id all right so all this is going to do is delete whatever the row is that we are on however we're only going to trigger this query when we hit the delete button on one of these rows so let's now add a delete button so to do that i need to add another column so if i'm in this table let's go custom column let's call this actions okay column type will be can i do like a button do they have a button here uh looks like there might be let me look here okay button awesome so we can do button uh the value of the button we can just say delete that's fine for now and then on click of the button we want to run a query the query we want to run is delete log perfect that's all we need to do so now when i hit the delete button let's test it out it should just delete this item and it did actually delete it so if i refresh here you can see it's going to go away the issue is again we have we aren't manually calling the query to automatically refresh the table so we need to do that in the delete query event handlers so now when i go to sorry not delete query delete log when i go to delete log on success i'm going to trigger a query and this query is going to be get logs like that so now when we hit delete it should automatically update the table now let's add another event handler though to show uh confetti so let's go confetti on success nice and then one more for an error let's go event failure and let's go show notification we'll do failure like that and then we'll say could not delete log and type will be air perfect okay so let's try to add another log uh we can add day three sure let's log that okay it shows up uh the day is three id is five okay let's try to delete this one and automatically refreshes awesome so with that said we're pretty much done uh the last thing i'll do is just add a title here above this just so this is a little bit cleaner so let's give some space let's insert some text okay i want it to go about right here this text will be in markdown and we'll go with three headers and we will say i guess days of code logs and we might as well just put 100 days okay 100 days of code logs nice now i want this to be centered so let's center that and that looks good to me awesome so now we've completed this app and if we want to preview it we can go to preview and let's see how it looks okay so that looks a lot better than in our kind of ui earlier so now what i can do is type in username so let's go to tech with tim it's showing all of this and then we'll be able to see all of our data and create locks awesome all right so that is going to wrap up this application we also have a header that we could have modified but i'm not going to modify that for right now or really worry too much about the styling if you guys would like to view the code for this application i will leave a link to it in the description so you can just copy and paste anything you like and you can actually mess around with this app and view it kind of in the testing mode but yeah that's pretty much all i have for you so i hope you guys enjoyed the video if you did make sure to leave a like subscribe to the channel one more massive thanks to retool for sponsoring this video and i will see you in another one [Music]