Refactor Supabase types and enhance API URL building for improved query handling

Author: Lukecsharpwalker

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

@@ -1,9 +1,9 @@
 import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
-import { Post, PostInsert, PostUpdate, Tag } from '../../supabase-types';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { SupabaseService } from '../../services/supabase.service';
 import { environment } from '../../../environments/environment';
+import { Post, PostInsert, PostUpdate, Tag } from '../../types/supabase';
 
 @Injectable()
 export class AdminApiService {
@@ -111,7 +111,7 @@ export class AdminApiService {
         const existingTagIds = (existingPostTags || [])
           .map((pt) => pt.tag_id)
           .sort();
-        const newTagIds = tags.map((tag) => tag.id).sort();
+        const newTagIds = tags.map((tag: Tag) => tag.id).sort();
 
         // Check if tags have actually changed using JSON comparison for better accuracy
         const tagsChanged =

src/app/app.config.ts

@@ -1,7 +1,8 @@
 import {
-  APP_INITIALIZER,
   ApplicationConfig,
   provideZoneChangeDetection,
+  inject,
+  provideAppInitializer,
 } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
@@ -24,13 +25,11 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes, withComponentInputBinding()),
     provideClientHydration(withEventReplay()),
+    provideAppInitializer(() => {
+      const supabaseService = inject(SupabaseService);
+      return supabaseInitializer(supabaseService)();
+    }),
 
-    {
-      provide: APP_INITIALIZER,
-      useFactory: supabaseInitializer,
-      deps: [SupabaseService],
-      multi: true,
-    },
     provideHighlightOptions({
       coreLibraryLoader: () => import('highlight.js/lib/core'),
       languages: {

src/app/auth/_guards/authAdminGuard.ts

@@ -14,3 +14,4 @@ export const authAdminGuard: CanMatchFn = (): boolean => {
     return false;
   }
 };
+

src/app/helpers/api-url-builder.ts

@@ -0,0 +1,85 @@
+import { ColumnName, RowOf, TableName } from '../types/supabase-helper';
+
+//https://postgrest.org/en/stable/references/api/tables_views.html#operators
+type Op =
+  | 'eq'
+  | 'gt'
+  | 'gte'
+  | 'lt'
+  | 'lte'
+  | 'neq'
+  | 'like'
+  | 'ilike'
+  | 'match'
+  | 'imatch'
+  | 'in'
+  | 'is'
+  | 'isdistinct'
+  | 'fts'
+  | 'plfts'
+  | 'phfts'
+  | 'wfts'
+  | 'cs'
+  | 'cd'
+  | 'ov'
+  | 'sl'
+  | 'sr'
+  | 'nxr'
+  | 'nxl'
+  | 'adj'
+  | 'not'
+  | 'or'
+  | 'and'
+  | 'all'
+  | 'any';
+
+export class UB<T extends TableName> {
+  private selects = new Set<string>();
+  private filters: string[] = [];
+  private orders: string[] = [];
+  private lim?: number;
+  private off?: number;
+
+  constructor(private readonly table: T) {}
+
+  select(...cols: string[]) {
+    cols.forEach((c) => this.selects.add(c));
+    return this;
+  }
+
+  where<K extends ColumnName<T>>(col: K, op: Op, value: RowOf<T>[K]) {
+    this.filters.push(
+      `${encodeURIComponent(String(col))}=${op}.${encodeURIComponent(String(value))}`,
+    );
+    return this;
+  }
+
+  orderBy<K extends ColumnName<T>>(
+    col: K,
+    dir: 'asc' | 'desc' = 'asc',
+    nulls?: 'first' | 'last',
+  ) {
+    this.orders.push(`${String(col)}.${dir}${nulls ? `.nulls${nulls}` : ''}`);
+    return this;
+  }
+
+  range(from: number, to: number) {
+    this.off = from;
+    this.lim = to - from + 1;
+    return this;
+  }
+
+  build(): string {
+    const p: string[] = [];
+    if (this.selects.size)
+      p.push(`select=${encodeURIComponent([...this.selects].join(','))}`);
+    if (this.filters.length) p.push(...this.filters);
+    if (this.orders.length)
+      p.push(`order=${encodeURIComponent(this.orders.join(','))}`);
+    if (this.lim !== undefined) p.push(`limit=${this.lim}`);
+    if (this.off !== undefined) p.push(`offset=${this.off}`);
+    return `${this.table}?${p.join('&')}`;
+  }
+}
+
+export const createApiUrl = <T extends TableName>(table: T) => new UB<T>(table);

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

@@ -1,7 +1,7 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { LabelComponent } from '../label/label.component';
 import { RouterLink } from '@angular/router';
-import { Post } from '../../../../../supabase-types';
+import { Post } from '../../../../../types/supabase';
 
 @Component({
   selector: 'app-post-card',

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

@@ -4,13 +4,19 @@ import { Comment, Post, Profile, Tag, PostTag } from '../../types/supabase';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { createApiUrl } from '../../helpers/api-url-builder';
 
 @Injectable({ providedIn: 'root' })
 export class ReaderApiService {
   supabaseService = inject(SupabaseService);
   http = inject(HttpClient);
   private readonly baseUrl = `${environment.supabaseUrl}/rest/v1/`;
   private readonly apiKey = environment.supabaseKey;
+  private headers = new HttpHeaders({
+    apikey: this.apiKey,
+    Authorization: `Bearer ${this.apiKey}`,
+    Accept: 'application/json',
+  });
 
   getPost(id: string): Observable<Post> {
     const selectQuery = `
@@ -60,27 +66,20 @@ export class ReaderApiService {
       .eq('post_id', postId);
   }
 
-  getPosts(): Observable<Post[] | null> {
-    const selectQuery = `
-      *,
-      author:profiles(id,username,avatar_url),
-      post_tags(tags(id,name,color,icon))
-    `
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    const params = new HttpParams()
-      .set('select', selectQuery)
-      .set('is_draft', 'eq.false')
-      .set('order', 'created_at.desc');
+  getPosts(): Observable<Post[]> {
+    const query = createApiUrl('posts')
+      .select(
+        '*',
+        'author:profiles(id,username,avatar_url)',
+        'post_tags(tags(id,name,color,icon))',
+      )
+      .where('is_draft', 'eq', false)
+      .orderBy('created_at', 'desc')
+      .build();
 
-    const headers = new HttpHeaders({
-      apikey: this.apiKey,
-      Authorization: `Bearer ${this.apiKey}`,
-      Accept: 'application/json',
+    return this.http.get<Post[]>(`${this.baseUrl}/${query}`, {
+      headers: this.headers,
     });
-
-    return this.http.get<Post[]>(`${this.baseUrl}posts`, { headers, params });
   }
 
   async getProfiles(): Promise<Profile[] | null> {

src/app/services/supabase.service.ts

@@ -13,9 +13,9 @@ import { environment } from '../../environments/environment';
   providedIn: 'root',
 })
 export class SupabaseService {
+  public session: AuthSession | null = null;
   private supabase: SupabaseClient;
   private readonly ngZone = inject(NgZone);
-  public session: AuthSession | null = null;
 
   constructor() {
     this.supabase = this.ngZone.runOutsideAngular(() =>
@@ -24,9 +24,6 @@ export class SupabaseService {
   }
 
   getSession(): AuthSession | null {
-    this.supabase.auth.getSession().then(({ data }) => {
-      this.session = data.session;
-    });
     return this.session;
   }