重構錯誤，更換命名及處理程式讓語意更清楚

新舊程式對照，可以看出來在 AuthForm 和 OrderForm 的錯誤處理邏輯被拿掉了，
它們現在只是單純的驗證資料格式是否正確，錯誤回報給上層處理。

這樣做的好處，第一個是語意清楚。像 AuthForm 就成為了單純處理 pin code 輸
入的 component。至於要對 pin 碼做什麼處理 (AJAX) 以及錯誤的處理，都交給
上層決定。AuthForm 裡只剩下了處理 pin 碼格式的邏輯和介面邏輯。

第二個是有利於抽換提示介面。錯誤都交由同一層處理，這代表那個 component
可以再把錯誤處理「外包」給一個統一的處理程式，比如另一個 component 或
class。這樣要抽換也會變的簡單。

另外，正確的重構應該是

1. 發現需要重構的程式
2. 構思程式新的樣貌
3. 修改測試碼的描述，把心中的藍圖畫出來
4. 修改測試碼
5. 修改程式

在 commit 這些 changeset 的時候，其實我已經把測試碼改完也寫好了，但這裡
先把程式 commit 進來，因為這樣我比較好寫說明XD

ui/src/App.tsx

@@ -14,7 +14,7 @@ function sorter(a: OrderData, b: OrderData): number {
 
 interface Props {
     api: API;
-    errHandler: (msg: string) => void;
+    alert: (msg: string) => void;
 }
 
 interface State {
@@ -42,7 +42,7 @@ export default class App extends React.Component<Props, State> {
                     this.codeSelected(this.state.code).then(() => { res(); }, () => { res(); });
                 },
                 () => {
-                    this.props.errHandler("認證失敗");
+                    this.props.alert("認證失敗");
                     rej();
                 }
             );
@@ -105,13 +105,20 @@ export default class App extends React.Component<Props, State> {
         });
     }
 
+    handlePinFormatError() {
+	this.props.alert("PIN 碼格式錯誤，必須是六位數字");
+    }
+    handleOrderFormatError() {
+	this.props.alert("格式錯誤，請重新確認");
+    }
+
     render() {
         if (!this.state.authed) {
             return (
                 <div>
                     <AuthForm
                         submitPincode={this.submitPincode.bind(this)}
-                        error={this.props.errHandler} />
+                        formatError={this.handlePinFormatError.bind(this)} />
                 </div>
             );
         }
@@ -120,7 +127,7 @@ export default class App extends React.Component<Props, State> {
             <div>
                 <OrderForm
                     submitOrder={this.submitOrder.bind(this)}
-                    error={this.props.errHandler} />
+                    formatError={this.handleOrderFormatError.bind(this)} />
                 <div className="list-type">
                     <CurrencySelector
                         codeSelected={this.codeSelected.bind(this)}

ui/src/components/AuthForm.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 interface Props {
     submitPincode: (pin: string) => void; // callback
-    error: (msg: string) => void;
+    formatError: () => void;
 }
 
 interface State {
@@ -38,8 +38,7 @@ export default class AuthForm extends React.Component<Props, State> {
         e.preventDefault();
 
         if (! /^[0-9]{6}$/.test(this.state.pin)) {
-            // 爛透惹
-            this.props.error("PIN 碼必須是 6 位數字");
+            this.props.formatError();
             return
         }
 

ui/src/components/OrderForm.tsx

@@ -11,7 +11,7 @@ interface State {
 
 interface Props {
     submitOrder: (order: OrderData) => void;
-    error?: (msg: string) => void;
+    formatError?: () => void;
 }
 
 export default class OrderForm extends React.Component<Props, State> {
@@ -94,7 +94,7 @@ export default class OrderForm extends React.Component<Props, State> {
         e.preventDefault();
         let data = this.validateForm();
         if (data === null) {
-            this.props.error("格式錯誤");
+            this.props.formatError();
             return;
         }
 

ui/src/main.tsx

@@ -6,6 +6,6 @@ import { ByJquery } from "./API";
 let api = new ByJquery();
 
 ReactDOM.render(
-    <App api={api} errHandler={alert} />,
+    <App api={api} alert={alert} />,
     document.getElementById('app')
 );