From 2d6724db9ec8f25230255fee4eaa355cc132c08f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 25 Mar 2020 14:20:09 +0100
Subject: [PATCH] Re-write local cache on client reset

Also clean up some code
---
 client/cypress/integration/login-page.spec.js | 18 +++++++++
 client/src/components/HeaderBar.vue           |  2 -
 client/src/components/LogoutWidget.vue        |  2 -
 .../src/components/profile/ProfileSidebar.vue | 20 ++--------
 client/src/graphql/client.js                  | 38 +++++++++++--------
 5 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/client/cypress/integration/login-page.spec.js b/client/cypress/integration/login-page.spec.js
index 9e5a2e44..da4dbb4e 100644
--- a/client/cypress/integration/login-page.spec.js
+++ b/client/cypress/integration/login-page.spec.js
@@ -44,4 +44,22 @@ describe('The Login Page', () => {
     cy.get('body').contains('Berufliche Grundbildung');
   });
 
+  it.only('logs out then logs in again', () => {
+    cy.viewport('macbook-15');
+    cy.apolloLogin('rahel.cueni', 'test');
+    cy.visit('/me/my-class');
+    cy.get('[data-cy=header-user-widget]').should('exist').within(() => {
+      cy.get('[data-cy=user-widget-avatar]').should('exist').click();
+    });
+
+    cy.get('[data-cy=logout]').click();
+
+    cy.login('rahel.cueni', 'test');
+
+    cy.get('[data-cy=header-user-widget]').should('exist').within(() => {
+      cy.get('[data-cy=user-widget-avatar]').should('exist').click();
+    });
+
+    cy.get('.profile-sidebar').should('be.visible');
+  });
 })
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 42e660a2..a44ff9d2 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -18,7 +18,6 @@
   import ContentNavigation from '@/components/ContentNavigation.vue';
   import BookNavigation from '@/components/book-navigation/BookNavigation';
   import UserWidget from '@/components/UserWidget.vue';
-  import LogoutWidget from '@/components/LogoutWidget.vue';
   import Logo from '@/components/icons/Logo';
   import CurrentClass from '@/components/school-class/CurrentClass';
 
@@ -31,7 +30,6 @@
     components: {
       ContentNavigation,
       UserWidget,
-      LogoutWidget,
       BookNavigation,
       Logo,
       CurrentClass
diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue
index 7ffea46f..8c3271f7 100644
--- a/client/src/components/LogoutWidget.vue
+++ b/client/src/components/LogoutWidget.vue
@@ -8,7 +8,6 @@
   import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
 
   export default {
-
     methods: {
       logout() {
         this.$apollo.mutate({
@@ -32,7 +31,6 @@
     &__logout {
       font-family: $sans-serif-font-family;
       line-height: 16px;
-      margin: 0 15px 0 $large-spacing;
       background: none;
       color: inherit;
       border: none;
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 1ed94a3d..70b7e266 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -19,8 +19,8 @@
         eingeben
       </router-link>
     </div>
-    <div class="profile-sidebar__item" @click="logout">
-      <a class="profile-sidebar__link">Logout</a>
+    <div class="profile-sidebar__item">
+      <logout-widget></logout-widget>
     </div>
   </div>
 </template>
@@ -29,32 +29,20 @@
   import ProfileWidget from '@/components/profile/ProfileWidget';
   import Cross from '@/components/icons/Cross';
 
-  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
-
   import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
   import sidebarMixin from '@/mixins/sidebar';
+  import LogoutWidget from '@/components/LogoutWidget';
 
   export default {
     components: {
+      LogoutWidget,
       ClassSelectionWidget,
       ProfileWidget,
       Cross
     },
 
     mixins: [sidebarMixin],
-
-    methods: {
-      logout() {
-        this.$apollo.mutate({
-          mutation: LOGOUT_MUTATION,
-        }).then(({data}) => {
-          if (data.logout.success) {
-            location.replace('/logout')
-          }
-        });
-      }
-    },
   }
 </script>
 
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index 36667b23..255d1d09 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -7,6 +7,22 @@ import fetch from 'unfetch'
 import {typeDefs} from '@/graphql/typedefs';
 import {resolvers} from '@/graphql/resolvers';
 
+const writeLocalCache = cache => {
+  // we use the cache as our local state
+  cache.writeData({
+    data: {
+      scrollPosition: {
+        __typename: 'ScrollPosition',
+        scrollTo: ''
+      },
+      sidebar: {
+        __typename: 'Sidebar',
+        open: false
+      }
+    }
+  });
+};
+
 export default function (uri) {
   const httpLink = createHttpLink({
     // uri: process.env.NODE_ENV !== 'production' ? 'http://localhost:8000/api/graphql/' : '/api/graphql/',
@@ -96,27 +112,19 @@ export default function (uri) {
     }
   };
 
-  // we use the cache as our local state
-  cache.writeData({
-    data: {
-      scrollPosition: {
-        __typename: 'ScrollPosition',
-        scrollTo: ''
-      },
-      sidebar: {
-        __typename: 'Sidebar',
-        open: false
-      }
-    }
-  });
+  writeLocalCache(cache);
 
   // Create the apollo client
-  return new ApolloClient({
+  const client = new ApolloClient({
     link: composedLink,
     // link: httpLink,
     cache,
     connectToDevTools: true,
     typeDefs,
     resolvers
-  })
+  });
+  client.onResetStore(() => {
+    writeLocalCache(cache);
+  });
+  return client;
 }