From 76acb4347aee20879eecd9c918c3b4f81125da55 Mon Sep 17 00:00:00 2001
From: Chris Ball <chris@printf.net>
Date: Fri, 6 Nov 2015 12:02:08 -0500
Subject: [PATCH] Use ES2015 classes for subcomponents instead of imported
 render functions

---
 src/common/components/App.js                |  4 +-
 src/common/components/AppRender.ios.js      | 29 ++++----
 src/common/components/AppRender.js          | 20 +++---
 src/common/components/Formulae.js           |  8 +--
 src/common/components/FormulaeRender.ios.js | 23 +++---
 src/common/components/FormulaeRender.js     | 18 ++---
 src/common/components/Key.js                |  8 +--
 src/common/components/KeyRender.ios.js      | 65 ++++++++---------
 src/common/components/KeyRender.js          | 64 ++++++++---------
 src/common/components/Keyboard.js           |  4 +-
 src/common/components/KeyboardRender.ios.js | 77 +++++++++++----------
 src/common/components/KeyboardRender.js     | 72 +++++++++----------
 src/common/components/Screen.js             |  8 +--
 src/common/components/ScreenRender.ios.js   | 15 ++--
 src/common/components/ScreenRender.js       | 14 ++--
 15 files changed, 221 insertions(+), 208 deletions(-)

diff --git a/src/common/components/App.js b/src/common/components/App.js
index 1338edb..9b6a137 100644
--- a/src/common/components/App.js
+++ b/src/common/components/App.js
@@ -1,11 +1,11 @@
 'use strict';
 
-import Render from './AppRender';
+import AppRender from './AppRender';
 
 import { Component } from 'react';
 
 export default class App extends Component {
   render () {
-    return Render.call(this, this.props, this.state);
+    return <AppRender />;
   }
 }
diff --git a/src/common/components/AppRender.ios.js b/src/common/components/AppRender.ios.js
index 5edc73e..ee13bdf 100644
--- a/src/common/components/AppRender.ios.js
+++ b/src/common/components/AppRender.ios.js
@@ -5,24 +5,27 @@ import Formulae from './Formulae';
 import Keyboard from './Keyboard';
 
 import React, {
+  Component,
   StyleSheet,
   View
 } from 'react-native';
 
-export default function () {
-  return (
-    <View style={styles.container}>
-      <View style={styles.screen} >
-        <Screen />
+export default class AppRender extends Component {
+  Render () {
+    return (
+      <View style={styles.container}>
+        <View style={styles.screen} >
+          <Screen />
+        </View>
+        <View style={styles.formulae}>
+          <Formulae />
+        </View>
+        <View style={styles.keyboard}>
+          <Keyboard />
+        </View>
       </View>
-      <View style={styles.formulae}>
-        <Formulae />
-      </View>
-      <View style={styles.keyboard}>
-        <Keyboard />
-      </View>
-    </View>
-  );
+    );
+  }
 }
 
 var styles = StyleSheet.create({
diff --git a/src/common/components/AppRender.js b/src/common/components/AppRender.js
index 49806fc..7f1f51c 100644
--- a/src/common/components/AppRender.js
+++ b/src/common/components/AppRender.js
@@ -1,16 +1,18 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import Screen from './Screen';
 import Formulae from './Formulae';
 import Keyboard from './Keyboard';
 
-export default function () {
-  return (
-    <div className='main'>
-      <Screen />
-      <Formulae />
-      <Keyboard />
-    </div>
-  );
+export default class AppRender extends Component () {
+  Render () {
+    return (
+      <div className='main'>
+        <Screen />
+        <Formulae />
+        <Keyboard />
+      </div>
+    );
+  }
 }
diff --git a/src/common/components/Formulae.js b/src/common/components/Formulae.js
index e6613a0..e184310 100644
--- a/src/common/components/Formulae.js
+++ b/src/common/components/Formulae.js
@@ -1,14 +1,10 @@
 'use strict';
 
 import Base from './FormulaeBase';
-import Render from './FormulaeRender';
+import FormulaeRender from './FormulaeRender';
 
 export default class Formulae extends Base {
-  constructor (props) {
-    super(props);
-  }
-
   render () {
-    return Render.call(this, this.props, this.state);
+    return <FormulaeRender />;
   }
 }
diff --git a/src/common/components/FormulaeRender.ios.js b/src/common/components/FormulaeRender.ios.js
index 27dca78..7fb9949 100644
--- a/src/common/components/FormulaeRender.ios.js
+++ b/src/common/components/FormulaeRender.ios.js
@@ -1,22 +1,25 @@
 'use strict';
 
 import React, {
+  Component,
   StyleSheet,
   Text,
   View,
   TouchableHighlight
 } from 'react-native';
 
-export default function (props, state) {
-  return (
-    <View style={styles.formulae}>
-      {this.state.displayFormulae.map(function(formula) {
-        return <TouchableHighlight style={getFormulaStyles(formula.operator)} onPress={this.handleClick.bind(this, formula)} underlayColor='#cdcdcd'>
-          <Text style={styles.text}>{formula.literal}</Text>
-        </TouchableHighlight>
-      }, this)}
-    </View>
-  );
+export default class FormulaeRender extends Component {
+  Render () {
+    return (
+      <View style={styles.formulae}>
+        {this.state.displayFormulae.map(function(formula) {
+          return <TouchableHighlight style={getFormulaStyles(formula.operator)} onPress={this.handleClick.bind(this, formula)} underlayColor='#cdcdcd'>
+            <Text style={styles.text}>{formula.literal}</Text>
+          </TouchableHighlight>
+        }, this)}
+      </View>
+    );
+  }
 }
 
 var getFormulaStyles = function(operator) {
diff --git a/src/common/components/FormulaeRender.js b/src/common/components/FormulaeRender.js
index 7597938..73ac988 100644
--- a/src/common/components/FormulaeRender.js
+++ b/src/common/components/FormulaeRender.js
@@ -2,12 +2,14 @@
 
 import React from 'react';
 
-export default function (props, state) {
-  return (
-    <div className='formulae'>
-      {state.displayFormulae.map(function(formula) {
-        return <span key={formula.id} onClick={this.handleClick.bind(this, formula)} className={this.dynamicClass(formula.operator)}>{formula.literal}</span>
-      }, this)}
-    </div>
-  );
+export default class FormulaeRender extends Component {
+  Render () {
+    return (
+      <div className='formulae'>
+        {state.displayFormulae.map(function(formula) {
+          return <span key={formula.id} onClick={this.handleClick.bind(this, formula)} className={this.dynamicClass(formula.operator)}>{formula.literal}</span>
+        }, this)}
+      </div>
+    );
+  }
 }
diff --git a/src/common/components/Key.js b/src/common/components/Key.js
index 2bd367e..70b6fb1 100644
--- a/src/common/components/Key.js
+++ b/src/common/components/Key.js
@@ -1,14 +1,10 @@
 'use strict';
 
 import Base from './KeyBase';
-import Render from './KeyRender';
+import KeyRender from './KeyRender';
 
 export default class Key extends Base {
-  constructor (props) {
-    super(props);
-  }
-
   render () {
-    return Render.call(this, this.props, this.state);
+    return <KeyRender />;
   }
 }
diff --git a/src/common/components/KeyRender.ios.js b/src/common/components/KeyRender.ios.js
index 864ecab..918480b 100644
--- a/src/common/components/KeyRender.ios.js
+++ b/src/common/components/KeyRender.ios.js
@@ -1,43 +1,46 @@
 'use strict';
 
 import React, {
+  Component,
   StyleSheet,
   Text,
   View,
   TouchableHighlight
 } from 'react-native';
 
-export default function () {
-  if(this.props.keyType === 'number') {
-    return (
-      <View style={styles.keyNumber}>
-        <TouchableHighlight style={styles.button} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={styles.textButton}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
-  } else if(this.props.keyType === 'operator') {
-    return (
-      <View style={styles.keyOperator}>
-        <TouchableHighlight style={getOperatorStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={styles.textButtonOperator}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
-  } else if(this.props.keyType === 'action') {
-    return (
-      <View style={styles.keyAction}>
-        <TouchableHighlight style={getActionStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
-          <Text style={getActionButtonStyles(this.props.keyValue)}>
-            {this.props.keySymbol}
-          </Text>
-        </TouchableHighlight>
-      </View>
-    );
+export default class KeyRender extends Component {
+  Render () {
+    if(this.props.keyType === 'number') {
+      return (
+        <View style={styles.keyNumber}>
+          <TouchableHighlight style={styles.button} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={styles.textButton}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if(this.props.keyType === 'operator') {
+      return (
+        <View style={styles.keyOperator}>
+          <TouchableHighlight style={getOperatorStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={styles.textButtonOperator}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if(this.props.keyType === 'action') {
+      return (
+        <View style={styles.keyAction}>
+          <TouchableHighlight style={getActionStyles(this.props.keyValue)} onPress={this.handleClick} underlayColor='#cdcdcd'>
+            <Text style={getActionButtonStyles(this.props.keyValue)}>
+              {this.props.keySymbol}
+            </Text>
+          </TouchableHighlight>
+        </View>
+      );
+    }
   }
 }
 
diff --git a/src/common/components/KeyRender.js b/src/common/components/KeyRender.js
index 259fa1f..d0bd8dc 100644
--- a/src/common/components/KeyRender.js
+++ b/src/common/components/KeyRender.js
@@ -1,36 +1,38 @@
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 
-export default function (props, state) {
-  var classString = 'key key-' + props.keyType;
-  if(state.isHighlighted) {
-    classString += ' highlight';
-  }
-  var classOperation = '';
-  if(props.keyType === 'operator') {
-    classOperation = 'operator ' + props.keyValue;
-  }
-  if(props.keyType === 'action') {
-    classOperation = 'action ' + props.keyValue;
-  }
-  if(props.keyType === 'number') {
-    return (
-      <div className={classString}
-          onClick={this.handleClick}
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}>
-        <div className={classOperation}>{props.keySymbol}</div>
-      </div>
-    );
-  } else {
-    return (
-      <div className={classString}>
-        <div className={classOperation}
-          onClick={this.handleClick}
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}>{props.keySymbol}</div>
-      </div>
-    );
+export default class KeyRender extends Component {
+  Render () {
+    var classString = 'key key-' + props.keyType;
+    if(state.isHighlighted) {
+      classString += ' highlight';
+    }
+    var classOperation = '';
+    if(props.keyType === 'operator') {
+      classOperation = 'operator ' + props.keyValue;
+    }
+    if(props.keyType === 'action') {
+      classOperation = 'action ' + props.keyValue;
+    }
+    if(props.keyType === 'number') {
+      return (
+        <div className={classString}
+            onClick={this.handleClick}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}>
+          <div className={classOperation}>{props.keySymbol}</div>
+        </div>
+      );
+    } else {
+      return (
+        <div className={classString}>
+          <div className={classOperation}
+            onClick={this.handleClick}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}>{props.keySymbol}</div>
+        </div>
+      );
+    }
   }
 }
diff --git a/src/common/components/Keyboard.js b/src/common/components/Keyboard.js
index 26c9bc6..c43e666 100644
--- a/src/common/components/Keyboard.js
+++ b/src/common/components/Keyboard.js
@@ -1,11 +1,11 @@
 'use strict';
 
-import Render from './KeyboardRender';
+import KeyboardRender from './KeyboardRender';
 
 import { Component } from 'react';
 
 export default class Keyboard extends Component {
   render () {
-    return Render.call(this, this.props, this.state);
+    return <KeyboardRender />;
   }
 }
diff --git a/src/common/components/KeyboardRender.ios.js b/src/common/components/KeyboardRender.ios.js
index d4e22c8..7372c87 100644
--- a/src/common/components/KeyboardRender.ios.js
+++ b/src/common/components/KeyboardRender.ios.js
@@ -3,49 +3,52 @@
 import Key from './Key';
 
 import React, {
+  Component,
   StyleSheet,
   View
 } from 'react-native';
 
-export default function () {
-  return (
-    <View style={styles.keyboard}>
+export default class KeyboardRender extends Component {
+  Render() {
+    return (
+      <View style={styles.keyboard}>
+
+        <View style={styles.row}>
+          <Key keyType='number' keyValue='1' keySymbol='1' />
+          <Key keyType='number' keyValue='2' keySymbol='2' />
+          <Key keyType='number' keyValue='3' keySymbol='3' />
+        </View>
+        <View style={styles.row}>
+          <Key keyType='number' keyValue='4' keySymbol='4' />
+          <Key keyType='number' keyValue='5' keySymbol='5' />
+          <Key keyType='number' keyValue='6' keySymbol='6' />
+        </View>
+        <View style={styles.row}>
+          <Key keyType='number' keyValue='7' keySymbol='7' />
+          <Key keyType='number' keyValue='8' keySymbol='8' />
+          <Key keyType='number' keyValue='9' keySymbol='9' />
+        </View>
+        <View style={styles.row}>
+          <Key keyType='number' keyValue='+-' keySymbol='+/-' />
+          <Key keyType='number' keyValue='0' keySymbol='0' />
+          <Key keyType='number' keyValue='.' keySymbol='.' />
+        </View>
+
+        <View style={styles.row}>
+          <Key keyType='operator' keyValue='divide' keySymbol='÷' />
+          <Key keyType='operator' keyValue='substract' keySymbol='-' />
+          <Key keyType='operator' keyValue='add' keySymbol='+' />
+          <Key keyType='operator' keyValue='multiply' keySymbol='x' />
+        </View>
+
+        <View style={styles.row}>
+          <Key keyType='action' keyValue='back' keySymbol='<<' />
+          <Key keyType='action' keyValue='equal' keySymbol='=' />
+        </View>
 
-      <View style={styles.row}>
-        <Key keyType='number' keyValue='1' keySymbol='1' />
-        <Key keyType='number' keyValue='2' keySymbol='2' />
-        <Key keyType='number' keyValue='3' keySymbol='3' />
       </View>
-      <View style={styles.row}>
-        <Key keyType='number' keyValue='4' keySymbol='4' />
-        <Key keyType='number' keyValue='5' keySymbol='5' />
-        <Key keyType='number' keyValue='6' keySymbol='6' />
-      </View>
-      <View style={styles.row}>
-        <Key keyType='number' keyValue='7' keySymbol='7' />
-        <Key keyType='number' keyValue='8' keySymbol='8' />
-        <Key keyType='number' keyValue='9' keySymbol='9' />
-      </View>
-      <View style={styles.row}>
-        <Key keyType='number' keyValue='+-' keySymbol='+/-' />
-        <Key keyType='number' keyValue='0' keySymbol='0' />
-        <Key keyType='number' keyValue='.' keySymbol='.' />
-      </View>
-
-      <View style={styles.row}>
-        <Key keyType='operator' keyValue='divide' keySymbol='÷' />
-        <Key keyType='operator' keyValue='substract' keySymbol='-' />
-        <Key keyType='operator' keyValue='add' keySymbol='+' />
-        <Key keyType='operator' keyValue='multiply' keySymbol='x' />
-      </View>
-
-      <View style={styles.row}>
-        <Key keyType='action' keyValue='back' keySymbol='<<' />
-        <Key keyType='action' keyValue='equal' keySymbol='=' />
-      </View>
-
-    </View>
-  );
+    );
+  }
 }
 
 var styles = StyleSheet.create({
diff --git a/src/common/components/KeyboardRender.js b/src/common/components/KeyboardRender.js
index 611cf15..83a26a5 100644
--- a/src/common/components/KeyboardRender.js
+++ b/src/common/components/KeyboardRender.js
@@ -2,43 +2,45 @@
 
 import Key from './Key';
 
-import React from 'react';
+import React, { Component } from 'react';
 
-export default function () {
-  return (
-    <div className='keyboard'>
-      <div className='keyboard-row'>
-        <Key keyType='number' keyValue='1' keySymbol='1' />
-        <Key keyType='number' keyValue='2' keySymbol='2' />
-        <Key keyType='number' keyValue='3' keySymbol='3' />
-      </div>
-      <div className='keyboard-row'>
-        <Key keyType='number' keyValue='4' keySymbol='4' />
-        <Key keyType='number' keyValue='5' keySymbol='5' />
-        <Key keyType='number' keyValue='6' keySymbol='6' />
-      </div>
-      <div className='keyboard-row'>
-        <Key keyType='number' keyValue='7' keySymbol='7' />
-        <Key keyType='number' keyValue='8' keySymbol='8' />
-        <Key keyType='number' keyValue='9' keySymbol='9' />
-      </div>
-      <div className='keyboard-row'>
-        <Key keyType='number' keyValue='+-' keySymbol='+/-' />
-        <Key keyType='number' keyValue='0' keySymbol='0' />
-        <Key keyType='number' keyValue='.' keySymbol='.' />
-      </div>
+export default class KeyboardRender extends Component {
+  Render () {
+    return (
+      <div className='keyboard'>
+        <div className='keyboard-row'>
+          <Key keyType='number' keyValue='1' keySymbol='1' />
+          <Key keyType='number' keyValue='2' keySymbol='2' />
+          <Key keyType='number' keyValue='3' keySymbol='3' />
+        </div>
+        <div className='keyboard-row'>
+          <Key keyType='number' keyValue='4' keySymbol='4' />
+          <Key keyType='number' keyValue='5' keySymbol='5' />
+          <Key keyType='number' keyValue='6' keySymbol='6' />
+        </div>
+        <div className='keyboard-row'>
+          <Key keyType='number' keyValue='7' keySymbol='7' />
+          <Key keyType='number' keyValue='8' keySymbol='8' />
+          <Key keyType='number' keyValue='9' keySymbol='9' />
+        </div>
+        <div className='keyboard-row'>
+          <Key keyType='number' keyValue='+-' keySymbol='+/-' />
+          <Key keyType='number' keyValue='0' keySymbol='0' />
+          <Key keyType='number' keyValue='.' keySymbol='.' />
+        </div>
 
-      <div className='keyboard-row'>
-        <Key keyType='operator' keyValue='divide' keySymbol='÷' />
-        <Key keyType='operator' keyValue='substract' keySymbol='-' />
-        <Key keyType='operator' keyValue='add' keySymbol='+' />
-        <Key keyType='operator' keyValue='multiply' keySymbol='x' />
-      </div>
+        <div className='keyboard-row'>
+          <Key keyType='operator' keyValue='divide' keySymbol='÷' />
+          <Key keyType='operator' keyValue='substract' keySymbol='-' />
+          <Key keyType='operator' keyValue='add' keySymbol='+' />
+          <Key keyType='operator' keyValue='multiply' keySymbol='x' />
+        </div>
 
-      <div className='keyboard-row'>
-        <Key keyType='action' keyValue='back' keySymbol='<<' />
-        <Key keyType='action' keyValue='equal' keySymbol='=' />
+        <div className='keyboard-row'>
+          <Key keyType='action' keyValue='back' keySymbol='<<' />
+          <Key keyType='action' keyValue='equal' keySymbol='=' />
+        </div>
       </div>
-    </div>
-  );
+    )
+  }
 }
diff --git a/src/common/components/Screen.js b/src/common/components/Screen.js
index 108329d..7f8d01e 100644
--- a/src/common/components/Screen.js
+++ b/src/common/components/Screen.js
@@ -1,14 +1,10 @@
 'use strict';
 
 import Base from './ScreenBase';
-import Render from './ScreenRender';
+import ScreenRender from './ScreenRender';
 
 export default class Screen extends Base {
-  constructor (props) {
-    super(props);
-  }
-
   render () {
-    return Render.call(this, this.props, this.state);
+    return <ScreenRender />;
   }
 }
diff --git a/src/common/components/ScreenRender.ios.js b/src/common/components/ScreenRender.ios.js
index 76a0abc..43b0d24 100644
--- a/src/common/components/ScreenRender.ios.js
+++ b/src/common/components/ScreenRender.ios.js
@@ -1,16 +1,19 @@
 'use strict';
 
 import React, {
+  Component,
   StyleSheet,
   Text
 } from 'react-native';
 
-export default function (props, state) {
-  return (
-    <Text style={styles.screen}>
-      {state.displayScreen}
-    </Text>
-  );
+export default class ScreenRender extends Component {
+  Render () {
+    return (
+      <Text style={styles.screen}>
+        {state.displayScreen}
+      </Text>
+    );
+  }
 }
 
 var styles = StyleSheet.create({
diff --git a/src/common/components/ScreenRender.js b/src/common/components/ScreenRender.js
index 6207975..98e284a 100644
--- a/src/common/components/ScreenRender.js
+++ b/src/common/components/ScreenRender.js
@@ -2,10 +2,12 @@
 
 import React from 'react';
 
-export default function (props, state) {
-  return (
-    <div className='screen'>
-      {state.displayScreen}
-    </div>
-  );
+export default class ScreenRender extends Component {
+  Render () {
+    return (
+      <div className='screen'>
+        {state.displayScreen}
+      </div>
+    );
+  }
 }