Add safety and state refresh when adding to collection (#1535)

composables/user.js

@@ -76,13 +76,21 @@ export const initUserProjects = async () => {
 
 export const userCollectProject = async (collection, projectId) => {
   const user = (await useUser()).value
+  await initUserCollections()
 
-  const add = !collection.projects.includes(projectId)
+  const collectionId = collection.id
+
+  const latestCollection = user.collections.find((x) => x.id === collectionId)
+  if (!latestCollection) {
+    throw new Error('This collection was not found. Has it been deleted?')
+  }
+
+  const add = !latestCollection.projects.includes(projectId)
   const projects = add
-    ? [...collection.projects, projectId]
+    ? [...latestCollection.projects, projectId]
-    : [...collection.projects].filter((x) => x !== projectId)
+    : [...latestCollection.projects].filter((x) => x !== projectId)
 
-  const idx = user.collections.findIndex((x) => x.id === collection.id)
+  const idx = user.collections.findIndex((x) => x.id === latestCollection.id)
   if (idx >= 0) {
     user.collections[idx].projects = projects
   }

pages/[type]/[id].vue

@@ -305,7 +305,7 @@
                         :key="option.id"
                         :model-value="option.projects.includes(project.id)"
                         class="popout-checkbox"
-                        @update:model-value="userCollectProject(option, project.id)"
+                        @update:model-value="() => onUserCollectProject(option, project.id)"
                       >
                         {{ option.name }}
                       </Checkbox>
@@ -1036,6 +1036,8 @@ if (!route.name.startsWith('type-id-settings')) {
   })
 }
 
+const onUserCollectProject = useClientTry(userCollectProject)
+
 async function clearMessage() {
   startLoading()