update the lifecycle method names and node engine deps

package.json

@@ -3,10 +3,6 @@
   "author": "caleb pollman",
   "version": "0.1.0",
   "private": true,
-  "engines": {
-    "node": "10.16.0",
-    "npm": "6.9.0"
-  },
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

src/components/App/App.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import Calculator from '../Calculator/Calculator';
-import './App.css';
+import React from "react";
+import Calculator from "../Calculator/Calculator";
+import "./App.css";
 
 const App = () => (
   <div className="app-container">

src/components/Calculator/Calculator.jsx

@@ -1,32 +1,30 @@
-import React, { Component } from 'react';
-import './Calculator.css';
-
-import Display from '../Display/Display';
-import Keypad from '../Keypad/Keypad';
-import './Calculator.css';
+import React, { Component } from "react";
+import Display from "../Display/Display";
+import Keypad from "../Keypad/Keypad";
+import "./Calculator.css";
 
 class Calculator extends Component {
   state = {
-    displayValue: '0',
-    numbers: ['9', '8', '7', '6', '5', '4', '3', '2', '1', '.', '0', 'ce'],
-    operators: ['/', 'x', '-', '+'],
-    selectedOperator: '',
-    storedValue: '',
+    displayValue: "0",
+    numbers: ["9", "8", "7", "6", "5", "4", "3", "2", "1", ".", "0", "ce"],
+    operators: ["/", "x", "-", "+"],
+    selectedOperator: "",
+    storedValue: ""
   };
 
-  componentWillMount = () => {
-    document.addEventListener('keydown', this.handleKeyPress);
+  UNSAFE_componentWillMount = () => {
+    document.addEventListener("keydown", this.handleKeyPress);
   };
 
   componentWillUnmount = () => {
-    document.removeEventListener('keydown', this.handleKeyPress);
+    document.removeEventListener("keydown", this.handleKeyPress);
   };
 
   handleKeyPress = event => {
     const { numbers, operators } = this.state;
 
-    if (event.key === 'Backspace') this.updateDisplay(event, 'ce');
-    if (event.key === 'Enter' || event.key === '=') this.callOperator(event);
+    if (event.key === "Backspace") this.updateDisplay(event, "ce");
+    if (event.key === "Enter" || event.key === "=") this.callOperator(event);
 
     numbers.forEach(number => {
       if (event.key === number) {
@@ -49,34 +47,39 @@ class Calculator extends Component {
     storedValue = parseInt(storedValue, 10);
 
     switch (selectedOperator) {
-      case '+':
+      case "+":
         displayValue = storedValue + displayValue;
         break;
-      case '-':
+      case "-":
         displayValue = storedValue - displayValue;
         break;
-      case 'x':
+      case "x":
         displayValue = storedValue * displayValue;
         break;
-      case '/':
+      case "/":
         displayValue = storedValue / displayValue;
         break;
       default:
-        displayValue = '0';
+        displayValue = "0";
     }
 
     displayValue = displayValue.toString();
-    selectedOperator = '';
-    if (displayValue === 'NaN' || displayValue === 'Infinity') displayValue = '0';
-
-    this.setState({ displayValue, selectedOperator, storedValue: updateStoredValue });
+    selectedOperator = "";
+    if (displayValue === "NaN" || displayValue === "Infinity")
+      displayValue = "0";
+
+    this.setState({
+      displayValue,
+      selectedOperator,
+      storedValue: updateStoredValue
+    });
   };
 
   handleKeyPress = event => {
     const { numbers, operators } = this.state;
 
-    if (event.key === 'Backspace') this.updateDisplay('ce');
-    if (event.key === 'Enter' || event.key === '=') this.callOperator();
+    if (event.key === "Backspace") this.updateDisplay("ce");
+    if (event.key === "Enter" || event.key === "=") this.callOperator();
 
     numbers.forEach(number => {
       if (event.key === number) this.updateDisplay(number);
@@ -90,9 +93,9 @@ class Calculator extends Component {
   setOperator = value => {
     let { displayValue, selectedOperator, storedValue } = this.state;
 
-    if (selectedOperator === '') {
+    if (selectedOperator === "") {
       storedValue = displayValue;
-      displayValue = '0';
+      displayValue = "0";
       selectedOperator = value;
     } else {
       selectedOperator = value;
@@ -104,13 +107,13 @@ class Calculator extends Component {
   updateDisplay = value => {
     let { displayValue } = this.state;
 
-    if (value === '.' && displayValue.includes('.')) value = '';
+    if (value === "." && displayValue.includes(".")) value = "";
 
-    if (value === 'ce') {
+    if (value === "ce") {
       displayValue = displayValue.substr(0, displayValue.length - 1);
-      if (displayValue === '') displayValue = '0';
+      if (displayValue === "") displayValue = "0";
     } else {
-      displayValue === '0' ? (displayValue = value) : (displayValue += value);
+      displayValue === "0" ? (displayValue = value) : (displayValue += value);
     }
 
     this.setState({ displayValue });

src/components/Display/Display.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Display.css';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Display.css";
 
 const Display = ({ displayValue }) => (
   <div className="display-container">
@@ -10,6 +10,6 @@ const Display = ({ displayValue }) => (
 
 Display.propTypes = { displayValue: PropTypes.string.isRequired };
 
-Display.defaultProps = { displayValue: 'default' };
+Display.defaultProps = { displayValue: "default" };
 
 export default Display;

src/components/Key/Key.jsx

@@ -1,12 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Key.css';
+import React from "react";
+import PropTypes from "prop-types";
+import "./Key.css";
 
 const Key = ({ handleKeyPress, keyAction, keyType, keyValue }) => {
   const keyClass = `key-container ${keyType}`;
 
   return (
-    <div className={keyClass} onClick={() => keyAction(keyValue)} onKeyPress={event => handleKeyPress(event)}>
+    <div
+      className={keyClass}
+      onClick={() => keyAction(keyValue)}
+      onKeyPress={event => handleKeyPress(event)}
+    >
       <p className="key-value">{keyValue}</p>
     </div>
   );
@@ -16,12 +20,12 @@ Key.propTypes = {
   handleKeyPress: PropTypes.func.isRequired,
   keyAction: PropTypes.func.isRequired,
   keyType: PropTypes.string.isRequired,
-  keyValue: PropTypes.string.isRequired,
+  keyValue: PropTypes.string.isRequired
 };
 
 Key.defaultProps = {
-  keyType: 'default',
-  keyAction: 'default',
+  keyType: "default",
+  keyAction: "default"
 };
 
 export default Key;

src/components/Keypad/Keypad.jsx

@@ -1,11 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Keypad.css';
+import React from "react";
+import PropTypes from "prop-types";
+import Key from "../Key/Key";
+import "./Keypad.css";
 
-import Key from '../Key/Key';
-import './Keypad.css';
-
-const Keypad = ({ operators, callOperator, handleKeyPress, numbers, setOperator, updateDisplay }) => {
+const Keypad = ({
+  operators,
+  callOperator,
+  handleKeyPress,
+  numbers,
+  setOperator,
+  updateDisplay
+}) => {
   const numberKeys = numbers.map((number, iterator) => (
     <Key
       handleKeyPress={handleKeyPress}
@@ -31,7 +36,12 @@ const Keypad = ({ operators, callOperator, handleKeyPress, numbers, setOperator,
       <div className="numbers-container">{numberKeys}</div>
       <div className="operators-container">{operatorKeys}</div>
       <div className="submit-container">
-        <Key handleKeyPress={handleKeyPress} keyType="submit-key" keyValue="=" keyAction={callOperator} />
+        <Key
+          handleKeyPress={handleKeyPress}
+          keyType="submit-key"
+          keyValue="="
+          keyAction={callOperator}
+        />
       </div>
     </div>
   );
@@ -43,12 +53,12 @@ Keypad.propTypes = {
   numbers: PropTypes.array.isRequired,
   operators: PropTypes.array.isRequired,
   setOperator: PropTypes.func.isRequired,
-  updateDisplay: PropTypes.func.isRequired,
+  updateDisplay: PropTypes.func.isRequired
 };
 
 Keypad.defaultProps = {
   numbers: [],
-  operators: [],
+  operators: []
 };
 
 export default Keypad;