From 5db13e9124451f523ce76a021934722a5c4ea95b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 Jun 2020 09:37:12 +0200
Subject: [PATCH] Refactor sidebar state to allow for multiple sidebars

---
 client/src/components/HeaderBar.vue           |  2 +-
 client/src/components/UserWidget.vue          |  2 +-
 .../book-navigation/BookTopicNavigation.vue   |  8 +++---
 ...leNavigation.vue => NavigationSidebar.vue} | 27 ++++++++++++-------
 client/src/components/profile/Avatar.vue      |  2 +-
 .../src/components/profile/ProfileSidebar.vue | 23 +++++++++++-----
 client/src/graphql/client.js                  |  4 ++-
 .../gql/local/mutations/toggleSidebar.gql     |  4 +--
 client/src/graphql/gql/local/sidebar.gql      |  2 ++
 client/src/graphql/resolvers.js               |  9 +++++--
 client/src/graphql/typedefs.js                | 11 +++++---
 client/src/mixins/open-sidebar.js             |  6 +++--
 client/src/mixins/sidebar.js                  | 11 +++++---
 13 files changed, 73 insertions(+), 38 deletions(-)
 rename client/src/components/book-navigation/{MobileNavigation.vue => NavigationSidebar.vue} (75%)

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 2075da30..fa5528b2 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -10,7 +10,7 @@
     <div class="user-header">
       <a
         class="user-header__sidebar-link"
-        @click="openSidebar()">
+        @click="openSidebar('profile')">
         <current-class class="user-header__current-class"/>
       </a>
 
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 157763ef..1fd567e8 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -5,7 +5,7 @@
     <div
       class="user-widget__avatar"
       data-cy="user-widget-avatar"
-      @click="openSidebar()">
+      @click="openSidebar('profile')">
       <avatar
         :avatar-url="avatarUrl"
         :icon-highlighted="isProfile"/>
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index 10bc5cb1..2ddb547e 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -7,7 +7,7 @@
       tag="div"
       class="book-topics__topic book-subnavigation__item"
       v-for="topic in topics"
-      @click.native="hideMobileNavigation">
+      @click.native="closeSidebar('navigation')">
       {{ topic.order }}.
       {{ topic.title }}
     </router-link>
@@ -16,6 +16,7 @@
 
 <script>
   import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
+  import sidebarMixin from '@/mixins/sidebar';
 
   export default {
     props: {
@@ -24,6 +25,8 @@
       }
     },
 
+    mixins: [sidebarMixin],
+
     data() {
       return {
         topics: []
@@ -33,9 +36,6 @@
     methods: {
       topicId(id) {
         return atob(id)
-      },
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
       }
     },
 
diff --git a/client/src/components/book-navigation/MobileNavigation.vue b/client/src/components/book-navigation/NavigationSidebar.vue
similarity index 75%
rename from client/src/components/book-navigation/MobileNavigation.vue
rename to client/src/components/book-navigation/NavigationSidebar.vue
index b5e20715..069044de 100644
--- a/client/src/components/book-navigation/MobileNavigation.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="mobile-navigation">
+  <div
+    class="navigation-sidebar"
+    v-if="sidebar.navigation">
     <content-navigation
-      :mobile="true"
-      class="mobile-navigation__main"/>
+      :is-sidebar="true"
+      class="navigation-sidebar__main"/>
     <div
-      class="mobile-navigation__close-button"
-      @click="hideMobileNavigation">
-      <cross class="mobile-navigation__close-icon"/>
+      class="navigation-sidebar__close-button"
+      @click="close">
+      <cross class="navigation-sidebar__close-icon"/>
     </div>
   </div>
 </template>
@@ -15,9 +17,13 @@
   import Cross from '@/components/icons/Cross';
   import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
+  import sidebarMixin from '@/mixins/sidebar';
+
   import {meQuery} from '@/graphql/queries';
 
   export default {
+    mixins: [sidebarMixin],
+
     components: {
       ContentNavigation,
       Cross
@@ -30,8 +36,8 @@
     },
 
     methods: {
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
+      close() {
+        this.closeSidebar('navigation');
       }
     },
 
@@ -45,7 +51,7 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  .mobile-navigation {
+  .navigation-sidebar {
     position: fixed;
     left: 0;
     right: 0;
@@ -69,7 +75,8 @@
     overflow-y: auto;
 
     @include desktop {
-      display: none;
+      //display: none;
+      width: 285px;
     }
 
     &__main {
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index b4e68998..8bfba351 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -69,7 +69,7 @@
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: false
+            profile: false
           }
         })
       }
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index a31e2095..b885ee20 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -2,32 +2,34 @@
   <div
     v-click-outside="closeSidebar"
     class="profile-sidebar"
-    v-if="sidebar.open">
+    v-if="sidebar.profile">
     <a
       class="profile-sidebar__close-link"
-      @click="closeSidebar">
+      @click="close">
       <cross class="profile-sidebar__close-icon"/>
     </a>
     <profile-widget class="profile-sidebar__item"/>
     <div
       class="profile-sidebar__item"
-      @click="closeSidebar">
+      @click="close">
       <router-link
         to="/me/activity"
-        class="profile-sidebar__link">Meine Aktivitäten</router-link>
+        class="profile-sidebar__link">Meine Aktivitäten
+      </router-link>
     </div>
     <div class="profile-sidebar__item">
       <h3 class="profile-sidebar__subtitle">Klasse</h3>
       <class-selection-widget/>
-      <div @click="closeSidebar">
+      <div @click="close">
         <router-link
           :to="{name: 'my-class'}"
-          class="profile-sidebar__link">Klassenliste anzeigen</router-link>
+          class="profile-sidebar__link">Klassenliste anzeigen
+        </router-link>
       </div>
     </div>
     <div
       class="profile-sidebar__item"
-      @click="closeSidebar">
+      @click="close">
       <router-link
         :to="{name:'join-class'}"
         data-cy="join-class-link"
@@ -57,12 +59,19 @@
   export default {
 
     mixins: [sidebarMixin],
+
     components: {
       LogoutWidget,
       ClassSelectionWidget,
       ProfileWidget,
       Cross
     },
+
+    methods: {
+      close() {
+        this.closeSidebar('profile')
+      }
+    },
   }
 </script>
 
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index 45a6838d..973cd873 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -17,7 +17,9 @@ const writeLocalCache = cache => {
       },
       sidebar: {
         __typename: 'Sidebar',
-        open: false
+        open: false,
+        profile: false,
+        navigation: false
       },
       helloEmail: {
         __typename: 'HelloEmail',
diff --git a/client/src/graphql/gql/local/mutations/toggleSidebar.gql b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
index fc32729e..c05a9221 100644
--- a/client/src/graphql/gql/local/mutations/toggleSidebar.gql
+++ b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
@@ -1,3 +1,3 @@
-mutation($open: Boolean!) {
-  toggleSidebar(open: $open) @client
+mutation($sidebar: SidebarInput!) {
+  toggleSidebar(sidebar: $sidebar) @client
 }
diff --git a/client/src/graphql/gql/local/sidebar.gql b/client/src/graphql/gql/local/sidebar.gql
index 4cdb1bc6..978bf3cf 100644
--- a/client/src/graphql/gql/local/sidebar.gql
+++ b/client/src/graphql/gql/local/sidebar.gql
@@ -1,5 +1,7 @@
 query Sidebar {
   sidebar @client {
     open
+    profile
+    navigation
   }
 }
diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js
index 11cd35eb..2dd4abeb 100644
--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -16,9 +16,14 @@ export const resolvers = {
       cache.writeQuery({query: HELLO_EMAIL, data});
       return data.helloEmail;
     },
-    toggleSidebar: (_, {open}, {cache}) => {
+    toggleSidebar: (_, {sidebar: {profile, navigation}}, {cache}) => {
       const data = cache.readQuery({query: SIDEBAR});
-      data.sidebar.open = open;
+      if (typeof profile !== 'undefined') {
+        data.sidebar.profile = profile;
+      }
+      if (typeof navigation !== 'undefined') {
+        data.sidebar.navigation = navigation;
+      }
       cache.writeQuery({query: SIDEBAR, data});
       return data.sidebar;
     }
diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js
index c17dd4a3..faf3879b 100644
--- a/client/src/graphql/typedefs.js
+++ b/client/src/graphql/typedefs.js
@@ -1,6 +1,11 @@
 import gql from 'graphql-tag';
 
 export const typeDefs = gql`
+  type SidebarInput {
+    navigation: Boolean
+    profile: Boolean
+  }
+
   type ScrollPosition {
     scrollTo: String!
   }
@@ -12,13 +17,13 @@ export const typeDefs = gql`
 
   type Sidebar {
     open: Boolean!
+    navigation: Boolean
+    profile: Boolean
   }
 
   type Mutation {
     scrollTo(scrollTo: String!): ScrollPosition
-  }
-
-  type Mutation {
     helloEmail(email: String!): HelloEmail
+    toggleSidebar(sidebar: SidebarInput!): Sidebar
   }
 `;
diff --git a/client/src/mixins/open-sidebar.js b/client/src/mixins/open-sidebar.js
index ffaba465..dbe423d0 100644
--- a/client/src/mixins/open-sidebar.js
+++ b/client/src/mixins/open-sidebar.js
@@ -2,12 +2,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
 export default {
   methods: {
-    openSidebar() {
+    openSidebar(type) {
       this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: true
+            sidebar: {
+              [type]: true
+            }
           }
         });
       });
diff --git a/client/src/mixins/sidebar.js b/client/src/mixins/sidebar.js
index 17c66a8e..796a045d 100644
--- a/client/src/mixins/sidebar.js
+++ b/client/src/mixins/sidebar.js
@@ -3,12 +3,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
 export default {
   methods: {
-    closeSidebar() {
-      if (this.sidebar.open) {
+    closeSidebar(type) {
+      if (this.sidebar[type]) {
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            open: false
+            sidebar: {
+              [type]: false
+            }
           }
         });
       }
@@ -23,7 +25,8 @@ export default {
 
   data: () => ({
     sidebar: {
-      open: false
+      profile: false,
+      navigation: false
     }
   })
 }