From 26abce01b5a070579fdec1e0c4fadcac60a1a81a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 15 Apr 2022 19:46:49 +0200
Subject: [PATCH] composition: navfooter

---
 src/components/ftbot/Performance.vue | 53 +++++++++++++++-------------
 src/components/layout/NavFooter.vue  | 23 +++++++-----
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/components/ftbot/Performance.vue b/src/components/ftbot/Performance.vue
index d2c07f20..9099160e 100644
--- a/src/components/ftbot/Performance.vue
+++ b/src/components/ftbot/Performance.vue
@@ -8,33 +8,36 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
-import { BotState, PerformanceEntry } from '@/types';
 import { formatPrice } from '@/shared/formatters';
 import { BotStoreGetters } from '@/store/modules/ftbot';
+import { defineComponent, computed } from '@vue/composition-api';
+import { useNamespacedGetters } from 'vuex-composition-helpers';
 import StoreModules from '@/store/storeSubModules';
 
-const ftbot = namespace(StoreModules.ftbot);
-
-@Component({})
-export default class Performance extends Vue {
-  // TODO: Verify type of PerformanceStats!
-  @ftbot.Getter [BotStoreGetters.performanceStats]!: PerformanceEntry[];
-
-  @ftbot.Getter [BotStoreGetters.botState]?: BotState;
-
-  get tableFields() {
-    return [
-      { key: 'pair', label: 'Pair' },
-      { key: 'profit', label: 'Profit %' },
-      {
-        key: 'profit_abs',
-        label: `Profit ${this.botState?.stake_currency}`,
-        formatter: (v: number) => formatPrice(v, 5),
-      },
-      { key: 'count', label: 'Count' },
-    ];
-  }
-}
+export default defineComponent({
+  name: 'Performance',
+  setup() {
+    const { performanceStats, botState } = useNamespacedGetters(StoreModules.ftbot, [
+      BotStoreGetters.performanceStats,
+      BotStoreGetters.botState,
+    ]);
+    const tableFields = computed(() => {
+      return [
+        { key: 'pair', label: 'Pair' },
+        { key: 'profit', label: 'Profit %' },
+        {
+          key: 'profit_abs',
+          label: `Profit ${botState.value?.stake_currency}`,
+          formatter: (v: number) => formatPrice(v, 5),
+        },
+        { key: 'count', label: 'Count' },
+      ];
+    });
+    return {
+      performanceStats,
+      botState,
+      tableFields,
+    };
+  },
+});
 </script>
diff --git a/src/components/layout/NavFooter.vue b/src/components/layout/NavFooter.vue
index 71a9a4e4..96ae000e 100644
--- a/src/components/layout/NavFooter.vue
+++ b/src/components/layout/NavFooter.vue
@@ -28,23 +28,28 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import OpenTradesIcon from 'vue-material-design-icons/FolderOpen.vue';
 import ClosedTradesIcon from 'vue-material-design-icons/FolderLock.vue';
 import BalanceIcon from 'vue-material-design-icons/Bank.vue';
 import PairListIcon from 'vue-material-design-icons/ViewList.vue';
 import DashboardIcon from 'vue-material-design-icons/ViewDashboardOutline.vue';
+import { defineComponent } from '@vue/composition-api';
+import { useNamespacedGetters } from 'vuex-composition-helpers';
+import StoreModules from '@/store/storeSubModules';
 
-const ftbot = namespace('ftbot');
-
-@Component({
+export default defineComponent({
+  name: 'NavFooter',
   components: { OpenTradesIcon, ClosedTradesIcon, BalanceIcon, PairListIcon, DashboardIcon },
-})
-export default class NavFooter extends Vue {
-  @ftbot.Getter [BotStoreGetters.canRunBacktest]!: boolean;
-}
+  setup() {
+    const { canRunBacktest } = useNamespacedGetters(StoreModules.ftbot, [
+      BotStoreGetters.canRunBacktest,
+    ]);
+    return {
+      canRunBacktest,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>