From de0c4d1b1b39e382d19639cab2daf5593159b8ab Mon Sep 17 00:00:00 2001 From: Abhinav Sharma Date: Thu, 28 Nov 2019 16:37:17 +0530 Subject: [PATCH 1/2] udpate deps and the node engine --- package.json | 4 -- src/components/App/App.jsx | 6 +-- src/components/Calculator/Calculator.jsx | 69 +++++++++++++----------- src/components/Display/Display.jsx | 8 +-- src/components/Key/Key.jsx | 18 ++++--- src/components/Keypad/Keypad.jsx | 30 +++++++---- 6 files changed, 76 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index d1c991c..27bcde0 100644 --- a/package.json +++ b/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" diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 4ff4d21..326fc9b 100644 --- a/src/components/App/App.jsx +++ b/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 = () => (
diff --git a/src/components/Calculator/Calculator.jsx b/src/components/Calculator/Calculator.jsx index be81ed9..9e9598f 100644 --- a/src/components/Calculator/Calculator.jsx +++ b/src/components/Calculator/Calculator.jsx @@ -1,32 +1,32 @@ -import React, { Component } from 'react'; -import './Calculator.css'; +import React, { Component } from "react"; +import "./Calculator.css"; -import Display from '../Display/Display'; -import Keypad from '../Keypad/Keypad'; -import './Calculator.css'; +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 +49,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 +95,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 +109,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 }); diff --git a/src/components/Display/Display.jsx b/src/components/Display/Display.jsx index 3715913..07b8b8c 100644 --- a/src/components/Display/Display.jsx +++ b/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 }) => (
@@ -10,6 +10,6 @@ const Display = ({ displayValue }) => ( Display.propTypes = { displayValue: PropTypes.string.isRequired }; -Display.defaultProps = { displayValue: 'default' }; +Display.defaultProps = { displayValue: "default" }; export default Display; diff --git a/src/components/Key/Key.jsx b/src/components/Key/Key.jsx index efd18a4..1b83ba6 100644 --- a/src/components/Key/Key.jsx +++ b/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 ( -
keyAction(keyValue)} onKeyPress={event => handleKeyPress(event)}> +
keyAction(keyValue)} + onKeyPress={event => handleKeyPress(event)} + >

{keyValue}

); @@ -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; diff --git a/src/components/Keypad/Keypad.jsx b/src/components/Keypad/Keypad.jsx index 3c11983..59f1b33 100644 --- a/src/components/Keypad/Keypad.jsx +++ b/src/components/Keypad/Keypad.jsx @@ -1,11 +1,18 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import './Keypad.css'; +import React from "react"; +import PropTypes from "prop-types"; +import "./Keypad.css"; -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) => ( {numberKeys}
{operatorKeys}
- +
); @@ -43,12 +55,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; From eb0a80b19f33b6aaea27f0667af0b30358db6e16 Mon Sep 17 00:00:00 2001 From: Abhinav Sharma Date: Thu, 28 Nov 2019 16:48:36 +0530 Subject: [PATCH 2/2] remove the extra imports for css --- src/components/Calculator/Calculator.jsx | 2 -- src/components/Keypad/Keypad.jsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/Calculator/Calculator.jsx b/src/components/Calculator/Calculator.jsx index 9e9598f..2c94812 100644 --- a/src/components/Calculator/Calculator.jsx +++ b/src/components/Calculator/Calculator.jsx @@ -1,6 +1,4 @@ import React, { Component } from "react"; -import "./Calculator.css"; - import Display from "../Display/Display"; import Keypad from "../Keypad/Keypad"; import "./Calculator.css"; diff --git a/src/components/Keypad/Keypad.jsx b/src/components/Keypad/Keypad.jsx index 59f1b33..cb3e0e4 100644 --- a/src/components/Keypad/Keypad.jsx +++ b/src/components/Keypad/Keypad.jsx @@ -1,7 +1,5 @@ import React from "react"; import PropTypes from "prop-types"; -import "./Keypad.css"; - import Key from "../Key/Key"; import "./Keypad.css";