Fix: After page refresh, store state no longer retains the selected project #566

frontend/package.json

@@ -26,6 +26,7 @@
     "hammerjs": "^2.0.8",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "popper.js": "^1.16.1",
     "qrcode.vue": "^3.4.1",
     "register-service-worker": "^1.7.1",

frontend/src/main.ts

@@ -4,6 +4,7 @@
   Copyright (C) 2022 AUME-Team 21/22, HTWG Konstanz
 */
 import Vue, { createApp } from "@vue/compat";
+import { watch } from "vue";
 
 import axios from "axios";
 import VueAxios from "vue-axios";
@@ -13,6 +14,7 @@ import "./registerServiceWorker";
 import router from "./router";
 import setupInterceptors from "./interceptors";
 import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 import { BootstrapVue, IconsPlugin, ModalPlugin } from "bootstrap-vue";
 
@@ -37,6 +39,7 @@ setupInterceptors();
 const app = createApp(App);
 
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 app
   .use(VueAxios, axios)
@@ -46,3 +49,12 @@ app
   .use(i18n)
   .use(Toast, {})
   .mount("#app");
+
+watch(
+  pinia.state,
+  (state) => {
+    // persist the whole state to the session storage whenever it changes
+    sessionStorage.setItem("diveni-store", JSON.stringify(state["diveni-store"]));
+  },
+  { deep: true }
+);

frontend/src/store/index.ts

@@ -9,23 +9,28 @@ import Member from "@/model/Member";
 import AdminVote from "@/model/AdminVote";
 
 export const useDiveniStore = defineStore("diveni-store", {
-  state: () => ({
-    stompClient: undefined as Client | undefined,
-    webSocketConnected: false,
-    memberUpdates: [] as string[],
-    userStories: [] as UserStory[],
-    members: [] as Member[],
-    notifications: [] as Notification[],
-    highlightedMembers: [],
-    timerTimestamp: undefined as string | undefined,
-    tokenId: undefined,
-    projects: [],
-    selectedProject: undefined as Project | undefined,
-    selectedUserStoryIndex: null as number | null,
-    hostEstimation: undefined as AdminVote | undefined,
-    hostVoting: false,
-    autoReveal: false,
-  }),
+  state: () => {
+    return {
+      stompClient: undefined as Client | undefined,
+      webSocketConnected: false,
+      memberUpdates: [] as string[],
+      userStories: [] as UserStory[],
+      members: [] as Member[],
+      notifications: [] as Notification[],
+      highlightedMembers: [],
+      timerTimestamp: undefined as string | undefined,
+      tokenId: undefined,
+      projects: [],
+      selectedProject: undefined as Project | undefined,
+      selectedUserStoryIndex: null as number | null,
+      hostEstimation: undefined as AdminVote | undefined,
+      hostVoting: false,
+      autoReveal: false,
+    };
+  },
+  persist: {
+    storage: sessionStorage, //Storage where we store our "store-state"
+  },
   actions: {
     setMembers(members) {
       this.members = members;

frontend/src/views/PrepareSessionPage.vue

@@ -259,6 +259,7 @@ export default defineComponent({
       }
     },
     async sendCreateSessionRequest() {
+      this.store.clearStore();
       const url = Constants.backendURL + Constants.createSessionRoute;
       const sessionConfig = {
         set: this.selectedCardSetOptions,

frontend/src/views/SessionPage.vue

@@ -485,8 +485,11 @@ export default defineComponent({
       console.log("ON MOUNTED");
       this.estimateFinished = true;
     }
+    if (this.userStoryMode === "US_JIRA") {
+      this.refreshUserStories();
+    }
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener("beforeunload", this.sendUnregisterCommand);
   },
   methods: {