ngrx signal store fixes

Author: Lukecsharpwalker

src/app/admin/_components/add-post/add-post.component.ts

@@ -21,7 +21,6 @@ import {
 import { AdminApiService } from '../../_services/admin-api.service';
 import { HighlightModule } from 'ngx-highlightjs';
 import { QuillEditorComponent, Range } from 'ngx-quill';
-import { Post } from '../../../shared/_models/post.interface';
 import { PostForm } from '../../_models/post-from.inteface';
 import hljs from 'highlight.js';
 import { RouterModule } from '@angular/router';
@@ -30,6 +29,7 @@ import { DynamicDialogService } from '../../../shared/dynamic-dialog/dynamic-dia
 import { ModalConfig } from '../../../shared/_models/modal-config.intreface';
 import { AddImageComponent } from './add-image/add-image.component';
 import { AddImageForm } from './add-image/add-image-controls.interface';
+<<<<<<< HEAD
 =======
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -38,6 +38,9 @@ import { Firestore, FirestoreModule} from '@angular/fire/firestore';
 import { HttpClient } from '@angular/common/http';
 import { AsyncPipe } from '@angular/common';
 >>>>>>> ab739b9 (nothing special)
+=======
+import { Post } from '../../../types/supabase';
+>>>>>>> fca8c97 (ngrx signal store fixes)
 
 @Component({
   selector: 'blog-add-post',

src/app/admin/_services/admin-api.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, inject } from '@angular/core';
-import { Post } from '../../shared/_models/post.interface';
+
 import { Observable } from 'rxjs';
+import { Post } from '../../supabase-types';
 
 @Injectable()
 export class AdminApiService {

src/app/reader/_components/main-page/post/post.component.ts

@@ -13,8 +13,7 @@ import {
 } from '@angular/core';
 import { ReaderApiService } from '../../../_services/reader-api.service';
 import { AsyncPipe, DatePipe } from '@angular/common';
-import { Post } from '../../../../shared/_models/post.interface';
-import { Observable, from, map } from 'rxjs';
+import { Observable, from, map, of } from 'rxjs';
 import { CommentsComponent } from './comments/comments.component';
 import { AddCommentComponent } from './add-comment/add-comment.component';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -23,7 +22,6 @@ import { Router } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DynamicDialogService } from '../../../../shared/dynamic-dialog/dynamic-dialog.service';
 import { CodeBlockModalComponent } from './code-block-modal-component/code-block-modal-component.component';
-import { ModalStatus } from '../../../../shared/_models/modal-status.interface';
 
 @Component({
   selector: 'app-post',
@@ -47,26 +45,12 @@ export class PostComponent implements OnInit, AfterViewInit {
   private sanitizer = inject(DomSanitizer);
   private viewContainerRef = inject(ViewContainerRef);
 
-  post$!: Observable<Post | null>;
+  post$!: Observable<any | null>;
   comments$!: Signal<Comment[] | undefined>;
   date: string = '';
 
   ngOnInit() {
-    this.post$ = from(this.apiService.getPost(this.id)).pipe(
-      map((post: Post | null) => {
-        if (post) {
-          post.dateJS = post.date.toDate();
-          this.date = this.datePipe.transform(
-            post.dateJS,
-            'dd-MM-yyyy',
-          ) as string;
-          post.content = this.sanitizer.bypassSecurityTrustHtml(
-            post.content as string,
-          );
-        }
-        return post;
-      }),
-    );
+    this.post$ = of(null);
     this.comments$! = runInInjectionContext(this.injector, () =>
       toSignal(this.apiService.getComments(this.id)),
     );

src/app/reader/_components/main-page/posts-list/label/label.component.ts

@@ -1,17 +1,14 @@
-import {Component, Input} from '@angular/core';
-import {NgStyle} from "@angular/common";
+import { Component, Input, OnInit } from '@angular/core';
+import { NgStyle } from '@angular/common';
 
 @Component({
   selector: 'app-label',
   standalone: true,
-  imports: [
-    NgStyle
-  ],
+  imports: [NgStyle],
   templateUrl: './label.component.html',
-  styleUrl: './label.component.scss'
+  styleUrl: './label.component.scss',
 })
 export class LabelComponent {
   @Input() text: string = 'Label';
-  @Input() position: number = 0; // Position to control vertical spacing
   @Input() color: string = '#000000';
 }

src/app/reader/_components/main-page/posts-list/post-card/post-card.component.html

@@ -7,12 +7,13 @@
   <div class="bg-white w-full flex flex-col md:flex-row md:pr-4">
     <div
       class="flex flex-wrap md:flex-col items-start md:basis-2/12 gap-2 px-4 md:px-0">
-      @for (tag of tags; track tag.name; let i = $index) {
-        <app-label
-          [text]="tag.name"
-          [position]="i"
-          [color]="tag.color"
-        ></app-label>
+      @for (tag of post().post_tags; track tag.tags.id; let i = $index) {
+        @if (i < 4) {
+          <app-label
+            [text]="tag.tags.name"
+            [color]="tag.tags.color"
+          ></app-label>
+        }
       }
     </div>
 
@@ -21,7 +22,7 @@ <h2 class="font-bold line-clamp-3 text-xl mt-0 text-center leading-relaxed">
         {{ post().title }}
       </h2>
       <div class="line-clamp-3 xl:line-clamp-4 2xl:line-clamp-5 pt-3 leading-loose">
-        {{ description() }}
+        {{ post().description }}
       </div>
     </div>
   </div>

src/app/reader/_components/main-page/posts-list/post-card/post-card.component.ts

@@ -1,8 +1,7 @@
 import { Component, computed, input } from '@angular/core';
-import { Post } from '../../../../../shared/_models/post.interface';
 import { LabelComponent } from '../label/label.component';
-import { TAGS } from '../../../../../utlis/tags';
 import { RouterLink } from '@angular/router';
+import { Post } from '../../../../../supabase-types';
 
 @Component({
   selector: 'app-post-card',
@@ -12,11 +11,5 @@ import { RouterLink } from '@angular/router';
   styleUrl: './post-card.component.scss',
 })
 export class PostCardComponent {
-  tagsMock = ['HTML', 'CSS', 'TypeScript', 'SSG/SSR'];
-  tags = TAGS.filter((tag) => this.tagsMock.includes(tag.name));
-
   post = input.required<Post>();
-  description = computed(() => {
-    return this.post().description;
-  });
 }

src/app/reader/_components/main-page/posts-list/posts-list.component.html

@@ -82,7 +82,7 @@
 <div class="flex justify-center mt-5">
   <div class="w-full">
     <div class="grid">
-      @for (post of posts$ | async; track post.id; let f = $first) {
+      @for (post of posts(); track post.id; let f = $first) {
         <app-post-card [post]="post"></app-post-card>
       }
     </div>

src/app/reader/_components/main-page/posts-list/posts-list.component.ts

@@ -1,9 +1,4 @@
-import {
-  AsyncPipe,
-  DatePipe,
-  NgOptimizedImage,
-  NgStyle,
-} from '@angular/common';
+import { DatePipe, NgOptimizedImage, NgStyle } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -14,27 +9,25 @@ import {
   ElementRef,
   signal,
   WritableSignal,
+  OnInit,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { map, Observable, of } from 'rxjs';
-import { Post } from '../../../../shared/_models/post.interface';
-import { ReaderApiService } from '../../../_services/reader-api.service';
 import { AboutMeComponent } from '../../../../shared/about-me/about-me.component';
 import { PostCardComponent } from './post-card/post-card.component';
 import { TAGS } from '../../../../utlis/tags';
+import { PostsStore } from './posts.store';
 
 @Component({
   selector: 'app-posts-list',
   standalone: true,
   imports: [
-    AsyncPipe,
     RouterModule,
     AboutMeComponent,
     PostCardComponent,
     NgOptimizedImage,
     NgStyle,
   ],
-  providers: [ReaderApiService, DatePipe],
+  providers: [DatePipe],
   templateUrl: './posts-list.component.html',
   styleUrl: './posts-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -43,8 +36,8 @@ import { TAGS } from '../../../../utlis/tags';
 export class PostsListComponent {
   scroll = viewChild<ElementRef<HTMLElement>>('scrollContainer');
   scrollProgress: WritableSignal<number> = signal(0);
-  apiService = inject(ReaderApiService);
-  dataPipe = inject(DatePipe);
+  postStore = inject(PostsStore);
+  posts = this.postStore.posts;
 
   initialScroll = 2;
 
@@ -70,6 +63,5 @@ export class PostsListComponent {
     this.scrollProgress.set(scrollPercentage);
   }
 
-  posts$: Observable<Post[]> = of([]);
   protected readonly TAGS = TAGS;
 }

src/app/reader/_components/main-page/posts-list/posts.store.ts

@@ -0,0 +1,49 @@
+import { Post } from '../../../../types/supabase';
+import {
+  patchState,
+  signalStore,
+  withComputed,
+  withHooks,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
+import { computed, inject } from '@angular/core';
+import { ReaderApiService } from '../../../_services/reader-api.service';
+
+type PostsState = {
+  posts: Post[];
+  loading: boolean;
+  error: string | null;
+};
+
+const initialState: PostsState = {
+  posts: [],
+  loading: false,
+  error: null,
+};
+
+export const PostsStore = signalStore(
+  { providedIn: 'root' },
+  withState(initialState),
+
+  withMethods((state, postService = inject(ReaderApiService)) => ({
+    async getPosts() {
+      patchState(state, { loading: true, error: null });
+      try {
+        const posts = await postService.getPosts();
+        if (posts) {
+          patchState(state, { posts, loading: false });
+        } else {
+          patchState(state, { error: 'No posts found', loading: false });
+        }
+      } catch (error) {
+        patchState(state, { error: 'Failed to fetch posts', loading: false });
+      }
+    },
+  })),
+  withHooks({
+    onInit(store) {
+      store.getPosts();
+    },
+  }),
+);

src/app/reader/_services/reader-api.service.ts

@@ -1,10 +1,13 @@
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { Post } from '../../shared/_models/post.interface';
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Comment } from '../../shared/_models/comment.inteface';
+import { SupabaseService } from '../../services/supabase.service';
+import { Post } from '../../types/supabase';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class ReaderApiService {
+  supabaseService = inject(SupabaseService);
+
   async getPost(id: string): Promise<Post | null> {
     return null;
   }
@@ -16,4 +19,22 @@ export class ReaderApiService {
   addComment(postId: string, comment: Comment): void {}
 
   deleteComment(commentId: string, postId: string): void {}
+
+  async getPosts(): Promise<Post[] | null> {
+    const { data: posts } = await this.supabaseService.getClient
+      .from('posts')
+      .select(
+        `
+        *,
+        author:profiles ( id, username, avatar_url ),
+        post_tags (
+          tags ( id, name, color, icon )
+        )
+      `,
+      )
+      .eq('is_draft', false)
+      .order('created_at', { ascending: false });
+
+    return posts;
+  }
 }