Only Allow One Photo Per Day

Only Allow One Photo Per Day

In this lesson, we are going to implement a reasonably simple feature but one that is part of the core concept of this application: to take one photo each day. This gives us an interesting opportunity to think about reactive/declarative programming.

We are really only aiming to achieve one goal here:

• If a photo has already been taken that day, disable the take photo button

We store dates with our photos already so it seems like it should be reasonably easy. But there are very different ways we could approach this problem, and often the “declarative” approach which may seem obvious eventually is actually not all that intuitive if you have a strongly “imperative” mindset.

The button we want to disable is in our HomeComponent, and in that component we have access to our photo data via the PhotoService.

To give an example of what an imperative approach to this problem might be, we could change our take photo button from this:

<ion-button (click)="photoService.add$.next()">