From d87b16014f075f2051bf515f115ee18abf86e897 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sun, 19 Dec 2021 12:01:55 +0100
Subject: [PATCH] fix: fix group list not updating when group gets edited

---
 src/lib/group/Body.svelte | 5 ++---
 src/lib/group/Edit.svelte | 8 ++++++++
 src/lib/group/List.svelte | 7 ++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/src/lib/group/Body.svelte b/src/lib/group/Body.svelte
index 8da89b42..d0208c92 100644
--- a/src/lib/group/Body.svelte
+++ b/src/lib/group/Body.svelte
@@ -6,8 +6,7 @@
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
    
-    export let item: Group;
-    let group = item; 
+    export let group: Group;
     let editMode: boolean;
     export let isPublic: boolean;
     export let loading: boolean = false;
@@ -87,6 +86,6 @@
 <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
 {/if}
 {:else}
-<Edit bind:loading bind:group bind:editMode />
+<Edit on:update bind:loading bind:group bind:editMode />
 {/if}
 </CardBody>
\ No newline at end of file
diff --git a/src/lib/group/Edit.svelte b/src/lib/group/Edit.svelte
index 5e158aa8..38d03173 100644
--- a/src/lib/group/Edit.svelte
+++ b/src/lib/group/Edit.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
     import Group from '../../api/group';
     import PKAPI from '../../api';
     import autosize from 'svelte-autosize';
@@ -12,6 +13,12 @@
 
     let input = new Group(group);
 
+    const dispatch = createEventDispatcher();
+
+    function update() {
+        dispatch('update', group);
+    }
+
     async function submit() {
         let data = input;
         err = [];
@@ -33,6 +40,7 @@
             let res = await api.patchGroup({token: localStorage.getItem("pk-token"), id: group.id, data: data});
             group = res;
             err = [];
+            update();
             editMode = false;
             loading = false;
         } catch (error) {
diff --git a/src/lib/group/List.svelte b/src/lib/group/List.svelte
index bcf33037..3d398e92 100644
--- a/src/lib/group/List.svelte
+++ b/src/lib/group/List.svelte
@@ -135,6 +135,7 @@
     $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
     $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
 
+    let slicedList = [];
     $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
 
     function memberListRenderer(item: any) {
@@ -147,6 +148,10 @@
 
   let itemLoading: boolean[] = [];
   $: itemLoading.length = slicedList.length;
+
+  function updateList(event: any) {
+      list = list.map(group => group.id !== event.detail.id ? group : event.detail)
+  }
 </script>
 
 <Card class="mb-3">
@@ -254,7 +259,7 @@
             <CardsHeader bind:item={group} bind:loading={itemLoading[index]} slot="header">
                 <FaUserCircle slot="icon"/>
             </CardsHeader>
-            <Body bind:item={group} bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
+            <Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
         </AccordionItem>
     {/each}
 </Accordion>
