From 7ee5bba14c5ce42ce151ae4e6711f4064fef1500 Mon Sep 17 00:00:00 2001
From: Jake/Rads <jake.fulminated@gmail.com>
Date: Mon, 27 Jun 2022 14:45:04 +0200
Subject: [PATCH] fix(dashboard): dont use same indexes per page

changing the accordion to individual collapses meant we could implement keyboard navigation between the cards

however, I only handled card collapsing state per-page, which caused an issue where opening one card on one page would open the card with the same index on every page

this fixes that by indexing the cards based on its position in the whole list rather than per-page
---
 dashboard/src/lib/list/CardsList.svelte | 32 ++++++++++++++-----------
 dashboard/src/lib/list/List.svelte      |  2 +-
 dashboard/src/pages/Group.svelte        |  2 +-
 dashboard/src/pages/Member.svelte       |  2 +-
 dashboard/src/pages/Random.svelte       |  7 +++---
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/dashboard/src/lib/list/CardsList.svelte b/dashboard/src/lib/list/CardsList.svelte
index 7bbf14af..73c90684 100644
--- a/dashboard/src/lib/list/CardsList.svelte
+++ b/dashboard/src/lib/list/CardsList.svelte
@@ -20,8 +20,12 @@
     export let isPublic: boolean;
     export let itemType: string;
     export let isMainDash: boolean;
+    export let itemsPerPage: number;
+    export let currentPage: number;
 
     export let openByDefault = false;
+
+    $: indexStart = itemsPerPage * (currentPage - 1);
     
     let cardIndexArray = [];
 
@@ -43,13 +47,13 @@
         let el;
 
         if (event.key === "ArrowDown") {
-            if (cardIndexArray[index + 1]) el = cardIndexArray[index + 1];
-            else el = cardIndexArray[0];
+            if (index + 1 < indexStart + itemsPerPage) el = cardIndexArray[index + 1];
+            else el = cardIndexArray[indexStart];
         }
 
         if (event.key === "ArrowUp") {
-            if (cardIndexArray[index - 1]) el = cardIndexArray[index - 1];
-            else el = cardIndexArray[cardIndexArray.length - 1];
+            if (index - 1 >= indexStart) el = cardIndexArray[index - 1];
+            else el = cardIndexArray[indexStart + itemsPerPage - 1];
         }
 
         if (el) {
@@ -106,9 +110,9 @@
     {#each list as item, index (item.id + index)}
         <Card>
             <h2 class="accordion-header">
-                <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
+                <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[indexStart + index]} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
                     <CardsHeader {item}>
-                        <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
+                        <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                             {#if isPublic || item.privacy.visibility === "public"}
                             {#if itemType === "member"}
                             <FaUserCircle />
@@ -120,10 +124,10 @@
                             {/if}
                         </div>
                     </CardsHeader>
-                    <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
+                    <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
                 </button>
             </h2>
-            <Collapse isOpen={isOpenArray[index]}>
+            <Collapse isOpen={isOpenArray[indexStart + index]}>
                 <CardBody>
                     {#if itemType === "member"}
                     <MemberBody on:deletion bind:isPublic bind:groups bind:member={item} />
@@ -138,10 +142,10 @@
 {:else if openByDefault || settings.accessibility.expandedcards}
     {#each list as item, index (item.id + index)}
     <Card class="mb-3">
-        <div class="accordion-button collapsed p-0" bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
+        <div class="accordion-button collapsed p-0" bind:this={cardIndexArray[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
             <CardHeader class="w-100">
                 <CardsHeader {item}>
-                    <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
+                    <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                         {#if isPublic || item.privacy.visibility === "public"}
                         {#if itemType === "member"}
                         <FaUserCircle />
@@ -153,7 +157,7 @@
                         {/if}
                     </div>
                 </CardsHeader>
-                <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
+                <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
             </CardHeader>
         </div>
         <CardBody>
@@ -169,9 +173,9 @@
     <div class="my-3">
     {#each list as item, index (item.id + index)}
     <Card>
-        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
+        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link >
             <CardsHeader {item}>
-                <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(index, item.id, e)} tabindex={0} >
+                <div slot="icon" style="cursor: pointer;" id={`copy-${item.id}-${index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
                     {#if isPublic || item.privacy.visibility === "public"}
                     {#if itemType === "member"}
                     <FaUserCircle />
@@ -183,7 +187,7 @@
                     {/if}
                 </div>
             </CardsHeader>
-            <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[index] ? "Copied!" : "Copy public link"}</Tooltip>
+            <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
         </a>
     </Card>
     {/each}
diff --git a/dashboard/src/lib/list/List.svelte b/dashboard/src/lib/list/List.svelte
index 0692cf2d..d6f61902 100644
--- a/dashboard/src/lib/list/List.svelte
+++ b/dashboard/src/lib/list/List.svelte
@@ -132,6 +132,6 @@
     <NewGroup on:create={addItemToList} />
     {/if}
 {/if}
-<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} />
+<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} />
 <ListPagination bind:currentPage {pageAmount} />
 {/if}
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
index 73119ae8..190710b0 100644
--- a/dashboard/src/pages/Group.svelte
+++ b/dashboard/src/pages/Group.svelte
@@ -156,7 +156,7 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            <CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={members} isPublic={isPublic} isMainDash={false} itemType="member" />
+            <CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={members} isPublic={isPublic} isMainDash={false} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} />
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
index 01c1a440..9aa9d7c4 100644
--- a/dashboard/src/pages/Member.svelte
+++ b/dashboard/src/pages/Member.svelte
@@ -158,7 +158,7 @@
                 </CardHeader>
             </Card>
             <ListPagination bind:currentPage bind:pageAmount />
-            <CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={groups} isPublic={isPublic} isMainDash={false} itemType="group" />
+            <CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={groups} isPublic={isPublic} isMainDash={false} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} />
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}
diff --git a/dashboard/src/pages/Random.svelte b/dashboard/src/pages/Random.svelte
index 5ed532eb..e162872c 100644
--- a/dashboard/src/pages/Random.svelte
+++ b/dashboard/src/pages/Random.svelte
@@ -45,9 +45,9 @@
     // just a hidden option to expand the cards by default regardless of your global settings
     let openByDefault = false;
     if (searchParams && searchParams.get("open") === "true") openByDefault = true;
-
-    let settings = JSON.parse(localStorage.getItem("pk-settings"));
     
+    let rollCounter = 1;
+
     onMount(async () => {
         await fetchList(amount, usePrivateMembers);
     });
@@ -110,6 +110,7 @@
         
         randomList = randomizeList(parseInt(optionAmount), optionUsePrivateMembers, optionAllowDoubles);
         navigate(`${path}${paramArray.length > 0 ? `?${paramArray.join('&')}` : ""}`);
+        rollCounter ++;
     }
 
     function capitalizeFirstLetter(string: string) {
@@ -205,7 +206,7 @@
             {:else if err}
                 <Alert color="danger">{err}</Alert>
             {:else}
-                <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} />
+                <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} itemsPerPage={5} currentPage={rollCounter} />
             {/if}
         </Col>
     </Row>