Firefly Semantics Slice Entity Store Active API Guide

Image by Sameera Madusanka from Pixabay

Introduction

When we are managing entity state (Customers, Friends, Messages, Users, Tasks, etc.) quite often we wish to mark some of them as active.

For example Facebook shows which friends are currently active.

In this guide we will review how active Todo entities are managed with the Firefly Semantics Slice Active Entity API.

We will be using a pure Typescript Stackblitz playground for the guide examples.

We recommend opening the Stackblitz in a separate tab and trying out the examples while going through this guide.

Adding Active Entities

The Todo entity model we will be using is as follows.

export class Todo {constructor(
public complete: boolean,
public title: string,
public gid?: string
) {}
}

Let’s add a few Todo entity instances to our entitytodoStore.

const todoStore: EStore<Todo> = new EStore<Todo>();
const todo1 = new Todo(false, 'Finish it!');
const todo2 = new Todo(false, 'Just do it!');
const todos = [todo1, todo2];

And also track both entities as being active.

todoStore.addActive(todo1);
todoStore.addActive(todo2);

We are now tracking both entities as being active.

Since the active entities are indexed by their global id (gid), we can can retrieve an active entity is from our entity store active:Map instance like this.

const active1 = todoStore.active.get(todo1.gid);
console.log(active1);

We can also retrieve a snapshot of all active entities like this.

const activeTodos: Todo[] = todoStore.activeSnapshot();console.log(activeTodos);

Deleting Active Entities

We can remove an active entity like this.

todoStore.deleteActive(todo1);

Note that even though it has been removed from the Map of active Todo instances, it is still in the todoStore . If we wanted to remove it from the store we would need to call todoStore.delete(todo1) and this would also remove it from our Map of active entities.

Observing Active Entities

We can observe our active entities.

let active$: Observable<Map<string, Todo>> = todoStore.observeActive();active$.subscribe((m: Map<string, Todo>) => {
const activeTodos: Todo[] = Array.from(m.values());
//console.log(`OBSERVED ENTITIES`);
//console.log(JSON.stringify(activeTodos));
});

After adding the above subscription the activeTodos array will be logged immediately.

If we add another Todo instance to the store and also mark it as active the subscription will fire again.

todoStore.post(todo3);
todoStore.addActive(todo3);

If we remove an active entity the subscription will fire with the entity removed.

todoStore.deleteActive(todo3);

And if we remove a Todo entity from the store that is active, the subscription will fire letting us know that the entity has been removed from the observed active entities as well.

todoStore.delete(todo1);

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to configure CSS Modules with electron-react-typescript

AngularJs. Vs. NodeJs. Vs. ReactJs: Which Is The Best Choice in 2021?

“Closurrreeee”

Friends scene. Rachel on the telephone to Ross. Rachel says “And that, my friend is what they call closure”

14 | FMP: Final Outcome

Creating a chat app using RSA to encrypt messages (typescript)

JavaScript Under the Hood — Building Our Own forEach and Map Functions

Create and Deploy a React App to Azure using .NET Core on Mac

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Adding Search To the Firefly Semantics Slice Angular Todo Application

Adding the map component using the AWS services to an Angular application

Setting Up a Full-Stack Web Application Using Nx Workspace

Reauthenticating a user without redirection in OIDC