From c59e8befbfe57bf8c60bceee95d979bd5b7e5bd4 Mon Sep 17 00:00:00 2001 From: Hicham Guessab Date: Thu, 17 Apr 2025 22:42:48 +0200 Subject: [PATCH] fix: 50 - signal-bug-in-effect --- .../50-bug-in-effect/src/app/app.component.ts | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/apps/signal/50-bug-in-effect/src/app/app.component.ts b/apps/signal/50-bug-in-effect/src/app/app.component.ts index ec6ba09b0..9eb9ebb89 100644 --- a/apps/signal/50-bug-in-effect/src/app/app.component.ts +++ b/apps/signal/50-bug-in-effect/src/app/app.component.ts @@ -40,13 +40,25 @@ export class AppComponent { gpu = model(false); constructor() { - /* - Explain for your junior team mate why this bug occurs ... + /* + It occurs because of the place of each signal triggered in the OR condition : the order of the trigger in the condition matter. + If the triggered one is after the one who is already set as true, it will not trigger the alert because, for the condition value didn't change. + Else if the triggered one is before the one who is already set as true, it will trigger the alert. + We must separate the condition into three effect, a condition for each effect. + + Want to understand the way to do it with the computed solution. Any clue ? */ + + effect(() => { + this.drive() ? alert('Price increased') : undefined; + }); + + effect(() => { + this.ram() ? alert('Price increased') : undefined; + }); + effect(() => { - if (this.drive() || this.ram() || this.gpu()) { - alert('Price increased!'); - } + this.gpu() ? alert('Price increased') : undefined; }); } }