Added creating new whiteboards from home screen, refactoring

front/src/stores/whiteboards.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { Whiteboard } from '@/types'
 import { whiteboardService } from '@/services/whiteboardService'
 
-export const useWhiteboardStore = defineStore('whiteboards', () => {
+export const useWhiteboardsStore = defineStore('whiteboards', () => {
   const ownedWhiteboards = ref<Whiteboard[]>([])
   const recentWhiteboards = ref<Whiteboard[]>([])
   const isLoading = ref(false)
@@ -33,6 +33,25 @@ export const useWhiteboardStore = defineStore('whiteboards', () => {
     }
   }
 
+  async function createNewWhiteboard(title: string): Promise<string> {
+    let newWhiteboard: Whiteboard;
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const newId = await whiteboardService.createNewWhiteboard(title)
+      newWhiteboard = await whiteboardService.getWhiteboardById(newId)
+    } catch (err: any) {
+      error.value = err.message ?? 'Failed to create whiteboard'
+      throw err
+    } finally {
+      isLoading.value = false
+    }
+
+    ownedWhiteboards.value.push(newWhiteboard)
+    return newWhiteboard.id;
+  }
+
   function clearWhiteboards() {
     ownedWhiteboards.value = []
     recentWhiteboards.value = []
@@ -45,6 +64,7 @@ export const useWhiteboardStore = defineStore('whiteboards', () => {
     error,
     getWhiteboardHistory: getWhiteboardHistory,
     getRecentWhiteboards: getRecentWhiteboards,
+    createNewWhiteboard: createNewWhiteboard,
     clearWhiteboards: clearWhiteboards
   }
 })