From ce9c0868198fcabf9ef96c4eac45b88e2a491e5b Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 21 Jul 2022 11:04:39 +0200
Subject: [PATCH] MOBILE-3817 block: Detect changes in block input

---
 .../features/block/components/block/block.ts  | 50 +++++--------------
 .../block/components/block/core-block.html    |  2 +-
 upgrade.txt                                   |  1 +
 3 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/src/core/features/block/components/block/block.ts b/src/core/features/block/components/block/block.ts
index fd51ca57d..8e12855e3 100644
--- a/src/core/features/block/components/block/block.ts
+++ b/src/core/features/block/components/block/block.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, ViewChild, OnDestroy, DoCheck, KeyValueDiffers, KeyValueDiffer, Type } from '@angular/core';
+import { Component, Input, ViewChild, OnDestroy, Type, OnChanges, SimpleChanges } from '@angular/core';
 import { CoreBlockDelegate } from '../../services/block-delegate';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
 import { Subscription } from 'rxjs';
@@ -27,7 +27,7 @@ import type { ICoreBlockComponent } from '@features/block/classes/base-block-com
     templateUrl: 'core-block.html',
     styleUrls: ['block.scss'],
 })
-export class CoreBlockComponent implements OnInit, OnDestroy, DoCheck {
+export class CoreBlockComponent implements OnChanges, OnDestroy {
 
     @ViewChild(CoreDynamicComponent) dynamicComponent?: CoreDynamicComponent<ICoreBlockComponent>;
 
@@ -40,52 +40,26 @@ export class CoreBlockComponent implements OnInit, OnDestroy, DoCheck {
     data: Record<string, unknown> = {}; // Data to pass to the component.
     class?: string; // CSS class to apply to the block.
     loaded = false;
-
     blockSubscription?: Subscription;
 
-    protected differ: KeyValueDiffer<unknown, unknown>; // To detect changes in the data input.
-
-    constructor(
-        differs: KeyValueDiffers,
-    ) {
-        this.differ = differs.find([]).create();
-    }
-
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
-    ngOnInit(): void {
-        if (!this.block) {
-            this.loaded = true;
-
-            return;
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.block && this.block?.visible) {
+            this.updateBlock();
         }
 
-        if (this.block.visible) {
-            // Get the data to render the block.
-            this.initBlock();
+        if (this.data && changes.extraData) {
+            this.data = Object.assign(this.data, this.extraData || {});
         }
     }
 
     /**
-     * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays).
+     * Get block display data and initialises or updates the block. If the block is not supported at the moment, try again if the
+     * available blocks are updated (because it comes from a site plugin).
      */
-    ngDoCheck(): void {
-        if (this.data) {
-            // Check if there's any change in the extraData object.
-            const changes = this.differ.diff(this.extraData);
-            if (changes) {
-                this.data = Object.assign(this.data, this.extraData || {});
-            }
-        }
-    }
-
-    /**
-     * Get block display data and initialises the block once this is available. If the block is not
-     * supported at the moment, try again if the available blocks are updated (because it comes
-     * from a site plugin).
-     */
-    async initBlock(): Promise<void> {
+    async updateBlock(): Promise<void> {
         try {
             const data = await CoreBlockDelegate.getBlockDisplayData(this.block, this.contextLevel, this.instanceId);
 
@@ -97,7 +71,7 @@ export class CoreBlockComponent implements OnInit, OnDestroy, DoCheck {
                     (): void => {
                         this.blockSubscription?.unsubscribe();
                         delete this.blockSubscription;
-                        this.initBlock();
+                        this.updateBlock();
                     },
                 );
 
diff --git a/src/core/features/block/components/block/core-block.html b/src/core/features/block/components/block/core-block.html
index 4761a2dbc..663799e01 100644
--- a/src/core/features/block/components/block/core-block.html
+++ b/src/core/features/block/components/block/core-block.html
@@ -1,4 +1,4 @@
 <!-- Only render the block if it's supported. -->
-<ion-card *ngIf="loaded && componentClass && block.visible" class="{{class}}">
+<ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}">
     <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
 </ion-card>
diff --git a/upgrade.txt b/upgrade.txt
index 88775bda3..ad26a714e 100644
--- a/upgrade.txt
+++ b/upgrade.txt
@@ -6,6 +6,7 @@ information provided here is intended especially for developers.
 - Zoom levels changed from "normal / low / high" to " none / medium / high".
 - --addon-messages-* CSS3 variables have been renamed to --core-messages-*
 - The database constants in CoreSite (WS_CACHE_TABLE, CONFIG_TABLE, LAST_VIEWED_TABLE) and the DBRecord types have been moved to src/core/services/database.
+- The component <core-block> will no longer detect changes of properties inside the extraData object, it will only detect changes if the object itself changes.
 
 === 4.0.0 ===