Merge pull request #15049 from itisAliRH/pinia-history-store-init

Pinia history store init

client/package.json

@@ -68,6 +68,7 @@
     "markdown-it-regexp": "^0.4.0",
     "object-hash": "^3.0.0",
     "pinia": "^2.0.23",
+    "pinia-plugin-persistedstate": "^2.4.0",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.0.0",
     "pyre-to-regexp": "^0.0.5",

client/src/components/History/Multiple/MultipleView.test.js

@@ -1,3 +1,4 @@
+import { createPinia } from "pinia";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "jest/helpers";
@@ -10,6 +11,8 @@ const COUNT = 8;
 const USER_ID = "test-user-id";
 const CURRENT_HISTORY_ID = "test-history-id-0";
 
+const pinia = createPinia();
+
 const getFakeHistorySummaries = (num, selectedIndex = 0) => {
     const result = Array.from({ length: num }, (_, index) => ({
         id: `test-history-id-${index}`,
@@ -32,6 +35,7 @@ describe("MultipleView", () => {
     beforeEach(async () => {
         wrapper = mount(MultipleView, {
             store,
+            pinia,
             stubs: {
                 CurrentUser: CurrentUserMock,
                 UserHistories: UserHistoriesMock,

client/src/components/History/Multiple/MultipleViewList.vue

@@ -31,9 +31,10 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
 import VirtualList from "vue-virtual-scroll-list";
 import MultipleViewItem from "./MultipleViewItem";
+import { useHistoryStore } from "stores/historyStore";
 import SelectorModal from "components/History/Modals/SelectorModal";
 
 export default {
@@ -65,9 +66,9 @@ export default {
         };
     },
     computed: {
-        ...mapGetters("history", ["getPinnedHistories"]),
+        ...mapState(useHistoryStore, ["pinnedHistories"]),
         selectedHistories() {
-            return this.getPinnedHistories();
+            return this.pinnedHistories;
         },
     },
     created() {
@@ -77,7 +78,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions("history", ["pinHistory", "unpinHistory"]),
+        ...mapActions(useHistoryStore, ["pinHistory", "unpinHistory"]),
         addHistoriesToList(histories) {
             histories.forEach((history) => {
                 const historyExists = this.selectedHistories.find((h) => h.id == history.id);

client/src/entry/analysis/index.js

@@ -5,9 +5,11 @@ import App from "./App.vue";
 import store from "store";
 import { getRouter } from "./router";
 import { createPinia, PiniaVuePlugin } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 Vue.use(PiniaVuePlugin);
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 addInitialization((Galaxy) => {
     console.log("App setup");

client/src/store/historyStore/historyStore.js

@@ -19,7 +19,6 @@ const state = {
     // histories for current user
     histories: {},
     historiesLoading: false,
-    pinnedHistories: [],
 };
 
 const mutations = {
@@ -55,12 +54,6 @@ const mutations = {
     setHistoriesLoading(state, isLoading) {
         state.historiesLoading = isLoading;
     },
-    pinHistory: (state, historyId) => {
-        state.pinnedHistories.push({ id: historyId });
-    },
-    unpinHistory: (state, historyId) => {
-        state.pinnedHistories = state.pinnedHistories.filter((h) => h.id !== historyId);
-    },
 };
 
 const getters = {
@@ -96,9 +89,6 @@ const getters = {
     historiesLoading: (state) => {
         return state.historiesLoading;
     },
-    getPinnedHistories: (state) => () => {
-        return state.pinnedHistories;
-    },
 };
 
 // flags to keep track of loading states
@@ -183,12 +173,6 @@ const actions = {
         const saveResult = await updateHistoryFields(id, updateFields);
         commit("setHistory", saveResult);
     },
-    pinHistory: ({ commit }, historyId) => {
-        commit("pinHistory", historyId);
-    },
-    unpinHistory: ({ commit }, historyId) => {
-        commit("unpinHistory", historyId);
-    },
 };
 
 export const historyStore = {

client/src/store/index.js

@@ -42,11 +42,10 @@ const panelsPersistence = new VuexPersistence({
     storage: galaxyStorage,
     asyncStorage: true,
     reducer: (state) => {
-        const { panels, userFlags, history } = state;
+        const { panels, userFlags } = state;
         return {
             panels,
             userFlags,
-            history: { pinnedHistories: history.pinnedHistories },
         };
     },
 });

client/src/stores/historyStore.js

@@ -0,0 +1,26 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const useHistoryStore = defineStore(
+    "historyStore",
+    () => {
+        const pinnedHistories = ref([]);
+
+        const pinHistory = (historyId) => {
+            pinnedHistories.value.push({ id: historyId });
+        };
+
+        const unpinHistory = (historyId) => {
+            pinnedHistories.value = pinnedHistories.value.filter((h) => h.id !== historyId);
+        };
+
+        return {
+            pinnedHistories,
+            pinHistory,
+            unpinHistory,
+        };
+    },
+    {
+        persist: ["pinnedHistories"],
+    }
+);

client/yarn.lock

@@ -8083,6 +8083,11 @@ pikaday@1.5.1:
   optionalDependencies:
     moment "2.x"
 
+pinia-plugin-persistedstate@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-2.4.0.tgz#fda569b3c397517a0cf8aba83a628283767da620"
+  integrity sha512-bQcpv47jk3ISl+InuJWsFaS/K7pRZ97kfoD2WCf/suhnlLy48k3BnFM2tI6YZ1xMsDaPv4yOsaPuPAUuSmEO2Q==
+
 pinia@^2.0.23:
   version "2.0.23"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.23.tgz#570f5f82160b656b412602789683faa95502d227"