Implement ID generation for parties

package.json

@@ -9,6 +9,7 @@
 		"@babel/eslint-parser": "^7.24.1",
 		"@types/lodash": "^4.17.0",
 		"@types/node": "^20.11.30",
+		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^7.3.1",
 		"@typescript-eslint/parser": "^7.3.1",
 		"@vue/cli-plugin-babel": "^5.0.8",
@@ -27,6 +28,7 @@
 		"sass": "^1.72.0",
 		"sass-loader": "^14.1.1",
 		"typescript": "^5.4.3",
+		"uuid": "^9.0.1",
 		"vue": "^3.4.21",
 		"vue-router": "^4.3.0",
 		"webpack": "^5.91.0"

src/stores/userData.ts

@@ -1,29 +1,27 @@
 import _snakeCase from "lodash/snakeCase"
 import { defineStore } from "pinia"
 import { migrateCharacterId } from "@/utils"
-import type { SimpleParty } from "@/types"
+import { v4 as uuid } from "uuid"
+
+type MembersTuple = [string | null, string | null, string | null, string | null]
 
 class Party {
-	members: SimpleParty
+	id: string
+	members: MembersTuple
 	name: string | null
 	updatedAt?: string
 
 	constructor() {
-		this.name = null
+		this.id = uuid()
 		this.members = [null, null, null, null]
+		this.name = null
 		this.updatedAt = new Date().toISOString()
 	}
 }
 
 type UserDataState = {
-	ownedCharacters: {
-		[key: string]: { constellation: number }
-	},
-	parties: {
-		members: (string | null)[]
-		name: string | null
-		updatedAt?: string
-	}[],
+	ownedCharacters: Record<string, { constellation: number }>,
+	parties: Party[],
 }
 
 export const useUserDataStore = defineStore("userDataStore", {
@@ -101,13 +99,20 @@ export const useUserDataStore = defineStore("userDataStore", {
 
 				if (parties && parties.length && /^CHARACTER_.+/.test(parties[0].members[0] || "")) {
 					parties = parties.map(p => ({
-						members: p.members.map(m => null === m ? null : migrateCharacterId(m)),
+						id: uuid(),
+						members: p.members.map(m => m ? migrateCharacterId(m) : null) as MembersTuple,
 						name: p.name,
 						updatedAt: p.updatedAt,
 					}))
 				}
 
-				return { ownedCharacters, parties }
+				return {
+					ownedCharacters,
+					parties: parties.map(({ id, ...rest }) => ({
+						...rest,
+						id: id ?? uuid(),
+					})),
+				}
 			}
 		}
 	},

src/types/index.ts

@@ -3,4 +3,3 @@ export * from "./JSONData"
 export * from "./OwnedIndex"
 export * from "./Preset"
 export * from "./ProcessedCharacter"
-export * from "./SimpleParty"