Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Join Dustin as he showcases the actual process of constructing a task manager application when faced with an unfamiliar codebase. Using AI tools such as GitHub Copilot and ChatGPT to assist in bridging any gaps that come up along the way.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, what's up?
0:09
My name's Dustin, and
I'm a developer here at Treehouse.
0:10
Today I have a little bit of
a different type of video for you.
0:12
We're gonna be building
something out from scratch live.
0:15
So I'm gonna use GitHub Copilot to help
me build out some sort of task manager,
0:18
kind of like Trello.
0:23
But we're gonna use React, which is
something I'm not super comfortable with,
0:24
and we're gonna use GitHub Copilot to
basically help us when we struggle.
0:27
And I kinda wanna just show you how you
can use GitHub Copilot to help you out.
0:31
If you're unfamiliar with GitHub Copilot
or need a good introduction, check out
0:35
the description down below for a link to
our introduction to GitHub Copilot course.
0:39
But I also advise you not to follow
along with me just simply because what
0:43
GitHub Copilot offers you
may be different for me.
0:46
So just sit back, relax,
watch as I try to build something out, and
0:48
hopefully not fail,
then give it a try when you're finished.
0:51
But all I have here is
an empty text editor, and
0:54
I'm going to get started coding this out.
0:57
So let's get started.
0:59
Okay, so basically what I wanna do is,
1:01
I want to try to build this
out as much as I can myself.
1:03
And then when I fail or struggle,
we're gonna call on GitHub Copilot.
1:07
So just in case you aren't familiar
with what a task manager is or
1:11
what Trello is, let me open up Figma,
which is kinda like a design tool.
1:15
I use this to kinda visualize
what I wanna build.
1:20
This is kinda like a wireframing and
markup tool.
1:24
But I'm no designer, so
this is pretty basic.
1:28
But basically what we're gonna
try to build out is a task board,
1:30
which is gonna be this big gray box.
1:33
And inside the task board
we're gonna have three lists,
1:35
a not started, an in progress,
and a completed list.
1:39
And what we wanna do is click on this
button that each list is gonna have.
1:42
It's gonna say, Add Task.
1:46
We should be able to click this and
then a prompt should appear.
1:48
We'll type something in,
1:52
and it'll add that task that we put
in the prompt to the respective list.
1:54
And yeah, that's it,
we're not gonna do anything extra.
1:59
I know if you're used to Trello, you know
that you can drag and drop your tasks and
2:02
delete tasks.
2:07
But for the sake of keeping this video
a little bit short and not super,
2:08
super long, I just wanna try to
build out a basic task manager app
2:12
using my limited React knowledge and
some GitHub Copilot.
2:17
And we're gonna try to mimic this,
not so much the styles.
2:21
I didn't really go crazy
with the styles here, but
2:24
I do wanna kind of get
the structure the same.
2:26
So we'll see if GitHub Copilot can
help us with the CSS as well, but
2:28
I might have to hop in there and
do a little bit of CSS work myself.
2:31
So yeah, so with that being said,
2:35
let's hop back into the text editor and
get this started.
2:38
So I'm gonna open up
the terminal in my desktop, and
2:42
I'm just gonna run npm create vite@latest.
2:46
It's gonna create a new React app for me,
and I'll just call this task-manager.
2:49
And we're gonna use React.
2:53
And we're gonna use regular JavaScript,
not TypeScript.
2:55
So now let's cd into task-manager run
npm install to install everything
2:58
we need to spin up this React application.
3:03
And then once that's finished,
3:06
I'm gonna type in npm run dev
to spin up the React server.
3:08
Awesome, so let's run npm run dev.
3:11
And now we have our
server on localhost:5173.
3:15
So I'm gonna click that.
3:19
And this is our React app.
3:20
But now to get our React app into
the editor, awesome, there we go.
3:21
I opened it up in the editor.
3:28
So now I'm gonna actually have to
open up the terminal again and
3:29
run npm, oops,
run dev to spin up the server again.
3:34
And, awesome, there we go.
3:38
So I think for now I will leave,
now we'll leave the terminal open.
3:39
So the first thing I like to do with
a React app is just kind of delete all
3:46
the unnecessary files.
3:49
So inside of the source folder,
I'm just gonna delete the assets folder.
3:50
The app.css, the index.css,
and I'll keep the ESLint.
3:54
Okay, so we should mainly just have
the main and app files in here.
4:02
So inside of main, let's go ahead and
delete the import for the CSS.
4:06
Since we're not using that, let's save.
4:10
And inside of app, we're just
gonna delete everything, okay, and
4:13
I'm just gonna write function App.
4:18
We're gonna return maybe just
an h1 that says, Hello World,
4:20
and then we're gonna export default App.
4:25
And if you noticed,
some of the code that it was offering for
4:28
me to write was actually
from GitHub Copilot.
4:32
So I'm gonna hit Save.
4:36
Looks like all the errors went away.
4:37
And if we open up our browser,
we see Hello World.
4:39
So now we have our basic
application ready.
4:42
And yeah, so now let's get started.
4:44
For the most part,
we're not gonna create any new files.
4:47
I'm not gonna create components.
4:50
I'm just gonna try to do everything
in the one file, keep this simple.
4:52
So I'm gonna close the explore window.
4:55
And I really don't like how
much space this is taking up,
4:57
maybe we can just move it to the bottom.
5:00
We might have to move it back later on,
but
5:03
I'll push the terminal down to the bottom.
5:05
So now we have our app on the right,
and then our code on the left.
5:07
So what do we wanna do?
5:11
How do we wanna get this started?
5:13
That's a good question.
5:15
[LAUGH] I'm not super familiar with React.
5:16
So inside of the app component,
5:18
let's just render a TaskBoard component.
5:22
And what I wanna do is
actually create that.
5:26
So let's do function TaskBoard.
5:28
And we want to return,
let's return an h1 that says TaskBoard,
5:31
just to make sure everything's working.
5:35
Cool, so we have our TaskBoard rendering,
which is this function here.
5:38
And that's the only
thing app is rendering.
5:42
And this is coming from main.
5:44
Main is just rendering our app, so
it's essentially rendering the TaskBoard.
5:46
So what I wanna do is try to put
everything inside of this TaskBoard
5:50
component.
5:54
And I know I'm gonna need
three lists as child elements.
5:55
I also know that I'm gonna need state to
handle all this data and updating the UI.
6:00
So let's go ahead and import.
6:05
We're gonna import useState from React.
6:08
And now I'm not sure where
we're gonna put the state.
6:13
I'm not sure if that goes into app or
if that goes into TaskBoard,
6:17
simply because I'm not
super familiar with state.
6:22
Let's see,
let's actually simplify this a good bit.
6:27
Instead of just returning a TaskBooard
component, let's put everything inside of
6:29
app, and maybe we can refactor
this a little bit later.
6:34
So since I know that we're just
gonna have this one component,
6:36
let's put the state in here.
6:40
Okay, so it automatically, as you can see,
6:42
GitHub Copilot wants to know
that I wanna set up some state.
6:44
But we're not setting up account or
a set count,
6:47
we're actually gonna be
setting up our tasks.
6:49
So let's start writing out
what we want on typing tasks.
6:52
And it looks like it wants to
automatically write setTasks as
6:57
a function, and it wants to set
up an array inside of useState.
7:02
So let's just hit Enter and
see what it does.
7:06
Okay, so it wants to give us
an object with an id of 1.
7:09
The title of learn React and
a done of false.
7:13
This is somewhat right, but
let's update this a little bit.
7:17
So the title I'm gonna put to Not Started.
7:21
And then the only other thing
I want in here is tasks.
7:26
So I'm gonna use this as an array, and
it already knew that I wanted an array.
7:32
So that's awesome.
7:35
We're gonna leave this empty for
now, but I'm gonna hit Enter.
7:37
And cool.
7:40
So it's suggesting that I want to set
up another object in this array for
7:41
our state with an id of 2,
a title of In Progress.
7:48
So it knew that I wanted to have an in
progress one within a empty array for
7:52
tasks.
7:57
So let's see if it also knows
that we want a completed.
7:57
And it does, awesome.
8:01
Are we using completed in the UI?
8:02
Yeah, Completed, In Progress,
and Not Started.
8:06
So that's pretty accurate.
8:08
Not Started, In Progress,
and Completed, awesome.
8:09
So now we'll hit Tab again, and
it's gonna wanna close off our state.
8:12
So that's awesome.
8:16
Inside the return statement, I want to set
up a className, a container, basically.
8:17
And we're gonna call this
container task-board.
8:24
And in here I want to
render our three lists.
8:29
So what I could do is, I know we're gonna
need a map over the data that's in state.
8:32
So I'm gonna start typing a curly
bracket to write some JavaScript.
8:37
And it looks like it already knows I
want to actually map over some data.
8:42
So I'm gonna hit Enter.
8:45
So it's giving me a task column,
not sure I wanted that, but
8:49
let's just see what it gives us.
8:52
So it wants to put our tittle in h3,
which is pretty cool.
8:54
Awesome, then it gives us a task list.
8:59
I don't want that as a dev though,
that is a UL item.
9:01
But anyway, cool.
9:06
So now it wants to map, inside of this UL,
it wants to map the tasks.
9:08
So it's doing task.tasks.map,
which is basically tasks,
9:13
and then tasks, and then we're mapping
over the elements inside of our array.
9:18
Even though they're empty right now,
9:25
this is still what it wants to do
whenever this is gonna be full.
9:27
So in here, cool, so
it's gonna create a list item, and
9:31
it's gonna with className of task-item,
and then the task.title.
9:34
So not sure why it wants
to put task.title in there.
9:39
I don't know,
let's just see what it's doing.
9:48
Okay, so we're gonna close that off.
9:50
And that's it,
it's not wanting to close off anymore, so
9:56
that's definitely gonna
give us some errors.
9:59
So, it looks like it's closing this off.
10:02
So, what we need to do
is close off our ul.
10:03
So, I kinda knew that, how to close
that for me after I started typing it.
10:06
Okay, so now we're closing off our initial
map, and now we're closing off our div.
10:11
And then now we're actually
closing off the initial.
10:15
No, I don't think we need that.
10:23
So, let's make sure we're
starting off our div here.
10:24
And we're closing it, so that's not good.
10:27
This ul should be closed way sooner.
10:30
Uh-oh, okay, so we messed up a little bit.
10:32
It looks like get up
copilot didn't close a tag.
10:35
So, let's make sure we're
closing everything that we need.
10:38
So, our task first map that we're
our first set of JavaScript is here.
10:41
Our second one is here, and
the second one is being closed.
10:49
So, we do need to close that.
10:53
I think this ul shouldn't be here.
10:54
The ending ul.
10:56
Or should it, no yeah, it should be here.
11:00
So, we should be closing
the column after this.
11:03
Which we are.
11:06
Okay, and then we are closing off this
map and then our closing div tags.
11:09
So, that all looks right.
11:15
And then our return, and
then our end of our function.
11:16
So, there is some sort
of syntax error here.
11:22
So, let's throw this into ChatGPT and
11:25
see if that can help us figure out,
11:29
What's wrong with this return statement?
11:36
So, let's type in what is wrong
with our return statement?
11:39
This is some React code.
11:46
And let's paste in our return statement.
11:49
And it says the code you provided seems
to be rendering a task board using React.
11:53
However, there is a potential issue with
the variable naming that might be causing
11:56
confusion and unexpected behavior.
11:59
In the inner map function inside of
the second tasks dot task dot map block.
12:02
You're using the same
variable name task for
12:07
the iteration variable as
the outer map function.
12:10
This can lead to unexpected behavior,
because the inner task variable will
12:13
shadow the outer task variable
making the outer one inaccessible.
12:16
With the interscope to fix this issue.
12:20
You should use a different
variable named map.
12:22
I'm sorry, a different variable names for
the inner and outer map functions.
12:26
Okay,so basically our iterator is using
task for our inner map function and
12:30
then we're also using it here.
12:34
So, it probably doesn't know
since this lives inside of the.
12:36
Basically, the first map iteration,
12:41
it doesn't know which task I'm
referring to when I use task.
12:44
So, whenever we're using task here to.
12:49
We're kind of mapping it to
the item is being iterated.
12:51
It doesn't know if we're
referencing this task or this task.
12:55
So, that makes a lot of sense.
13:00
So, let's see if we can
figure this out better.
13:01
So, our first one.
13:05
Let's actually name this list.
13:06
So, we'll name that list.
13:10
And for this first one,
we'll do list dot title.
13:11
Which makes more sense.
13:13
This isn't a task.
13:15
This is a list.
13:15
So, that works and
we're still getting an error here.
13:17
So, let's figure out what's going on?
13:20
Actually, you know what?
13:24
Let's just save this and
check out what it says in the browser.
13:25
So in the console, task is not defined.
13:30
And this is on line 19, task.
13:34
Okay, so we need to put list here,
13:37
because that was part of the iterator for
the first map.
13:41
Sometimes nesting, array methods
can kind of get a little confusing.
13:47
But, we'll save that.
13:52
And now, we're also getting a task is
not defined in this is at line 18.
13:54
So, line 18.
14:01
Well, that doesn't make any sense.
14:02
All right, so let's copy this entire
code and throw this in ChatGPT.
14:08
Or, you know what, let's copy what?
14:13
Now, yeah, no, no, let's not do that.
14:15
Let's copy this.
14:18
I am getting errors with this.
14:19
React code is everything looking.
14:27
Okay, and let's paste in our code.
14:32
The code you provided is mostly correct,
but
14:35
I noticed a small issue related
to rendering the tasks items.
14:37
Since, you're using the tasks
array inside of the state object.
14:41
And then mapping through
it to under tasks.
14:44
You should make sure you're passing the
correct data structure to your state when
14:46
updating tasks.
14:49
Currently you have and it shows,
tasks, set tasks you state, and
14:51
then all of our data that's in state.
14:55
Here's what I can do.
14:59
Okay.
So, I want to use some of these.
15:10
Let's, copy this and see if this works.
15:13
It looks like it's returning
our entire app file.
15:15
So, let's Control A-Delete it all.
15:17
Hit paste.
15:20
And now, I'm not seeing any red lines.
15:21
So, let's see if this is working.
15:26
So, no more errors.
15:29
And now we see our lists,
that's great,okay.
15:30
So, let's see if we have a task in here.
15:34
Hello, world.
15:39
I will put hello world in here.
15:41
And it looks like it is adding an input,
which is not what we wanted.
15:43
So, there must be an input that
it's putting in here somewhere.
15:46
Okay, so, yeah.
15:50
We are seeing an input right here.
15:52
So, let's go ahead and remove this input.
15:55
We do not need that.
15:56
All we wanna do is actually do tasks.
16:00
That title is all we need, right?
16:06
So, why aren't we seeing
tasks that title in
16:08
here if it's actually rendering tasks
got title inside of this list item.
16:13
Yeah, I'm not sure it's,
let's remove this input.
16:21
I don't think we'll need that.
16:24
And it is showing a list item here.
16:28
Because, we do have hello
world inside of our array.
16:32
But, it's showing an empty list item,
I'm not sure why.
16:38
So, let's actually just task.title.
16:49
Okay, so that's why,
it's looking for a title property.
16:56
So, I wonder if I put a title hello
world if it would show and it does.
16:59
So that's cool, but
that's not what we want.
17:07
We want a very basic array of tasks.
17:09
So, let's add hello world
right back in there.
17:12
And instead of doing Task got title, which
is gonna be task and that should work.
17:17
Sweet it does.
17:25
Cool, cool, cool, cool.
17:26
So, that was extremely complex and a lot
of troubleshooting just starting off.
17:28
Hopefully, this doesn't keep happening,
but.
17:32
So, we have this update task function and
that ChatGPT gave us.
17:35
So, updateTask.
17:42
It takes a list Index,
task index and an updated title.
17:45
Updated tasks equals, and we're spreading
the tasks And this update task.
17:54
Okay, so then it calls set tasks
to actually reset our state.
18:02
So, this is cool.
18:07
This makes sense.
18:07
We'll definitely use this.
18:08
I do know that each list,
which will be this div right here.
18:09
I do want at the bottom
of the ul a button and
18:16
we want to add task.
18:22
So, each one of these tasks
should have this button.
18:26
And I'm wondering if on click,
we can do update task
18:31
which is that function that
we got from ChatGPT, right?
18:35
But, we need to find a way
to give it a new task.
18:42
So, what I would like is to prompt, right?
18:46
So, let new task equal prompt.
18:49
Add a task.
18:54
So, what would happen if we
hit Add Task is yeah, cool.
18:56
So, now we have this Add Task prompt.
19:00
I don't think anything will work here.
19:03
Let's do hello world.
19:04
Hit Okay, yeah, nothing happens.
19:06
So, const updated tasks.
19:08
It's spreading our tasks,
can we also add our new task to this?
19:13
And then it would take the updated tasks.
19:19
Task index title.
19:23
Not sure if this would work,
but let's give it a try.
19:25
So, clean the kitchen.
19:27
Yeah, nothing happened.
19:31
But, let's see if we have
anything in the console.
19:32
Ooh, console's not good.
19:36
So, undefined reading tasks.
19:37
And this is on line 14.
19:40
So, it's having trouble reading tasks.
19:41
So, let's actually remove this function.
19:45
Since, we're actually
not even using it yet,
19:48
other than the new button that we clicked.
19:50
Okay, cool.
19:52
So, I see GitHub Copilot is
offering us some stuff and
19:53
it basically looks like what
ChatGPT just offered us.
19:57
I don't like that it didn't work.
20:02
So what I'm gonna do is, I do know for
sure that I want to have a prompt.
20:02
So let's do let new task equal prompt and
we're gonna put enter a new task.
20:07
And if I hit Enter, it says let newTasks
equal task then new tasks listed.
20:14
So, it's kinda doing the same thing it
looks like but it does add in our newTask,
20:21
which is great.
20:25
And then we're updating it in state.
20:26
And this was all given to
me by GitHub copilot so,
20:28
it kinda knows what I wanna do.
20:30
So, let's hit Save.
20:32
Reload this browser.
20:33
Let's keep the console up just in case.
20:34
And if I click here and
I type hello world, hit Enter.
20:39
We see nothing.
20:44
So, gotta figure this out.
20:46
We're gonna figure out why
I'm not seeing anything.
20:48
I do think it is updating this, but I
don't think it's actually updating the ui.
20:51
I'm not sure why.
20:56
So list index right here is defined but
never used.
20:59
I'm Not
21:02
sure because all this code came from
ChatGPT, so I'm not too sure exactly
21:08
what's going on here, but I do know
inside of our return, you know what?
21:13
Let's just start from the beginning here.
21:19
So inside of our return statement,
21:22
we're returning a div with
the class of task board.
21:25
Let's actually go ahead and
close off every little thing in here and
21:28
go through it and see what's going on.
21:32
So we're rendering task board.
21:34
And then in here,
we're mapping tasks, okay?
21:36
Tasks is kind of referencing
our state here, okay?
21:39
And in order to update our state, we're
gonna use this function called set tasks.
21:44
So, we are going through our tasks
right now, which we're actually
21:49
looping over the lists,
because there's three items in our state.
21:53
So maybe tasks is not the best name for
this, but
21:58
I don't wanna change it everywhere.
22:02
So good to know for future reference.
22:04
ListIndex.
22:08
So basically what this does is each
time map iterates through our tasks,
22:09
it's going to basically
give a index of that task.
22:15
So the first time it loops through this,
22:19
this state,
this is the first index of our array.
22:23
So index zero.
22:27
So list index equals 0.
22:29
So, that's what this is right here,
but I'm not sure why we're using it.
22:31
Maybe that'll be evident once we look
a little bit deeper into the code.
22:34
So, inside of our map, so basically for
each item inside of our tasks,
22:38
we want to render a div with
the class of task column.
22:45
So, we'll basically have a task board and
then three task columns.
22:53
And this is basically because
this is going to be our lists.
22:56
So again, this should be list column,
but that's on me for naming it task.
23:00
Probably should have named it list.
23:05
But when you're iterating
to build to the ui,
23:07
it is important to give everything
some sort of unique key.
23:09
So that's why we have this id here.
23:12
So, first one is id 1 then 2, then 3.
23:13
So each one of these will have a separate
key attribute, which is necessary for
23:16
react.
23:21
So inside of each list we have
an h3 with the list.title,
23:22
which sorry, is yeah, list.title.
23:27
Okay, cool.
So we are actually naming it list,
23:33
I'm stupid.
23:35
So listtitle which is creating
this not started in progress, and
23:37
completed that we see over here,
which is awesome.
23:41
And then we're creating a ul, okay?
23:45
And the ul should hold a bunch of li's for
our tasks.
23:47
I'm actually gonna add a hello world
task instead of our first one and
23:53
then hit refresh and we see hello
world here but what I'm trying
23:58
to do is get something to show up
in the ui once we click Add Task.
24:03
But yeah, it's basically looping
over any items that we might
24:08
have inside of that tasks
array inside of our state.
24:12
So because this one has one item,
it does show up here.
24:16
So that's working, it makes sense.
24:21
And we're using taskIndex.
24:23
So again, basically we're
looping over list.tasks, okay?
24:24
So this is a list.
24:29
This is a list and this is a list.
24:32
The reason I'm calling it list is
because when we're iterating over it
24:34
in our initial map, it's named list here.
24:38
So, while we're looping over it list
holds a reference to the first one,
24:40
then the second one, then the third one
as it iterates over, so list.tasks.
24:45
So, we're going into our
array of tasks here and
24:50
basically mapping over each one of those.
24:53
And we're calling that task,
which is a perfect name.
24:56
And each time it iterates over
the currently iterated over
24:59
element its index is put into
this variable called taskIndex.
25:04
Okay, so far, this all makes sense.
25:10
And for each one of those tasks,
25:12
we're trying to create a list
item with a unique key.
25:13
And the key is coming from the index,
which is pretty smart.
25:17
That way we don't have to have
an id with a number in here,
25:20
kind of like we're doing here.
25:23
So we could essentially do the same thing
in our initial iteration up here, but
25:24
it's already handled for us,
so let's not worry about it.
25:29
We can actually remove this.
25:32
So, inside of each li,
we're just throwing in our task.
25:35
So that works.
25:40
That's awesome.
25:42
Okay, so that explains exactly how this
is rendering to the ui, which is great.
25:43
So what we're trying to figure out
now then is how to update Task.
25:49
And I'm not liking that name, updateTask.
25:56
Maybe we can do addTask.
25:58
So, let's come up here.
26:00
Let's just remove this entire thing and
let's actually name it, addTask.
26:01
So let's do co, cool.
26:06
It already knows I wanna do it.
26:08
So GitHub copilot is offering to create
a function for me called addTask.
26:10
And let's just go through it,
see what it offers me.
26:14
And if we need to come back and
set something up, we will.
26:20
But I think we will because it needs
to know what we wanna add, right?
26:22
So, yeah,
it's essentially doing the same thing.
26:26
So it's basically creating a new
variable called newTasks and
26:30
it's sending it to an array and
we're spreading in our initial tasks.
26:34
I'm not actually sure where
this tasks is coming from.
26:46
So newTasks [0].tasks.push new task.
26:50
Okay, so it's actually hard
coding a new task item in here.
26:55
So if I hit this, cool,
so it's literally just
27:00
adding new tasks, but I don't want that.
27:05
So, [LAUGH] what we need to do is,
okay, this seems pretty easy,
27:09
so we'll do let newTask
Prompt equal prompt and hit,
27:15
Github copilot offered me to
Enter a new task as the prompt.
27:20
And what we can do here is, instead of
pushing a hardcoded string of new task,
27:26
we could do newTaskPrompt.
27:30
Let's save.
27:33
Let's refresh the browser.
27:34
I hit Add Task.
27:35
Let's put clean the bathroom.
27:37
Hit Enter and sweet.
27:40
It actually adds it to the ui,
which is pretty awesome.
27:41
Now there is an issue.
27:45
If I click Add Task here and add
something, it adds it to the not started.
27:46
But I think that's simply because we're
only creating this button inside of,
27:50
you know what?
27:55
This button is on each one of these.
27:58
So it needs to know
which list to add it in.
28:00
So this is interesting,
how should we do this?
28:05
Remember how we had listIndex here?
28:10
Let's actually add that back.
28:12
Maybe we can actually use that.
28:14
So, hate to sound like a broken record,
but let's go over this again.
28:16
So map iterates over a collection
of items, typically an array.
28:19
So our tasks basically holds
a reference to our state, so
28:23
we have three items in our state,
which is three objects.
28:27
And as we're mapping over them,
the first time we map over it,
28:33
we're on that first object and
it has a value in our index of 0.
28:37
And then the second one has 2 and then 3.
28:41
So each time through it
listIndex has a different value.
28:42
So let's see here.
28:47
How can we figure this out.
28:51
So we want to add task but
28:56
we wanna add the task directly into
the list that it's associated with.
28:57
Maybe let's add listIndex in here.
29:08
And let's delete all that and
see if it offers me something new.
29:14
Okay, so const newTasks equals your tasks,
your task listLndex.
29:18
Okay, this makes total sense now.
29:26
So tasks,
[LAUGH] obviously is each of these,
29:27
so we're spreading our
tasks into this NewTasks.
29:31
Then we're taking our task with
the listIndex, then pushing.
29:35
Okay, so this is simple.
29:39
So now we just need to let newTaskPrompt
equal, we'll just add this back in.
29:40
Then we're gonna add that value here to
newTaskPrompt and then this should work.
29:47
Theoretically, this should work.
29:53
So we're gonna do clean the bathroom,
29:55
And it actually didn't
update it whatsoever.
30:00
Did we get an error?
30:05
Yeah, we did.
30:07
So let's see.
30:08
So on line 13, it cannot read tasks.
30:10
Okay, okay, so newTasks,
firstIndex, and then tasks.
30:15
That should work, right?
30:24
And then we're updating the state
with the value of of that.
30:26
So I'm not too sure why
that's not working.
30:35
We're not using the listIndex here.
30:38
But we should, right?
30:44
Can I do listIndex here?
30:45
Uh-oh, I think that might
have broke something.
30:57
Did I create an infinite loop?
31:03
Yeah, we're creating some sort of
infinite loop here, which is not good.
31:05
Let's ask ChatGPT.
31:24
I'm just gonna copy the addTask as well as
31:25
the return statement,
and we're gonna go here.
31:30
So I keep getting
the prompt screen over and
31:36
over and over, and I'm not sure why.
31:42
Here is the return statement for
31:48
my React component and the function for
31:52
adding a new task,
which is linked as an onClick
31:57
function for the button in each list.
32:03
And let's paste in the code,
and let's see what happens.
32:08
The issue you are facing is due to the way
you're using the onClick handler for
32:13
the addTask button.
32:18
The onClick handler should
receive a function reference, but
32:20
in your code you are invoking
the addTask function immediately.
32:23
Okay, that makes sense.
32:26
By using the parenthesis,
you know what, I'm so stupid.
32:27
This is causing the prompt to show
repeatedly because addTask is being
32:37
executed every render,
which makes total sense.
32:41
Okay, so I need to set this as a callback.
32:45
That makes sense.
32:48
I've never done this before,
but I can understand that.
32:50
So let's hit Save and reopen this, cool.
32:54
So if I do clean the bathroom,
cool, it adds it to not started.
32:58
But let's say I completed
cleaning the kitchen.
33:03
Awesome, so
it adds it to cleaning the kitchen.
33:08
So that's perfect.
33:10
This was a little tough, not gonna lie,
It seems like I needed a little bit more
33:11
ChatGPT than GitHub Copilot,
but it works pretty well.
33:16
So now I kinda wanna show you,
I guess, the strengths and
33:19
weaknesses that
GitHub Copilot has with CSS.
33:22
So as we saw earlier, we had this
beautiful UI that I created, right?
33:25
Let's just see what GitHub Copilot offers
and we'll figure it out from there.
33:31
Actually, I'm gonna make this full-screen.
33:38
I'm going to create an app.css file.
33:46
I'm gonna link that
inside of our main file.
33:51
So import, what did I call it?
33:54
App.css, just to make sure it works.
33:57
Do body, we'll do background-color: red,
and awesome.
34:02
So, we see that it works, which is great.
34:09
So now let's actually see what
GitHub Copilot offers us by offering to,
34:12
well, we're gonna put in all
of the NEAT app over here.
34:18
Okay, so we're gonna put in all the class
names that it generated for us, and
34:23
we're gonna add class names
where it didn't, if we need to.
34:26
Then we're gonna throw them in
here without any rules inside and
34:29
just see what it offers us, based off
of the class names that we give it and
34:32
the context of the rest of the code base.
34:35
So for sure, we're starting off
everything with a task-board.
34:38
Okay, so it wants to automatically
offer task-board__ column,
34:43
which has some Vim naming conventions,
but we're not using that here.
34:49
So Let's actually copy that and
we'll just paste in that.
34:55
And inside, we have an h3,
so we'll do task-column h3.
35:02
And then we have the task-column
35:09
ul.then we have the task-column ul li.
35:13
And then we just have a button.
35:18
So I'm gonna do button with
a class of addTask and
35:21
I'm gonna go ahead and
add that task in here.
35:25
So className = addTask.
35:28
Well, you know what,
let's do this task list for
35:33
the ul class just so
it gives it a little bit more context.
35:38
And we're gonna do the same for
task item for the li.
35:44
And this is just so it gives us
some more accurate CSS hopefully.
35:48
So I think that's everything we need,
right?
35:54
Okay, let's go ahead put
all this back over here.
35:56
Let's open up the app on the right and
let's start seeing what it offers us.
36:00
So inside of task-board, Let's see.
36:06
Doesn't look like it wants to offer
us anything inside the task board.
36:13
So I'm gonna do a display of flex,
and I want to do flex-direction: row,
36:17
that's default, so I'm not gonna use that.
36:22
Let's just hit that now.
36:26
So it puts everything there.
36:28
Let's also add some styles for
36:30
the body and some browser prefixes.
36:34
Okay, cool.
36:44
I'm also gonna do list-style: none,
so we can remove those lists styles.
36:45
Okay, so for the body,
I want to do a display of flex and
36:50
we'll justify the content center.
36:54
Cool, so that's basically how I want it..
36:57
The task-board,
let's give it a gap of 1 rem,
36:59
space these out just a little bit.
37:04
Let's just go ahead into the task column,
see what it offers us.
37:07
So let's hit tab, hit save.
37:11
Made it a little wide, so
I'm not liking the fixed width
37:15
of 300%, so let's do a width of 100%, but
37:20
a max-width of 300 pixels,
and delete the initial width.
37:24
Let's also give it a min-width.
37:30
We'll do a min-width of 25%, or
37:31
no, I'm sorry, 33%.
37:36
That's fine I'm not trying to
make this really really pretty.
37:42
So inside of the H3,
let's see what it offers us.
37:46
Wow, it just gives us a margin bottom,
so not a whole lot there.
37:50
So the ul, it offers us a minimum height
of 100 pixels, background color of white,
37:54
border radius, and some padding.
37:59
That's great.
38:04
That looks awesome.
38:05
[LAUGH] Okay, so each list item gets
some margin at the bottom, some padding,
38:06
some background color, border radius,
box shadow, and a cursor of move.
38:11
So it's giving us this move cursor,
which makes us think we can move it.
38:16
And I don't like that, since we can't,
so I'm gonna delete that.
38:21
Not really liking the spacing here,
38:24
I'm also not really liking
the width of everything.
38:27
Let's remove this min-width.
38:30
Let's remove the max-width as well.
38:32
And this is for the task columns.
38:35
So, task-board, let's do a width of 100%.
38:38
I don't think that's
really gonna do anything.
38:43
Yeah, you know what,
let's just leave it as is.
38:45
And then the addTask button is probably
gonna be pretty basic, if anything.
38:48
So display a block, 100% width, some
padding, background color, radius, border,
38:52
and then a cursor pointer.
38:57
It's not doing anything, so
need to save that addTask.
39:01
Okay, cool.
So this basically works.
39:07
This is our app.
39:10
You know what, it's really bothering
me that it's so skinny, so
39:10
let's fix that really quick.
39:13
But yeah, GitHub Copilot can pretty
much help you out with basic CSS, but
39:16
if you have a general idea of what
you want, it'll be a little easier.
39:19
And the bigger your code base grows, the
more context GitHub Copilot will have and
39:22
it'll offer better code completions.
39:27
That goes for CSS, that goes for
the actual React code itself.
39:29
I mean, if you have a specific style
of button that you continuously use,
39:35
especially with certain
types of class names,
39:39
it'll automatically know to add those
styles to your UI as you're working.
39:41
So for this task board,
we'll give it a width.
39:45
It's offering me some more code.
39:51
Okay, cool.
39:55
Let's just see what it offers me.
39:56
Okay, so that's it.
39:58
And it really didn't do a whole lot.
39:59
So, let's see here,
we're gonna do a min-width for
40:01
the columns of 33% Width 100%,
we'll just remove that.
40:06
So, actually the ULs,
let's give that a minimum
40:12
width of Let's do 33% here,
even though it's not gonna do anything.
40:18
Let's do a min-width
of 300 pixels just for
40:24
the sake of trying to make
this look a little bit better.
40:26
Also, I think I'm zoomed in.
40:29
Yeah, I was zoomed in a little bit.
40:31
So this kind of looks pretty
similar to what we had.
40:32
It's not too far off,
and if we add a task,
40:35
this is a new task in
the not started list.
40:40
Cool, and it adds it there.
40:46
It has a little bit of spacing
between the other one.
40:47
Write some more stuff,
write some stuff here, here.
40:50
Cool, so it looks like all three of these,
basically,
40:58
are styled with the same height based on
whichever list has the most content in it.
41:01
Which is an easy fix, but
something we'll do for another video.
41:05
Or if you wanna give this a try,
kinda get to this point and
41:08
then maybe add the drag and
drop functionality.
41:11
It's pretty simple and GitHub Copilot
can definitely help you with that.
41:13
I hope you enjoy this video.
41:16
I hope you got to see what GitHub Copilot
can do and what it can't do.
41:18
And you have a little bit better
understanding of GitHub Copilot, ChatGPT,
41:21
and just using AI as a co-developer
in whatever you're trying to build.
41:25
So hope you enjoyed the video,
see in the next one.
41:29
Have fun, happy coding.
41:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up