Fix bugs MyLayout.vue. deprecated in Vue3. Instead, use emit and props to communicate between App.vue & MyLayout.vue for UNDO/REDO functionality

Author: Shanon Lee

src/App.vue

@@ -1,6 +1,13 @@
 
 <template>
-  <router-view />
+  <!-- Get passed down to MyLayout.vue 
+  & listen for custom events emitted from MyLayout.vue -->
+  <router-view 
+    v-on:undo="undoTrigger" 
+    v-on:redo="redoTrigger"
+    v-bind:done-action="doneAction"
+    v-bind:undone-action="undoneAction"
+  />
 </template>
 
 <script>
@@ -25,7 +32,8 @@ let redoMixin = {
       doneAction: [],
       undoneAction: [],
       isTimetraveling: false,
-      initialState: {}
+      initialState: {}, 
+      doneActionLength: 0
     }
   },
   created () {
@@ -35,7 +43,8 @@ let redoMixin = {
         // console.log("We saved the world with a deepclone!", action.payload === cloneDeep)
         action.payload = cloneDeep(action.payload)
       }
-      this.doneAction.push(action)
+      this.doneAction.push(action);
+      // console.log(`From app.vue: ${action.payload}`)
       // console.log('this is the action we are logging',action)
       // console.log('this is in our redo queue', this.undoneAction[this.undoneAction.length-1])
       // console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
@@ -87,7 +96,6 @@ let redoMixin = {
       }
 
       this.isTimetraveling = true
-
       let undone = this.doneAction.pop()
 
       /* assuming we have have something to undo, we check if we are undoing an action that has no feedback
@@ -140,6 +148,18 @@ let redoMixin = {
         // console.log('in the redo loop')
         this.redo()
       }
+    }, 
+
+    // Undo triggered from MyLayout.vue
+    undoTrigger: function() {
+      const throttledUndo = throttle(this.undo, 300);
+      throttledUndo();
+    },
+
+    // Redo triggered from MyLayout.vue
+    redoTrigger: function() {
+      const throttledRedo = throttle(this.redo, 300);
+      throttledRedo();
     }
   }
 }

src/layouts/MyLayout.vue

@@ -20,8 +20,7 @@ Description:
         <q-toolbar-title> OverVue </q-toolbar-title>
         <SlackLoginWindow />
         <div></div>
-        <!-- <i
-          v-if="this.$router.app.$children[0].doneAction.length"
+        <i v-if="doneAction.length"
           class="fa fa-backward"
           aria-hidden="true"
           @click="undo"
@@ -31,14 +30,15 @@ Description:
           class="fa fa-backward"
           id="unavailable"
           aria-hidden="true"
-        ></i> -->
-        <!-- <i
-          v-if="this.$router.app.$children[0].undoneAction.length"
+        ></i>
+        <i
+          v-if="undoneAction.length"
           class="fa fa-forward"
           aria-hidden="true"
           @click="redo"
         ></i>
-        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i> -->
+        <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i>
+
         <!-- <OpenProjectComponent /> -->
         <SaveProjectComponent />
         <ExportProjectComponent />
@@ -116,6 +116,8 @@ import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 import StoreTab from "../components/home_sidebar_items/StoreTab/StoreTab.vue";
 
 export default {
+  // Passed down from App.vue
+  props: ['doneAction', 'undoneAction'],
   data() {
     return {
       tab: "component",
@@ -139,11 +141,16 @@ export default {
     undo() {
       // console.log('UNDO FROM BUTTON')
       // console.log('look at me ', this.$router.app.$children[0].doneAction)
-      this.$router.app.$children[0].undo();
+      // this.$router.app.$children[0].undo();
+      // console.log(this.doneAction);
+      // Emit custom event, listen in App.vue to trigger undo or redo
+      this.$emit('undo');
     },
     redo() {
       // console.log('REDO FROM BUTTON')
-      this.$router.app.$children[0].redo();
+      // this.$router.app.$children[0].redo();
+      this.$emit('redo');
+      console.log('redo')
     },
   },
 };