feat: initial prototype works

I can log in and create a book! Woo!
2026-02-04 12:17:05 -08:00
parent e167a17bd9
commit b6d66d34cb
44 changed files with 3695 additions and 493 deletions
@@ -0,0 +1,141 @@
+# Frontend Service Usage Examples
+
+## Auth Service
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { AuthService } from './services/auth.service';
+
+@Component({
+  selector: 'app-header',
+  template: `
+    <div>
+      @if (authService.user(); as user) {
+        <p>Welcome, {{ user.username }}!</p>
+        @if (user.isAdmin) {
+          <button (click)="logout()">Logout</button>
+        }
+      } @else {
+        <button (click)="login()">Login with Discord</button>
+      }
+    </div>
+  `
+})
+export class HeaderComponent {
+  authService = inject(AuthService);
+
+  login() {
+    this.authService.login();
+  }
+
+  logout() {
+    this.authService.logout().subscribe();
+  }
+}
+```
+
+## Games Service
+
+```typescript
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { GamesService } from './services/games.service';
+import { AuthService } from './services/auth.service';
+import { Game } from '@library/shared-types';
+
+@Component({
+  selector: 'app-games',
+  template: `
+    <div>
+      <h2>My Games</h2>
+
+      @if (authService.isAdmin()) {
+        <button (click)="showAddForm = true">Add Game</button>
+      }
+
+      <div class="games-grid">
+        @for (game of games(); track game.id) {
+          <div class="game-card">
+            <h3>{{ game.title }}</h3>
+            <p>{{ game.platform }}</p>
+            <p>Status: {{ game.status }}</p>
+
+            @if (authService.isAdmin()) {
+              <button (click)="editGame(game)">Edit</button>
+              <button (click)="deleteGame(game.id)">Delete</button>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `
+})
+export class GamesComponent implements OnInit {
+  gamesService = inject(GamesService);
+  authService = inject(AuthService);
+
+  games = signal<Game[]>([]);
+  showAddForm = false;
+
+  ngOnInit() {
+    this.loadGames();
+  }
+
+  loadGames() {
+    this.gamesService.getAllGames().subscribe(games => {
+      this.games.set(games);
+    });
+  }
+
+  deleteGame(id: string) {
+    if (confirm('Are you sure?')) {
+      this.gamesService.deleteGame(id).subscribe(() => {
+        this.loadGames();
+      });
+    }
+  }
+
+  editGame(game: Game) {
+    // Navigate to edit form or open modal
+  }
+}
+```
+
+## Books Service
+
+```typescript
+// Similar pattern to games
+import { BooksService } from './services/books.service';
+
+// In component
+booksService = inject(BooksService);
+books = signal<Book[]>([]);
+
+ngOnInit() {
+  this.booksService.getAllBooks().subscribe(books => {
+    this.books.set(books);
+  });
+}
+
+addBook(book: CreateBookDto) {
+  this.booksService.createBook(book).subscribe(() => {
+    this.loadBooks();
+  });
+}
+```
+
+## Music Service
+
+```typescript
+// Similar pattern
+import { MusicService } from './services/music.service';
+
+musicService = inject(MusicService);
+
+// Filter by type example
+getAlbums() {
+  this.musicService.getAllMusic().subscribe(music => {
+    const albums = music.filter(m => m.type === 'album');
+    this.albums.set(albums);
+  });
+}
+```