Migrate widgetPortalArticlesToPinia

2025-01-12 12:03:35 -08:00
parent bb632d563c
commit ecb99e0e8c
12 changed files with 216 additions and 155 deletions
@@ -0,0 +1,13 @@
+import { API } from 'widget/helpers/axios';
+
+export default {
+  index: params => {
+    const url = `/hc/${params.slug}/${params.locale}/articles.json`;
+    const urlParams = {
+      page: 1,
+      sort: 'views',
+      status: 1,
+    };
+    return API.get(url, { params: urlParams });
+  },
+};
@@ -0,0 +1,6 @@
+import articleAPI from './api/articleAPI';
+import { createResourceStore } from './piniaStoreFactory';
+
+export const useArticleStore = createResourceStore('articles', {
+  api: articleAPI,
+});
@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia';
+
+export const createResourceStore = (
+  storeName,
+  { api, customGetters = {}, customActions = {} }
+) => {
+  return defineStore(storeName, {
+    state: () => ({
+      records: [],
+      uiFlags: {
+        isFetching: false,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+      error: null,
+    }),
+
+    getters: {
+      getRecords: state => state.records,
+      getUIFlags: state => state.uiFlags,
+      getError: state => state.error,
+      ...customGetters,
+    },
+
+    actions: {
+      async index(params = {}) {
+        this.uiFlags.isFetching = true;
+        this.error = null;
+
+        try {
+          const {
+            data: { payload = [] },
+          } = await api.index(params);
+          this.records = [...payload];
+        } catch (error) {
+          this.error = error;
+          throw error;
+        } finally {
+          this.uiFlags.isFetching = false;
+        }
+      },
+
+      async create(payload) {
+        this.uiFlags.isCreating = true;
+        this.error = null;
+
+        try {
+          const { data } = await api.post(payload);
+          this.records.push(data.payload);
+          return data.payload;
+        } catch (error) {
+          this.error = error;
+          throw error;
+        } finally {
+          this.uiFlags.isCreating = false;
+        }
+      },
+
+      async update(id, payload) {
+        this.uiFlags.isUpdating = true;
+        this.error = null;
+
+        try {
+          const { data } = await api.put(id, payload);
+          const index = this.records.findIndex(record => record.id === id);
+          if (index !== -1) {
+            this.records[index] = data.payload;
+          }
+          return data.payload;
+        } catch (error) {
+          this.error = error;
+          throw error;
+        } finally {
+          this.uiFlags.isUpdating = false;
+        }
+      },
+
+      async delete(id) {
+        this.uiFlags.isDeleting = true;
+        this.error = null;
+
+        try {
+          await api.delete(id);
+          this.records = this.records.filter(record => record.id !== id);
+        } catch (error) {
+          this.error = error;
+          throw error;
+        } finally {
+          this.uiFlags.isDeleting = false;
+        }
+      },
+
+      reset() {
+        this.records = [];
+        this.error = null;
+        Object.keys(this.uiFlags).forEach(key => {
+          this.uiFlags[key] = false;
+        });
+      },
+
+      ...customActions,
+    },
+  });
+};