...

/

Implementing a Data Store

Implementing a Data Store

Implement a data store in this lesson.

Creating the data store object

The centerpiece of this implementation is the data store object itself, which I’m calling the CalendarFilterStore:

Press + to interact
export interface CalendarFilterSubscriber {
calendarFilterChanged(store: CalendarFilterStore): void
}
export class CalendarFilterStore {
private static instance: CalendarFilterStore
static store(): CalendarFilterStore {
if (!CalendarFilterStore.instance) {
CalendarFilterStore.instance = new CalendarFilterStore()
}
return CalendarFilterStore.instance
}
filterStates: { [key: string]: boolean }
subscribers: CalendarFilterSubscriber[]
private constructor() {
this.filterStates = {}
this.subscribers = []
}
addSubscriber(subscriber: CalendarFilterSubscriber): void {
this.subscribers.push(subscriber)
}
calendarFilterChanged() {
this.subscribers.forEach(subscriber =>
subscriber.calendarFilterChanged(this)
)
}
addFilter(dateString: string): void {
this.filterStates[dateString] = false
this.calendarFilterChanged()
}
toggleDateStatus(dateString: string): void {
if (!(dateString in this.filterStates)) {
return
}
this.filterStates[dateString] = !this.filterStates[dateString]
this.calendarFilterChanged()
}
clearAll(): void {
for (const state in this.filterStates) {
this.filterStates[state] = false
}
this.calendarFilterChanged()
}
}

To start, we need to declare a TypeScript interface for subscribers to this store that has one method, calendarFilterChanged.

Then we get to the actual CalendarFilterStore class. We start there by making it a singleton in the same way we did for our code that fetched sold-out data in the ...