From 77ad7d20a24adfbe58888c0be7bbfb31b9e951ab Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 13 Apr 2022 21:28:04 +0200
Subject: [PATCH] Update components to use pinia store

---
 src/App.vue                                   | 27 +++++++++----------
 .../charts/CandleChartContainer.vue           | 13 ++++++---
 src/components/layout/NavBar.vue              | 10 +++++--
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bd2f9241..a83568e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,27 +7,24 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
 import NavBar from '@/components/layout/NavBar.vue';
 import NavFooter from '@/components/layout/NavFooter.vue';
 import Body from '@/components/layout/Body.vue';
-import { namespace } from 'vuex-class';
-import { SettingsGetters } from './store/modules/settings';
 import { setTimezone } from './shared/formatters';
-import StoreModules from './store/storeSubModules';
+import { defineComponent, onMounted } from '@vue/composition-api';
+import { useSettingsStore } from './stores/settings';
 
-const uiSettingsNs = namespace(StoreModules.uiSettings);
-
-@Component({
+export default defineComponent({
+  name: 'App',
   components: { NavBar, Body, NavFooter },
-})
-export default class App extends Vue {
-  @uiSettingsNs.Getter [SettingsGetters.timezone]: string;
-
-  mounted() {
-    setTimezone(this.timezone);
-  }
-}
+  setup() {
+    const settingsStore = useSettingsStore();
+    onMounted(() => {
+      setTimezone(settingsStore.timezone);
+    });
+    return {};
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue
index 39863570..298bb9d6 100644
--- a/src/components/charts/CandleChartContainer.vue
+++ b/src/components/charts/CandleChartContainer.vue
@@ -104,12 +104,11 @@ import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
 import { BotStoreGetters } from '@/store/modules/ftbot';
-import { SettingsGetters } from '@/store/modules/settings';
 import vSelect from 'vue-select';
 import StoreModules from '@/store/storeSubModules';
+import { useSettingsStore } from '@/stores/settings';
 
 const ftbot = namespace(StoreModules.ftbot);
-const uiSettingsNs = namespace(StoreModules.uiSettings);
 
 @Component({ components: { CandleChart, PlotConfigurator, vSelect } })
 export default class CandleChartContainer extends Vue {
@@ -163,8 +162,6 @@ export default class CandleChartContainer extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   @ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
 
-  @uiSettingsNs.Getter [SettingsGetters.timezone]: string;
-
   get dataset(): PairHistory {
     if (this.historicView) {
       return this.history[`${this.pair}__${this.timeframe}`];
@@ -210,7 +207,15 @@ export default class CandleChartContainer extends Vue {
     return !!this.dataset;
   }
 
+  timezone: string = 'UTC';
+
   mounted() {
+    const settingsStore = useSettingsStore();
+    this.timezone = settingsStore.timezone;
+    settingsStore.$subscribe((_, state) => {
+      this.timezone = state.timezone;
+    });
+
     if (this.selectedPair) {
       this.pair = this.selectedPair;
     } else if (this.availablePairs.length > 0) {
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 5cbe235a..379ae0ee 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -122,7 +122,7 @@ import StoreModules from '@/store/storeSubModules';
 
 const ftbot = namespace(StoreModules.ftbot);
 const layoutNs = namespace(StoreModules.layout);
-const uiSettingsNs = namespace(StoreModules.uiSettings);
+import { useSettingsStore } from '@/stores/settings';
 
 @Component({
   components: { LoginModal, BootswatchThemeSelect, ReloadControl, BotEntry, BotList },
@@ -166,11 +166,17 @@ export default class NavBar extends Vue {
 
   @layoutNs.Action [LayoutActions.setLayoutLocked];
 
-  @uiSettingsNs.Getter [SettingsGetters.openTradesInTitle]: string;
+  openTradesInTitle: string = OpenTradeVizOptions.showPill;
 
   favicon: Favico | undefined = undefined;
 
   mounted() {
+    const settingsStore = useSettingsStore();
+    this.openTradesInTitle = settingsStore.openTradesInTitle;
+    settingsStore.$subscribe((_, state) => {
+      this.openTradesInTitle = state.openTradesInTitle;
+    });
+
     this.pingAll();
     this.loadUIVersion();
     this.pingInterval = window.setInterval(this.pingAll, 60000);