3 files changed, 70 insertions, 112 deletions
diff --git a/app/src/pages/Steps/1-From.vue b/app/src/pages/Steps/1-From.vue
index e1bd82e..c71894f 100644
--- a/app/src/pages/Steps/1-From.vue
+++ b/app/src/pages/Steps/1-From.vue
@@ -2,7 +2,7 @@
   <div>
     <h1>From</h1>
 
-    <Panel v-model="from" />
+    <Panel v-model="store.from" />
 
     <router-link to="/steps/2">
       next
@@ -10,23 +10,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { useStore } from '~/store';
 import Panel from '~/components/Panel';
 
-export default {
-  components: {
-    Panel,
-  },
-
-  computed: {
-    from: {
-      set (value) {
-        this.$store.commit('setFrom', value);
-      },
-      get () {
-        return this.$store.state.from;
-      },
-    },
-  },
-};
+const store = useStore();
 </script>
diff --git a/app/src/pages/Steps/2-To.vue b/app/src/pages/Steps/2-To.vue
index 1cce01d..1b0c655 100644
--- a/app/src/pages/Steps/2-To.vue
+++ b/app/src/pages/Steps/2-To.vue
@@ -6,7 +6,7 @@
 
     <h1>To</h1>
 
-    <Panel v-model="to" @connect="connect" />
+    <Panel v-model="store.to" @connect="connect" />
 
     <router-link to="/steps/3">
       next
@@ -14,38 +14,25 @@
   </div>
 </template>
 
-<script>import Panel from '~/components/Panel';
-
-export default {
-  components: {
-    Panel,
-  },
-
-  computed: {
-    to: {
-      set (value) {
-        this.$store.commit('setTo', value);
-      },
-      get () {
-        return this.$store.state.to;
-      },
-    },
-  },
-
-  mounted () {
-    this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
-      this.to.folders = folders;
-    });
-
-    this.$electron.ipcRenderer.on('imap:to:error', (event, error) => {
-      this.to.error = error;
-    });
-  },
-
-  methods: {
-    connect () {
-      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
-    },
-  },
-};
+<script setup>
+import { inject, onMounted } from 'vue';
+import { useStore } from '~/store';
+import Panel from '~/components/Panel';
+
+const $electron = inject('electron');
+const store = useStore();
+
+function connect() {
+  $electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(store.to)));
+}
+
+onMounted(() => {
+  $electron.ipcRenderer.on('imap:listTree:to:reply', (_event, folders) => {
+    store.to.folders = folders;
+  });
+
+  $electron.ipcRenderer.on('imap:to:error', (_event, error) => {
+    store.to.error = error;
+  });
+});
 </script>
diff --git a/app/src/pages/Steps/3-Migrate.vue b/app/src/pages/Steps/3-Migrate.vue
index c8d2e39..7c89f01 100644
--- a/app/src/pages/Steps/3-Migrate.vue
+++ b/app/src/pages/Steps/3-Migrate.vue
@@ -7,13 +7,13 @@
     <div>
       From
       <div class="input-group">
-        <input type="text" disabled :value="from.server"> <input type="text" disabled :value="from.port">
+        <input type="text" disabled :value="store.from.server"> <input type="text" disabled :value="store.from.port">
       </div>
     </div>
     <div>
       To
       <div class="input-group">
-        <input type="text" disabled :value="to.server"> <input type="text" disabled :value="to.port">
+        <input type="text" disabled :value="store.to.server"> <input type="text" disabled :value="store.to.port">
       </div>
     </div>
 
@@ -23,8 +23,13 @@
       <input type="text">
     </div>
 
-    <ul v-if="from.folders">
-      <Folders :folder="from.folders" />
+    From:
+    <ul v-if="store.from.folders">
+      <Folders :folder="store.from.folders" />
+    </ul>
+    To:
+    <ul v-if="store.to.folders">
+      <Folders :folder="store.to.folders" />
     </ul>
 
     <button class="button" @click="migrate">
@@ -45,67 +50,47 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { inject, onMounted, ref } from 'vue';
+import { useStore } from '~/store';
 import Folders from '~/components/Folders';
 
-export default {
-  components: {
-    Folders,
-  },
+const $electron = inject('electron');
+
+const store = useStore();
 
-  data () {
-    return {
-      progress: '',
-      log: [],
-      progressMessages: '',
-    };
-  },
+const progress = ref('');
+const log = ref([]);
+const progressMessages = ref('');
 
-  computed: {
-    from: {
-      set (value) {
-        this.$store.commit('setFrom', value);
-      },
-      get () {
-        return this.$store.state.from;
-      },
-    },
-    to: {
-      set (value) {
-        this.$store.commit('setTo', value);
-      },
-      get () {
-        return this.$store.state.to;
-      },
-    },
-  },
+async function migrate() {
+  progress.value = '';
+  log.value = [];
+  progressMessages.value = '';
 
-  mounted () {
-    this.$electron.ipcRenderer.on('imap:listTree:from:reply', (event, folders) => {
-      this.from.folders = folders;
-    });
-    this.$electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(this.from)));
+  $electron.ipcRenderer.send('imap:migrate', JSON.parse(JSON.stringify({
+    from: store.from,
+    to: store.to,
+  })));
+}
 
-    this.$electron.ipcRenderer.on('imap:migrate:progress', (event, progress) => {
-      this.progress = progress;
-      this.log.push(progress);
-    });
-    this.$electron.ipcRenderer.on('imap:migrate:progress:messages', (event, progress) => {
-      this.progressMessages = progress;
-    });
-  },
+onMounted(() => {
+  $electron.ipcRenderer.on('imap:listTree:from:reply', (_event, folders) => {
+    store.from.folders = folders;
+  });
+  $electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(store.from)));
 
-  methods: {
-    async migrate () {
-      this.progress = '';
-      this.log = [];
-      this.progressMessages = '';
+  $electron.ipcRenderer.on('imap:listTree:to:reply', (_event, folders) => {
+    store.to.folders = folders;
+  });
+  $electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(store.to)));
 
-      this.$electron.ipcRenderer.send('imap:migrate', JSON.parse(JSON.stringify({
-        from: this.from,
-        to: this.to,
-      })));
-    },
-  },
-};
+  $electron.ipcRenderer.on('imap:migrate:progress', (_event, imapProgress) => {
+    progress.value = imapProgress;
+    log.value.push(imapProgress);
+  });
+  $electron.ipcRenderer.on('imap:migrate:progress:messages', (_event, progress) => {
+    progressMessages.value = progress;
+  });
+});
 </script>