From 9910e2e201222a7475cb1df77dbad49aebb7840f Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 17 Feb 2023 12:04:57 +0100
Subject: [PATCH] improve code, fix button highlight

---
 .../Template/ContentHeader/NavCommunity.vue   | 21 +++----------------
 frontend/src/pages/Community.vue              | 16 ++++++--------
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index fc64f6b1c..ca96ce914 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -2,19 +2,19 @@
   <div class="nav-community container">
     <b-row class="nav-row">
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" @click="handleClick(0)">
+        <b-btn to="contribute" active-class="btn-active" block variant="link">
           <b-icon icon="pencil" class="mr-2" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" @click="handleClick(1)">
+        <b-btn to="contributions" active-class="btn-active" block variant="link">
           <b-icon icon="person" class="mr-2" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" @click="handleClick(2)">
+        <b-btn to="community" active-class="btn-active" block variant="link">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
@@ -23,23 +23,8 @@
   </div>
 </template>
 <script>
-export const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
-
 export default {
   name: 'NavCommunity',
-  methods: {
-    handleClick(tab) {
-      if (this.$route.params.tab !== COMMUNITY_TABS[tab]) {
-        this.$router.push({ params: { tab: COMMUNITY_TABS[tab] } })
-      }
-    },
-  },
-  /*
-   watch: {
-     '$route.params.tab'() {
-     },
-   },
-   */
 }
 </script>
 <style scoped>
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index b368dc96d..cadf49ffe 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -63,7 +63,8 @@ import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
-import { COMMUNITY_TABS } from '@/components/Template/ContentHeader/NavCommunity'
+
+const COMMUNITY_TABS = ['contribute', 'contributions', 'community']
 
 export default {
   name: 'Community',
@@ -148,7 +149,9 @@ export default {
         this.contributionCount = listContributions.contributionCount
         this.items = listContributions.contributionList
         if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
-          this.$router.push({ params: { tab: 'contributions' } })
+          this.tabIndex = 1
+          if (this.$route.params.tab !== 'contributions')
+            this.$router.push({ params: { tab: 'contributions' } })
           this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
         }
       },
@@ -193,11 +196,7 @@ export default {
   methods: {
     updateTabIndex() {
       const index = COMMUNITY_TABS.indexOf(this.$route.params.tab)
-      if (index > -1) {
-        this.tabIndex = index
-      } else {
-        this.tabIndex = 0
-      }
+      this.tabIndex = index > -1 ? index : 0
       this.closeAllOpenCollapse()
     },
     closeAllOpenCollapse() {
@@ -292,9 +291,6 @@ export default {
       this.items.find((item) => item.id === id).state = 'PENDING'
     },
   },
-  created() {
-    this.updateTransactions(0)
-  },
 }
 </script>
 <style scoped>