Tag: Angular

The Problem

I’ve been trying to learn Angular and Supabase for the past few months, and right now I’m trying to build a good ol’ Todo app with CRUD functionalities using Angular and Supabase.

I’ve managed to get it working for the most part, like, everything works until I edit a Todo.

After I submit the updated todo, which works fine, I can’t add new Todos, and I think I know why but I just can’t figure out a way, or the best should I say, to do that. I can still edit other todos, just can’t submit new ones.

What can I do to prevent that from happening?

How can I streamline the current code that I have? Aside from making the Interface in a different file, that was just laziness

The code

component.html:

<form (formGroup)="todoForm">
  <input type="text" formControlName="todo" />
  <button type="submit" (click)="addTodo()" (disabled)="todoForm.invalid">Save</button>
</form>
<mat-divider style="margin: 20px 0;"></mat-divider>
<ul>
  <li *ngFor="let todo of todos | async">
    <span>{{ todo.id }} - {{ todo.todo }}</span>
    <span style="margin-left: 10px">
      <button (click)="deleteTodo(todo)">Delete</button>
    </span>
    <span style="margin-left: 10px">
      <button (click)="updateTodo(todo)">Update</button>
    </span>
  </li>
</ul>

component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RealtimeService } from './realtime.service';

export interface Todo {
  id: number;
  todo: string;
}

@Component({
  selector: 'app-realtime-test',
  templateUrl: './realtime-test.component.html',
  styleUrls: ('./realtime-test.component.scss'),
})
export class RealtimeTestComponent implements OnInit {
  todos = this._realtimeServie.todos;

  todoForm!: FormGroup;
  selectedTodo!: Todo;

  constructor(
    private _realtimeServie: RealtimeService,
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    this.todoForm = this.fb.group({
      todo: ( '', (Validators.required) ),
    });
  }

  addTodo() {

    if(this.selectedTodo) {
      this._realtimeServie.updateTodo(this.selectedTodo.id , this.todoForm.value)
    } else {
      this._realtimeServie.insertTodo(this.todoForm.value);
    }

    this.resetForm();
  }

  deleteTodo(todo: Todo) {
    this._realtimeServie.deleteTodo(todo.id);
  }

  updateTodo(todo: Todo) {
    this.selectedTodo = todo;

    this.todoForm = this.fb.group({
      todo: ( this.selectedTodo.todo, (Validators.required) )
    })
  }

  resetForm(): void {
    this.todoForm.reset();
  }
}

service.ts:

import { Injectable } from '@angular/core';
import { createClient, SupabaseClient } from '@supabase/supabase-js';
import { BehaviorSubject, Observable } from 'rxjs';

import { environment as env } from 'src/environments/environment';

export interface Todo {
  id: number;
  todo: string;
}

@Injectable({
  providedIn: 'root',
})
export class RealtimeService {
  supabase: SupabaseClient = createClient(
    env.supabaseConfig.supabaseUrl,
    env.supabaseConfig.supabaseKey
  );

  private _todos: BehaviorSubject<any> = new BehaviorSubject(());

  constructor() {
    this.fetchTodos();
    this.handleTodosChanged();
  }

  // This is what the component should call to get the list of todos, instead of getting through the
  // behavior subject instantiated above

  get todos(): Observable<Todo()> {
    return this._todos.asObservable();
  }

  // Fetch all todos from the Todos table
  async fetchTodos() {
    let { data: todos, error } = await this.supabase
      .from<Todo>('todos')
      .select('*');

    console.log('query: ', todos);
    this._todos.next(todos);

    return { todos, error };
  }

  // Insert new todo in the todos table
  async insertTodo(todoForm: Todo) {
    let { data: todo, error } = await this.supabase
      .from<Todo>('todos')
      .insert(todoForm);
    return { todo, error };
  }

  // Remove todo from the todos table
  async deleteTodo(id: number) {
    let { data: todo, error } = await this.supabase
      .from<Todo>('todos')
      .delete()
      .match({ id });
    return { todo, error };
  }

  // Update todo from the todos table
  async updateTodo(id: number, todoForm: Todo) {
    let { data: todo, error } = await this.supabase
      .from('todos')
      .update( todoForm )
      .match({ id });
    return { todo, error };
  }

  // Handle todos change when a change happens in the database
  handleTodosChanged() {
    const mySubscription = this.supabase
      .from('todos')
      .on('*', (payload) => {
        //console log the paylod
        console.log('payload: ', payload);

        // if the payload type is equals to...
        if (payload.eventType == 'INSERT') {
          const newItem: Todo = payload.new;
          this._todos.next((...this._todos.value, newItem));
        } else if (payload.eventType == 'DELETE') {
          const oldTodo: Todo = payload.old;
          const newTodos = this._todos.value.filter(
            (item: { id: number }) => oldTodo.id != item.id
          );
          this._todos.next(newTodos);
        } else if (payload.eventType == 'UPDATE') {
          const updatedTodo: Todo = payload.new;
          const newTodos = this._todos.value.map((item: Todo) => {
            if (updatedTodo.id == item.id) {
              item = updatedTodo;
            }
            return item;
          });
          this._todos.next(newTodos);
        }
      })
      .subscribe();
    return mySubscription;
  }
}

```