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

frontend/package.json

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

frontend/src/components/UserStories.vue

@@ -55,7 +55,7 @@
           readonly
           size="sm"
           :placeholder="t('page.session.before.userStories.placeholder.userStoryTitle')"
-          @blur="publishChanges(index, false)"
+          @click="publishChanges(index, false)"
         />
 
         <b-badge id="badge" class="p-2">
@@ -111,6 +111,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useDiveniStore } from "@/store";
 import UserStory from "../model/UserStory";
 import { useI18n } from "vue-i18n";
 
@@ -124,8 +125,9 @@ export default defineComponent({
     hostSelectedStoryIndex: { type: Number, required: false, default: null },
   },
   setup() {
+    const store = useDiveniStore();
     const { t } = useI18n();
-    return { t };
+    return { store, t };
   },
   data() {
     return {
@@ -149,6 +151,7 @@ export default defineComponent({
   },
   mounted() {
     this.userStories = this.initialStories as Array<UserStory>;
+    this.selectedStoryIndex = this.store.selectedUserStoryIndex;
   },
   methods: {
     setUserStoryAsActive(index) {
@@ -197,6 +200,7 @@ export default defineComponent({
       this.publishChanges(index, true);
     },
     publishChanges(index, remove) {
+      this.store.setUserStoryIndex(index);
       this.$emit("userStoriesChanged", { us: this.userStories, idx: index, doRemove: remove });
     },
     markUserStory(index) {

frontend/src/main.ts

@@ -3,14 +3,15 @@
   Diveni - The Planing-Poker App
   Copyright (C) 2022 AUME-Team 21/22, HTWG Konstanz
 */
-import Vue, { createApp } from "vue";
+import Vue, { createApp, watch } from "vue";
 import axios from "axios";
 import VueAxios from "vue-axios";
 import App from "./App.vue";
 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";
 import "./assets/style/main.scss";
 import Toast from "vue-toastification";
@@ -28,6 +29,7 @@ setupInterceptors();
 const app = createApp(App);
 
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 app
   .use(VueAxios, axios)
@@ -37,3 +39,12 @@ app
   .use(i18n)
   .use(Toast, {})
   .mount("#app");
+
+watch(
+  pinia.state,
+  (state) => {
+    // persist the whole state to the local storage whenever it changes
+    localStorage.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: localStorage, //Storage where we store our "store-state"
+  },
   actions: {
     setMembers(members) {
       this.members = members;
@@ -117,6 +122,7 @@ export const useDiveniStore = defineStore("diveni-store", {
       this.notifications = [];
       this.webSocketConnected = false;
       this.stompClient = undefined;
+      this.selectedUserStoryIndex = null;
     },
     clearStoreWithoutUserStories() {
       this.members = [];
@@ -134,6 +140,9 @@ export const useDiveniStore = defineStore("diveni-store", {
     setUserStories({ stories }) {
       this.userStories = stories;
     },
+    setUserStoryIndex(idx) {
+      this.selectedUserStoryIndex = idx;
+    },
     setTokenId(tokenId) {
       this.tokenId = tokenId;
     },

frontend/src/views/LandingPage.vue

@@ -161,7 +161,7 @@ export default defineComponent({
     };
   },
   created() {
-    this.disconnectFromBackendWS();
+    this.store.clearStoreWithoutUserStories();
     this.checkAdminCookie();
   },
   methods: {
@@ -228,9 +228,6 @@ export default defineComponent({
         },
       });
     },
-    disconnectFromBackendWS() {
-      this.store.disconnectFromBackendWS();
-    },
   },
 });
 </script>

frontend/src/views/PrepareSessionPage.vue

@@ -258,7 +258,13 @@ export default defineComponent({
         return ["notSelectedTab", "notSelectedTextColor"];
       }
     },
+    sendUnregisterCommand() {
+      const endPoint = `${Constants.webSocketUnregisterRoute}`;
+      this.store.sendViaBackendWS(endPoint);
+      this.store.clearStore();
+    },
     async sendCreateSessionRequest() {
+      this.sendUnregisterCommand();
       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: {
@@ -691,7 +694,7 @@ export default defineComponent({
     sendUnregisterCommand() {
       const endPoint = `${Constants.webSocketUnregisterRoute}`;
       this.store.sendViaBackendWS(endPoint);
-      this.store.clearStore();
+      this.store.clearStoreWithoutUserStories();
     },
     sendVotingFinishedMessage() {
       if (!this.estimateFinished) {