From fdef2fe3f6f277bdc7b20b4b606f4cbf95ebdcc0 Mon Sep 17 00:00:00 2001
From: Dominik Korsa <dominik.korsa@gmail.com>
Date: Mon, 5 Oct 2020 21:44:06 +0200
Subject: [PATCH] Improve download version switcher

---
 src/components/HomeDownloadSection.vue        | 22 ++++---------------
 .../HomeDownloadVersionSwitcher.vue           | 13 +++++------
 src/components/HomeMainHeader.vue             |  1 -
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/src/components/HomeDownloadSection.vue b/src/components/HomeDownloadSection.vue
index 89b5cc7..ea96126 100644
--- a/src/components/HomeDownloadSection.vue
+++ b/src/components/HomeDownloadSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="download" class="download home-section">
     <h2 class="title">Pobieranie</h2>
-    <home-download-version-switcher v-if="$mq === 'md'" :activeSection="activeSection" />
+    <home-download-version-switcher v-if="$mq === 'md'" v-model="active" />
     <h3 class="section-name section-name-beta" v-if="$mq === 'lg'">BETA</h3>
     <h3 class="section-name section-name-dev" v-if="$mq === 'lg'">DEV</h3>
     <home-download-beta v-if="$mq === 'lg' || active === 'beta'" />
@@ -21,23 +21,9 @@
       HomeDownloadDev,
       HomeDownloadVersionSwitcher,
     },
-    data() {
-      return {
-        activeSection: {
-          data: 'beta',
-        },
-      };
-    },
-    computed: {
-      active: {
-        get() {
-          return this.activeSection.data;
-        },
-        set(value) {
-          this.activeSection.data = value;
-        },
-      },
-    },
+    data: () => ({
+      active: 'beta',
+    }),
   };
 </script>
 
diff --git a/src/components/HomeDownloadVersionSwitcher.vue b/src/components/HomeDownloadVersionSwitcher.vue
index ff760d2..52f0bbd 100644
--- a/src/components/HomeDownloadVersionSwitcher.vue
+++ b/src/components/HomeDownloadVersionSwitcher.vue
@@ -4,7 +4,7 @@
       class="section-name section-name-beta"
       :class="{ active: active === 'beta' }"
       @click="active = 'beta'">BETA</span>
-    <div class="devider"></div>
+    <div class="divider" />
     <span
       class="section-name section-name-dev"
       :class="{ active: active === 'dev' }"
@@ -17,13 +17,12 @@
     name: 'home-download-version-switcher',
     components: {},
     props: {
-      activeSection: Object,
-      default: {},
+      value: String,
     },
     computed: {
       active: {
         get() {
-          return this.activeSection.data;
+          return this.value;
         },
         set(value) {
           this.$ga.event({
@@ -32,7 +31,7 @@
             eventLabel: value,
             eventValue: value === 'beta' ? 0 : 1,
           });
-          this.activeSection.data = value;
+          this.$emit('input', value);
         },
       },
     },
@@ -43,7 +42,7 @@
   .download-version-switcher {
     height: 32px;
     display: flex;
-    direction: row;
+    flex-direction: row;
     margin-bottom: 16px;
     margin-left: auto;
     margin-right: auto;
@@ -74,7 +73,7 @@
     text-align: left;
   }
 
-  .devider {
+  .divider {
     width: 0;
     border: 1px solid #0006;
     height: 100%;
diff --git a/src/components/HomeMainHeader.vue b/src/components/HomeMainHeader.vue
index 1159c08..129b535 100644
--- a/src/components/HomeMainHeader.vue
+++ b/src/components/HomeMainHeader.vue
@@ -95,7 +95,6 @@
   };
 </script>
 
-
 <style lang="scss" scoped>
   .home-main-header {
     padding-bottom: 48px;