Merge pull request #4 from oslabs-beta/typescript

Typescript

Author: lindenyoung

package-lock.json

@@ -28,6 +28,7 @@
     "@quasar/cli": "^1.3.2",
     "@quasar/extras": "^1.12.5",
     "@ssthouse/vue3-tree-chart": "^0.2.3",
+    "@types/node": "^18.8.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "bootstrap": "^5.2.0",
@@ -55,6 +56,7 @@
     "vue": "^3.2.31",
     "vue-accessible-color-picker": "^4.0.3",
     "vue-draggable-resizable": "^2.3.0",
+    "vue-loader": "^17.0.0",
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "4.0.13",
@@ -67,6 +69,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
+    "@pinia/testing": "^0.0.14",
     "@quasar/app": "^3.3.3",
     "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.7",
     "@vue/devtools": "^6.0.12",

package.json

@@ -9,12 +9,6 @@
   />
 </template>
 
-<script>
-export default {
-  name: "App",
-};
-</script>
-
 <script setup>
 // import { defineComponent } from "vue";
 // import ElementPlus from 'element-plus'; // importing element plus component library
@@ -41,19 +35,19 @@ const isTimetraveling = ref(false);
 
 const store = useStore();
 
-const subscribeAction = store.$subscribe((action, state) => {
-  if (typeof action.payload === "object") {
-    action.payload = cloneDeep(action.payload);
+store.$onAction((action) => {
+  if (typeof action.args[0] === "object") {
+    action.args = cloneDeep(action.args[0]);
   }
   doneAction.value.push(action);
   if (!isTimetraveling.value) {
     if (undoneAction.value[undoneAction.value.length - 1]) {
       if (
-        action.type ===
-          undoneAction.value[undoneAction.value.length - 1].type &&
+        action.name ===
+          undoneAction.value[undoneAction.value.length - 1].name &&
         deepEqual(
-          action.payload,
-          undoneAction.value[undoneAction.value.length - 1].payload
+          action.args,
+          undoneAction.value[undoneAction.value.length - 1].args[0]
         )
       ) {
         undoneAction.value.pop();
@@ -98,10 +92,10 @@ const undo = () => {
             if this happens we keep popping the doneAction.value queue and building up the redo queue. */
   if (undone !== undefined) {
     undoneAction.value.push(undone);
-    if (ignoredActions.has(undone.type)) {
+    if (ignoredActions.has(undone.name)) {
       while (
         doneAction.value[doneAction.value.length - 1] &&
-        ignoredActions.has(doneAction.value[doneAction.value.length - 1].type)
+        ignoredActions.has(doneAction.value[doneAction.value.length - 1].name)
       ) {
         undoneAction.value.push(doneAction.value.pop());
       }
@@ -117,9 +111,8 @@ const undo = () => {
   store.emptyState();
 
   doneAction.value.forEach((action) => {
-    const actionType = action.type;
-    store.action.type(cloneDeep(action.payload));
-    doneAction.pop();
+    store[action.name](cloneDeep(action.args[0]));
+    doneAction.value.pop();
   });
   isTimetraveling.value = false;
 };
@@ -130,11 +123,11 @@ const redo = () => {
   // we have to set timeTraveling to true to preserve the undoneAction array while we make changes
   isTimetraveling.value = true;
   if (action) {
-    const actionType = action.type;
-    store[actionType](cloneDeep(action.payload));
+    const actionName = action.name;
+    store[actionName](cloneDeep(action.args[0]));
   }
   isTimetraveling.value = false;
-  if (action && ignoredActions.has(action.type)) {
+  if (action && ignoredActions.has(action.name)) {
     redo();
   }
 };