From 6ce2f297d7a35c9a6eb9382cba97b314815aeb62 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 28 Jun 2022 12:30:25 +0200
Subject: [PATCH] Make cache update immutable

---
 client/src/components/rooms/RoomEntry.vue      |  5 ++++-
 .../src/components/rooms/RoomEntryActions.vue  | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 7aed49bc..c8de834b 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="room-entry">
+  <div
+    class="room-entry"
+    data-cy="room-entry"
+  >
     <router-link
       :to="{name: 'article', params: { slug: slug }}"
       class="room-entry__router-link"
diff --git a/client/src/components/rooms/RoomEntryActions.vue b/client/src/components/rooms/RoomEntryActions.vue
index 0c4364f7..30059c04 100644
--- a/client/src/components/rooms/RoomEntryActions.vue
+++ b/client/src/components/rooms/RoomEntryActions.vue
@@ -3,6 +3,7 @@
     <popover-link
       icon="trash-icon"
       text="Eintrag löschen"
+      data-cy="delete-room-entry"
       @link-action="deleteRoomEntry(slug)"
     />
     <popover-link
@@ -20,6 +21,7 @@
   import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry';
   import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery';
   import {UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
+  import {removeAtIndex} from '@/graphql/immutable-operations';
 
   export default {
     props: {
@@ -53,10 +55,18 @@
             if (success) {
               const query = ROOM_ENTRIES_QUERY;
               const variables = {slug: roomSlug};
-              const data = store.readQuery({query, variables});
-              if (data) {
-                // todo: make immutable
-                data.room.roomEntries.edges.splice(data.room.roomEntries.edges.findIndex(edge => edge.node.slug === slug), 1);
+              const {room} = store.readQuery({query, variables});
+              if (room) {
+                const index = room.roomEntries.edges.findIndex(edge => edge.node.slug === slug);
+                const edges = removeAtIndex(room.roomEntries.edges, index);
+                const data = {
+                  room: {
+                    ...room,
+                    roomEntries: {
+                      edges
+                    }
+                  }
+                };
                 store.writeQuery({query, data, variables});
               }
             }