Fix: fix createSnippet, updateSnippet, and add config firebase for th…

…e simulator firestore

.gitignore

@@ -17,6 +17,9 @@ firestore.rules
 pnpm-lock.yaml
 package-lock.json
 
+# emulators
+.firebaserc
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

src/composables/useElapsedTime.ts

@@ -12,6 +12,11 @@ export function useElapsedTime(
 	const calculateElapsedTime = () => {
 		let date;
 
+		if (!input) {
+			elapsedTime.value = "No date provided";
+			return;
+		}
+
 		if (typeof input === "string") {
 			date = new Date(input);
 		} else {

src/services/firebase/firebase.config.ts

@@ -1,7 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
-import { getFirestore } from "firebase/firestore";
+import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
 import { getAuth, connectAuthEmulator } from "firebase/auth";
 
 const firebaseConfig = {
@@ -21,7 +21,8 @@ if (process.env.NODE_ENV !== "test") {
 
 export const db = getFirestore(app);
 export const auth = getAuth(app);
-if (process.env.NODE_ENV === "test") {
+if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
 	connectAuthEmulator(auth, "http://localhost:9099");
+	connectFirestoreEmulator(db, "localhost", 8080);
 }
 export default app;

src/store/authStore.ts

@@ -1,10 +1,11 @@
 import { defineStore } from "pinia";
-import { onAuthStateChanged } from "firebase/auth";
+import { onAuthStateChanged, User } from "firebase/auth";
 import { auth } from "../services/firebase/firebase.config";
 
 export const useAuthStore = defineStore("auth", {
 	state: () => ({
 		isLoggedIn: false,
+		user: null as User | null,
 	}),
 
 	actions: {
@@ -14,20 +15,25 @@ export const useAuthStore = defineStore("auth", {
 			}
 		},
 
+		getUserId(): string | null {
+			return this.user ? this.user.uid : null;
+		},
+
 		listenToAuthChanges() {
 			onAuthStateChanged(auth, async (user) => {
 				if (user) {
+					this.user = user;
 					await this.login();
 				} else {
+					this.user = null;
 					this.logout();
 				}
 			});
 		},
 
 		async login() {
 			try {
-				const idToken = await auth.currentUser?.getIdToken();
-				if (idToken) {
+				if (this.user) {
 					this.isLoggedIn = true;
 				} else {
 					this.isLoggedIn = false;

src/views/CreateSnippetView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, computed } from "vue";
 import InputForText from "../components/InputForText.vue";
 import InputForRichText from "../components/InputForRichText.vue";
 import { useAuthStore } from "../store/authStore";
@@ -20,7 +20,7 @@ const snippetData = reactive({
 	tags: "",
 	createdAt: date.toISOString(),
 	updatedAt: date.toISOString(),
-	authorId: authStore.idToken,
+	authorId: computed(() => authStore.getUserId()),
 	visibility: true,
 });
 

src/views/EditSnippetView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, computed } from "vue";
 import InputForText from "../components/InputForText.vue";
 import InputForRichText from "../components/InputForRichText.vue";
 import { useAuthStore } from "../store/authStore";
@@ -23,7 +23,7 @@ const snippetData = reactive({
 	tags: "",
 	createdAt: date.toISOString(),
 	updatedAt: date.toISOString(),
-	authorId: authStore.idToken,
+	authorId: computed(() => authStore.getUserId()),
 	visibility: true,
 });