Fixed issue where project wouldnt save due to parser type error

Co-authored-by: Jeffrey Sul <jeffreydsul@gmail.com>
Co-authored-by: Kenneth Lee <kennyea87@gmail.com>
Co-authored-by: Ryan Bender <rdbender@me.com>
Co-authored-by: Sonny Nguyen <sonnynguyen163@gmail.com>

Author: 5 people

src/components/file_system_interface/SaveProjectComponent.vue

@@ -44,8 +44,9 @@ export default {
     },
     // deletes anything attached to html element
     parseAndDelete (htmlList) {
-      console.log(htmlList)
+      // console.log('htmlList in saveProjectComp: ', htmlList)
       htmlList.forEach(element => {
+        if (!Array.isArray(element.children)) console.log('This should be an array', element.children)
         if (element.children.length > 0) {
           // console.log('in recurse')
           this.parseAndDelete(element.children)

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -138,138 +138,7 @@ Description:
       </q-expansion-item>
  </q-list>
     </div>
-
-        <!-- <q-list>
-      <q-expansion-item popup default-opened icon="mail" label="Inbox" caption="5 unread emails">
-        <q-separator />
-        <q-card>
-          <q-card-section>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
-            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
-            eveniet doloribus ullam aliquid.
-          </q-card-section>
-        </q-card>
-      </q-expansion-item>
-      </q-list> -->
-    <!-- dropdown to select a component to edit -->
   </div>
-  <!-- moved this to createComponent -->
-  <!-- <br/> -->
-  <!-- removed text that displays what componenet is selected -->
-  <!-- <p class="editName" v-if="this.activeComponentObj"> 
-      Currently selected component: {{ this.activeComponentObj.componentName }}
-    </p> -->
-  <!-- removed delete button for now -->
-  <!-- <p class="editName" v-else>Select a component</p> -->
-
-  <!-- <br/>
-    <div v-if="this.activeComponentData">
-    <br/> -->
-  <!-- @input="selectParent"
-      @open="resetActiveComponent" -->
-
-  <!-- <br/> -->
-
-  <!-- <section id="counter" style="color: white">  Layer:
-      <q-btn
-              class="btn"
-              color="transparent"
-              text-color="white"
-              label="-"
-              @click="e => handleLayer(e)"
-            />
-     {{ this.activeComponentObj.z }}
-            <q-btn
-              class="btn"
-              color="transparent"
-              text-color="white"
-              label="+"
-              @click="e => handleLayer(e)"
-            />
-          </section>
-    <br/>
-    <p> Toggle to edit: </p>
-    <div class="toggleRow">
-      <section class="toggleText"> HTML elements</section>
-      <toggle-button v-model="showHTML" class="toggle"/>
-    </div>
-    <HTMLQueue v-if="showHTML"/>
-    <br/>
-    <div class="toggleRow">
-      <section class="toggleText"> State</section>
-      <toggle-button v-model="showState" class="toggle"/>
-    </div>
-    <hr v-if="showState">
-    <p v-if='showState && !this.activeComponentObj.state.length'>No state in component</p>
-    <a
-      v-for="s in this.activeComponentData.state"
-      :key="s"
-    >
-      <q-list v-if="showState" class="list-item" dense bordered separator>
-       <q-item clickable v-ripple class="list-item">
-          <q-item-section>
-            <div class="component-container">
-              <div class="component-info">
-                {{s}}
-              </div>
-              <q-btn round flat icon="highlight_off" v-on:click="deleteState(s)" />
-            </div>
-          </q-item-section>
-        </q-item>
-      </q-list>
-      </a>
-    <br/>
-    <div class="toggleRow">
-      <section class="toggleText"> Actions</section>
-      <toggle-button v-model="showActions" class="toggle"/>
-    </div>
-    <hr v-if="showActions">
-    <p v-if='showActions && !this.activeComponentObj.actions.length'>No actions in component</p>
-        <a
-      v-for="action in this.activeComponentData.actions"
-      :key="action"
-    >
-      <q-list v-if="showActions" class="list-item" dense bordered separator>
-        <q-item clickable v-ripple class="list-item">
-          <q-item-section>
-            <div class="component-container">
-              <div class="component-info">
-                {{action}}
-              </div>
-              <q-btn round flat icon="highlight_off" v-on:click="deleteAction(action)" />
-            </div>
-          </q-item-section>
-        </q-item>
-      </q-list>
-      </a>
-    <br/>
-    <div class="toggleRow">
-      <section class="toggleText">Props </section>
-      <toggle-button v-model="showProps" class="toggle" justify='end'/>
-    </div>
-    <hr v-if="showProps">
-    <p v-if='showProps && !this.activeComponentObj.props.length'>No props in component</p>
-    <a
-      v-for="prop in this.activeComponentData.props"
-      :key="prop"
-    > -->
-  <!-- v-on:click="onActivated(prop)" -->
-
-  <!-- <q-list v-if="showProps" class="list-item" dense bordered separator>
-        <q-item clickable v-ripple class="list-item">
-          <q-item-section>
-            <div class="component-container">
-              <div class="component-info">
-                {{prop}}
-              </div>
-              <q-btn round flat icon="highlight_off" v-on:click.stop="deleteProp(prop)" />
-            </div>
-          </q-item-section>
-        </q-item>
-      </q-list>
-      </a>
-    </div>
-    <p v-else> <br/> Select Component to Enable Edit </p> -->
 </template>
 
 <script>

src/store/mutations.js

@@ -505,17 +505,12 @@ const mutations = {
     state.componentMap[state.parentSelected].children.push(
       payload.componentName
     )
-    state.componentMap[state.parentSelected].htmlList.push(
-      payload.componentName
-    )
   },
 
   [types.ADD_COPIED_PARENT]: (state, payload) => {
     const parentSelected = Object.values(payload.parent)[0].componentName;
     // push into parent's children array
     state.componentMap[parentSelected].children.push(payload.componentName)
-    // push into parent's htmlList array
-    state.componentMap[parentSelected].htmlList.push(payload.componentName)
   },
 
   [types.DELETE_ACTIVE_COMPONENT]: state => {
@@ -613,6 +608,7 @@ const mutations = {
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
     const temp = state.componentMap[state.activeComponent].children
     // delete block
+    console.log('UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUEs payload', payload)
     if (payload.length < temp.length) {
       const child = temp.filter(el => !payload.includes(el))
       // console.log('delete child: ', child)
@@ -642,13 +638,14 @@ const mutations = {
         .children.filter(el => !payload.includes(el))
       state.componentMap[child[0]].parent[state.activeComponent] = state.componentMap[state.activeComponent]
     }
-    const copy = [...state.componentMap[state.activeComponent].htmlList]
-    for (const x in payload) {
-      if (!copy.includes(payload[x])) {
-        copy.push(payload[x])
-      }
-    }
-    state.componentMap[state.activeComponent].htmlList = copy
+    // Adding children strings to htmlList -> removed to prevent JSON parser errors
+    // const copy = [...state.componentMap[state.activeComponent].htmlList]
+    // for (const x in payload) {
+    //   if (!copy.includes(payload[x])) {
+    //     copy.push(payload[x])
+    //   }
+    // }
+    // state.componentMap[state.activeComponent].htmlList = copy
   },
   // invoked when element is double clicked, changing the boolean value
   [types.UPDATE_OPEN_MODAL]: (state, payload) => {