Part 5.1 (#43)

* changed to rest api wip

* dates etc added

Author: Lukecsharpwalker

angular.json

@@ -22,7 +22,6 @@
             "browser": "src/main.ts",
             "allowedCommonJsDependencies": [
               "highlight.js",
-              "quill-delta",
               "whatwg-url",
               "@supabase/node-fetch"
             ],

reset-password.ts

@@ -6,8 +6,7 @@
  * USAGE (bash):
  *   export SUPABASE_URL="https://aqdbdmepncxxuanlymwr.supabase.co"
  *   export SERVICE_ROLE_KEY="YOUR_SERVICE_ROLE_KEY_HERE"
- *   npx ts-node reset-password.ts \
- *        a3b3cf93-6956-41c7-bec0-1qwqwd42f26 'N3w-Pa$$w0rd!'
+ *  npx tsx reset-password.ts ID 'lSupa'
  *********************************************************************/
 
 import { createClient } from '@supabase/supabase-js';

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

@@ -1,24 +1,19 @@
 @defer {
-<form class="p-12 flex flex-col gap-2" [formGroup]="blogForm" (ngSubmit)="onSubmit()">
-  <div class="w-full flex">
-    <input type="text" formControlName="title" placeholder="Title" class="input input-bordered w-full" required/>
-  </div>
-  @if (blogForm.controls.title.invalid && (blogForm.controls.title.dirty || blogForm.controls.title.touched)) {
-  @if (blogForm.controls.title.errors?.['required']) {
-    <div>Title is required.</div>
-  }
-  }
-<<<<<<< HEAD
-  <button class="btn btn--secondary" type="button" (click)="insertImage()">Insert Image</button>
-  <quill-editor #quill formControlName="content" class="h-screen w-full"></quill-editor>
-  <div class="mt-12 btn--group">
-    <button class="btn btn--primary" type="submit">Submit</button>
-    <button class="btn btn--secondary" type="button" (click)="onSubmit(true)">Save as a draft</button>
-  </div>
-=======
-
-
-  <button type="submit" [disabled]="blogForm.invalid">Submit</button>
->>>>>>> ab739b9 (nothing special)
-</form>
+  <form class="p-12 flex flex-col gap-2" [formGroup]="blogForm" (ngSubmit)="onSubmit()">
+    <div class="w-full flex">
+      <input type="text" formControlName="title" placeholder="Title" class="input input-bordered w-full" required/>
+    </div>
+    @if (blogForm.controls.title.invalid && (blogForm.controls.title.dirty || blogForm.controls.title.touched)) {
+      @if (blogForm.controls.title.errors?.['required']) {
+        <div>Title is required.</div>
+      }
+    }
+    <button class="btn btn--secondary" type="button" (click)="insertImage()">Insert Image</button>
+    <quill-editor #quill formControlName="content" class="h-screen w-full"></quill-editor>
+    <div class="mt-12 btn--group">
+      <button class="btn btn--primary" type="submit">Submit</button>
+      <button class="btn btn--secondary" type="button" (click)="onSubmit(true)">Save as a draft</button>
+    </div>
+    <button type="submit" [disabled]="blogForm.invalid">Submit</button>
+  </form>
 }

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

@@ -62,9 +62,9 @@ export class AddPostComponent implements OnInit {
       validators: [Validators.required],
       nonNullable: true,
     }),
-    date: new FormControl<Date | null>(null),
+    created_at: new FormControl<Date | null>(null),
     description: new FormControl<string | null>(null),
-    isDraft: new FormControl(false, { nonNullable: true }),
+    is_draft: new FormControl(false, { nonNullable: true }),
   });
   range: Range | null = null;
 
@@ -80,6 +80,7 @@ export class AddPostComponent implements OnInit {
       this.apiService.getPostById(this.postId).subscribe((post) => {
         if (post) {
           this.blogForm.patchValue(post);
+          console.log(this.blogForm.value);
         }
       });
     }
@@ -95,9 +96,9 @@ export class AddPostComponent implements OnInit {
       const rawContent = this.blogForm.controls.content.value as string;
       const cleanedContent = rawContent.replace(/(&nbsp;|\u00A0)/g, ' ');
       this.blogForm.controls.content.setValue(cleanedContent);
-      this.blogForm.controls.isDraft.setValue(isDraft);
-      if (!this.blogForm.controls.date.value) {
-        this.blogForm.controls.date.setValue(null);
+      this.blogForm.controls.is_draft.setValue(isDraft);
+      if (!this.blogForm.controls.created_at.value) {
+        this.blogForm.controls.created_at.setValue(null);
       }
       if (this.postId) {
         this.apiService.updatePost(this.postId, this.blogForm.value as Post);

src/app/admin/_models/post-from.inteface.ts

@@ -4,7 +4,7 @@ import { SafeHtml } from '@angular/platform-browser';
 export interface PostForm {
   title: FormControl<string>;
   content: FormControl<string | SafeHtml>;
-  isDraft: FormControl<boolean>;
-  date: FormControl<any>;
+  is_draft: FormControl<boolean>;
+  created_at: FormControl<Date | null>;
   description?: FormControl<string | null>;
 }

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

@@ -3,16 +3,22 @@ import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { Post } from '../../supabase-types';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { SupabaseService } from '../../services/supabase.service';
 
 @Injectable()
 export class AdminApiService {
   http = inject(HttpClient);
+  supabaseService = inject(SupabaseService);
   private readonly baseUrl =
     'https://aqdbdmepncxxuanlymwr.supabase.co/rest/v1/';
   private readonly apiKey =
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFxZGJkbWVwbmN4eHVhbmx5bXdyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDUwNTA0MjYsImV4cCI6MjA2MDYyNjQyNn0.RNtZZ4Of4LIP3XuS9lumHYdjRLVUGXARtAxaTJmF7lc';
 
-  addPost(post: Post): void {}
+  async addPost(post: Post): Promise<void> {
+    const { error } = await this.supabaseService.getClient
+      .from('posts')
+      .insert({ ...post });
+  }
 
   getPostById(id: string): Observable<Post> {
     const selectQuery = `
@@ -39,7 +45,13 @@ export class AdminApiService {
       .pipe(map((results) => results[0] ?? null));
   }
 
-  updatePost(id: string, post: Post): Promise<void> {
-    return Promise.resolve();
+  async updatePost(id: string, post: Post): Promise<void> {
+    await this.supabaseService.getClient
+      .from('posts')
+      .update({ ...post })
+      .eq('id', id)
+      .then((x) => {
+        console.log(x);
+      });
   }
 }

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

@@ -3,7 +3,7 @@
   <div class="flex justify-center -mx-2 xl:-mx-48">
     <img
       class="w-full h-80 object-cover mt-10 rounded-2xl"
-      src="{{ date }}-post.webp"
+      src="{{ date()  }}-post.webp"
       alt="{{ post()?.title }}"
     />
   </div>

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

@@ -35,7 +35,7 @@ export class PostComponent implements OnInit {
   postStore = inject(PostStore);
 
   post: Signal<Post | null> = this.postStore.post;
-  date: string = '';
+  date: Signal<string | null> = this.postStore.date;
 
   private dialogService = inject(DynamicDialogService);
   private viewContainerRef = inject(ViewContainerRef);

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

@@ -1,14 +1,23 @@
 import { inject } from '@angular/core';
-import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { computed } from '@angular/core';
+import {
+  patchState,
+  signalStore,
+  withMethods,
+  withState,
+  withComputed,
+} from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe, switchMap, tap } from 'rxjs';
 import { tapResponse } from '@ngrx/operators';
 
 import { Post } from '../../../../types/supabase';
 import { ReaderApiService } from '../../../_services/reader-api.service';
+import { formatDateToDDMMYYYY } from '../../../../utlis/date-utils';
 
 type PostState = {
   post: Post | null;
+  date: string | null;
   loading: boolean;
   error: string | null;
 };
@@ -17,12 +26,15 @@ const initialState: PostState = {
   post: null,
   loading: false,
   error: null,
+  date: null,
 };
 
 export const PostStore = signalStore(
   { providedIn: 'root' },
   withState(initialState),
-
+  withComputed((store) => ({
+    date: computed(() => formatDateToDDMMYYYY(store.post()?.created_at)),
+  })),
   withMethods((store, postService = inject(ReaderApiService)) => ({
     getPost: rxMethod<string>(
       pipe(

src/app/shared/about-me/about-me.component.html

@@ -13,5 +13,5 @@ <h2 class="text-sm mt-8 w-full md:w-1/2">
       new challenges.
     </h2>
   </div>
-  <img class="object-cover object-top hidden sm:block" ngSrc="my/photo.webp" priority width="250" height="100">
+  <img class="object-cover object-top hidden sm:block" ngSrc="my/photo.webp" priority width="250" height="250">
 </div>