pinia: Update BotList

src/components/BotEntry.vue

@@ -4,7 +4,7 @@
 
     <div class="align-items-center d-flex">
       <span class="ml-2 mr-1 align-middle">{{
-        allIsBotOnline[bot.botId] ? '&#128994;' : '&#128308;'
+        botStore.availableBots[bot.botId] ? '&#128994;' : '&#128308;'
       }}</span>
       <b-form-checkbox
         v-model="autoRefreshLoc"
@@ -29,13 +29,11 @@
 </template>
 
 <script lang="ts">
-import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
 import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import { BotDescriptor } from '@/types';
-import StoreModules from '@/store/storeSubModules';
 import { defineComponent, computed } from '@vue/composition-api';
-import { useNamespacedActions, useNamespacedGetters, useStore } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'BotEntry',
@@ -49,15 +47,10 @@ export default defineComponent({
   },
   emits: ['edit'],
   setup(props, { root }) {
-    const store = useStore();
-    const { allIsBotOnline, allAutoRefresh } = useNamespacedGetters(StoreModules.ftbot, [
-      MultiBotStoreGetters.allIsBotOnline,
-      MultiBotStoreGetters.allAutoRefresh,
-    ]);
-    const { removeBot } = useNamespacedActions(StoreModules.ftbot, ['removeBot']);
+    const botStore = useBotStore();
 
     const changeEvent = (v) => {
-      store.dispatch(`ftbot/${props.bot.botId}/setAutoRefresh`, v);
+      botStore.botStores[props.bot.botId].setAutoRefresh(v);
     };
 
     const clickRemoveBot = (bot: BotDescriptor) => {
@@ -66,13 +59,13 @@ export default defineComponent({
         .msgBoxConfirm(`Really remove (logout) from '${bot.botName}' (${bot.botId})?`)
         .then((value: boolean) => {
           if (value) {
-            removeBot(bot.botId);
+            botStore.removeBot(bot.botId);
           }
         });
     };
     const autoRefreshLoc = computed({
       get() {
-        return allAutoRefresh.value[props.bot.botId];
+        return botStore.botStores[props.bot.botId].autoRefresh;
       },
       set(_) {
         // pass
@@ -80,8 +73,7 @@ export default defineComponent({
     });
 
     return {
-      allIsBotOnline,
-      allAutoRefresh,
+      botStore,
       changeEvent,
       clickRemoveBot,
       autoRefreshLoc,

src/components/BotList.vue

@@ -1,14 +1,14 @@
 <template>
-  <div v-if="botCount > 0">
+  <div v-if="botStore.botCount > 0">
     <h3 v-if="!small">Available bots</h3>
     <b-list-group>
       <b-list-group-item
-        v-for="bot in allAvailableBots"
+        v-for="bot in botStore.availableBots"
         :key="bot.botId"
-        :active="bot.botId === selectedBot"
+        :active="bot.botId === botStore.selectedBot"
         button
         :title="`${bot.botId} - ${bot.botName} - ${bot.botUrl}`"
-        @click="selectBot(bot.botId)"
+        @click="botStore.selectBot(bot.botId)"
       >
         <bot-rename
           v-if="editingBots.includes(bot.botId)"
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-import { MultiBotStoreGetters } from '@/store/modules/botStoreWrapper';
 import LoginModal from '@/views/LoginModal.vue';
 import BotEntry from '@/components/BotEntry.vue';
 import BotRename from '@/components/BotRename.vue';
 import StoreModules from '@/store/storeSubModules';
 
 import { defineComponent, ref } from '@vue/composition-api';
-import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
+import { useNamespacedActions } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'BotList',
@@ -41,15 +41,8 @@ export default defineComponent({
     small: { default: false, type: Boolean },
   },
   setup() {
-    const { botCount, selectedBot, allIsBotOnline, allAvailableBots } = useNamespacedGetters(
-      StoreModules.ftbot,
-      [
-        MultiBotStoreGetters.botCount,
-        MultiBotStoreGetters.selectedBot,
-        MultiBotStoreGetters.allIsBotOnline,
-        MultiBotStoreGetters.allAvailableBots,
-      ],
-    );
+    const botStore = useBotStore();
+
     const { selectBot } = useNamespacedActions(StoreModules.ftbot, ['selectBot']);
     const editingBots = ref<string[]>([]);
 
@@ -68,10 +61,7 @@ export default defineComponent({
     };
 
     return {
-      botCount,
-      selectedBot,
-      allIsBotOnline,
-      allAvailableBots,
+      botStore,
       selectBot,
       editingBots,
       editBot,

src/components/BotRename.vue

@@ -25,9 +25,8 @@
 import CheckIcon from 'vue-material-design-icons/Check.vue';
 import CloseIcon from 'vue-material-design-icons/Close.vue';
 import { BotDescriptor } from '@/types';
-import StoreModules from '@/store/storeSubModules';
 import { defineComponent, ref } from '@vue/composition-api';
-import { useNamespacedActions } from 'vuex-composition-helpers';
+import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
   name: 'BotRename',
@@ -40,11 +39,12 @@ export default defineComponent({
   },
   emits: ['saved'],
   setup(props, { emit }) {
-    const { renameBot } = useNamespacedActions(StoreModules.ftbot, ['renameBot']);
+    const botStore = useBotStore();
+
     const newName = ref<string>(props.bot.botName);
 
     const save = () => {
-      renameBot({
+      botStore.renameBot({
         botId: props.bot.botId,
         botName: newName.value,
       });