merge branch 'master' of https://github.com/Lemoncode/react-typescript-samples

Author: dailymp

hooks/05_Refactor/Readme.md

@@ -163,6 +163,50 @@ export const App = () => {
 };
 ```
 
+- Now let's jump into _NameEditComponent_ and update the contract and
+  implementation:
+
+```diff
+interface Props {
+  initialUserName: string;
++   editingName: string;
+-  onNameUpdated: (newName: string) => any;
++  onNameUpdated: () => any;
++   onEditingNameUpdated: (newEditingName: string) => any;
+}
+```
+
+```diff
+export const NameEditComponent = (props: Props) => {
+-  const [editingName, setEditingName] = React.useState(props.initialUserName);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+-    setEditingName(e.target.value);
++    props.onEditingNameUpdated(e.target.value);
+  };
+
+  const onNameSubmit = (event: any): any => {
+-    props.onNameUpdated(editingName);
++   props.onNameUpdated();
+  };
+
+- if(props.initialUserName !== lastInitialName) {
+-    setLastInitialName(props.initialUserName);
+-    setEditingName(props.initialUserName);
+- }
+
+
+  return (
+    <>
+      <label>Update name:</label>
+-      <input value={editingName} onChange={onChange} />
++      <input value={props.editingName} onChange={onChange} />
+      <button onClick={onNameSubmit}>Change</button>
+    </>
+  );
+};
+```
+
 # About Basefactor + Lemoncode
 
 We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
@@ -172,4 +216,3 @@ We are an innovating team of Javascript experts, passionate about turning your i
 [Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
 
 For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
-

hooks/08_ColorPickerRefactor/Readme.md

@@ -1,4 +1,4 @@
-# 09 Colorpicker Refactor
+# 08 Colorpicker Refactor
 
 In this example we are going to review the colorpicker component we have created and simplify it. Right now we have three slider controls with many details that make our HTML hard to read. Let's componentize this scenario.
 
@@ -219,13 +219,13 @@ export const ColorPicker = (props: Props) => {
 }
 ```
 
-- Now we got a great result !! we have enhanced code quality in our component.
+- Now we got a great result!! We have enhanced code quality in our component.
 
 ```bash
 npm start
 ```
 
-- Could we go one step furhter refactoring? The answer is yes, could it be worth? That's
+- Could we go one step further refactoring? The answer is yes, could it be worth? That's
   worth a discussion, sometimes is a good idea to keep on refactoring, and then rollback
   one step, let's apply the following trick, let's replace our color picker with this code:
 

hooks/13_LoginForm/Readme.md

@@ -424,7 +424,7 @@ _./src/pages/loginPage.tsx_
 ```diff
 interface PropsForm {
   onLogin: () => void;
-+  onUpdateField: (string, any) => void;
++  onUpdateField: (name: string, value: any) => void;
 +  loginInfo : LoginEntity;
 }
 

hooks/13_LoginForm/src/pages/loginPage.tsx

@@ -70,7 +70,7 @@ export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
 
 interface PropsForm {
   onLogin: () => void;
-  onUpdateField: (string, any) => void;
+  onUpdateField: (name: string, value: any) => void;
   loginInfo: LoginEntity;
 }
 

hooks/14_FormValidation/Readme.md

@@ -108,7 +108,7 @@ export const loginFormValidation = createFormValidation(
 
 - Let's create now a class to hold the dataFormErrors.
 
-_./src/login/loginPage.viewmodel.ts_
+_./src/pages/loginPage.viewmodel.ts_
 
 ```typescript
 import { FieldValidationResult } from "lc-form-validation";

hooks/15_Context/Readme.md

@@ -32,7 +32,7 @@ export const createDefaultUser = (): SessionContextProps => ({
 });
 
 export const SessionContext =
-  React.createContext < SessionContextProps > createDefaultUser();
+  React.createContext < SessionContextProps >(createDefaultUser());
 ```
 
 - This session context will expose a _provider_ (it will serve us to set the login name in the context), and a _consumer_ (that will let us consume the login name from the context at any point of the application).
@@ -122,8 +122,8 @@ import { Link } from "react-router-dom";
 _./src/pages/loginPage.tsx_
 
 ```diff
-+ import { TextFieldForm } from "../common";
-import { TextFieldForm, SessionContext } from "../common";
+- import { TextFieldForm } from "../common";
++ import { TextFieldForm, SessionContext } from "../common";
 
 ```
 

hooks/15_Context/src/common/sessionContext.tsx

@@ -18,7 +18,7 @@ export const SessionContext = React.createContext<SessionContextProps>(
   createDefaultUser()
 );
 
-export const SessionProvider: React.StatelessComponent = props => {
+export const SessionProvider: React.FunctionComponent = props => {
   const [login, setLogin] = React.useState<string>("");
 
   return (

old_class_components_samples/19 LoginForm/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}

old_class_components_samples/19 LoginForm/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-typescript-samples",
+  "version": "1.0.0",
+  "description": "Sample working with React,TypeScript and Webpack)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --mode development --inline --hot --open",
+    "build": "webpack --mode development"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@material-ui/core": "^3.9.0",
+    "@material-ui/icons": "^3.0.2",
+    "@types/react": "^16.4.7",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-router-dom": "^4.3.0",
+    "@types/toastr": "^2.1.35",
+    "awesome-typescript-loader": "^5.2.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^1.0.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.1",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
+  },
+  "dependencies": {
+    "bootstrap": "^4.1.2",
+    "lc-form-validation": "^1.0.0",
+    "react": "16.7.0-alpha.0",
+    "react-dom": "16.7.0-alpha.0",
+    "react-router-dom": "^4.2.2",
+    "toastr": "^2.1.4",
+    "typescript": "^3.0.1"
+  }
+}