From 9cc1ab5324a2186e36ccc120a59b814436d6a093 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sat, 29 Jan 2022 20:11:31 +0100
Subject: [PATCH] Update projects in frontend to use slugs instead of ids

---
 .../components/portfolio/ProjectActions.vue   | 18 ++++++-------
 client/src/graphql/cache.js                   | 26 ++++++++++++++-----
 client/src/graphql/client.js                  |  2 +-
 .../src/mixins/update-project-share-state.js  |  6 ++---
 client/src/pages/portfolio/project.vue        |  4 +--
 5 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 76d5431a..a4ae1f88 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -17,13 +17,13 @@
       <li class="popover-links__link">
         <a
           data-cy="delete-project"
-          @click="deleteProject(id)"
+          @click="deleteProject(slug)"
         >Projekt löschen</a>
       </li>
       <li class="popover-links__link">
         <a
           data-cy="edit-project"
-          @click="editProject(id)"
+          @click="editProject(slug)"
         >Projekt bearbeiten</a>
       </li>
       <li
@@ -32,7 +32,7 @@
       >
         <a
           data-cy="share-project"
-          @click="updateProjectShareState(id, true)"
+          @click="updateProjectShareState(slug, true)"
         >Projekt teilen</a>
       </li>
       <li
@@ -41,7 +41,7 @@
       >
         <a
           data-cy="unshare-project"
-          @click="updateProjectShareState(id, false)"
+          @click="updateProjectShareState(slug, false)"
         >Projekt nicht mehr teilen</a>
       </li>
     </widget-popover>
@@ -59,7 +59,7 @@ const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons
 
 export default {
   props: {
-    id: {
+    slug: {
       type: String,
       default: '',
     },
@@ -90,15 +90,15 @@ export default {
     toggleMenu: function () {
       this.showMenu = !this.showMenu;
     },
-    editProject(id) {
-      this.$router.push({name: 'edit-project', params: {id}});
+    editProject(slug) {
+      this.$router.push({name: 'edit-project', params: {slug}});
     },
-    deleteProject(id) {
+    deleteProject(slug) {
       this.$apollo.mutate({
         mutation: DELETE_PROJECT_MUTATION,
         variables: {
           input: {
-            id,
+            slug,
           },
         },
         update(store, {data: {deleteProject: {success}}}) {
diff --git a/client/src/graphql/cache.js b/client/src/graphql/cache.js
index 96886e98..2a358995 100644
--- a/client/src/graphql/cache.js
+++ b/client/src/graphql/cache.js
@@ -7,15 +7,27 @@ const currentFilterVar = makeVar('');
 const helloEmailVar = makeVar('');
 
 const idToRefFactory = (__typename) => (_, {args, toReference}) => {
-          // todo: can we log this via Vue.$log somehow?
-          console.log(`Trying to reference ${__typename} with id ${args.id}`);
-          return toReference({
-            __typename,
-            id: args.id
-          });
-        };
+  // todo: can we log this via Vue.$log somehow?
+  console.log(`Referencing ${__typename} with ${args.id}`);
+  return toReference({
+    __typename,
+    id: args.id
+  });
+};
 
 const typePolicies = {
+  ProjectNode: {
+    keyFields: ['slug']
+  },
+  InstrumentNode: {
+    keyFields: ['slug']
+  },
+  ModuleNode: {
+    keyFields: ['slug']
+  },
+  RoomEntryNode: {
+    keyFields: ['slug']
+  },
   // https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#example
   Query: {
     fields: {
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index 0fc0a21a..edd21b04 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -22,7 +22,7 @@ export default function (uri, networkErrorCallback) {
   });
 
   const consoleLink = new ApolloLink((operation, forward) => {
-    console.log('operation', operation);
+    console.log('operation', operation.operationName);
 
     return forward(operation).map(data => {
       console.log(`returned from server for ${operation.operationName}`, data);
diff --git a/client/src/mixins/update-project-share-state.js b/client/src/mixins/update-project-share-state.js
index a1c86d1c..da9a5960 100644
--- a/client/src/mixins/update-project-share-state.js
+++ b/client/src/mixins/update-project-share-state.js
@@ -3,9 +3,9 @@ import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
 
 export default {
   methods: {
-    updateProjectShareState(id, shared) {
+    updateProjectShareState(slug, shared) {
       const input = {
-        id: id,
+        slug,
         shared,
       };
       this.$log.debug('updateProjectShareState', input);
@@ -18,7 +18,7 @@ export default {
           if (!errors) {
             const query = PROJECT_QUERY;
             const variables = {
-              id: id,
+              slug
             };
 
             const {project} = store.readQuery({query, variables});
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index 7257f890..cf2438d4 100644
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@@ -15,14 +15,14 @@
           :final="project.final"
           data-cy="project-share-link"
           class="project__share"
-          @click.native="updateProjectShareState(project.id, !project.final)"
+          @click.native="updateProjectShareState(project.slug, !project.final)"
         />
 
         <project-actions
           :share-buttons="false"
           class="project__more"
+          :slug="project.slug"
           v-if="canEdit"
-          :id="project.id"
         />
       </div>