made the default state dynamically generated on initialization

Author: LOLDragoon

src/App.vue

@@ -8,15 +8,16 @@
 import { SET_ACTIVE_COMPONENT } from './store/types'
 const deepEqual = require('lodash.isequal')
 const cloneDeep = require('lodash.clonedeep')
-
+import {defaultState} from './store/state/index.js'
 
 let redoMixin = {
   data() {
         return {
           // banana:[],
           doneAction:[],
           undoneAction:[],
-          isTimetraveling: false
+          isTimetraveling: false,
+          initialState:{}
         }
       },
       
@@ -60,6 +61,9 @@ let redoMixin = {
            this.redo()
           }
         });
+        //console.log("do we want this? or this.$store.state?", this.$store.state)
+        this.initialState = defaultState(this.$store.state)
+
       },
 
       methods: {
@@ -86,7 +90,11 @@ let redoMixin = {
           //  while (this.doneAction[this.doneAction.length-1] &&
           //   (this.doneAction[this.doneAction.length - 1].type === "setActiveComponent" ||
           //    this.doneAction[this.doneAction.length - 1].type === "updateComponentPosition" ))
-          this.$store.commit("EMPTY_STATE",this.$store)
+          let payload = {
+            initialState: this.initialState,
+            store: this.$store
+          }
+          this.$store.commit("EMPTY_STATE",payload)
           console.log(this.$store)
           this.doneAction.forEach(action => {
             console.log("In the loop",this.$store)

src/components/ComponentDisplay.vue

@@ -252,7 +252,7 @@ export default {
         routeArray: this.routes[this.activeRoute],
         activeComponentData: this.activeComponentData
       }
-      console.log("x: ",payload.x,"y:",payload.y)
+      console.log("x: ",payload.x,"y: ",payload.y)
       //this.updateStartingPosition(payload);
     },
 

src/store/mutations.js

@@ -1,6 +1,7 @@
 import * as types from './types'
 import icons from './state/icons.js'
 import htmlElementMap from './state/htmlElementMap.js'
+const cloneDeep = require('lodash.clonedeep')
 // import VuexStore from './index'
 // import { getDefault, defaultState } from './state/index.js'
 
@@ -80,47 +81,48 @@ const mutations = {
   },
   // empty state
   [types.EMPTY_STATE]: (state, payload) => {
-    console.log('This is our defaultstate still', defaultState)
-    console.log(payload)
-    payload.replaceState({
-      icons,
-      htmlElementMap,
-      // every single time we create a component
-      // sent to export project component
-      componentMap: {
-        App: {
-          componentName: 'App',
-          children: ['HomeView'],
-          htmlList: []
-        },
-        HomeView: {
-          componentName: 'HomeView',
-          children: [],
-          htmlList: []
-        }
-        // NewView: {}
-      },
-      routes: {
-        HomeView: []
-        // NewView: []
-      },
-      userActions: [],
-      userState: {},
-      /**
-       *
-       */
-      componentNameInputValue: '',
-      projects: [{ filename: 'Untitled-1', lastSavedLocation: '' }],
-      activeRoute: 'HomeView',
-      activeComponent: '',
-      selectedElementList: [],
-      projectNumber: 2,
-      activeTab: 0,
-      componentChildrenMultiselectValue: [],
-      modalOpen: false,
-      parentSelected: false,
-      imagePath: ''
-    })
+    // console.log('This is our defaultstate still', defaultState)
+    console.log("hopefully this stays pure", payload)
+    payload.store.replaceState(cloneDeep(payload.initialState))
+      // {
+    //   icons,
+    //   htmlElementMap,
+    //   // every single time we create a component
+    //   // sent to export project component
+    //   componentMap: {
+    //     App: {
+    //       componentName: 'App',
+    //       children: ['HomeView'],
+    //       htmlList: []
+    //     },
+    //     HomeView: {
+    //       componentName: 'HomeView',
+    //       children: [],
+    //       htmlList: []
+    //     }
+    //     // NewView: {}
+    //   },
+    //   routes: {
+    //     HomeView: []
+    //     // NewView: []
+    //   },
+    //   userActions: [],
+    //   userState: {},
+    //   /**
+    //    *
+    //    */
+    //   componentNameInputValue: '',
+    //   projects: [{ filename: 'Untitled-1', lastSavedLocation: '' }],
+    //   activeRoute: 'HomeView',
+    //   activeComponent: '',
+    //   selectedElementList: [],
+    //   projectNumber: 2,
+    //   activeTab: 0,
+    //   componentChildrenMultiselectValue: [],
+    //   modalOpen: false,
+    //   parentSelected: false,
+    //   imagePath: ''
+    // })
   },
 
   // add parent

src/store/state/index.js

@@ -39,9 +39,27 @@ const newState = {
   componentChildrenMultiselectValue: [],
   modalOpen: false,
   parentSelected: false,
-  imagePath: ''
+  imagePath: {
+    HomeView:'',
+  }
 }
 
+//closured method to ensure we only ever write the default state ONCE
+const writeTheDefault = () => {
+  let initial = {}
+  let needsToRun = true;
+  function onced(payload){
+    if(needsToRun){
+      initial = cloneDeep(payload)
+      needsToRun = false;
+    }
+    return initial
+  }
+  return onced
+}
+
+const defaultState = writeTheDefault()
+
 // const defaultState = 
 // {
 //   icons,
@@ -89,4 +107,5 @@ const newState = {
 
 
 
-export default newState
+export default newState
+export {defaultState}