From 95039dcf8f9a17d22c58d6ddb794f884e6846b4e Mon Sep 17 00:00:00 2001
From: Matthew Evans <7916000+ml-evs@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:37:36 +0100
Subject: [PATCH] Fix bug where blocks would not be loaded automatically (#935)

---
 webapp/src/server_fetch_utils.js |  2 +-
 webapp/src/views/EditPage.vue    | 47 +++++++++++++++++++++-----------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/webapp/src/server_fetch_utils.js b/webapp/src/server_fetch_utils.js
index 876392f00..e3e932fd8 100644
--- a/webapp/src/server_fetch_utils.js
+++ b/webapp/src/server_fetch_utils.js
@@ -694,7 +694,7 @@ export async function requestNewAPIKey() {
   }
 }
 
-export function getBlocksInfos() {
+export async function getBlocksInfos() {
   return fetch_get(`${API_URL}/info/blocks`)
     .then(function (response_json) {
       store.commit("setBlocksInfos", response_json.data);
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index 8aae9d24a..af8f1e100 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -23,6 +23,7 @@
           Add a block
         </a>
         <div
+          v-if="blockInfoLoaded"
           v-show="isMenuDropdownVisible"
           class="dropdown-menu"
           style="display: block"
@@ -56,7 +57,7 @@
   </nav>
 
   <!-- Item-type header information goes here -->
-  <div class="editor-body">
+  <div v-if="itemDataLoaded" class="editor-body">
     <component :is="itemTypeEntry?.itemInformationComponent" :item_id="item_id" />
 
     <FileList :item_id="item_id" :file_ids="file_ids" :stored_files="stored_files" />
@@ -66,7 +67,7 @@
     </div>
 
     <!-- Display the blocks -->
-    <div class="container block-container">
+    <div v-if="blocksLoaded" class="container block-container">
       <transition-group name="block-list" tag="div">
         <div v-for="block_id in item_data.display_order" :key="block_id" class="block-list-item">
           <component :is="getBlockDisplayType(block_id)" :item_id="item_id" :block_id="block_id" />
@@ -141,6 +142,8 @@ export default {
       item_id: this.$route.params?.id || null,
       refcode: this.$route.params?.refcode || null,
       itemDataLoaded: false,
+      blockInfoLoaded: false,
+      blocksLoaded: false,
       isMenuDropdownVisible: false,
       selectedRemoteFiles: [],
       isLoadingRemoteTree: false,
@@ -151,16 +154,16 @@ export default {
   },
   computed: {
     itemType() {
-      return this.$store.state.all_item_data[this.item_id]?.type || null;
+      return this.$store.state.all_item_data[this.item_id]?.type || undefined;
     },
     itemTypeEntry() {
-      return itemTypes[this.itemType] || null;
+      return itemTypes[this.itemType] || undefined;
     },
     navbarColor() {
       return this.itemTypeEntry?.navbarColor || "DarkGrey";
     },
     item_data() {
-      return this.$store.state.all_item_data[this.item_id] || { display_order: [] };
+      return this.$store.state.all_item_data[this.item_id] || null;
     },
     blocks() {
       return this.item_data.blocks_obj;
@@ -185,9 +188,6 @@ export default {
       return this.$store.state.files;
     },
     blocksInfos() {
-      if (Object.keys(this.$store.state.blocksInfos).length == 0) {
-        getBlocksInfos();
-      }
       return this.$store.state.blocksInfos;
     },
     itemApiUrl() {
@@ -205,6 +205,7 @@ export default {
     },
   },
   created() {
+    this.getBlocksInfo();
     this.getSampleData();
     this.interval = setInterval(() => this.setLastModified(), 30000);
   },
@@ -269,24 +270,38 @@ export default {
       saveItem(this.item_id);
       this.lastModified = "just now";
     },
-    getSampleData() {
+    async getSampleData() {
       if (this.item_id == null) {
         getItemByRefcode(this.refcode).then(() => {
+          this.itemDataLoaded = true;
           this.item_id = this.$store.state.refcode_to_id[this.refcode];
+          this.updateBlocks();
         });
       } else {
         getItemData(this.item_id).then(() => {
+          this.itemDataLoaded = true;
           this.refcode = this.item_data.refcode;
+          this.updateBlocks();
         });
       }
-      this.itemDataLoaded = true;
+    },
 
-      // update each block asynchronously
-      this.item_data.display_order.forEach((block_id) => {
-        console.log(`calling update on block ${block_id}`);
-        updateBlockFromServer(this.item_id, block_id, this.item_data.blocks_obj[block_id]);
-      });
-      this.setLastModified();
+    async updateBlocks() {
+      if (this.itemDataLoaded) {
+        // update each block asynchronously
+        this.item_data.display_order.forEach((block_id) => {
+          console.log(`calling update on block ${block_id}`);
+          updateBlockFromServer(this.item_id, block_id, this.item_data.blocks_obj[block_id]);
+        });
+        this.blocksLoaded = true;
+        this.setLastModified();
+      }
+    },
+    async getBlocksInfo() {
+      if (Object.keys(this.$store.state.blocksInfos).length == 0) {
+        await getBlocksInfos();
+      }
+      this.blockInfoLoaded = true;
     },
     leavePageWarningListener(event) {
       event.preventDefault;