From d6957a2932693faf0ef61d113386eafb92c97e30 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 27 May 2021 14:44:35 +0100
Subject: [PATCH 1/2] fix(frontend): globalicious apollolicious loading fix

+ some subtle todo hints
---
 .../src/components/GlobalsBuilder.vue         | 37 ++++++++++++-------
 packages/frontend/src/views/Globals.vue       | 25 +++++++++----
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index a865bcd26..d2aa2d703 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -1,17 +1,23 @@
 <template>
-  <v-card rounded="lg" class="pa-4 mb-4" elevation="0">
-    <v-row justify="end">
+  <v-card rounded="lg" class="py-4 px-0 mb-4" elevation="0">
+    <v-card-actions>
+      <v-spacer />
       <v-btn color="primary" small @click="resetGlobals">reset globals</v-btn>
-    </v-row>
-    <globals-entry
-      v-if="!$apollo.loading"
-      :entries="globalsArray"
-      :path="[]"
-      @add-prop="addProp"
-      @remove-prop="removeProp"
-      @field-to-object="fieldToObject"
-      @object-to-field="objectToField"
-    />
+    </v-card-actions>
+    <v-card-text>
+      <globals-entry
+        v-if="!$apollo.loading"
+        :entries="globalsArray"
+        :path="[]"
+        @add-prop="addProp"
+        @remove-prop="removeProp"
+        @field-to-object="fieldToObject"
+        @object-to-field="objectToField"
+      />
+      <div v-else>
+        <v-skeleton-loader type="list-item-three-line" />
+      </div>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -32,8 +38,11 @@ export default {
           id: this.commitId
         }
       },
-      update: (data) => {
+      update(data) {
+        // console.log( data.stream.object.data )
         delete data.stream.object.data.__closure
+
+        this.globalsArray = this.nestedGlobals(data.stream.object.data)
         return data.stream.object
       }
     }
@@ -57,7 +66,7 @@ export default {
   computed: {},
   mounted() {
     //?: how to run this only once but after apollo query is finished loading
-    this.globalsArray = this.nestedGlobals(this.object.data)
+    // this.globalsArray = this.nestedGlobals(this.object.data)
   },
   methods: {
     nestedGlobals(data) {
diff --git a/packages/frontend/src/views/Globals.vue b/packages/frontend/src/views/Globals.vue
index fc34081e9..c36e071d1 100644
--- a/packages/frontend/src/views/Globals.vue
+++ b/packages/frontend/src/views/Globals.vue
@@ -1,21 +1,30 @@
 <template>
   <v-container>
-    <h1>wow globals</h1>
-    <v-row>
-      <v-col>
-        <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
-      </v-col>
-    </v-row>
+    <div v-if="!commitId && !$apollo.loading">
+      <h1>Empty State</h1>
+      <p>TODO: Help, there's no globals branch and/or no commits on it!</p>
+    </div>
+    <div v-else>
+      <h1>wow globals</h1>
+      <v-row>
+        <v-col>
+          <globals-builder v-if="stream" :stream-id="streamId" :commit-id="commitId" />
+        </v-col>
+      </v-row>
+      <h1>History</h1>
+      <p>TODO</p>
+    </div>
   </v-container>
 </template>
 
 <script>
 import branchQuery from '../graphql/branch.gql'
+import GlobalsBuilder from '../components/GlobalsBuilder'
 
 export default {
   name: 'Globals',
   components: {
-    GlobalsBuilder: () => import('../components/GlobalsBuilder')
+    GlobalsBuilder
   },
   apollo: {
     stream: {
@@ -33,7 +42,7 @@ export default {
       return this.$route.params.streamId
     },
     commitId() {
-      return this.stream.branch.commits.items[0].referencedObject
+      return this.stream?.branch?.commits?.items[0].referencedObject
     }
   }
 }

From c6b9f7bf9326a2432862e137fa680be2f253139f Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 27 May 2021 14:45:01 +0100
Subject: [PATCH 2/2] chore(frontend): removes console.log because it's evil

---
 packages/frontend/src/components/GlobalsBuilder.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/frontend/src/components/GlobalsBuilder.vue b/packages/frontend/src/components/GlobalsBuilder.vue
index d2aa2d703..ee67fca45 100644
--- a/packages/frontend/src/components/GlobalsBuilder.vue
+++ b/packages/frontend/src/components/GlobalsBuilder.vue
@@ -39,9 +39,7 @@ export default {
         }
       },
       update(data) {
-        // console.log( data.stream.object.data )
         delete data.stream.object.data.__closure
-
         this.globalsArray = this.nestedGlobals(data.stream.object.data)
         return data.stream.object
       }