chore: playground database

Author: posva

playground/src/firebase.ts

@@ -2,6 +2,7 @@ import { initializeApp, type FirebaseApp } from 'firebase/app'
 import { Firestore, getFirestore } from 'firebase/firestore'
 import { inject, type App, type InjectionKey } from 'vue'
 import { getAnalytics, type Analytics } from 'firebase/analytics'
+import { Database, getDatabase } from 'firebase/database'
 
 export function createFirebaseApp() {
   const firebaseApp = initializeApp({
@@ -16,26 +17,30 @@ export function createFirebaseApp() {
   })
 
   const firestore = getFirestore(firebaseApp)
+  const database = getDatabase(firebaseApp)
   const analytics = getAnalytics(firebaseApp)
 
   // connectFirestoreEmulator(firestore, 'localhost', 8080)
 
-  return { firebaseApp, firestore, analytics }
+  return { firebaseApp, firestore, database, analytics }
 }
 
 export function VueFirePlugin({
   firebaseApp,
   firestore,
   analytics,
+  database,
 }: ReturnType<typeof createFirebaseApp>) {
   return (app: App) => {
     app.provide(FirebaseAppInjectKey, firebaseApp)
     app.provide(FirestoreInjectKey, firestore)
     app.provide(FirebaseAnalyticsInjectKey, analytics)
+    app.provide(DatabaseInjectKey, database)
   }
 }
 
 export const FirestoreInjectKey: InjectionKey<Firestore> = Symbol('firestore')
+export const DatabaseInjectKey: InjectionKey<Database> = Symbol('database')
 export const FirebaseAppInjectKey: InjectionKey<FirebaseApp> =
   Symbol('firebaseApp')
 export const FirebaseAnalyticsInjectKey: InjectionKey<Analytics> =
@@ -46,6 +51,10 @@ export function useFirestore() {
   return inject(FirestoreInjectKey)!
 }
 
+export function useDatabase() {
+  return inject(DatabaseInjectKey)!
+}
+
 export function useFirebaseApp() {
   return inject(FirebaseAppInjectKey)!
 }

playground/src/pages/rtdb-todos.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {
+  push,
+  remove,
+  ref as dbRef,
+  serverTimestamp,
+  update,
+} from 'firebase/database'
+import { ref } from 'vue'
+import { useList } from 'vuefire'
+import { useDatabase } from '@/firebase'
+
+interface Todo {
+  created: Date
+  finished: boolean
+  text: string
+}
+
+const db = useDatabase()
+const todosRef = dbRef(db, 'todos')
+// TODO:
+// const finishedTodos = query(todosRef, where('finished', '==', true))
+// const unfinishedTodos = query(todosRef, where('finished', '==', false))
+
+const todos = useList<Todo>(todosRef)
+
+const newTodoText = ref('')
+
+function addTodo() {
+  if (newTodoText.value) {
+    push(todosRef, {
+      text: newTodoText.value,
+      finished: false,
+      created: serverTimestamp(),
+    })
+    newTodoText.value = ''
+  }
+}
+
+function updateTodoText(todo: Todo, newText: string) {
+  update(dbRef(db, 'todos/' + todo.id), {
+    text: newText,
+  })
+}
+
+function removeTodo(todo: Todo) {
+  remove(dbRef(db, 'todos/' + todo.id))
+}
+
+function toggleTodos() {
+  // TODO:
+}
+</script>
+
+<template>
+  <button @click="toggleTodos">Toggle todos</button> <br />
+  <form @submit.prevent="addTodo">
+    <input v-model.trim="newTodoText" placeholder="Add new todo" />
+    <button>Add Todo</button>
+  </form>
+  <ul>
+    <li v-for="todo in todos">
+      <input
+        :value="todo.text"
+        @input="updateTodoText(todo, $event.target.value)"
+      />
+      <button @click="removeTodo(todo)">X</button>
+    </li>
+  </ul>
+</template>

playground/typed-router.d.ts

@@ -60,6 +60,12 @@ declare module 'vue-router/auto/routes' {
       Record<never, never>,
       Record<never, never>
     >
+    '/rtdb-todos': RouteRecordInfo<
+      '/rtdb-todos',
+      '/rtdb-todos',
+      Record<never, never>,
+      Record<never, never>
+    >
     '/todos': RouteRecordInfo<
       '/todos',
       '/todos',