Load product on page lang change and router param update

server/index.js

@@ -595,10 +595,10 @@ function logger(type, message) {
 const clients = new Set();
 
 // Used to broadcast messages to all connected clients
-function broadcastToClients(message){
+function broadcastToClients(message) {
     const payload = JSON.stringify(message);
     clients.forEach((client) => {
-        if(client.readyState === WebSocket.OPEN){
+        if (client.readyState === WebSocket.OPEN) {
             logger('INFO', `Payload sent to the client`);
             client.send(payload);
         }
@@ -614,7 +614,7 @@ wss.on('connection', (ws) => {
     // { uuid: <uuid>, lock: false }
     ws.on('message', function (msg) {
         const message = JSON.parse(msg);
-        const {uuid, lock} = message;
+        const { uuid, lock } = message;
 
         if (!uuid) {
             ws.send(JSON.stringify({ status: 'fail', message: 'UUID not provided.' }));
@@ -637,11 +637,14 @@ wss.on('connection', (ws) => {
                 const secret = generateKey();
                 lockedUuids[uuid] = secret;
                 ws.uuid = uuid;
+                // This msg is not being received by lockStore upon loading product via router params (in particular
+                // from editor-main to editor-metadata). However the below msg is received (upon unlocking). Both
+                // messages sent at exact same time.
                 ws.send(JSON.stringify({ status: 'success', secret }));
 
                 broadcastToClients({
-                    type:'lock',
-                    uuid,
+                    type: 'lock',
+                    uuid
                 });
             }
         } else {
@@ -660,11 +663,13 @@ wss.on('connection', (ws) => {
                 logger('INFO', `A client successfully unlocked the storyline ${uuid}.`);
                 delete lockedUuids[uuid];
                 delete ws.uuid;
-                ws.send(JSON.stringify({ status: 'success' }));
+                // Gets sent at same time as above msg upon loading product via router params. Do we need this?
+                // A call to unlock the product already occurs upon switching pages
+                // ws.send(JSON.stringify({ status: 'success' }));
 
                 broadcastToClients({
-                    type:'unlock',
-                    uuid,
+                    type: 'unlock',
+                    uuid
                 });
             }
         }
@@ -680,7 +685,7 @@ wss.on('connection', (ws) => {
                 delete lockedUuids[ws.uuid];
                 broadcastToClients({
                     type: 'unlock',
-                    uuid: ws.uuid,
+                    uuid: ws.uuid
                 });
             }
         }

src/components/metadata-editor.vue

@@ -22,7 +22,7 @@
                             "
                             :to="{
                                 name: editExisting ? 'metadataExisting' : 'metadataNew',
-                                params: { lang: currLang === 'en' ? 'fr' : 'en' }
+                                params: { lang: currLang === 'en' ? 'fr' : 'en', uid: uuid }
                             }"
                             class="sub-link"
                         >
@@ -594,7 +594,7 @@ import {
 import { VueSpinnerOval } from 'vue3-spinners';
 import { VueFinalModal } from 'vue-final-modal';
 import { useUserStore } from '../stores/userStore';
-import { computed } from "vue";
+import { computed } from 'vue';
 
 import JSZip from 'jszip';
 import axios from 'axios';
@@ -755,15 +755,14 @@ export default class MetadataEditorV extends Vue {
 
     created(): void {
         this.loadExisting = this.editExisting;
-
         // Generate UUID for new product
         this.uuid = (this.$route.params.uid as string) ?? (this.loadExisting ? undefined : uuidv4());
         this.configLang = (this.$route.params.lang as string) || 'en';
 
         // Initialize Storylines config and the configuration structure.
         this.configs = { en: undefined, fr: undefined };
         this.configFileStructure = undefined;
-        
+
         // set any metadata default values for creating new product
         if (!this.loadExisting) {
             // set current date as default

src/router/index.ts

@@ -32,7 +32,7 @@ const routes = [
         }
     },
     {
-        path: '/:lang/editor-metadata',
+        path: '/:lang/editor-metadata/:uid?',
         name: 'metadataExisting',
         component: MetadataEditorV,
         props: { editExisting: true },

src/stores/lockStore.ts

@@ -12,7 +12,7 @@ export const useLockStore = defineStore('lock', {
         result: {} as any,
         broadcast: undefined as BroadcastChannel | undefined,
         confirmationTimeout: undefined as NodeJS.Timeout | undefined, // the timer to show the session extension confirmation modal
-        endTimeout: undefined as NodeJS.Timeout | undefined, // the timer to kill the session due to timeout
+        endTimeout: undefined as NodeJS.Timeout | undefined // the timer to kill the session due to timeout
     }),
     actions: {
         // Opens a connection with the web socket
@@ -37,7 +37,7 @@ export const useLockStore = defineStore('lock', {
                 };
             });
         },
-         // Attempts to lock a storyline for this user.
+        // Attempts to lock a storyline for this user.
         // Returns a promise that resolves if the lock was successfully fetched and rejects if it was not.
         async lockStoryline(uuid: string): Promise<void> {
             // Stop the previous storyline's timer
@@ -55,16 +55,16 @@ export const useLockStore = defineStore('lock', {
                 const handleMessage = (event: MessageEvent) => {
                     const data = JSON.parse(event.data);
 
-                    if(data !== undefined){
-                        if(data.status === 'fail'){
+                    if (data !== undefined) {
+                        if (data.status === 'fail') {
                             this.socket!.removeEventListener('message', handleMessage);
                             reject(new Error(data.message || 'Failed to lock storyline.'));
-                        }
-                        else if (data.status === 'success') {
+                        } else if (data.status === 'success') {
+                            // Should this case only be used for locking storylines? Or unlocking as well?
                             this.socket!.removeEventListener('message', handleMessage);
 
                             this.uuid = uuid;
-                            this.secret = data.secret; 
+                            this.secret = data.secret;
                             this.broadcast = new BroadcastChannel(data.secret);
 
                             resolve();