feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.

2026-03-08 09:50:17 +01:00
parent 2184971175
commit 9d13cc652a
47 changed files with 15272 additions and 14144 deletions
@@ -61,12 +61,12 @@ userResource.update(current => ({ ...current, name: 'Updated' }));

 ```typescript
 const todosResource = resource({
-  defaultValue: [] as Todo[],
-  params: () => ({ filter: this.filter() }),
-  loader: async ({ params }) => {
-    const response = await fetch(`/api/todos?filter=${params.filter}`);
-    return response.json();
-  },
+    defaultValue: [] as Todo[],
+    params: () => ({ filter: this.filter() }),
+    loader: async ({ params }) => {
+        const response = await fetch(`/api/todos?filter=${params.filter}`);
+        return response.json();
+    },
 });

 // value() returns Todo[] (never undefined due to defaultValue)
@@ -78,14 +78,14 @@ const todosResource = resource({
 const userId = signal<string | null>(null);

 const userResource = resource({
-  params: () => {
-    const id = userId();
-    // Return undefined to skip loading
-    return id ? { id } : undefined;
-  },
-  loader: async ({ params }) => {
-    return fetch(`/api/users/${params.id}`).then((r) => r.json());
-  },
+    params: () => {
+        const id = userId();
+        // Return undefined to skip loading
+        return id ? { id } : undefined;
+    },
+    loader: async ({ params }) => {
+        return fetch(`/api/users/${params.id}`).then((r) => r.json());
+    },
 });
 // Status is 'idle' when params returns undefined
 ```
@@ -96,81 +96,75 @@ For complex state, create a dedicated store:

 ```typescript
 interface ProductState {
-  products: Product[];
-  selectedId: string | null;
-  filter: string;
-  loading: boolean;
-  error: string | null;
+    products: Product[];
+    selectedId: string | null;
+    filter: string;
+    loading: boolean;
+    error: string | null;
 }

-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class ProductSt {
-  // Private state
-  private state = signal<ProductState>({
-    products: [],
-    selectedId: null,
-    filter: "",
-    loading: false,
-    error: null,
-  });
-
-  // Selectors (computed signals)
-  readonly products = computed(() => this.state().products);
-  readonly selectedId = computed(() => this.state().selectedId);
-  readonly filter = computed(() => this.state().filter);
-  readonly loading = computed(() => this.state().loading);
-  readonly error = computed(() => this.state().error);
-
-  readonly filteredProducts = computed(() => {
-    const { products, filter } = this.state();
-    if (!filter) return products;
-    return products.filter((p) =>
-      p.name.toLowerCase().includes(filter.toLowerCase()),
-    );
-  });
-
-  readonly selectedProduct = computed(() => {
-    const { products, selectedId } = this.state();
-    return products.find((p) => p.id === selectedId) ?? null;
-  });
-
-  private http = inject(HttpClient);
-
-  // Actions
-  setFilter(filter: string): void {
-    this.state.update((s) => ({ ...s, filter }));
-  }
-
-  selectProduct(id: string | null): void {
-    this.state.update((s) => ({ ...s, selectedId: id }));
-  }
-
-  async loadProducts(): Promise<void> {
-    this.state.update((s) => ({ ...s, loading: true, error: null }));
-
-    try {
-      const products = await firstValueFrom(
-        this.http.get<Product[]>("/api/products"),
-      );
-      this.state.update((s) => ({ ...s, products, loading: false }));
-    } catch (err) {
-      this.state.update((s) => ({
-        ...s,
+    // Private state
+    private state = signal<ProductState>({
+        products: [],
+        selectedId: null,
+        filter: '',
        loading: false,
-        error: "Failed to load products",
-      }));
-    }
-  }
+        error: null,
+    });

-  async addProduct(product: Omit<Product, "id">): Promise<void> {
-    const newProduct = await firstValueFrom(
-      this.http.post<Product>("/api/products", product),
-    );
-    this.state.update((s) => ({
-      ...s,
-      products: [...s.products, newProduct],
-    }));
-  }
+    // Selectors (computed signals)
+    readonly products = computed(() => this.state().products);
+    readonly selectedId = computed(() => this.state().selectedId);
+    readonly filter = computed(() => this.state().filter);
+    readonly loading = computed(() => this.state().loading);
+    readonly error = computed(() => this.state().error);
+
+    readonly filteredProducts = computed(() => {
+        const { products, filter } = this.state();
+        if (!filter) return products;
+        return products.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()));
+    });
+
+    readonly selectedProduct = computed(() => {
+        const { products, selectedId } = this.state();
+        return products.find((p) => p.id === selectedId) ?? null;
+    });
+
+    private http = inject(HttpClient);
+
+    // Actions
+    setFilter(filter: string): void {
+        this.state.update((s) => ({ ...s, filter }));
+    }
+
+    selectProduct(id: string | null): void {
+        this.state.update((s) => ({ ...s, selectedId: id }));
+    }
+
+    async loadProducts(): Promise<void> {
+        this.state.update((s) => ({ ...s, loading: true, error: null }));
+
+        try {
+            const products = await firstValueFrom(this.http.get<Product[]>('/api/products'));
+            this.state.update((s) => ({ ...s, products, loading: false }));
+        } catch (err) {
+            this.state.update((s) => ({
+                ...s,
+                loading: false,
+                error: 'Failed to load products',
+            }));
+        }
+    }
+
+    async addProduct(product: Omit<Product, 'id'>): Promise<void> {
+        const newProduct = await firstValueFrom(this.http.post<Product>('/api/products', product));
+        this.state.update((s) => ({
+            ...s,
+            products: [...s.products, newProduct],
+        }));
+    }
 }
 ```

@@ -291,88 +285,86 @@ export class Search {
 ### Optimistic Updates

 ```typescript
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class Todo {
-  private todos = signal<Todo[]>([]);
-  readonly items = this.todos.asReadonly();
+    private todos = signal<Todo[]>([]);
+    readonly items = this.todos.asReadonly();

-  private http = inject(HttpClient);
+    private http = inject(HttpClient);

-  async toggleTodo(id: string): Promise<void> {
-    // Optimistic update
-    const previousTodos = this.todos();
-    this.todos.update((todos) =>
-      todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
-    );
+    async toggleTodo(id: string): Promise<void> {
+        // Optimistic update
+        const previousTodos = this.todos();
+        this.todos.update((todos) => todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));

-    try {
-      await firstValueFrom(this.http.patch(`/api/todos/${id}/toggle`, {}));
-    } catch {
-      // Rollback on error
-      this.todos.set(previousTodos);
+        try {
+            await firstValueFrom(this.http.patch(`/api/todos/${id}/toggle`, {}));
+        } catch {
+            // Rollback on error
+            this.todos.set(previousTodos);
+        }
    }
-  }
 }
 ```

 ## Testing Signals

 ```typescript
-describe("Counter", () => {
-  it("should increment count", () => {
-    const component = new Counter();
+describe('Counter', () => {
+    it('should increment count', () => {
+        const component = new Counter();

-    expect(component.count()).toBe(0);
+        expect(component.count()).toBe(0);

-    component.increment();
-    expect(component.count()).toBe(1);
+        component.increment();
+        expect(component.count()).toBe(1);

-    component.increment();
-    expect(component.count()).toBe(2);
-  });
+        component.increment();
+        expect(component.count()).toBe(2);
+    });

-  it("should compute doubled value", () => {
-    const component = new Counter();
+    it('should compute doubled value', () => {
+        const component = new Counter();

-    expect(component.doubled()).toBe(0);
+        expect(component.doubled()).toBe(0);

-    component.count.set(5);
-    expect(component.doubled()).toBe(10);
-  });
+        component.count.set(5);
+        expect(component.doubled()).toBe(10);
+    });
 });

-describe("ProductSt", () => {
-  let store: ProductSt;
-  let httpMock: HttpTestingController;
+describe('ProductSt', () => {
+    let store: ProductSt;
+    let httpMock: HttpTestingController;

-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [ProductSt, provideHttpClient(), provideHttpClientTesting()],
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [ProductSt, provideHttpClient(), provideHttpClientTesting()],
+        });
+
+        store = TestBed.inject(ProductSt);
+        httpMock = TestBed.inject(HttpTestingController);
    });

-    store = TestBed.inject(ProductSt);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
+    it('should filter products', () => {
+        // Set initial state
+        store['state'].set({
+            products: [
+                { id: '1', name: 'Apple' },
+                { id: '2', name: 'Banana' },
+            ],
+            selectedId: null,
+            filter: '',
+            loading: false,
+            error: null,
+        });

-  it("should filter products", () => {
-    // Set initial state
-    store["state"].set({
-      products: [
-        { id: "1", name: "Apple" },
-        { id: "2", name: "Banana" },
-      ],
-      selectedId: null,
-      filter: "",
-      loading: false,
-      error: null,
+        expect(store.filteredProducts().length).toBe(2);
+
+        store.setFilter('app');
+        expect(store.filteredProducts().length).toBe(1);
+        expect(store.filteredProducts()[0].name).toBe('Apple');
    });
-
-    expect(store.filteredProducts().length).toBe(2);
-
-    store.setFilter("app");
-    expect(store.filteredProducts().length).toBe(1);
-    expect(store.filteredProducts()[0].name).toBe("Apple");
-  });
 });
 ```

@@ -381,19 +373,19 @@ describe("ProductSt", () => {
 ```typescript
 // Debug effect to log signal changes
 effect(() => {
-  console.log("State changed:", {
-    count: this.count(),
-    items: this.items(),
-    filter: this.filter(),
-  });
+    console.log('State changed:', {
+        count: this.count(),
+        items: this.items(),
+        filter: this.filter(),
+    });
 });

 // Conditional debugging
 const DEBUG = signal(false);

 effect(() => {
-  if (untracked(() => DEBUG())) {
-    console.log("Debug:", this.state());
-  }
+    if (untracked(() => DEBUG())) {
+        console.log('Debug:', this.state());
+    }
 });
 ```