Now that we have all of our building blocks in place, we can basically start creating the view that
we require for the focus feature.
So what we're going to do is we're going to add a style sheet and we're going to do comm styles is equal
to stylesheet thought create.
And what we're going to see here is we're going to have a container which is Flex one.
Inside of here, we're going to see style is equal to styles dot container and inside of that, we're
going to create a view which is going to wrap our countdown timer.
So we're going to say style is equal to styles.
Start Countdown.
Now this doesn't exist yet, but let's go over here and create it.
When I say countdown now, we don't know what it looks like yet, so let's go ahead and import our countdown
timer.
From components.
So we'll go back once and we'll do that.
And then what we'll do over here is we'll say.
Count down.
Now over here, if we go and fill something in and we say test now for testing purposes, we don't always
want to see the screen.
So what we'll do over here is we'll fill in a test subject for now so that we know that we'll always
be here.
Now we can see that it's failing because it's trying to render the timer, but nothing has been given
to it.
So let's go say on progress, and we'll say that it's an empty function for now because we don't know
what to do yet when we want to report on progress.
And we can see over here that we are now counting down immediately.
So let's say is paused so that we pause it immediately and let's add an on end function where we determine
what we want to do on the end of the timer.
That way, we now can see over here.
Hey, it's stretching the entire screen.
Why is that?
So what we'll do is we'll give this flex of 0.5.
And we'll say a line items.
Centre.
And that'll center it now, if we wanted to get a quick visual, if things are out, we can always use
background color to kind of see, Hey, what are my elements of doing so I can see that, you know,
my container is taking up the full length and my background color for my countdown is taking up half
of the screen, which is great.
So that's working out amazingly.
Now looking at this, I can see that my timer is stuck at the top and I kind of want to center it.
So that means that the one thing I need to add here is a justified content center, which will take
the content and then center it inside of its yellow box.
Now, if I gave this Flex one, this would fill up the hole and it would be centered inside of the center.
That's why we're giving it half of the flex of the screen.
Now let's remove our background colors, and now our timer is available inside of our component.
OK, now what else do we need?
Well, we need a start and a pause button, so let's add a button wrapper, and let's say that the button
wrapper is equal to certain styles.
Let's see.
Let's give it a flex of 0.3.
So let's give it a small amount of screen space.
Let's give it a flex direction of row because we want the buttons to be in a row structure.
Let's say that the padding is equal to 15 for now, and let's justify the content to the center and
align the items to the center.
Now, we've just written styles without actually doing anything over here, so we got to go and validate
that, that these will actually work.
So what we'll do is we'll add a view over here with the style of button wrapper and we'll add Weigert
for you over here.
So our button wrappers over here, if we give it a background color over here of yellow, it's not really
going to show us anything because nothing's being rendered inside of it, but we can see the space that
it's taking in, right?
So over here, what we basically want to do is add a rounded button, so let's go and grab our rounded
button from.
Our components.
Components rounded, but.
Now that we have around the button, I want us to add a start button.
And that start button is going to set the countdown to start timer.
So let's go over here and let's say that the title is equal to.
Start.
And there we go.
Now let's remove the yellow background color.
And what we can see here is now we have a nice start button now is paused.
Is currently true.
So let's go ahead and hook up our button to actually do something.
And the way that will do that is we'll go ahead and open up the component body, run some prettier here
and grab our use state.
From React and what we'll do then is will create a parameter saying is started set is started and we'll
say use state of.
False.
It is not started.
So here we can say.
In the countdown timer, the countdown timer is paused.
If the countdown has not been started and then our start button will say, Hey, on press, start our
timer.
So that will go ahead here and say.
Set is started.
Too true.
And that's what that's going to do.
Now, if we start the timer and if we press this button, we'll see that the timer starts counting down
to zero.
Awesome.
Conversely, we also want something to posit again.
So what we'll do over here is will conditionally render this.
So we'll say if it isn't started.
Show us.
The Start button.
But hey, if it is started.
Show us the pause button, right?
And so that's let's just run per year here, so if it is started.
Show us the pause button and what this is going to do is set started to false.
And what we'll see over here now is if I press start, it'll start counting that.
If I press pause, it'll stop counting down.
Start countdown, stop, stop counting now.
And with all of that, we've now hooked up our timer completely to start the countdown sequence.
Now we don't have any logic yet around our focus item and what's happening with our focus item, and
that's OK.
But we're very, very close to a fully functional app.
And so in the next video, what we're going to look at is kind of adding the ability to select different
timeouts and also the ability to visualize, Hey, what are we actually focusing on right now?