From 53cc1997080d8f21c089ebb659ecdacb0d281068 Mon Sep 17 00:00:00 2001
From: Richard LASJUNIES <richard.lasjunies@siemens.com>
Date: Fri, 8 May 2020 18:12:01 +0200
Subject: [PATCH 1/3] add internal state page

---
 src/SUMMARY.md                           |   1 +
 src/concepts/components/internalstate.md | 169 +++++++++++++++++++++++
 src/lib.rs                               |  10 ++
 3 files changed, 180 insertions(+)
 create mode 100644 src/concepts/components/internalstate.md

diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index 99f9c4e..ef12960 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -21,6 +21,7 @@
   * [Literals & Expressions](concepts/html/literals-and-expressions.md)
   * [Components](concepts/html/components.md)
 * [Components](concepts/components/README.md)
+  * [Internal state](concepts/components/internalstate.md)
   * [Properties](concepts/components/properties.md)
   * [Callbacks](concepts/components/callbacks.md)
   * [Refs](concepts/components/refs.md)
diff --git a/src/concepts/components/internalstate.md b/src/concepts/components/internalstate.md
new file mode 100644
index 0000000..0e4b674
--- /dev/null
+++ b/src/concepts/components/internalstate.md
@@ -0,0 +1,169 @@
+---
+description: Component can maintain it's own state and render information depending on it
+---
+
+# Internal State
+
+The component can manage it's own state using the Rust struct that implement the trait `Component`. The HTML rendering is based on this state.
+When state change there is possibility to re-render the component.
+
+> TODO documentation on state mutation
+
+```rust
+use yew::prelude::*;
+
+pub struct InternalStateComponent {
+    name:String,
+}
+
+impl Component for InternalStateComponent {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            name: "Clark".into(),
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <>
+                <h1>{format!("Hello {}",self.name)}</h1>
+            </>
+        }
+    }
+}
+```
+
+## State definition
+
+Here we add the `name` field in the struct
+
+```rust
+# use yew::prelude::*;
+#
+// ...
+pub struct InternalStateComponent {
+    name:String,
+}
+// ...
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+#
+#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+#         Self {
+#             name: "Clark".into(),
+#         }
+#     }
+#
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+#     fn view(&self) -> Html {
+#         html! {
+#             <>
+#                 <h1>{format!("Hello {}",self.name)}</h1>
+#             </>
+#         }
+#     }
+# }
+
+```
+
+## State initialization
+
+The component lifecycle will initialize the state in the `create` method.
+
+```rust
+# use yew::prelude::*;
+#
+# pub struct InternalStateComponent {
+#     name:String,
+# }
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+// ...
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            name: "Clark".into(),
+        }
+    }
+// ...
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+#     fn view(&self) -> Html {
+#         html! {
+#             <>
+#                 <h1>{format!("Hello {}",self.name)}</h1>
+#             </>
+#         }
+#     }
+# }
+```
+
+## Rendering based on the state value
+
+Using the `html!` macro we can render html based on the component state in the `view` method
+
+> please refer to the `html!` macro documentation page for more detail on the HTML rendering
+
+```rust
+# use yew::prelude::*;
+#
+# pub struct InternalStateComponent {
+#     name:String,
+# }
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+#
+#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+#         Self {
+#             name: "Clark".into(),
+#         }
+#     }
+#
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+// ...
+    fn view(&self) -> Html {
+        html! {
+            <>
+                <h1>{format!("Hello {}",self.name)}</h1>
+            </>
+        }
+    }
+// ...
+# }
+```
diff --git a/src/lib.rs b/src/lib.rs
index 69b0734..80b2168 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -18,3 +18,13 @@ fn test_optimizations() {
 fn test_properties() {
     doctest!("concepts/components/properties.md");
 }
+
+#[wasm_bindgen_test]
+fn test_component_readme() {
+    doctest!("concepts/components/readme.md");
+}
+
+#[wasm_bindgen_test]
+fn test_component_internalstate() {
+    doctest!("concepts/components/internalstate.md");
+}

From 652b0dcdb82caab78d15dc28cc9abc3b16ecb81a Mon Sep 17 00:00:00 2001
From: Richard LASJUNIES <richard.lasjunies@siemens.com>
Date: Fri, 8 May 2020 18:38:33 +0200
Subject: [PATCH 2/3] remove temporarly tests before to became crazy

---
 src/lib.rs | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/lib.rs b/src/lib.rs
index 80b2168..69b0734 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -18,13 +18,3 @@ fn test_optimizations() {
 fn test_properties() {
     doctest!("concepts/components/properties.md");
 }
-
-#[wasm_bindgen_test]
-fn test_component_readme() {
-    doctest!("concepts/components/readme.md");
-}
-
-#[wasm_bindgen_test]
-fn test_component_internalstate() {
-    doctest!("concepts/components/internalstate.md");
-}

From 037f4442baa765885110d63c092ed5d9eeb237ae Mon Sep 17 00:00:00 2001
From: Richard LASJUNIES <richard.lasjunies@siemens.com>
Date: Sun, 10 May 2020 16:01:00 +0200
Subject: [PATCH 3/3] update following Teymour feedbacks

---
 src/concepts/components/internalstate.md | 107 +++--------------------
 1 file changed, 12 insertions(+), 95 deletions(-)

diff --git a/src/concepts/components/internalstate.md b/src/concepts/components/internalstate.md
index 0e4b674..ebb9ba4 100644
--- a/src/concepts/components/internalstate.md
+++ b/src/concepts/components/internalstate.md
@@ -1,13 +1,11 @@
 ---
-description: Component can maintain it's own state and render information depending on it
+description: A component can maintain its own state and render information depending on it
 ---
 
-# Internal State
+# Internal state
 
-The component can manage it's own state using the Rust struct that implement the trait `Component`. The HTML rendering is based on this state.
-When state change there is possibility to re-render the component.
-
-> TODO documentation on state mutation
+The component can manage it's own state using a struct that implement the trait `Component`. The HTML rendering is based on this state.
+When the state change the component might be re-rendered.
 
 ```rust
 use yew::prelude::*;
@@ -27,11 +25,11 @@ impl Component for InternalStateComponent {
     }
 
     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
+        false
     }
 
     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
+        false
     }
 
     fn view(&self) -> Html {
@@ -44,46 +42,16 @@ impl Component for InternalStateComponent {
 }
 ```
 
-## State definition
+## Defining state
 
-Here we add the `name` field in the struct
+Here we add the `name` field to the struct
 
 ```rust
-# use yew::prelude::*;
-#
 // ...
 pub struct InternalStateComponent {
     name:String,
 }
 // ...
-#
-# impl Component for InternalStateComponent {
-#     type Message = ();
-#     type Properties = ();
-#
-#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-#         Self {
-#             name: "Clark".into(),
-#         }
-#     }
-#
-#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-#         true
-#     }
-#
-#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-#         true
-#     }
-#
-#     fn view(&self) -> Html {
-#         html! {
-#             <>
-#                 <h1>{format!("Hello {}",self.name)}</h1>
-#             </>
-#         }
-#     }
-# }
-
 ```
 
 ## State initialization
@@ -91,15 +59,6 @@ pub struct InternalStateComponent {
 The component lifecycle will initialize the state in the `create` method.
 
 ```rust
-# use yew::prelude::*;
-#
-# pub struct InternalStateComponent {
-#     name:String,
-# }
-#
-# impl Component for InternalStateComponent {
-#     type Message = ();
-#     type Properties = ();
 // ...
     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
         Self {
@@ -107,61 +66,19 @@ The component lifecycle will initialize the state in the `create` method.
         }
     }
 // ...
-#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-#         true
-#     }
-#
-#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-#         true
-#     }
-#
-#     fn view(&self) -> Html {
-#         html! {
-#             <>
-#                 <h1>{format!("Hello {}",self.name)}</h1>
-#             </>
-#         }
-#     }
-# }
 ```
 
-## Rendering based on the state value
+## Rendering using the state
 
-Using the `html!` macro we can render html based on the component state in the `view` method
+Using the `html!` macro we can render html using the state from the `view` method
 
-> please refer to the `html!` macro documentation page for more detail on the HTML rendering
+> please refer to the `html!` macro documentation page for more detail on how to render components as HTML
 
 ```rust
-# use yew::prelude::*;
-#
-# pub struct InternalStateComponent {
-#     name:String,
-# }
-#
-# impl Component for InternalStateComponent {
-#     type Message = ();
-#     type Properties = ();
-#
-#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-#         Self {
-#             name: "Clark".into(),
-#         }
-#     }
-#
-#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-#         true
-#     }
-#
-#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-#         true
-#     }
-#
 // ...
     fn view(&self) -> Html {
         html! {
-            <>
-                <h1>{format!("Hello {}",self.name)}</h1>
-            </>
+            <h1>{format!("Hello {}", self.name)}</h1>
         }
     }
 // ...