changed to rest api wip

Author: Lukecsharpwalker

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

@@ -1,14 +1,42 @@
-import { Injectable, inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { map, Observable } from 'rxjs';
 import { Post } from '../../supabase-types';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 @Injectable()
 export class AdminApiService {
+  http = inject(HttpClient);
+  private readonly baseUrl =
+    'https://aqdbdmepncxxuanlymwr.supabase.co/rest/v1/';
+  private readonly apiKey =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFxZGJkbWVwbmN4eHVhbmx5bXdyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDUwNTA0MjYsImV4cCI6MjA2MDYyNjQyNn0.RNtZZ4Of4LIP3XuS9lumHYdjRLVUGXARtAxaTJmF7lc';
+
   addPost(post: Post): void {}
 
-  getPostById(id: string): Observable<Post | null> {
-    return null as unknown as Observable<Post | null>;
+  getPostById(id: string): Observable<Post> {
+    const selectQuery = `
+      *,
+      author:profiles(id,username,avatar_url),
+      post_tags!inner(tags(id,name,color,icon)),
+      comments(id,content,created_at,is_deleted,is_reported,author:profiles(id,username,avatar_url))
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    const params = new HttpParams()
+      .set('select', selectQuery)
+      .set('id', `eq.${id}`);
+
+    const headers = new HttpHeaders({
+      apikey: this.apiKey,
+      Authorization: `Bearer ${this.apiKey}`,
+      Accept: 'application/json',
+    });
+
+    return this.http
+      .get<Post[]>(`${this.baseUrl}posts`, { headers, params })
+      .pipe(map((results) => results[0] ?? null));
   }
 
   updatePost(id: string, post: Post): Promise<void> {

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

@@ -9,8 +9,6 @@
   </div>
 }
 
-
-
 <div class="container mx-auto grid grid-cols-12 gap-8">
   <aside
     class="col-span-12 2xl:col-span-3 bg-white/0 backdrop-blur-lg border border-white/90 rounded-lg shadow-lg p-6 self-start -mt-16 mb-16 2xl:my-36"
@@ -19,7 +17,7 @@ <h2 class="text-xl font-bold mb-4">📌 Article Information</h2>
     <ul class="text-gray-700 bg-gray-50 space-y-2 p-4 rounded-2xl shadow-lg">
       <li><strong>Category:</strong> {{ post()?.category }}</li>
       <li><strong>Updated:</strong> {{ post()?.updated | date }}</li>
-      <li><strong>Author:</strong> {{ post()?.author }}</li>
+      <li><strong>Author:</strong> {{ post()?.author?.username }}</li>
       <li><strong>Reading Time:</strong> {{ post()?.readingTime }} min</li>
       <li><strong>Difficulty:</strong> ⭐⭐⭐☆</li>
     </ul>
@@ -49,7 +47,7 @@ <h2 class="text-xl font-bold mt-6 mb-4">📖 Table of Contents</h2>
         <p
           class="text-center [webkit-text-stroke:1px_white] [text-shadow:_2px_2px_4px_rgba(255,255,255,0.8)] text-gray-500"
         >
-          {{ post()?.author }} - {{ post()?.created_at | date }}
+          {{ post()?.author?.username }} - {{ post()?.created_at | date }}
         </p>
         <!-- TODO: Add social share buttons -->
 

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

@@ -1,4 +1,4 @@
-import { DatePipe, NgOptimizedImage, NgStyle } from '@angular/common';
+import { NgOptimizedImage, NgStyle } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -9,16 +9,12 @@ import {
   ElementRef,
   signal,
   WritableSignal,
-  OnInit,
-  ChangeDetectorRef,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AboutMeComponent } from '../../../../shared/about-me/about-me.component';
 import { PostCardComponent } from './post-card/post-card.component';
 import { PostsStore } from './posts.store';
 import { TagsStore } from '../../../../shared/stores/tags.store';
-import { Post } from '../../../../types/supabase';
-import { ReaderApiService } from '../../../_services/reader-api.service';
 
 @Component({
   selector: 'app-posts-list',
@@ -30,18 +26,16 @@ import { ReaderApiService } from '../../../_services/reader-api.service';
     NgOptimizedImage,
     NgStyle,
   ],
-  providers: [DatePipe],
   templateUrl: './posts-list.component.html',
   styleUrl: './posts-list.component.scss',
   changeDetection: ChangeDetectionStrategy.Default,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class PostsListComponent implements OnInit {
+export class PostsListComponent {
   scroll = viewChild<ElementRef<HTMLElement>>('scrollContainer');
 
   postStore = inject(PostsStore);
   tagsStore = inject(TagsStore);
-  cdr = inject(ChangeDetectorRef);
 
   scrollProgress: WritableSignal<number> = signal(0);
   posts = this.postStore.posts;
@@ -52,10 +46,6 @@ export class PostsListComponent implements OnInit {
     this.initializeScrollingForMobileView();
   }
 
-  ngOnInit() {
-    console.log(this.posts());
-  }
-
   onScroll(event: Event) {
     const target = event.target as HTMLElement;
     const scrollLeft = target.scrollLeft;

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

@@ -2,14 +2,14 @@ import { inject, Injectable } from '@angular/core';
 import { SupabaseService } from '../../services/supabase.service';
 import { Comment, Post, Profile, Tag, PostTag } from '../../types/supabase';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { map, Observable } from 'rxjs';
+import { map, Observable, tap } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class ReaderApiService {
   supabaseService = inject(SupabaseService);
   http = inject(HttpClient);
   private readonly baseUrl =
-    'https://aqdbdmepncxxuanlymwr.supabase.co/rest/v1/posts';
+    'https://aqdbdmepncxxuanlymwr.supabase.co/rest/v1/';
   private readonly apiKey =
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFxZGJkbWVwbmN4eHVhbmx5bXdyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDUwNTA0MjYsImV4cCI6MjA2MDYyNjQyNn0.RNtZZ4Of4LIP3XuS9lumHYdjRLVUGXARtAxaTJmF7lc';
 
@@ -34,7 +34,7 @@ export class ReaderApiService {
     });
 
     return this.http
-      .get<Post[]>(this.baseUrl, { headers, params })
+      .get<Post[]>(`${this.baseUrl}posts`, { headers, params })
       .pipe(map((results) => results[0] ?? null));
   }
 
@@ -81,7 +81,7 @@ export class ReaderApiService {
       Accept: 'application/json',
     });
 
-    return this.http.get<Post[]>(this.baseUrl, { headers, params });
+    return this.http.get<Post[]>(`${this.baseUrl}posts`, { headers, params });
   }
 
   async getProfiles(): Promise<Profile[] | null> {
@@ -97,7 +97,7 @@ export class ReaderApiService {
       Authorization: `Bearer ${this.apiKey}`,
       Accept: 'application/json',
     });
-    return this.http.get<Tag[]>(this.baseUrl, { headers });
+    return this.http.get<Tag[]>(`${this.baseUrl}tags`, { headers });
   }
 
   async getPostTags(postId: string): Promise<PostTag[] | null> {

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

@@ -6,7 +6,6 @@ import {
   withState,
   withMethods,
   withHooks,
-  withComputed
 } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe, switchMap, tap } from 'rxjs';
@@ -23,7 +22,7 @@ type TagsState = {
 const initialState: TagsState = {
   tags: [],
   loading: false,
-  error: null
+  error: null,
 };
 
 export const TagsStore = signalStore(
@@ -37,23 +36,22 @@ export const TagsStore = signalStore(
         switchMap(() =>
           api.getTags().pipe(
             tapResponse({
-              next: (tags) =>
-                patchState(store, { tags, loading: false }),
+              next: (tags) => patchState(store, { tags, loading: false }),
               error: (err) =>
                 patchState(store, {
                   error: 'Failed to fetch tags',
-                  loading: false
-                })
-            })
-          )
-        )
-      )
-    )
+                  loading: false,
+                }),
+            }),
+          ),
+        ),
+      ),
+    ),
   })),
 
   withHooks(({ loadTags }) => ({
     onInit() {
       loadTags();
-    }
-  }))
+    },
+  })),
 );