Re-write local cache on client reset

Also clean up some code

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');
+  });
 })

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

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;

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>
 

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;
 }