refs #3301 Rewrite Settings/Filters with composition API

src/renderer/components/Settings/Filters/Edit.vue

@@ -1,65 +1,64 @@
 <template>
   <div id="edit_filter">
     <h2>{{ $t('settings.filters.edit.title') }}</h2>
-    <FilterForm
-      v-model="filter"
-      @cancel="cancel"
-      @onSubmit="onSubmit"
-      :loading="loading"
-      :sns="sns"
-    >
-    </FilterForm>
+    <FilterForm v-model="filter" @cancel="cancel" @onSubmit="onSubmit" :loading="loading" :sns="sns"> </FilterForm>
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-import FilterForm from './form'
+<script lang="ts">
+import { defineComponent, computed, onMounted, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useStore } from '@/store'
+import { useRouter } from 'vue-router'
+import { useI18next } from 'vue3-i18next'
+import FilterForm from './form.vue'
+import { ACTION_TYPES } from '@/store/Settings/Filters/Edit'
 
-export default {
+export default defineComponent({
   name: 'EditFilter',
   props: ['filter_id'],
   components: { FilterForm },
-  computed: {
-    ...mapState('Settings/Filters/Edit', {
-      loading: (state) => state.loading,
-    }),
-    ...mapState('TimelineSpace', {
-      sns: (state) => state.sns,
-    }),
-    filter: {
-      get() {
-        return this.$store.state.Settings.Filters.Edit.filter
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/Edit/editFilter', value)
-      },
-    },
-  },
-  async created() {
-    await this.$store.dispatch(
-      'Settings/Filters/Edit/fetchFilter',
-      this.filter_id
-    )
-  },
-  methods: {
-    cancel() {
-      this.$router.go(-1)
-    },
-    onSubmit() {
-      this.$store
-        .dispatch('Settings/Filters/Edit/updateFilter')
+  setup(props) {
+    const space = 'Settings/Filters/Edit'
+    const store = useStore()
+    const router = useRouter()
+    const i18n = useI18next()
+    const { filter_id } = toRefs(props)
+
+    const loading = computed(() => store.state.Settings.Filters.Edit.loading)
+    const sns = computed(() => store.state.TimelineSpace.sns)
+    const filter = computed({
+      get: () => store.state.Settings.Filters.Edit.filter,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.EDIT_FILTER}`, value)
+    })
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.FETCH_FILTER}`, filter_id.value)
+    })
+
+    const cancel = () => router.go(-1)
+    const onSubmit = () => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.UPDATE_FILTER}`)
         .then(() => {
-          this.$router.go(-1)
+          router.go(-1)
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err)
-          this.$message({
-            message: this.$t('message.update_filter_error'),
-            type: 'error',
+          ElMessage({
+            message: i18n.t('message.update_filter_error'),
+            type: 'error'
           })
         })
-    },
-  },
-}
+    }
+
+    return {
+      loading,
+      sns,
+      filter,
+      cancel,
+      onSubmit
+    }
+  }
+})
 </script>

src/renderer/components/Settings/Filters/New.vue

@@ -1,58 +1,58 @@
 <template>
   <div id="new_filter">
     <h2>{{ $t('settings.filters.new.title') }}</h2>
-    <FilterForm
-      v-model="filter"
-      @cancel="cancel"
-      @onSubmit="onSubmit"
-      :loading="loading"
-      :sns="sns"
-    >
-    </FilterForm>
+    <FilterForm v-model="filter" @cancel="cancel" @onSubmit="onSubmit" :loading="loading" :sns="sns"> </FilterForm>
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-import FilterForm from './form'
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import FilterForm from './form.vue'
+import { ACTION_TYPES } from '@/store/Settings/Filters/New'
 
-export default {
+export default defineComponent({
   name: 'NewFilter',
   components: { FilterForm },
-  computed: {
-    ...mapState('Settings/Filters/New', {
-      loading: (state) => state.loading,
-    }),
-    ...mapState('TimelineSpace', {
-      sns: (state) => state.sns,
-    }),
-    filter: {
-      get() {
-        return this.$store.state.Settings.Filters.New.filter
-      },
-      set(value) {
-        this.$store.dispatch('Settings/Filters/New/editFilter', value)
-      },
-    },
-  },
-  methods: {
-    cancel() {
-      this.$router.go(-1)
-    },
-    onSubmit() {
-      this.$store
-        .dispatch('Settings/Filters/New/createFilter')
+  setup() {
+    const space = 'Settings/Filters/New'
+    const store = useStore()
+    const router = useRouter()
+    const i18n = useI18next()
+
+    const loading = computed(() => store.state.Settings.Filters.New.loading)
+    const sns = computed(() => store.state.TimelineSpace.sns)
+    const filter = computed({
+      get: () => store.state.Settings.Filters.New.filter,
+      set: value => store.dispatch(`${space}/${ACTION_TYPES.EDIT_FILTER}`, value)
+    })
+
+    const cancel = () => router.go(-1)
+    const onSubmit = () => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.CREATE_FILTER}`)
         .then(() => {
-          this.$router.go(-1)
+          router.go(-1)
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err)
-          this.$message({
-            message: this.$t('message.create_filter_error'),
-            type: 'error',
+          ElMessage({
+            message: i18n.t('message.create_filter_error'),
+            type: 'error'
           })
         })
-    },
-  },
-}
+    }
+
+    return {
+      loading,
+      sns,
+      filter,
+      cancel,
+      onSubmit
+    }
+  }
+})
 </script>

src/renderer/components/Settings/Filters/form.vue

@@ -14,7 +14,7 @@
         <el-checkbox label="notifications"></el-checkbox>
         <el-checkbox label="public"></el-checkbox>
         <el-checkbox label="thread"></el-checkbox>
-        <el-checkbox label="account" :disabled="accountDisabled()"></el-checkbox>
+        <el-checkbox label="account" :disabled="accountDisabled"></el-checkbox>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item>
@@ -30,128 +30,125 @@
   </el-form>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, computed, toRefs, PropType } from 'vue'
+import { useI18next } from 'vue3-i18next'
+import { Entity } from 'megalodon'
+
+export default defineComponent({
   name: 'FilterForm',
   props: {
     loading: {
       type: Boolean,
       default: false
     },
-    value: {
-      type: Object
+    modelValue: {
+      type: Object as PropType<Entity.Filter>,
+      required: true
     },
     sns: {
       type: String,
       default: 'mastodon'
     }
   },
-  data() {
-    return {
-      expires: [
-        {
-          label: this.$t('settings.filters.expires.never'),
-          value: null
-        },
-        {
-          label: this.$t('settings.filters.expires.30_minutes'),
-          value: 60 * 30
-        },
-        {
-          label: this.$t('settings.filters.expires.1_hour'),
-          value: 3600
-        },
-        {
-          label: this.$t('settings.filters.expires.6_hours'),
-          value: 3600 * 6
-        },
-        {
-          label: this.$t('settings.filters.expires.12_hours'),
-          value: 3600 * 12
-        },
-        {
-          label: this.$t('settings.filters.expires.1_day'),
-          value: 3600 * 24
-        },
-        {
-          label: this.$t('settings.filters.expires.1_week'),
-          value: 3600 * 24 * 7
-        }
-      ]
-    }
-  },
-  computed: {
-    filter: {
-      get() {
-        return this.value
+  setup(props, ctx) {
+    const i18n = useI18next()
+    const { modelValue, sns } = toRefs(props)
+
+    const expires = [
+      {
+        label: i18n.t('settings.filters.expires.never'),
+        value: null
       },
-      set(value) {
-        this.$emit('input', value)
+      {
+        label: i18n.t('settings.filters.expires.30_minutes'),
+        value: 60 * 30
+      },
+      {
+        label: i18n.t('settings.filters.expires.1_hour'),
+        value: 3600
+      },
+      {
+        label: i18n.t('settings.filters.expires.6_hours'),
+        value: 3600 * 6
+      },
+      {
+        label: i18n.t('settings.filters.expires.12_hours'),
+        value: 3600 * 12
+      },
+      {
+        label: i18n.t('settings.filters.expires.1_day'),
+        value: 3600 * 24
+      },
+      {
+        label: i18n.t('settings.filters.expires.1_week'),
+        value: 3600 * 24 * 7
       }
-    },
-    filterPhrase: {
-      get() {
-        return this.filter.phrase
-      },
-      set(value) {
-        this.filter = Object.assign({}, this.filter, {
+    ]
+
+    const filter = computed({
+      get: () => modelValue.value,
+      set: value => ctx.emit('update:modelValue', value)
+    })
+    const filterPhrase = computed({
+      get: () => filter.value.phrase,
+      set: value => {
+        filter.value = Object.assign({}, filter.value, {
           phrase: value
         })
       }
-    },
-    filterExpire: {
-      get() {
-        return this.filter.expires_at
-      },
-      set(value) {
-        this.filter = Object.assign({}, this.filter, {
+    })
+    const filterExpire = computed({
+      get: () => filter.value.expires_at,
+      set: value => {
+        filter.value = Object.assign({}, filter.value, {
           expires_at: value
         })
       }
-    },
-    filterContext: {
-      get() {
-        return this.filter.context
-      },
-      set(value) {
-        this.filter = Object.assign({}, this.filter, {
+    })
+    const filterContext = computed({
+      get: () => filter.value.context,
+      set: value => {
+        filter.value = Object.assign({}, filter.value, {
           context: value
         })
       }
-    },
-    filterIrreversible: {
-      get() {
-        return this.filter.irreversible
-      },
-      set(value) {
-        this.filter = Object.assign({}, this.filter, {
+    })
+    const filterIrreversible = computed({
+      get: () => filter.value.irreversible,
+      set: value => {
+        filter.value = Object.assign({}, filter.value, {
           irreversible: value
         })
       }
-    },
-    filterWholeWord: {
-      get() {
-        return this.filter.whole_word
-      },
-      set(value) {
-        this.filter = Object.assign({}, this.filter, {
+    })
+    const filterWholeWord = computed({
+      get: () => filter.value.whole_word,
+      set: value => {
+        filter.value = Object.assign({}, filter.value, {
           whole_word: value
         })
       }
-    }
-  },
-  methods: {
-    cancel() {
-      this.$emit('cancel')
-    },
-    onSubmit() {
-      this.$emit('onSubmit')
-    },
-    accountDisabled() {
-      return this.sns === 'pleroma'
+    })
+    const accountDisabled = computed(() => sns.value === 'pleroma')
+
+    const cancel = () => ctx.emit('cancel')
+    const onSubmit = () => ctx.emit('onSubmit')
+
+    return {
+      expires,
+      filter,
+      filterPhrase,
+      filterExpire,
+      filterContext,
+      filterIrreversible,
+      filterWholeWord,
+      cancel,
+      onSubmit,
+      accountDisabled
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/Settings.ts

@@ -25,7 +25,7 @@ const mutations: MutationTree<SettingsState> = {
 type SettingsModule = {
   General: GeneralState
   Timeline: TimelineState
-  Filter: FiltersModuleState
+  Filters: FiltersModuleState
 }
 
 export type SettingsModuleState = SettingsModule & SettingsState

src/renderer/store/Settings/Filters/Edit.ts

@@ -33,6 +33,12 @@ export const mutations: MutationTree<EditFiltersState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_FILTER: 'fetchFilter',
+  EDIT_FILTER: 'editFilter',
+  UPDATE_FILTER: 'updateFilter'
+}
+
 export const actions: ActionTree<EditFiltersState, RootState> = {
   fetchFilter: async ({ commit, rootState }, id: string): Promise<Entity.Filter> => {
     const client = generator(

src/renderer/store/Settings/Filters/New.ts

@@ -35,15 +35,21 @@ export const mutations: MutationTree<NewFiltersState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  EDIT_FILTER: 'editFilter',
+  RESET_FILTER: 'resetFilter',
+  CREATE_FILTER: 'createFilter'
+}
+
 export const actions: ActionTree<NewFiltersState, RootState> = {
-  editFilter: ({ commit, state }, filter: any) => {
+  [ACTION_TYPES.EDIT_FILTER]: ({ commit, state }, filter: any) => {
     const newFilter = Object.assign({}, state.filter, filter)
     commit(MUTATION_TYPES.UPDATE_FILTER, newFilter)
   },
-  resetFilter: ({ commit }) => {
+  [ACTION_TYPES.RESET_FILTER]: ({ commit }) => {
     commit(MUTATION_TYPES.UPDATE_FILTER, defaultFilter)
   },
-  createFilter: async ({ commit, state, dispatch, rootState }): Promise<Entity.Filter> => {
+  [ACTION_TYPES.CREATE_FILTER]: async ({ commit, state, dispatch, rootState }): Promise<Entity.Filter> => {
     if (state.filter === null) {
       throw new Error('filter is not set')
     }