[IMP] awesome_owl: use callback to add counters

define a new state in the playground to hold the summation of the two children counters.
bind the onChange function to increase the sum by one to define the context for the function. define the optional prop as an onChange function that is called when the child's state is changed to update the parent's sum.

chapter-1-part-6

Author: AhmedGamal2212

awesome_owl/static/src/counter/counter.js

@@ -2,13 +2,19 @@ import { Component, useState } from '@odoo/owl';
 
 export class Counter extends Component {
     static template = 'awesome_owl.Counter';
-    static props = {};
+    static props = {
+        onChange: {
+            type: Function,
+            optional: true,
+        },
+    };
 
     setup() {
         this.state = useState({ value: 0 });
     }
 
     increment() {
         this.state.value++;
+        this.props.onChange && this.props.onChange();
     }
 }

awesome_owl/static/src/playground.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, markup } from '@odoo/owl';
+import { Component, markup, useState } from '@odoo/owl';
 import { Counter } from './counter/counter';
 import { Card } from './card/card';
 
@@ -12,5 +12,13 @@ export class Playground extends Component {
     setup() {
         this.escapedValue = "Hello, <b>world</b>!";
         this.notEscapedValue = markup("Hello, <b>world</b>!");
+        this.countersSum = useState({
+            value: 0,
+        });
+        this.increaseSum = this.increaseSum.bind(this);
+    }
+
+    increaseSum() {
+        this.countersSum.value++;
     }
 }

awesome_owl/static/src/playground.xml

@@ -5,8 +5,11 @@
             hello world
         </div>
         <div>
-            <Counter />
-            <Counter /> 
+            <div class="p-3 m-3 border">
+                <Counter onChange="increaseSum" />
+                <Counter onChange="increaseSum" /> 
+                <p>Counters Sum: <t t-esc="countersSum.value" /></p>
+            </div>
             <br />
             <Card title="'another title'" content="escapedValue" />
             <Card title="'yet another title'" content="notEscapedValue" />