Generate unique member IDs for component reordering

package.json

@@ -27,6 +27,7 @@
     "homepage": "https://github.com/jouni-kantola/mobtimer#readme",
     "dependencies": {
         "@neutralinojs/lib": "^5.1.0",
+        "nanoid": "^5.0.7",
         "vue": "^3.4.21"
     },
     "devDependencies": {

resources/scripts/App.vue

@@ -15,7 +15,8 @@
     </div>
     <form>
         <TeamMember
-            v-for="{ name, index, isActive } in team"
+            v-for="{ id, name, index, isActive } in team"
+            :key="id"
             :index="index"
             :name="name"
             :isActive="isActive"

resources/scripts/team.ts

@@ -1,17 +1,17 @@
+import { nanoid } from "nanoid";
+
 export type Member = {
+    id: string;
     index: number;
     name: string;
     isHere: boolean;
     isActive: boolean;
 };
 
 export function createTeam(members: Array<string>): Array<Member> {
-    return members.map((name, index) => ({
-        index,
-        name,
-        isHere: true,
-        isActive: index === 0,
-    }));
+    const team = new Array<Member>();
+    members.forEach(name => addMember(name, team));
+    return team;
 }
 
 export function whosNext(team: Array<Member>) {
@@ -62,10 +62,11 @@ export function getLast(team: Array<Member>) {
 
 function addMember(name: string, team: Array<Member>) {
     team.push({
+        id: nanoid(),
         index: team.length,
         name,
         isHere: true,
-        isActive: false,
+        isActive: team.length === 0,
     });
 }
 

test/team-test.ts

@@ -11,10 +11,24 @@ import {
 
 test("map names to team", () => {
     const team = createTeam(defaultMembers);
-    assert.strictEqual(team[0].index, 0);
-    assert.strictEqual(team[0].name, "Member 1");
+
+    assert.isTrue(team.every(member => member.isHere));
+    assert.lengthOf(
+        team.filter(member => member.isActive),
+        1
+    );
+
+    const activeMember = team[0];
+    assert.strictEqual(activeMember.isActive, true);
+    assert.strictEqual(activeMember.index, 0);
+    assert.strictEqual(activeMember.name, "Member 1");
+
     assert.strictEqual(team.at(-1)!.index, 5);
     assert.strictEqual(team.at(-1)!.name, "Member 6");
+
+    const ids = team.map(member => member.id);
+    const uniqueIds = [...new Set(ids)];
+    assert.lengthOf(uniqueIds, ids.length);
 });
 
 test("whos next when everyone here", () => {
@@ -80,6 +94,7 @@ test("increase team size", () => {
     assert.strictEqual(team.at(-1)!.index, 4);
     assert.strictEqual(team.at(-1)!.isHere, true);
     assert.strictEqual(team.at(-1)!.isActive, false);
+    assert.ok(team.at(-1)!.id);
 });
 
 test("decrease team size", () => {