From 7bfb646db1bc026799590ceead6c8e24dbe37d6c Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sat, 30 Dec 2023 18:34:33 +0800
Subject: [PATCH] finish refactor of mj

---
 src/components/midjourney/PresetPanel.vue     | 13 +--
 .../midjourney/tasks/TaskBriefList.vue        | 75 +++++----------
 .../midjourney/tasks/TaskFullList.vue         | 92 +++++++------------
 src/layouts/Chat.vue                          | 12 ++-
 src/operators/instance.ts                     |  1 -
 src/pages/chat/Conversation.vue               |  3 +-
 src/pages/midjourney/History.vue              | 52 ++++-------
 src/pages/midjourney/Index.vue                | 45 ++++-----
 src/store/index.ts                            | 13 ++-
 src/store/midjourney/actions.ts               | 72 ++++++++++++++-
 src/store/midjourney/index.ts                 |  8 +-
 src/store/midjourney/models.ts                |  7 +-
 src/store/midjourney/mutations.ts             | 23 ++++-
 src/store/midjourney/state.ts                 | 12 +++
 14 files changed, 232 insertions(+), 196 deletions(-)
 create mode 100644 src/store/midjourney/state.ts

diff --git a/src/components/midjourney/PresetPanel.vue b/src/components/midjourney/PresetPanel.vue
index abaae5d..622b68f 100644
--- a/src/components/midjourney/PresetPanel.vue
+++ b/src/components/midjourney/PresetPanel.vue
@@ -45,25 +45,14 @@ export default defineComponent({
     TranslationSelector,
     NijiSelector
   },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['update:modelValue'],
   data() {
     return {
-      preset: this.modelValue
+      preset: this.$store.state.midjourney.preset
     };
   },
   watch: {
-    modelValue(val) {
-      this.preset = val;
-    },
     preset: {
       handler(val) {
-        this.$emit('update:modelValue', val);
         this.$store.dispatch('midjourney/setPreset', {
           ...val
         });
diff --git a/src/components/midjourney/tasks/TaskBriefList.vue b/src/components/midjourney/tasks/TaskBriefList.vue
index 22c8a46..eb819a6 100644
--- a/src/components/midjourney/tasks/TaskBriefList.vue
+++ b/src/components/midjourney/tasks/TaskBriefList.vue
@@ -23,15 +23,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './TaskPreview.vue';
-import { IApplication, IMidjourneyImagineTask, apiUsageOperator, midjourneyOperator } from '@/operators';
 import { ROUTE_MIDJOURNEY_HISTORY } from '@/router';
 import { ElButton, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-interface IData {
-  tasks: IMidjourneyImagineTask[] | undefined;
-  mounted: boolean;
-  loading: boolean;
-}
+import { Status } from '@/store/common/models';
 
 export default defineComponent({
   name: 'TaskBriefList',
@@ -42,66 +36,45 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
-  props: {
-    applications: {
-      type: Object as () => IApplication[],
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'custom'],
-  data(): IData {
+  data() {
     return {
-      tasks: undefined,
-      mounted: false,
-      loading: false
+      job: 0
     };
   },
-  watch: {
-    applications(val) {
-      if (val) {
-        this.getTasks();
-      }
+  computed: {
+    loading() {
+      return this.$store.state.midjourney.getImagineTasksStatus === Status.Request;
+    },
+    tasks() {
+      return this.$store.state.midjourney.imagineTasks;
+    },
+    applications() {
+      return this.$store.state.midjourney.applications;
     }
   },
-  mounted() {
-    this.mounted = true;
+  async mounted() {
+    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+    this.job = setInterval(() => {
+      this.getImagineTasks();
+    }, 5000);
+  },
+  unmounted() {
+    clearInterval(this.job);
   },
   methods: {
     async onLoadHistory() {
       this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
     },
-    async getTasks() {
+    async getImagineTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
-      this.loading = true;
-      const {
-        data: { items: apiUsages }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.user.id,
-        application_id: this.applications?.map((application) => application.id),
-        offset: 0,
-        limit: 5,
-        ordering: '-created_at'
+      await this.$store.dispatch('midjourney/getImagineTasks', {
+        limit: 12,
+        offset: 0
       });
-      let tasks = (await midjourneyOperator.tasks(apiUsages.map((apiUsage) => apiUsage?.metadata?.task_id as string)))
-        .data;
-      // filter out null tasks
-      tasks = tasks.filter((task) => task);
-      this.tasks = tasks.map((task) => {
-        const apiUsage = apiUsages.filter((apiUsage) => apiUsage?.metadata?.task_id === task?.id)[0];
-        return {
-          ...task,
-          created_at: apiUsage?.created_at
-        };
-      });
-      this.loading = false;
-      if (this.mounted) {
-        setTimeout(() => {
-          this.getTasks();
-        }, 5000);
-      }
     }
   }
 });
diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
index 2a26f99..a32ba0e 100644
--- a/src/components/midjourney/tasks/TaskFullList.vue
+++ b/src/components/midjourney/tasks/TaskFullList.vue
@@ -26,18 +26,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './TaskPreview.vue';
-import { IApplication, IMidjourneyImagineTask, apiUsageOperator, midjourneyOperator } from '@/operators';
 import Pagination from '@/components/common/Pagination.vue';
 import { ElRow, ElCol, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-interface IData {
-  tasks: IMidjourneyImagineTask[];
-  mounted: boolean;
-  total: number | undefined;
-  limit: number;
-  offset: number;
-  loading: boolean;
-}
+import { Status } from '@/store/common/models';
 
 export default defineComponent({
   name: 'TaskFullList',
@@ -50,42 +41,51 @@ export default defineComponent({
     ElSkeletonItem,
     ElCard
   },
-  props: {
-    applications: {
-      type: Object as () => IApplication[],
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'custom'],
-  data(): IData {
+  data() {
     return {
-      tasks: [],
-      mounted: false,
-      limit: 12,
-      offset: 0,
-      total: undefined,
-      loading: false
+      job: 0
     };
   },
   computed: {
     page() {
       return parseInt(this.$route.query.page?.toString() || '1');
+    },
+    total() {
+      return this.$store.state.midjourney.imagineTasksTotal;
+    },
+    offset() {
+      return (this.page - 1) * this.limit;
+    },
+    limit() {
+      return 12;
+    },
+    loading() {
+      return this.$store.state.midjourney.getImagineTasksStatus === Status.Request;
+    },
+    tasks() {
+      return this.$store.state.midjourney.imagineTasks;
+    },
+    applications() {
+      return this.$store.state.midjourney.applications;
     }
   },
   watch: {
-    applications(val) {
-      if (val) {
-        this.getTasks();
-      }
-    },
     page: {
-      handler() {
-        this.getTasks();
+      async handler() {
+        await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+        this.getImagineTasks();
       }
     }
   },
-  mounted() {
-    this.mounted = true;
+  async mounted() {
+    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+    this.job = setInterval(() => {
+      this.getImagineTasks();
+    }, 5000);
+  },
+  unmounted() {
+    clearInterval(this.job);
   },
   methods: {
     onPageChange(page: number) {
@@ -107,37 +107,15 @@ export default defineComponent({
         });
       }, 3000);
     },
-    async getTasks() {
+    async getImagineTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
-      this.loading = true;
-      const {
-        data: { items: apiUsages, count }
-      } = await apiUsageOperator.getAll({
-        user_id: this.$store.state.user.id,
-        application_id: this.applications?.map((application) => application.id),
-        offset: (this.page - 1) * this.limit,
+      await this.$store.dispatch('midjourney/getImagineTasks', {
         limit: this.limit,
-        ordering: '-created_at'
-      });
-      this.total = count;
-      const tasks = (await midjourneyOperator.tasks(apiUsages.map((apiUsage) => apiUsage.metadata?.task_id as string)))
-        .data;
-      this.tasks = tasks.map((task) => {
-        const apiUsage = apiUsages.filter((apiUsage) => apiUsage.metadata?.task_id === task?.id)[0];
-        return {
-          ...task,
-          created_at: apiUsage.created_at
-        };
+        offset: this.offset
       });
-      this.loading = false;
-      if (this.mounted) {
-        setTimeout(() => {
-          this.getTasks();
-        }, 5000);
-      }
     }
   }
 });
diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
index be0e9b9..bdeef42 100644
--- a/src/layouts/Chat.vue
+++ b/src/layouts/Chat.vue
@@ -22,8 +22,16 @@ export default defineComponent({
     Navigator
   },
   async mounted() {
-    await this.$store.dispatch('chat/getApplications');
-    await this.$store.dispatch('chat/getConversations');
+    await this.onGetApplications();
+    await this.onGetConversations();
+  },
+  methods: {
+    async onGetApplications() {
+      await this.$store.dispatch('chat/getApplications');
+    },
+    async onGetConversations() {
+      await this.$store.dispatch('chat/getConversations');
+    }
   }
 });
 </script>
diff --git a/src/operators/instance.ts b/src/operators/instance.ts
index 1d23a5c..1f7f591 100644
--- a/src/operators/instance.ts
+++ b/src/operators/instance.ts
@@ -15,7 +15,6 @@ const httpClient: AxiosInstance = axios.create({
 });
 
 httpClient.interceptors.request.use((config) => {
-  console.log('store', store.state);
   const accessToken = store.state.token?.access;
   if (!config.headers) {
     config.headers = {};
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index 342cb0c..c2396df 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -38,14 +38,13 @@ import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
 import ApiStatus from '@/components/common/ApiStatus.vue';
-import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
+import { ROUTE_CHAT_CONVERSATION } from '@/router';
 import { Status } from '@/store/common/models';
 import { v4 as uuid } from 'uuid';
 
 export interface IData {
   model: IChatModel;
   question: '';
-  // messages: IChatMessage[];
 }
 
 export default defineComponent({
diff --git a/src/pages/midjourney/History.vue b/src/pages/midjourney/History.vue
index 54a245b..3ca34dc 100644
--- a/src/pages/midjourney/History.vue
+++ b/src/pages/midjourney/History.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="presets">
-      <preset-panel v-model="preset" />
+      <preset-panel />
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
@@ -10,9 +10,9 @@
         :application="application"
         class="mb-4"
         :api-id="channel.apiId"
-        @refresh="onFetchApplications"
+        @refresh="onGetApplications"
       />
-      <task-full-list :applications="applications" @custom="onCustom" />
+      <task-full-list @custom="onCustom" />
       <el-button type="primary" class="btn btn-generate" @click="onGenerateNew">
         <font-awesome-icon icon="fa-solid fa-chevron-left" class="icon icon-rotate mr-1" />
         {{ $t('midjourney.button.generateNew') }}
@@ -28,33 +28,25 @@ import { ElMessage, ElButton } from 'element-plus';
 import ChannelSelector from '@/components/midjourney/ChannelSelector.vue';
 import ApiStatus from '@/components/common/ApiStatus.vue';
 import {
-  IApplication,
   IMidjourneyChannel,
   MidjourneyImagineAction,
   IMidjourneyPreset,
   MIDJOURNEY_CHANNEL_FAST,
-  MIDJOURNEY_CHANNEL_TURBO,
-  MIDJOURNEY_CHANNEL_RELAX,
-  applicationOperator,
   midjourneyOperator,
   IMidjourneyImagineTask,
-  IMidjourneyImagineRequest
+  IMidjourneyImagineRequest,
+  IApplication
 } from '@/operators';
 import TaskFullList from '@/components/midjourney/tasks/TaskFullList.vue';
 import { ROUTE_MIDJOURNEY_INDEX } from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { Status } from '@/store/common/models';
 
 interface IData {
   channel: IMidjourneyChannel;
-  preset: IMidjourneyPreset;
   prompt: string;
   elements: string[];
   ignore: string;
-  initializing: boolean;
-  applied: boolean | undefined;
-  applications: IApplication[];
-  references: string[];
-  task: IMidjourneyImagineTask | undefined;
 }
 
 const CALLBACK_URL = 'https://webhook.zhishuyun.com/midjourney';
@@ -71,28 +63,28 @@ export default defineComponent({
   },
   data(): IData {
     return {
-      applications: [],
       channel: MIDJOURNEY_CHANNEL_FAST,
-      preset: this.$store.state.midjourney.preset,
       prompt: '',
       elements: [],
-      ignore: '',
-      initializing: false,
-      applied: undefined,
-      task: undefined,
-      references: []
+      ignore: ''
     };
   },
   computed: {
+    applications() {
+      return this.$store.state.midjourney.applications;
+    },
+    initializing() {
+      return this.$store.state.midjourney.getApplicationsStatus === Status.Request;
+    },
     application() {
       if (this.applications && this.applications.length > 0) {
-        return this.applications.filter((item) => item.api_id === this.channel.apiId)[0];
+        return this.applications.filter((item: IApplication) => item.api_id === this.channel.apiId)[0];
       }
       return undefined;
     }
   },
-  mounted() {
-    this.onFetchApplications();
+  async mounted() {
+    await this.onGetApplications();
   },
   methods: {
     async onGenerateNew() {
@@ -100,17 +92,11 @@ export default defineComponent({
         name: ROUTE_MIDJOURNEY_INDEX
       });
     },
-    async onFetchApplications() {
-      this.initializing = true;
-      const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.user.id,
-        api_id: [MIDJOURNEY_CHANNEL_FAST.apiId, MIDJOURNEY_CHANNEL_RELAX.apiId, MIDJOURNEY_CHANNEL_TURBO.apiId]
-      });
-      this.initializing = false;
-      this.applications = applications?.items;
+    async onGetApplications() {
+      await this.$store.dispatch('midjourney/getApplications');
     },
     async onSelectChannel() {
-      await this.onFetchApplications();
+      await this.onGetApplications();
     },
     async onStartTask(request: IMidjourneyImagineRequest) {
       const token = this.application?.credential?.token;
diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
index 0a6c757..fdfbae4 100644
--- a/src/pages/midjourney/Index.vue
+++ b/src/pages/midjourney/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="presets">
-      <preset-panel v-model="preset" />
+      <preset-panel />
     </div>
     <div class="main">
       <channel-selector v-model="channel" class="mb-4" @select="onSelectChannel" />
@@ -10,7 +10,7 @@
         :application="application"
         :api-id="channel.apiId"
         class="mb-4"
-        @apply="onFetchApplications"
+        @apply="onGetApplications"
       />
       <div class="pt-4">
         <reference-image class="mb-4" @change="references = $event" />
@@ -42,10 +42,7 @@ import {
   IApplication,
   IMidjourneyChannel,
   MidjourneyImagineAction,
-  IMidjourneyPreset,
   MIDJOURNEY_CHANNEL_FAST,
-  MIDJOURNEY_CHANNEL_TURBO,
-  MIDJOURNEY_CHANNEL_RELAX,
   applicationOperator,
   midjourneyOperator,
   IMidjourneyImagineTask,
@@ -56,18 +53,14 @@ import ApiStatus from '@/components/common/ApiStatus.vue';
 import TaskBriefList from '@/components/midjourney/tasks/TaskBriefList.vue';
 import FinalPrompt from '@/components/midjourney/FinalPrompt.vue';
 import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
+import { Status } from '@/store/common/models';
 
 interface IData {
   channel: IMidjourneyChannel;
-  preset: IMidjourneyPreset;
   prompt: string;
   elements: string[];
   ignore: string;
-  initializing: boolean;
-  applied: boolean | undefined;
-  applications: IApplication[];
   references: string[];
-  task: IMidjourneyImagineTask | undefined;
 }
 
 const CALLBACK_URL = 'https://webhook.zhishuyun.com/midjourney';
@@ -88,22 +81,26 @@ export default defineComponent({
   },
   data(): IData {
     return {
-      applications: [],
       channel: MIDJOURNEY_CHANNEL_FAST,
-      preset: this.$store.state.midjourney.preset || {},
       prompt: '',
       elements: [],
       ignore: '',
-      initializing: false,
-      applied: undefined,
-      task: undefined,
       references: []
     };
   },
   computed: {
+    preset() {
+      return this.$store.state.midjourney.preset;
+    },
+    initializing() {
+      return this.$store.state.midjourney.getApplicationsStatus === Status.Request;
+    },
+    applications() {
+      return this.$store.state.midjourney.applications;
+    },
     application() {
       if (this.applications && this.applications.length > 0) {
-        return this.applications.filter((item) => item.api_id === this.channel.apiId)[0];
+        return this.applications.filter((item: IApplication) => item.api_id === this.channel.apiId)[0];
       }
       return undefined;
     },
@@ -151,8 +148,8 @@ export default defineComponent({
       return this.prompt || this.references?.length > 0 ? content : '';
     }
   },
-  mounted() {
-    this.onFetchApplications();
+  async mounted() {
+    await this.onGetApplications();
   },
   methods: {
     onApply() {
@@ -172,16 +169,10 @@ export default defineComponent({
         });
     },
     async onSelectChannel() {
-      await this.onFetchApplications();
+      await this.onGetApplications();
     },
-    async onFetchApplications() {
-      this.initializing = true;
-      const { data: applications } = await applicationOperator.getAll({
-        user_id: this.$store.state.user.id,
-        api_id: [MIDJOURNEY_CHANNEL_FAST.apiId, MIDJOURNEY_CHANNEL_RELAX.apiId, MIDJOURNEY_CHANNEL_TURBO.apiId]
-      });
-      this.initializing = false;
-      this.applications = applications?.items;
+    async onGetApplications() {
+      await this.$store.dispatch('midjourney/getApplications');
     },
     async onStartTask(request: IMidjourneyImagineRequest) {
       const token = this.application?.credential?.token;
diff --git a/src/store/index.ts b/src/store/index.ts
index 4809475..911b266 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,7 +10,18 @@ const store = createStore({
     midjourney,
     chat
   },
-  plugins: [createPersistedState()]
+  plugins: [
+    createPersistedState({
+      paths: [
+        'token',
+        'user',
+        'chat.applications',
+        'chat.conversations',
+        'midjourney.applications',
+        'midjourney.imagineTasks'
+      ]
+    })
+  ]
 });
 
 export default store;
diff --git a/src/store/midjourney/actions.ts b/src/store/midjourney/actions.ts
index 4cf1e70..73f3599 100644
--- a/src/store/midjourney/actions.ts
+++ b/src/store/midjourney/actions.ts
@@ -1,4 +1,18 @@
-import { IApplication, IMidjourneyPreset } from '@/operators';
+import {
+  IApplication,
+  IMidjourneyImagineTask,
+  IMidjourneyPreset,
+  MIDJOURNEY_CHANNEL_FAST,
+  MIDJOURNEY_CHANNEL_RELAX,
+  MIDJOURNEY_CHANNEL_TURBO,
+  apiUsageOperator,
+  applicationOperator,
+  midjourneyOperator
+} from '@/operators';
+import { IMidjourneyState } from './models';
+import { ActionContext } from 'vuex';
+import { log } from '@/utils/log';
+import { IRootState, Status } from '../common/models';
 
 export const setPreset = ({ commit }: any, payload: IMidjourneyPreset) => {
   commit('setPreset', payload);
@@ -8,7 +22,61 @@ export const setApplications = ({ commit }: any, payload: IApplication[]) => {
   commit('setApplications', payload);
 };
 
+export const getApplications = async ({
+  commit,
+  rootState
+}: ActionContext<IMidjourneyState, IRootState>): Promise<IApplication[]> => {
+  log(getApplications, 'start to get application for midjourney');
+  commit('setGetApplicationsStatus', Status.Request);
+  const { data: applications } = await applicationOperator.getAll({
+    user_id: rootState.user.id,
+    api_id: [MIDJOURNEY_CHANNEL_FAST.apiId, MIDJOURNEY_CHANNEL_RELAX.apiId, MIDJOURNEY_CHANNEL_TURBO.apiId]
+  });
+  log(getApplications, 'get application for midjourney success', applications);
+  commit('setGetApplicationsStatus', Status.Success);
+  commit('setApplications', applications?.items);
+  return applications.items;
+};
+
+export const setImagineTasks = ({ commit }: any, payload: IMidjourneyImagineTask[]) => {
+  commit('setImagineTasks', payload);
+};
+
+export const getImagineTasks = async (
+  { commit, state, rootState }: ActionContext<IMidjourneyState, IRootState>,
+  { offset, limit }: { offset?: number; limit?: number }
+): Promise<IMidjourneyImagineTask[]> => {
+  log(getImagineTasks, 'start to get imagine tasks', offset, limit);
+  commit('setGetImagineTasksStatus', Status.Request);
+  const {
+    data: { items: apiUsages, count }
+  } = await apiUsageOperator.getAll({
+    user_id: rootState.user.id,
+    // @ts-ignore
+    application_id: state.applications?.map((application: IApplication) => application.id),
+    offset,
+    limit,
+    ordering: '-created_at'
+  });
+  log(getImagineTasks, 'get imagine api usage success', apiUsages);
+  let tasks = (await midjourneyOperator.tasks(apiUsages.map((apiUsage) => apiUsage.metadata?.task_id as string))).data;
+  tasks = tasks.map((task: IMidjourneyImagineTask) => {
+    const apiUsage = apiUsages.filter((apiUsage) => apiUsage.metadata?.task_id === task?.id)[0];
+    return {
+      ...task,
+      created_at: apiUsage.created_at
+    };
+  });
+  commit('setImagineTasksTotal', count);
+  commit('setGetImagineTasksStatus', Status.Success);
+  commit('setImagineTasks', tasks);
+  return tasks;
+};
+
 export default {
   setPreset,
-  setApplications
+  setApplications,
+  getApplications,
+  setImagineTasks,
+  getImagineTasks
 };
diff --git a/src/store/midjourney/index.ts b/src/store/midjourney/index.ts
index b4988df..5485cb0 100644
--- a/src/store/midjourney/index.ts
+++ b/src/store/midjourney/index.ts
@@ -2,15 +2,11 @@ import { Module } from 'vuex';
 import { IMidjourneyState } from './models';
 import actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export const midjourney: Module<IMidjourneyState, any> = {
   namespaced: true,
-  state(): IMidjourneyState {
-    return {
-      applications: undefined,
-      preset: {}
-    };
-  },
+  state,
   mutations,
   actions
 };
diff --git a/src/store/midjourney/models.ts b/src/store/midjourney/models.ts
index bb6fcc5..1522328 100644
--- a/src/store/midjourney/models.ts
+++ b/src/store/midjourney/models.ts
@@ -1,6 +1,11 @@
-import { IApplication, IMidjourneyPreset } from '@/operators';
+import { IApplication, IMidjourneyImagineTask, IMidjourneyPreset } from '@/operators';
+import { Status } from '../common/models';
 
 export interface IMidjourneyState {
   applications: IApplication[] | undefined;
+  getApplicationsStatus: Status | undefined;
+  imagineTasks: IMidjourneyImagineTask[] | undefined;
+  getImagineTasksStatus: Status | undefined;
+  imagineTasksTotal: number | undefined;
   preset: IMidjourneyPreset;
 }
diff --git a/src/store/midjourney/mutations.ts b/src/store/midjourney/mutations.ts
index 8bd645d..69afe6c 100644
--- a/src/store/midjourney/mutations.ts
+++ b/src/store/midjourney/mutations.ts
@@ -1,5 +1,6 @@
 import { IApplication } from '@/operators';
 import { IMidjourneyState } from './models';
+import { Status } from '../common/models';
 
 export const setApplications = (state: IMidjourneyState, payload: IApplication[]): void => {
   state.applications = payload;
@@ -9,7 +10,27 @@ export const setPreset = (state: IMidjourneyState, payload: any): void => {
   state.preset = payload;
 };
 
+export const setGetApplicationsStatus = (state: IMidjourneyState, payload: Status): void => {
+  state.getApplicationsStatus = payload;
+};
+
+export const setImagineTasks = (state: IMidjourneyState, payload: any): void => {
+  state.imagineTasks = payload;
+};
+
+export const setGetImagineTasksStatus = (state: IMidjourneyState, payload: Status): void => {
+  state.getImagineTasksStatus = payload;
+};
+
+export const setImagineTasksTotal = (state: IMidjourneyState, payload: number): void => {
+  state.imagineTasksTotal = payload;
+};
+
 export default {
   setApplications,
-  setPreset
+  setPreset,
+  setGetApplicationsStatus,
+  setImagineTasks,
+  setGetImagineTasksStatus,
+  setImagineTasksTotal
 };
diff --git a/src/store/midjourney/state.ts b/src/store/midjourney/state.ts
new file mode 100644
index 0000000..5210c11
--- /dev/null
+++ b/src/store/midjourney/state.ts
@@ -0,0 +1,12 @@
+import { IMidjourneyState } from './models';
+
+export default (): IMidjourneyState => {
+  return {
+    applications: undefined,
+    getApplicationsStatus: undefined,
+    imagineTasks: undefined,
+    getImagineTasksStatus: undefined,
+    imagineTasksTotal: undefined,
+    preset: {}
+  };
+};