feat: add comment post functionality

thraizz · Jan 27, 2024 · 0c7b9cb · 0c7b9cb
1 parent 1ff68cc
commit 0c7b9cb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/src/comments.ts b/src/comments.ts
@@ -1,4 +1,4 @@
-import { collection, getDocs } from "firebase/firestore";
+import { addDoc, collection, getDocs } from "firebase/firestore";
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
@@ -39,6 +39,36 @@ export const useCommentStore = defineStore("comments", () => {
     return comments.value.filter((comment) => comment.projectId === projectUid);
   };
 
+  const addCommentToProject = (
+    comment: string,
+    projectUid: string,
+    userUid: string,
+  ) => {
+    const commentData = {
+      userId: userUid,
+      projectId: projectUid,
+      textContent: comment,
+      timestamp: new Date(),
+      upvotes: [],
+    };
+
+    const commentCollection = collection(firestore, "comments");
+    addDoc(commentCollection, {
+      ...commentData,
+      timestamp: commentData.timestamp.toISOString(),
+    })
+      .then((data) => {
+        console.log(data);
+        comments.value = [
+          ...comments.value,
+          { ...commentData, _id: data.id } as Comment,
+        ];
+      })
+      .catch((error) => {
+        console.error("Error writing document: ", error);
+      });
+  };
+
   // function upvoteProject(_id: string, uid?: string) {
   //   const project = comments.value.find((p) => p._id === _id);
   //   if (!project) return;
@@ -66,5 +96,6 @@ export const useCommentStore = defineStore("comments", () => {
     projects: comments,
     refetch,
     getCommentsByProjectUid,
+    addCommentToProject,
   };
 });
diff --git a/src/types.ts b/src/types.ts
@@ -28,7 +28,6 @@ export type Project = {
 // Comment Type
 export type Comment = {
   _id: string;
-  commentId: string;
   userId: string; // author's user ID
   projectId: string; // associated project ID
   textContent: string;

diff --git a/src/views/AddCommentForm.vue b/src/views/AddCommentForm.vue
@@ -26,7 +26,7 @@ const { handleSubmit } = useForm<FormData>({
 const onSubmit = handleSubmit(
   // Success
   (values: FormData) => {
-    if (!user.value) return;
+    if (!user.value?.uid) return;
     // handle form submission here
     commentStore.addCommentToProject(
       values.comment,
@@ -45,13 +45,16 @@ const { value: comment, errorMessage: commentError } =
 </script>
 
 <template>
-  <div class="mt-6 flex gap-x-3">
+  <div v-if="user?.uid" class="mt-6 flex gap-x-3">
     <img
-      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      v-if="user?.photoURL && user.photoURL !== ''"
+      :src="user.photoURL"
       alt=""
       class="h-6 w-6 flex-none rounded-full bg-gray-50"
     />
 
+    <div v-else class="h-6 w-6 flex-none" />
+
     <div class="w-full">
       <form class="relative flex-auto" @submit="onSubmit">
         <div