Move save method from modal to new page

client/src/pages/rooms/newRoomEntry.vue

@@ -2,26 +2,93 @@
   <content-block-form
     :content-block="roomEntry"
     :features="features"
+    @save="save"
+    @back="goBack"
   />
 </template>
 
 <script>
+  import Vue from 'vue';
+
+  import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
+  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
+
   import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
   import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
 
-  export default {
+  export default Vue.extend( {
-    components: {ContentBlockForm},
+    props: {
+      slug: {
+        type: String,
+        required: true
+      }
+    },
+
+    components: {
+      ContentBlockForm,
+    },
 
     data() {
       return {
         features: ROOMS_FEATURE_SET,
         roomEntry: {
           title: '',
-          contents: []
+          contents: [],
-        }
-      };
         },
       };
+    },
+
+    methods: {
+      save({title, contents}) {
+        const entry = {
+          title,
+          contents,
+          room: this.slug
+        };
+        this.$apollo.mutate({
+          mutation: NEW_ROOM_ENTRY_MUTATION,
+          variables: {
+            input: {
+              roomEntry: entry
+            }
+          },
+          update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
+            try {
+              const query = ROOM_ENTRIES_QUERY;
+              const variables = {slug: this.room.slug};
+              const {room} = store.readQuery({query, variables});
+              if (room && room.roomEntries) {
+                const newEdge ={
+                  node: roomEntry,
+                  __typename: 'RoomEntryNodeEdge'
+                };
+                const edges = [
+                  newEdge,
+                  ...room.roomEntries.edges
+                ];
+                const data = {
+                  room: {
+                    ...room,
+                    roomEntries: {
+                      ...room.roomEntries,
+                      edges
+                    }
+                  }
+                };
+                store.writeQuery({query, variables, data});
+              }
+            } catch (e) {
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
+          }
+        }).then(() => {
+          this.saving = false;
+          this.hideModal();
+        });
+
+      }
+    },
+  } );
 
 </script>
 

server/rooms/inputs.py

@@ -26,7 +26,7 @@ class RoomEntryArgument(InputObjectType):
 
 
 class AddRoomEntryArgument(RoomEntryArgument):
-    room = graphene.ID(required=True)
+    slug = graphene.String(required=True)
 
 
 class UpdateRoomEntryArgument(RoomEntryArgument):