fix(answer-form) prevent sending double

Author: rohrig

components/elements/AnswerForm.vue

@@ -3,7 +3,7 @@
 const props = defineProps(['questionId'])
 
 const addAnswer = 'addAnswer';
-const emit = defineEmits<{(e: typeof addAnswer, answer: IAnswer): void}>()
+const emit = defineEmits<{ (e: typeof addAnswer, answer: IAnswer): void }>()
 
 const questionId = props.questionId
 
@@ -15,38 +15,38 @@ const data: IAnswerPost = reactive({
 const showAnswerForm = useState('showAnswerForm' + questionId)
 
 async function postAnswer() {
- const answer = await useFetch(
-    () => `/api/ask-jack/answer`, { method: 'post', body: { data } }
-  );
+  const answer = await $fetch(`/api/ask-jack/answer`, { method: 'post', body: { data } });
 
   const newAnswer = useState('newAnswer')
-  newAnswer.value = answer.data.value
+  newAnswer.value = answer
 
-  emit('addAnswer', newAnswer.value as IAnswer)
+  emit('addAnswer', answer)
 
   data.text = ''
+  console.log('&&&&&&&&&  end post answer')
 }
+
 </script>
 
 
 <template>
-    <form @submit.preventDefault="postAnswer">
-      <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Answer</label>
-      <textarea v-model="data.text" id="message" rows="4"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
-        placeholder="Be specific and kind">
+  <form @submit.preventDefault="postAnswer">
+    <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Answer</label>
+    <textarea v-model="data.text" id="message" rows="4"
+      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
+      placeholder="Be specific and kind">
         </textarea>
-      <div>
-      </div>
-      <div class="flex justify-end">
-            <button @click="postAnswer" type="button"
+    <div>
+    </div>
+    <div class="flex justify-end">
+      <button @click="postAnswer" type="button"
         class="mt-5 px-6 py-3.5 text-white bg-gradient-to-r from-indigo-500 via-indigo-600 to-indigo-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:focus:ring-indigo-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">
         Submit
       </button>
       <button @click="showAnswerForm = !showAnswerForm" type="button"
         class="mt-5 px-6 py-3.5 text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:focus:ring-indigo-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">
         Cancel
       </button>
-      </div>
-    </form>
+    </div>
+  </form>
 </template>

pages/ask-jack/question/[id].vue

@@ -36,6 +36,7 @@ async function deleteQuestion() {
 
 const editEndpoint = '/api/ask-jack/edit-question'
 function addAnswer(answer: IAnswer) {
+ console.log('&&&&&&&&& add answer')
  question.value?.answers.push(answer)
  showAnswerForm.value = false
 }

server/api/ask-jack/answer.ts

@@ -1,13 +1,24 @@
-import { defineEventHandler, readBody, getCookie } from "h3";
+import { readBody, getCookie } from "h3";
 import { createAnswer } from "~/server/database/repositories/askJackRespository";
 import { getUserBySessionToken } from '~/server/services/sessionService'
 
-export default defineEventHandler(async (event) => {
+export default eventHandler(async (event) => {
     const body = await readBody(event)
     const data: IAnswerPost = body.data
 
-    const authToken = getCookie(event, 'auth_token')  
-    const user  = await getUserBySessionToken(authToken)
+    const authToken = getCookie(event, 'auth_token')  ?? null
+    
+    if(authToken == null) {
+        throw Error('unauthorized')
+    }
+
+    const user = await getUserBySessionToken(authToken)
+
+    if(!user) {
+        throw Error('unauthorized')
+    }
+
+    console.log('************ create answer *******************')
 
     return await createAnswer(data, user.id)
 })

server/api/ask-jack/search.ts

@@ -1,8 +1,8 @@
-import { CompatibilityEvent, defineEventHandler } from "h3";
+
 import { searchQuestions } from "~/server/database/repositories/askJackRespository";
 import { getUserById } from "~/server/database/repositories/userRespository";
 
-export default defineEventHandler(async (event: CompatibilityEvent) => {
+export default eventHandler(async (event) => {
     const queries = getQuery(event)
 
     const questions =  await searchQuestions(queries.search as string)

server/database/repositories/sessionRepository.ts

@@ -1,23 +1,28 @@
 import { IUser } from '~/types/IUser';
 import prisma from "~/server/database/client";
 import { ISession } from '~~/types/ISession';
+import { User } from '@prisma/client';
 
-export async function createSession(data: ISession): Promise<ISession> {
+export async function createSession(sessionData: ISession): Promise<ISession> {
+  if (!sessionData.authToken) {
+    throw Error('missing auth token for session')
+  }
+  
   return await prisma.session.create({
     data: {
-      userId: data.userId,
-      authToken: data.authToken
+      userId: sessionData.userId,
+      authToken: sessionData.authToken
     },
   })
 }
 
 export async function getSessionByAuthToken(authToken: string): Promise<ISession> {
-  const user: IUser = await getUserByAuthToken(authToken) as unknown as IUser
+  const user: User = await getUserByAuthToken(authToken) as unknown as User
 
   return { authToken, user }
 }
 
-async function getUserByAuthToken(authToken: string): Promise<IUser> {
+async function getUserByAuthToken(authToken: string): Promise<User | null> {
   return prisma.session.findUnique({
     where: {
       authToken: authToken,

server/services/sessionService.ts

@@ -1,11 +1,12 @@
 import { sanitizeUserForFrontend } from '~~/server/services/userService';
-import { CompatibilityEvent } from "h3"
+import { H3Event } from "h3"
 import { createSession, getSessionByAuthToken } from "~~/server/database/repositories/sessionRepository"
 import { IUser } from "~~/types/IUser"
 import { v4 as uuidv4 } from 'uuid'
+import { User } from '@prisma/client';
 
 
-export async function makeSession(user: IUser, event: CompatibilityEvent): Promise<IUser> {
+export async function makeSession(user: IUser, event: H3Event): Promise<User|undefined> {
     const authToken = uuidv4().replaceAll('-', '')
     const session = await createSession({ authToken, userId: user.id })
     const userId = session.userId
@@ -18,7 +19,7 @@ export async function makeSession(user: IUser, event: CompatibilityEvent): Promi
     throw Error('Error Creating Session')
 }
 
-export async function getUserBySessionToken(authToken: string): Promise<IUser> {
+export async function getUserBySessionToken(authToken: string): Promise<User|undefined> {
     const session = await getSessionByAuthToken(authToken)
 
     return sanitizeUserForFrontend(session.user)

server/services/userService.ts

@@ -4,6 +4,7 @@ import { validate } from '~~/server/services/validator';
 import { H3Event } from 'h3';
 import { getUserBySessionToken } from './sessionService';
 import { isString } from '@vueuse/core';
+import { User } from '@prisma/client';
 
 export async function validateUser(data: RegistationRequest): Promise<FormValidation> {
 
@@ -17,7 +18,7 @@ export async function validateUser(data: RegistationRequest): Promise<FormValida
     return { hasErrors: false }
 }
 
-export function sanitizeUserForFrontend(user: IUser | undefined): IUser | undefined {
+export function sanitizeUserForFrontend(user: User | undefined): User | undefined {
 
     if (!user) {
         return user

types/ISession.ts

@@ -1,7 +1,7 @@
-import { IUser } from "./IUser";
+import { User } from "@prisma/client";
 
 export interface ISession {
     authToken?: string;
-    user?: IUser
+    user?: User
     userId?: number
 }