From e868b2c5d3898e2cd7fe8b6e5c76aed352674fc4 Mon Sep 17 00:00:00 2001
From: Jake/Rads <jake.fulminated@gmail.com>
Date: Mon, 27 Jun 2022 16:53:52 +0200
Subject: [PATCH] fix(dashboard): card navigation randomly breaking

because svelte randomly sets bind:this in an array to null for an entire page, for reasons I do not know, im just doing it directly with ids
---
 dashboard/src/lib/list/CardsList.svelte | 30 ++++++++++++-------------
 dashboard/src/lib/list/List.svelte      |  2 +-
 dashboard/src/pages/Group.svelte        |  2 +-
 dashboard/src/pages/Member.svelte       |  2 +-
 dashboard/src/pages/Random.svelte       |  2 +-
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/dashboard/src/lib/list/CardsList.svelte b/dashboard/src/lib/list/CardsList.svelte
index 54903359..5e13eaa2 100644
--- a/dashboard/src/lib/list/CardsList.svelte
+++ b/dashboard/src/lib/list/CardsList.svelte
@@ -22,12 +22,11 @@
     export let isMainDash: boolean;
     export let itemsPerPage: number;
     export let currentPage: number;
+    export let fullLength: number;
 
     export let openByDefault = false;
 
     $: indexStart = itemsPerPage * (currentPage - 1);
-    
-    let cardIndexArray = [];
 
     function getItemLink(item: Member | Group): string {
         let url: string;
@@ -47,13 +46,14 @@
         let el;
 
         if (event.key === "ArrowDown") {
-            if (index + 1 < indexStart + itemsPerPage) el = cardIndexArray[index + 1];
-            else el = cardIndexArray[indexStart];
+            if (index + 1 < indexStart + itemsPerPage && index + 1 < fullLength) el = document.getElementById(`${itemType}-card-${index + 1}`);
+            else el = document.getElementById(`${itemType}-card-${indexStart}`);
         }
 
         if (event.key === "ArrowUp") {
-            if (index - 1 >= indexStart) el = cardIndexArray[index - 1];
-            else el = cardIndexArray[indexStart + itemsPerPage - 1];
+            if (index - 1 >= indexStart) el = document.getElementById(`${itemType}-card-${index - 1}`);
+            else if (fullLength <= indexStart + itemsPerPage) el = document.getElementById(`${itemType}-card-${fullLength - 1}`);
+            else el = document.getElementById(`${itemType}-card-${indexStart + itemsPerPage - 1}`);
         }
 
         if (el) {
@@ -110,9 +110,9 @@
     {#each list as item, index (item.id + index)}
         <Card>
             <h2 class="accordion-header">
-                <button class="w-100 accordion-button collapsed card-header" bind:this={cardIndexArray[indexStart + index]} on:click={() => toggleCard(indexStart + index)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
+                <button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${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(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                        <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + 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 />
@@ -124,7 +124,7 @@
                             {/if}
                         </div>
                     </CardsHeader>
-                    <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+                    <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
                 </button>
             </h2>
             <Collapse isOpen={isOpenArray[indexStart + index]}>
@@ -142,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[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} tabindex={0}>
+        <div class="accordion-button collapsed p-0" id={`${itemType}-card-${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(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                    <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + 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 />
@@ -157,7 +157,7 @@
                         {/if}
                     </div>
                 </CardsHeader>
-                <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+                <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
             </CardHeader>
         </div>
         <CardBody>
@@ -173,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[indexStart + index]} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link >
+        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} id={`${itemType}-card-${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(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
+                <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + 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 />
@@ -187,7 +187,7 @@
                     {/if}
                 </div>
             </CardsHeader>
-            <Tooltip placement="top" target={`copy-${item.id}-${index}`}>{copiedArray[indexStart + index] ? "Copied!" : "Copy public link"}</Tooltip>
+            <Tooltip placement="top" target={`${itemType}-copy-${item.id}-${indexStart + 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 d6f61902..6044f98c 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} itemsPerPage={itemsPerPage} currentPage={currentPage} />
+<CardsList on:deletion bind:list={slicedList} bind:groups bind:members isMainDash={isMainDash} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} />
 <ListPagination bind:currentPage {pageAmount} />
 {/if}
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
index bdb92f69..0a40546e 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={slicedMembers} isPublic={isPublic} isMainDash={false} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} />
+            <CardsList on:deletion={(e) => deleteMemberFromList(e)} bind:list={slicedMembers} isPublic={isPublic} isMainDash={false} itemType="member" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={members.length} />
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
index 3b9ff508..cc279372 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={slicedGroups} isPublic={isPublic} isMainDash={false} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} />
+            <CardsList on:deletion={(e) => deleteGroupFromList(e)} bind:list={slicedGroups} isPublic={isPublic} isMainDash={false} itemType="group" itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={groups.length} />
             <ListPagination bind:currentPage bind:pageAmount />
             {/if}
             {/if}
diff --git a/dashboard/src/pages/Random.svelte b/dashboard/src/pages/Random.svelte
index e162872c..fc29a5c7 100644
--- a/dashboard/src/pages/Random.svelte
+++ b/dashboard/src/pages/Random.svelte
@@ -206,7 +206,7 @@
             {:else if err}
                 <Alert color="danger">{err}</Alert>
             {:else}
-                <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} itemsPerPage={5} currentPage={rollCounter} />
+                <CardsList openByDefault={openByDefault} bind:list={randomList} isPublic={true} isMainDash={false} itemType={type} itemsPerPage={5} currentPage={rollCounter} fullLength={randomList.length} />
             {/if}
         </Col>
     </Row>