From d3895d2870460a3e215ffe6b48537da4f057b2ed Mon Sep 17 00:00:00 2001 From: AurelioGomezRosales <39548788+AurelioGomezRosales@users.noreply.github.com> Date: Fri, 1 Jun 2018 15:02:47 +0200 Subject: [PATCH 1/2] Update README.md Small corrections to ease the readability. Additional side notes. Additional implementation of NameEditComponent using currying. --- 06 MoveBackToStateless/readme.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/06 MoveBackToStateless/readme.md b/06 MoveBackToStateless/readme.md index 322f7c1..2047769 100644 --- a/06 MoveBackToStateless/readme.md +++ b/06 MoveBackToStateless/readme.md @@ -2,13 +2,13 @@ In example 05 we learned how to remove state from a child control just to have clear governance of state. -It's time to make some cleanup, let's simplify _[nameEdit.tsx](./src/nameEdit.tsx)_ component and move it as a stateless component. +It's time to make some cleanup, let's simplify _[nameEdit.tsx](./src/nameEdit.tsx)_ component and modify it to a stateless component. -We will take a startup point sample _[05 Refactor](./../05%20Refactor)_. +We take _[05 Refactor](./../05%20Refactor)_ as reference. Summary steps: -- Update _[nameEdit.tsx](./src/nameEdit.tsx)_, port it to stateless component and add the methods inline. +- Update _[nameEdit.tsx](./src/nameEdit.tsx)_ and modify it to a stateless component. ## Prerequisites @@ -20,7 +20,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are - Copy the content from _[05 Refactor](./../05%20Refactor)_ and execute `npm install`. -- Update _[nameEdit.tsx](./src/nameEdit.tsx)_, port it to stateless component and add the methods inline. It should look like: +- Update _[nameEdit.tsx](./src/nameEdit.tsx)_ and modify it to stateless component. It should look like this: ```jsx import * as React from 'react'; @@ -44,8 +44,24 @@ export const NameEditComponent = (props : Props) => ``` -- Now we can run the sample and we will get same results +Side note: during the refactory we have changed ```this.props``` to ```props```. This is a required step as ```NameEditComponent``` is no longer a class but a function. During runtime, ```this``` is now undefined, so obviously then ```this.props``` fails. + +Side note 2: applying currying and Fragments, the code for ```NameEditComponent``` looks like this: + +``` +const onChange = (props: Props) => (event) => { + props.onEditingNameUpdated(event.target.value) +} + +export const NameEditComponent = (props : Props) => + <> + + + + + ``` +- Now we can run the example and we get the same results ```bash npm start -``` \ No newline at end of file +``` From 7fa7fde88d0e5e738eba1bbee796e8d7dac76768 Mon Sep 17 00:00:00 2001 From: AurelioGomezRosales <39548788+AurelioGomezRosales@users.noreply.github.com> Date: Fri, 1 Jun 2018 15:20:06 +0200 Subject: [PATCH 2/2] Update README.md Small corrections to ease the readability. Corrections on the alternative disabled code. --- 07 Enable/readme.md | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/07 Enable/readme.md b/07 Enable/readme.md index 746a8b1..ef85a8c 100644 --- a/07 Enable/readme.md +++ b/07 Enable/readme.md @@ -1,13 +1,12 @@ # 07 Enable -Let's continue with the update name sample, this time we want to disable the -"update" button when the input is empty or when the value hasn't changed. +Let's continue with the update name example, this time we want to disable the "Change" button when the input is empty or when the value hasn't changed. -We will take a startup point sample _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_. +We take _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_ as reference. Summary steps: -- Add a condition to disable +- Add a condition to disable the button. ## Prerequisites @@ -19,7 +18,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are - Copy the content from _[06 MoveBackToStateless/](./../06%20MoveBackToStateless/)_. -- Let's start by adding a condition to disable the field whenever is empty. Replace only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code: +- Let's start by adding a condition to disable the button whenever the input field is empty. Replace only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code: _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ ```diff @@ -32,13 +31,12 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ + ``` -- Now comes the tricky part, detect when the name hasn't changed.
-First we will add a new property called _userName_ with type `string` in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_. This one will hold the last accepted userName. +- Now comes the tricky part: to detect when ```userName``` has changed. First we add a new property called ```userName``` with type `string` in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_. This one holds the last accepted value for ```userName```. _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ ```diff @@ -50,7 +48,7 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ } ``` -- We will add to the enable condition one more test, checking if name has changed. +- We add to disabled an additional condition an to check if the value of ```editingUserName``` name has changed. Replace again only the input tag in _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ with the following code: _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ @@ -59,11 +57,11 @@ _[./src/nameEdit.tsx](./src/nameEdit.tsx)_ className="btn btn-default" onClick={props.onNameUpdateRequest} - disabled={props.editingUserName === ''} -+ disabled={props.editingUserName === '' || props.userName === props.editingUserName} ++ disabled={!props.editingUserName || props.userName === props.editingUserName} >Change ``` -- Now we have to feed this property from the parent control (Add `userName={this.state.userName}` to the NameEditComponent in _[./src/app.tsx](./src/app.tsx)_). The `NameEditComponent` should be like: +- Now we have to feed this property from the parent control. Add `userName={this.state.userName}` to the NameEditComponent in _[./src/app.tsx](./src/app.tsx)_. The `NameEditComponent` should be like: _[./src/app.tsx](./src/app.tsx)_ ```diff @@ -87,9 +85,9 @@ _[./src/app.tsx](./src/app.tsx)_ npm start ``` -> As an excercise, what if we want to do this more generic? we could have a generic property called enable that could be true or false. +> As an excercise, how can we get this in a more generic way? We could have a generic property called disable that could be true or false. -To do this, we will modify [./src/app.tsx](./src/app.tsx) adding the variable `disable` to the `` component. This variable is **Boolean**, so you need conditions to evaluate it. +To do this, we modify [./src/app.tsx](./src/app.tsx) adding the variable `disable` to the `` component. This variable is **Boolean**, so you need conditions to evaluate it. _[./src/app.tsx](./src/app.tsx)_ ```diff @@ -129,8 +127,8 @@ export const NameEditComponent = (props : Props) => -``` \ No newline at end of file +```