From 7aa4d49a972dbd6923e10bc889a8c821ea466bc0 Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Wed, 17 Aug 2022 21:40:10 +0200
Subject: [PATCH] fix(dashboard): swap svelte-autosize for
 svelte-textarea-autoresize

---
 dashboard/package.json                    |  2 +-
 dashboard/src/lib/group/Edit.svelte       |  6 ++----
 dashboard/src/lib/group/NewGroup.svelte   |  4 ++--
 dashboard/src/lib/member/Edit.svelte      |  4 ++--
 dashboard/src/lib/member/NewMember.svelte |  4 ++--
 dashboard/src/lib/system/Edit.svelte      |  4 ++--
 dashboard/src/pages/Settings.svelte       |  8 ++++----
 dashboard/yarn.lock                       | 17 +++++------------
 8 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index 22beaa00..a86d1c57 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -32,10 +32,10 @@
     "moment": "^2.29.1",
     "sass": "^1.52.2",
     "svelecte": "^3.4.5",
-    "svelte-autosize": "^1.0.1",
     "svelte-icons": "^2.1.0",
     "svelte-navigator": "^3.1.5",
     "svelte-preprocess": "^4.10.6",
+    "svelte-textarea-autoresize": "^1.0.0",
     "sveltestrap": "^5.6.3",
     "twemoji": "^13.1.0"
   }
diff --git a/dashboard/src/lib/group/Edit.svelte b/dashboard/src/lib/group/Edit.svelte
index b90670fd..8aebf004 100644
--- a/dashboard/src/lib/group/Edit.svelte
+++ b/dashboard/src/lib/group/Edit.svelte
@@ -3,7 +3,7 @@
     import { createEventDispatcher, tick } from 'svelte';
     import { Group } from '../../api/types';
     import api from '../../api';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
 
     const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
 
@@ -80,8 +80,6 @@
             loading = false;
             deletion();
         } catch (error) {
-            console.log(error);
-            deleteErr = error.message;
             loading = false;
         }
     }
@@ -132,7 +130,7 @@
     <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description} aria-label="group description"/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
 </div>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button>
 {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if}
diff --git a/dashboard/src/lib/group/NewGroup.svelte b/dashboard/src/lib/group/NewGroup.svelte
index 4282f53d..f9fef97a 100644
--- a/dashboard/src/lib/group/NewGroup.svelte
+++ b/dashboard/src/lib/group/NewGroup.svelte
@@ -2,7 +2,7 @@
     import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
     import { Group } from '../../api/types';
     import api from '../../api';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
     import { createEventDispatcher } from 'svelte';
     import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
 
@@ -167,7 +167,7 @@
             <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
             {/if}
             <br>
-            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
+            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize />
         </div>
         {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
         {:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
diff --git a/dashboard/src/lib/member/Edit.svelte b/dashboard/src/lib/member/Edit.svelte
index e6dca1ea..43441eba 100644
--- a/dashboard/src/lib/member/Edit.svelte
+++ b/dashboard/src/lib/member/Edit.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
     import { createEventDispatcher, tick } from 'svelte';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
     import moment from 'moment';
 
     import { Member } from '../../api/types'
@@ -162,7 +162,7 @@
     <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description} aria-label="member description"/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
 </div>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete member">Delete</Button>
 {:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete member">Delete</Button>{/if}
diff --git a/dashboard/src/lib/member/NewMember.svelte b/dashboard/src/lib/member/NewMember.svelte
index acc77d53..4d30496f 100644
--- a/dashboard/src/lib/member/NewMember.svelte
+++ b/dashboard/src/lib/member/NewMember.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Accordion, AccordionItem, Row, Col, Input, Button, Label, Alert, Spinner, CardTitle, InputGroup } from 'sveltestrap';
     import { createEventDispatcher } from 'svelte';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
     import moment from 'moment';
     import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
     import { Member } from '../../api/types';
@@ -242,7 +242,7 @@
             <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
             {/if}
             <br>
-            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
+            <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={input.description}/>
         </div>
         {#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
         {:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
diff --git a/dashboard/src/lib/system/Edit.svelte b/dashboard/src/lib/system/Edit.svelte
index fa6dd95e..0b983549 100644
--- a/dashboard/src/lib/system/Edit.svelte
+++ b/dashboard/src/lib/system/Edit.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
     // import moment from 'moment-timezone';
     import { currentUser } from '../../stores';
 
@@ -94,7 +94,7 @@
     <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}  aria-label="system description"/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={user.description}  aria-label="system description"/>
 </div>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
 {:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}
\ No newline at end of file
diff --git a/dashboard/src/pages/Settings.svelte b/dashboard/src/pages/Settings.svelte
index 3b5176f5..6bed707b 100644
--- a/dashboard/src/pages/Settings.svelte
+++ b/dashboard/src/pages/Settings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
     import Toggle from 'svelte-toggle';
-    import autosize from 'svelte-autosize';
+    import { autoresize } from 'svelte-textarea-autoresize';
     import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
     import { Config } from '../api/types';
     import api from '../api';
@@ -109,13 +109,13 @@
                 <CardBody>
                     <p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
                     <b>Template 1</b>
-                    <textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]} aria-label="Description template 1"/>
+                    <textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autoresize placeholder={descriptions[0]} aria-label="Description template 1"/>
                     <br>
                     <b>Template 2</b>
-                    <textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]} aria-label="Description template 2"/>
+                    <textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autoresize placeholder={descriptions[1]} aria-label="Description template 2"/>
                     <br>
                     <b>Template 3</b>
-                    <textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]} aria-label="Description template 3"/>
+                    <textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autoresize placeholder={descriptions[2]} aria-label="Description template 3"/>
                     <br>
                     <Button on:click={saveDescriptionTemplates}>Save</Button>
                 </CardBody>
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index 48fbfbd6..c4c7dc1b 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -191,11 +191,6 @@ async@^2.6.1:
   dependencies:
     lodash "^4.17.14"
 
-autosize@*:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/autosize/-/autosize-5.0.1.tgz#ed269b0fa9b7eb47627048a1bb3299e99e003a0f"
-  integrity sha512-UIWUlE4TOVPNNj2jjrU39wI4hEYbneUypEqcyRmRFIx5CC2gNdg3rQr+Zh7/3h6egbBvm33TDQjNQKtj9Tk1HA==
-
 axios@^0.24.0:
   version "0.24.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
@@ -1079,13 +1074,6 @@ svelecte@^3.4.5:
   dependencies:
     svelte-tiny-virtual-list "^1.1.7"
 
-svelte-autosize@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.0.1.tgz#2121b2373ab89191a58aaa9a3aec957ca475e812"
-  integrity sha512-HBk7Xrt5bS0rpp5zSUZvuXNKc0UhAxvJGLNy1eTHMDK/KkHb0UsgWpbyn60jW3tE2ZfuXfLttnHvvb1H4zZZ0Q==
-  dependencies:
-    autosize "*"
-
 svelte-check@^2.2.7:
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.2.10.tgz#ca2e4fde2d077e703792d8301a643c36375f646c"
@@ -1142,6 +1130,11 @@ svelte-preprocess@^4.10.6:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
+svelte-textarea-autoresize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-textarea-autoresize/-/svelte-textarea-autoresize-1.0.0.tgz#31c161e9f5109fbe20bbb6c429ae11a7520bde97"
+  integrity sha512-n+t7GnkhLkKHJokrcSNlH8PiiLvu5bTgEwhpEsvVdAb4gpQ21rbyyHqvRYYa4quFv5vnQVjgxhYR6oq0yDdhdw==
+
 svelte-tiny-virtual-list@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"