code-dot-org · davidsbailey · Sep 11, 2017 · Sep 11, 2017
diff --git a/apps/src/publicKeyCryptography/Alice.jsx b/apps/src/publicKeyCryptography/Alice.jsx
@@ -17,55 +17,59 @@ import {
 import {computePublicKey} from './cryptographyMath';
 import {COLORS} from './style';
 
-export default class Alice extends React.Component {
-  static propTypes = {
+const Alice = React.createClass({
+  propTypes: {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     setPublicKey: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  };
+  },
 
-  state = {
-    publicModulus: null,
-    privateKey: null,
-    publicNumber: null,
-    secretNumber: null
-  };
+  getInitialState() {
+    return {
+      publicModulus: null,
+      privateKey: null,
+      publicNumber: null,
+      secretNumber: null
+    };
+  },
 
-  startOver = () => this.setState(this.getInitialState());
+  startOver() {
+    this.setState(this.getInitialState());
+  },
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
     this.setPrivateKey(null);
     this.clearSecretNumber();
-  }
+  },
 
-  onPublicModulusChange = (publicModulus) => {
+  onPublicModulusChange(publicModulus) {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  };
+  },
 
   setPrivateKey(privateKey) {
     this.setState({privateKey});
     this.clearSecretNumber();
-  }
+  },
 
-  onPrivateKeyChange = (privateKey) => {
+  onPrivateKeyChange(privateKey) {
     const {publicModulus} = this.state;
     this.setPrivateKey(privateKey);
     this.props.setPublicKey(this.getPublicKey({privateKey, publicModulus}));
-  };
+  },
 
-  setPublicNumber = (publicNumber) => {
+  setPublicNumber(publicNumber) {
     this.setState({publicNumber});
     this.clearSecretNumber();
-  };
+  },
 
   getPublicKey({privateKey, publicModulus}) {
     return privateKey && publicModulus ? computePublicKey(privateKey, publicModulus) : null;
-  }
+  },
 
-  computeSecretNumber = () => {
+  computeSecretNumber() {
     const {runModuloClock} = this.props;
     const {publicModulus, privateKey, publicNumber} = this.state;
     if ([publicModulus, privateKey, publicNumber].every(Number.isInteger)) {
@@ -79,11 +83,11 @@ export default class Alice extends React.Component {
     } else {
       this.clearSecretNumber();
     }
-  };
+  },
 
   clearSecretNumber() {
     this.setState({secretNumber: null});
-  }
+  },
 
   render() {
     const {disabled} = this.props;
@@ -156,4 +160,5 @@ export default class Alice extends React.Component {
         </NumberedSteps>
       </CharacterPanel>);
   }
-}
+});
+export default Alice;
diff --git a/apps/src/publicKeyCryptography/Bob.jsx b/apps/src/publicKeyCryptography/Bob.jsx
@@ -15,45 +15,49 @@ import {
 } from './cryptographyFields';
 import {COLORS} from './style';
 
-export default class Bob extends React.Component {
-  static propTypes = {
+const Bob = React.createClass({
+  propTypes: {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     setPublicNumber: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  };
+  },
 
-  state = {
-    publicModulus: null,
-    publicKey: null,
-    secretNumber: null,
-    publicNumber: null
-  };
+  getInitialState() {
+    return {
+      publicModulus: null,
+      publicKey: null,
+      secretNumber: null,
+      publicNumber: null
+    };
+  },
 
-  startOver = () => this.setState(this.getInitialState());
+  startOver() {
+    this.setState(this.getInitialState());
+  },
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
     this.setSecretNumber(null);
     this.clearPublicNumber();
-  }
+  },
 
-  onPublicModulusChange = (publicModulus) => {
+  onPublicModulusChange(publicModulus) {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  };
+  },
 
-  setPublicKey = (publicKey) => {
+  setPublicKey(publicKey) {
     this.setState({publicKey});
     this.clearPublicNumber();
-  };
+  },
 
-  setSecretNumber = (secretNumber) => {
+  setSecretNumber(secretNumber) {
     this.setState({secretNumber});
     this.clearPublicNumber();
-  };
+  },
 
-  computePublicNumber = () => {
+  computePublicNumber() {
     const {runModuloClock} = this.props;
     const {publicKey, secretNumber, publicModulus} = this.state;
     if ([publicKey, secretNumber, publicModulus].every(Number.isInteger)) {
@@ -68,11 +72,11 @@ export default class Bob extends React.Component {
     } else {
       this.clearPublicNumber();
     }
-  };
+  },
 
   clearPublicNumber() {
     this.setState({publicNumber: null});
-  }
+  },
 
   render() {
     const {disabled} = this.props;
@@ -136,7 +140,7 @@ export default class Bob extends React.Component {
             </div>
           </Step>
         </NumberedSteps>
-      </CharacterPanel>
-    );
+      </CharacterPanel>);
   }
-}
+});
+export default Bob;
diff --git a/apps/src/publicKeyCryptography/EqualColumns.jsx b/apps/src/publicKeyCryptography/EqualColumns.jsx
@@ -3,14 +3,18 @@ import React, {PropTypes} from 'react';
 import Radium from 'radium';
 import {AnyChildren} from './types';
 
-export default Radium(class EqualColumns extends React.Component {
-  static propTypes = {
+const EqualColumns = Radium(React.createClass({
+  propTypes: {
     // Space between columns, in pixels
     intercolumnarDistance: PropTypes.number,
     children: AnyChildren
-  };
+  },
 
-  static defaultProps = {intercolumnarDistance: 0};
+  getDefaultProps() {
+    return {
+      intercolumnarDistance: 0
+    };
+  },
 
   render() {
     const {children, intercolumnarDistance} = this.props;
@@ -34,7 +38,7 @@ export default Radium(class EqualColumns extends React.Component {
             </div>);
         })}
         <div style={{clear:'both'}}/>
-      </div>
-    );
+      </div>);
   }
-});
+}));
+export default EqualColumns;
diff --git a/apps/src/publicKeyCryptography/Eve.jsx b/apps/src/publicKeyCryptography/Eve.jsx
@@ -26,41 +26,45 @@ const tdEquationStyleLHS = Object.assign({}, tdEquationStyleRHS, {
   whiteSpace: 'nowrap'
 });
 
-export default class Eve extends React.Component {
-  static propTypes = {
+const Eve = React.createClass({
+  propTypes: {
     disabled: PropTypes.bool,
     setPublicModulus: PropTypes.func.isRequired,
     runModuloClock: PropTypes.func.isRequired
-  };
+  },
 
-  state = {
-    publicModulus: null,
-    publicKey: null,
-    privateKey: null,
-    publicNumber: null,
-    secretNumber: null,
-    checkingPrivateKey: false,
-    privateKeyEquationResult: null,
-    checkingSecretNumber: false,
-    secretNumberEquationResult: null
-  };
+  getInitialState() {
+    return {
+      publicModulus: null,
+      publicKey: null,
+      privateKey: null,
+      publicNumber: null,
+      secretNumber: null,
+      checkingPrivateKey: false,
+      privateKeyEquationResult: null,
+      checkingSecretNumber: false,
+      secretNumberEquationResult: null
+    };
+  },
 
-  startOver = () => this.setState(this.getInitialState());
+  startOver() {
+    this.setState(this.getInitialState());
+  },
 
   setPublicModulus(publicModulus) {
     this.setState({publicModulus});
-  }
+  },
 
-  onPublicModulusChange = (publicModulus) => {
+  onPublicModulusChange(publicModulus) {
     this.setPublicModulus(publicModulus);
     this.props.setPublicModulus(publicModulus);
-  };
+  },
 
-  setPublicKey = (publicKey) => {
+  setPublicKey(publicKey) {
     this.setState({publicKey});
-  };
+  },
 
-  setPrivateKey = (privateKey) => {
+  setPrivateKey(privateKey) {
     const {runModuloClock} = this.props;
     const {publicKey, publicModulus} = this.state;
     this.setState({privateKey});
@@ -81,13 +85,13 @@ export default class Eve extends React.Component {
     } else {
       this.setState({privateKey: null, privateKeyEquationResult: null});
     }
-  };
+  },
 
-  setPublicNumber = (publicNumber) => {
+  setPublicNumber(publicNumber) {
     this.setState({publicNumber});
-  };
+  },
 
-  setSecretNumber = (secretNumber) => {
+  setSecretNumber(secretNumber) {
     this.setState({secretNumber});
     const {runModuloClock} = this.props;
     const {publicKey, publicModulus} = this.state;
@@ -109,7 +113,7 @@ export default class Eve extends React.Component {
     } else {
       this.setState({secretNumber: null, secretNumberEquationResult: null});
     }
-  };
+  },
 
   render() {
     const {disabled} = this.props;
@@ -224,7 +228,7 @@ export default class Eve extends React.Component {
             </table>
           </Step>
         </NumberedSteps>
-      </CharacterPanel>
-    );
+      </CharacterPanel>);
   }
-}
+});
+export default Eve;
diff --git a/apps/src/publicKeyCryptography/IntegerDropdown.jsx b/apps/src/publicKeyCryptography/IntegerDropdown.jsx
@@ -7,17 +7,19 @@ import 'react-virtualized/styles.css';
 import 'react-select/dist/react-select.css';
 import 'react-virtualized-select/styles.css';
 
-export default class IntegerDropdown extends React.Component {
-  static propTypes = {
+const IntegerDropdown = React.createClass({
+  propTypes: {
     className: PropTypes.string,
     value: PropTypes.number,
     options: PropTypes.arrayOf(PropTypes.number).isRequired,
     style: PropTypes.object,
     disabled: PropTypes.bool,
     onChange: PropTypes.func.isRequired
-  };
+  },
 
-  onChange = (selected) => this.props.onChange(selected ? selected.value : null);
+  onChange(selected) {
+    this.props.onChange(selected ? selected.value : null);
+  },
 
   render() {
     let {className, value, options, style, disabled} = this.props;
@@ -32,7 +34,7 @@ export default class IntegerDropdown extends React.Component {
         style={style}
         disabled={disabled}
         onChange={this.onChange}
-      />
-    );
+      />);
   }
-}
+});
+export default IntegerDropdown;
diff --git a/apps/src/publicKeyCryptography/IntegerTextbox.jsx b/apps/src/publicKeyCryptography/IntegerTextbox.jsx
@@ -2,19 +2,19 @@
 import React, {PropTypes} from 'react';
 import color from "../util/color";
 
-export default class IntegerTextbox extends React.Component {
-  static propTypes = {
+const IntegerTextbox = React.createClass({
+  propTypes: {
     className: PropTypes.string,
     value: PropTypes.number,
     disabled: PropTypes.bool,
     color: PropTypes.string,
     onChange: PropTypes.func.isRequired
-  };
+  },
 
-  onChange = (event) => {
+  onChange(event) {
     const value = parseInt(event.target.value, 10);
     this.props.onChange(Number.isInteger(value) ? value : null);
-  };
+  },
 
   render() {
     let {className, value, disabled, color: backgroundColor} = this.props;
@@ -41,4 +41,5 @@ export default class IntegerTextbox extends React.Component {
         onChange={this.onChange}
       />);
   }
-}
+});
+export default IntegerTextbox;