Update firebase in content service

Author: kirjs

apps/codelab/src/app/admin/content/presentation-editor/content.module.ts

@@ -13,6 +13,9 @@ import {
   NAVIGATION_BASE_URL,
   NavigationService,
 } from './services/navigation.service';
+import { getFirestore, provideFirestore } from "@angular/fire/firestore";
+import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
+import { environment } from "../../../../environments/environment";
 
 @NgModule({
   declarations: [ContentComponent],
@@ -23,6 +26,8 @@ import {
     { provide: NAVIGATION_BASE_URL, useValue: 'admin/content' },
   ],
   imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
+    provideFirestore(()=>getFirestore()),
     CommonModule,
     SlideEditorModule,
     AngularFirestoreModule,

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -1,25 +1,25 @@
-import { Injectable, OnDestroy } from '@angular/core';
-import { AngularFirestore } from '@angular/fire/compat/firestore';
+import { inject, Injectable, OnDestroy } from '@angular/core';
 import { merge, Subject } from 'rxjs';
 import { auditTime, distinctUntilChanged, map, scan, shareReplay, take, takeUntil, } from 'rxjs/operators';
 import { nanoid } from 'nanoid';
 import { ContentBlock, ContentPresentation } from '../types';
 import { reducer } from '../reducer';
 import { serverTimestamp } from '@angular/fire/database';
 import { NavigationService } from "./navigation.service";
+import { collection, doc, docData, Firestore, setDoc } from "@angular/fire/firestore";
 
 const DOC_KEY = 'presentations';
 
 @Injectable({providedIn: 'root'})
 export class ContentService implements OnDestroy {
+  private firestore: Firestore = inject(Firestore);
   public readonly currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 
-  private readonly presentations = this.firestore.collection('presentations');
-  private readonly presentations$ = this.presentations
-    .doc(DOC_KEY)
-    .valueChanges()
+  private readonly presentations = collection(this.firestore, DOC_KEY);
+  private readonly presentations$ = docData(doc(this.presentations, DOC_KEY))
     .pipe(
       distinctUntilChanged((a, b) => {
+        debugger;
         return JSON.stringify(a) === JSON.stringify(b);
       }),
       map((doc: any) => {
@@ -29,8 +29,6 @@ export class ContentService implements OnDestroy {
 
   private readonly localActions$ = new Subject();
 
-  readonly appliedActions = new Set();
-
   readonly allActions$ = merge(
     this.presentations$.pipe(
       // TODO(kirjs): actually make it work
@@ -53,15 +51,14 @@ export class ContentService implements OnDestroy {
   );
 
   constructor(
-    private readonly firestore: AngularFirestore,
     private readonly navigationService: NavigationService
   ) {
     // TODO: There should be a better way
 
     this.state$
       .pipe(auditTime(2000), takeUntil(this.onDestroy$))
       .subscribe((presentations) => {
-        this.presentations.doc('presentations').set({presentations});
+        setDoc(doc(this.presentations, DOC_KEY), {presentations});
       });
   }