Made into a simple Nxgs app

package.json

@@ -31,6 +31,9 @@
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "@ngxs/devtools-plugin": "^3.8.2",
+    "@ngxs/logger-plugin": "^3.8.2",
+    "@ngxs/store": "^3.8.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.0"

src/app/app.module.ts

@@ -1,16 +1,28 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { TaskModule } from './components/task.module';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+
+import { environment } from '../environments/environment';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
-    BrowserModule
+    BrowserModule,
+    TaskModule,
+    NgxsModule.forRoot([], {
+      developmentMode: !environment.production,
+    }),
+    NgxsReduxDevtoolsPluginModule.forRoot(),
+    NgxsLoggerPluginModule.forRoot({
+      disabled: environment.production,
+    }),
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/components/pure-task-list.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Task } from '../models/task.model';
+
+@Component({
+  selector: 'app-pure-task-list',
+  template: `
+    <div class="list-items">
+      <app-task
+        *ngFor="let task of tasksInOrder"
+        [task]="task"
+        (onArchiveTask)="onArchiveTask.emit($event)"
+        (onPinTask)="onPinTask.emit($event)"
+      >
+      </app-task>
+      <div
+        *ngIf="tasksInOrder.length === 0 && !loading"
+        class="wrapper-message"
+      >
+        <span class="icon-check"></span>
+        <p class="title-message">You have no tasks</p>
+        <p class="subtitle-message">Sit back and relax</p>
+      </div>
+      <div *ngIf="loading">
+        <div *ngFor="let i of [1, 2, 3, 4, 5, 6]" class="loading-item">
+          <span class="glow-checkbox"></span>
+          <span class="glow-text">
+            <span>Loading</span> <span>cool</span> <span>state</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export default class PureTaskListComponent {
+  /**
+   * @ignore
+   * Component property to define ordering of tasks
+   */
+  tasksInOrder: Task[] = [];
+
+  /** Checks if it's in loading state */
+  @Input() loading = false;
+
+  /** Event to change the task to pinned */
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output()
+  onPinTask = new EventEmitter<Event>();
+
+  /** Event to change the task to archived */
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output()
+  onArchiveTask = new EventEmitter<Event>();
+
+  @Input()
+  set tasks(arr: Task[]) {
+    const initialTasks = [
+      ...arr.filter((t) => t.state === 'TASK_PINNED'),
+      ...arr.filter((t) => t.state !== 'TASK_PINNED'),
+    ];
+    const filteredTasks = initialTasks.filter(
+      (t) => t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED'
+    );
+    this.tasksInOrder = filteredTasks.filter(
+      (t) => t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED'
+    );
+  }
+}

src/app/components/task-list.stories.ts → src/app/components/pure-task-list.stories.ts

@@ -8,37 +8,39 @@ import {
 
 import { CommonModule } from '@angular/common';
 
-import TaskListComponent from './task-list.component';
+import PureTaskListComponent from './pure-task-list.component';
 import TaskComponent from './task.component';
 
 import * as TaskStories from './task.stories';
 
-const meta: Meta<TaskListComponent> = {
-  component: TaskListComponent,
-  title: 'TaskList',
+const meta: Meta<PureTaskListComponent> = {
+  component: PureTaskListComponent,
+  title: 'PureTaskList',
   tags: ['autodocs'],
   decorators: [
     moduleMetadata({
       //👇 Imports both components to allow component composition with Storybook
-      declarations: [TaskListComponent, TaskComponent],
+      declarations: [PureTaskListComponent, TaskComponent],
       imports: [CommonModule],
     }),
     //👇 Wraps our stories with a decorator
     componentWrapperDecorator(
       (story) => `<div style="margin: 3em">${story}</div>`
     ),
   ],
-  render: (args: TaskListComponent) => ({
+  render: (args: PureTaskListComponent) => ({
     props: {
       ...args,
       onPinTask: TaskStories.actionsData.onPinTask,
       onArchiveTask: TaskStories.actionsData.onArchiveTask,
     },
-    template: `<app-task-list ${argsToTemplate(args)}></app-task-list>`,
+    template: `<app-pure-task-list ${argsToTemplate(
+      args
+    )}></app-pure-task-list>`,
   }),
 };
 export default meta;
-type Story = StoryObj<TaskListComponent>;
+type Story = StoryObj<PureTaskListComponent>;
 
 export const Default: Story = {
   args: {

src/app/components/task-list.component.ts

@@ -1,68 +1,36 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-import { Task } from '../models/task.model';
+import { Component } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { ArchiveTask, PinTask } from '../state/task.state';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-task-list',
   template: `
-    <div class="list-items">
-      <app-task
-        *ngFor="let task of tasksInOrder"
-        [task]="task"
-        (onArchiveTask)="onArchiveTask.emit($event)"
-        (onPinTask)="onPinTask.emit($event)"
-      >
-      </app-task>
-      <div
-        *ngIf="tasksInOrder.length === 0 && !loading"
-        class="wrapper-message"
-      >
-        <span class="icon-check"></span>
-        <p class="title-message">You have no tasks</p>
-        <p class="subtitle-message">Sit back and relax</p>
-      </div>
-      <div *ngIf="loading">
-        <div *ngFor="let i of [1, 2, 3, 4, 5, 6]" class="loading-item">
-          <span class="glow-checkbox"></span>
-          <span class="glow-text">
-            <span>Loading</span> <span>cool</span> <span>state</span>
-          </span>
-        </div>
-      </div>
-    </div>
+    <app-pure-task-list
+      [tasks]="tasks$ | async"
+      (onArchiveTask)="archiveTask($event)"
+      (onPinTask)="pinTask($event)"
+    ></app-pure-task-list>
   `,
 })
 export default class TaskListComponent {
-  /**
-   * @ignore
-   * Component property to define ordering of tasks
-   */
-  tasksInOrder: Task[] = [];
+  tasks$?: Observable<any>;
 
-  /** Checks if it's in loading state */
-  @Input() loading = false;
-
-  /** Event to change the task to pinned */
-  // tslint:disable-next-line: no-output-on-prefix
-  @Output()
-  onPinTask = new EventEmitter<Event>();
+  constructor(private store: Store) {
+    this.tasks$ = store.select((state) => state.taskbox.tasks);
+  }
 
-  /** Event to change the task to archived */
-  // tslint:disable-next-line: no-output-on-prefix
-  @Output()
-  onArchiveTask = new EventEmitter<Event>();
+  /**
+   * Component method to trigger the archiveTask event
+   */
+  archiveTask(id: string) {
+    this.store.dispatch(new ArchiveTask(id));
+  }
 
-  @Input()
-  set tasks(arr: Task[]) {
-    const initialTasks = [
-      ...arr.filter((t) => t.state === 'TASK_PINNED'),
-      ...arr.filter((t) => t.state !== 'TASK_PINNED'),
-    ];
-    const filteredTasks = initialTasks.filter(
-      (t) => t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED'
-    );
-    this.tasksInOrder = filteredTasks.filter(
-      (t) => t.state === 'TASK_INBOX' || t.state === 'TASK_PINNED'
-    );
+  /**
+   * Component method to trigger the pinTask event
+   */
+  pinTask(id: string) {
+    this.store.dispatch(new PinTask(id));
   }
 }

src/app/components/task.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxsModule } from '@ngxs/store';
+
+import TaskComponent from './task.component';
+import TaskListComponent from './task-list.component';
+import { TasksState } from '../state/task.state';
+import PureTaskListComponent from './pure-task-list.component';
+
+@NgModule({
+  imports: [CommonModule, NgxsModule.forFeature([TasksState])],
+  exports: [TaskComponent, TaskListComponent],
+  declarations: [TaskComponent, TaskListComponent, PureTaskListComponent],
+  providers: [],
+})
+export class TaskModule {}