Refactor userlist helper

src/common/cssHelpers.test.ts

@@ -1,9 +1,11 @@
-import test from "node:test";
+import { describe, it } from "node:test";
 import assert from "node:assert";
 import { buildClassNames } from "./cssHelpers";
 
-void test("returns combined classnames as a string that trimmed empty", () => {
-  assert.strictEqual(buildClassNames(["button", "button-primary"]), "button button-primary");
-  assert.strictEqual(buildClassNames(["button", undefined]), "button");
-  assert.strictEqual(buildClassNames(["button", undefined, "hidden"]), "button hidden");
+describe("buildClassNames", () => {
+  it("returns combined classnames as a string that trimmed empty", () => {
+    assert.strictEqual(buildClassNames(["button", "button-primary"]), "button button-primary");
+    assert.strictEqual(buildClassNames(["button", undefined]), "button");
+    assert.strictEqual(buildClassNames(["button", undefined, "hidden"]), "button hidden");
+  });
 });

src/common/listHelpers.test.ts

@@ -0,0 +1,82 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { movePosition } from "./listHelpers";
+
+describe("movePosition", () => {
+  it("does not change given users", () => {
+    const users = [
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "ujihisa",
+    ];
+    movePosition<string>(users, "pankona", "kachick");
+
+    assert.deepStrictEqual(users, [
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "ujihisa",
+    ]);
+  });
+
+  it("returns reordered users", () => {
+    const users = [
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "ujihisa",
+    ];
+
+    assert.deepStrictEqual(movePosition(users, "pankona", "ravelll"), [
+      "ravelll",
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ujihisa",
+    ]);
+
+    assert.deepStrictEqual(movePosition(users, "ravelll", "pankona"), [
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "pankona",
+      "ujihisa",
+    ]);
+
+    assert.deepStrictEqual(movePosition(users, "highwide", "highwide"), [
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "ujihisa",
+    ]);
+
+    assert.deepStrictEqual(movePosition(users, "pankona", "ujihisa"), [
+      "ujihisa",
+      "pankona",
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+    ]);
+
+    assert.deepStrictEqual(movePosition(users, "ujihisa", "pankona"), [
+      "kachick",
+      "highwide",
+      "ohbarye",
+      "ravelll",
+      "ujihisa",
+      "pankona",
+    ]);
+  });
+});

src/common/listHelpers.ts

@@ -13,3 +13,43 @@ export const shuffleArray = <T>(array: readonly T[]): T[] => {
 
   return dup;
 };
+
+// Move an item to new position that already have another item.
+// Former item will move to reasonable position, so kept the length of list.
+// Items should be unique.
+// Implemented for "drag-and-drop" use-case.
+export const movePosition = <T>(
+  items: readonly T[],
+  mover: T,
+  moveTo: T,
+): T[] => {
+  const from = items.findIndex(
+    (element) => element === mover,
+  );
+  const to = items.findIndex(
+    (element) => element === moveTo,
+  );
+
+  if ((from < 0) || (to < 0)) {
+    throw new Error("given list does not contain given mover/moveTo");
+  }
+
+  const newIndex = (index: number): number => {
+    if (index > to && index <= from) {
+      return index - 1;
+    } else if (index === to) {
+      return from;
+    } else if (index < to && index >= from) {
+      return index + 1;
+    }
+
+    return index;
+  };
+
+  const newItems = [...items];
+  items.forEach((item, index) => {
+    newItems[newIndex(index)] = item;
+  });
+
+  return newItems;
+};

src/session/timeHelpers.test.ts

@@ -1,10 +1,12 @@
 import { readableElapsedTime } from "./timeHelpers";
-import test from "node:test";
+import { describe, it } from "node:test";
 import assert from "node:assert";
 
-void test("returns readable format", () => {
-  assert.strictEqual(readableElapsedTime(42), "00:00:42");
-  assert.strictEqual(readableElapsedTime(142), "00:02:22");
-  assert.strictEqual(readableElapsedTime(1001), "00:16:41");
-  assert.strictEqual(readableElapsedTime(60000), "16:40:00");
+describe("readableElapsedTime", () => {
+  it("returns readable format", () => {
+    assert.strictEqual(readableElapsedTime(42), "00:00:42");
+    assert.strictEqual(readableElapsedTime(142), "00:02:22");
+    assert.strictEqual(readableElapsedTime(1001), "00:16:41");
+    assert.strictEqual(readableElapsedTime(60000), "16:40:00");
+  });
 });

src/userList/UserList.tsx

@@ -8,8 +8,7 @@ import buttonCss from "../common/Button.module.css";
 import UserRegister from "./UserRegister";
 import { useSetPersistedUsers, useUsers } from "../common/usersContexts";
 import Button from "../common/Button";
-import { newUsersAfterDropped } from "./UserListHelpers";
-import { shuffleArray } from "../common/listHelpers";
+import { movePosition, shuffleArray } from "../common/listHelpers";
 
 const UserList = () => {
   const users = useUsers();
@@ -57,7 +56,7 @@ const UserList = () => {
               const droppedUsername = droppedMatchedGroups?.["droppedUsername"];
               if (typeof droppedUsername === "string") {
                 setPersistedUsers(
-                  newUsersAfterDropped(users, user, droppedUsername),
+                  movePosition(users, user, droppedUsername),
                 );
               }
               return false;