Keypress support included - andrewagain#55

Author: brindha-venkatesan-3498

src/component/App.js

@@ -2,6 +2,7 @@ import React from "react";
 import Display from "./Display";
 import ButtonPanel from "./ButtonPanel";
 import calculate from "../logic/calculate";
+import {isAlphaNumericKey, keyCodes} from '../utils/helper_methods';
 import "./App.css";
 
 export default class App extends React.Component {
@@ -15,6 +16,33 @@ export default class App extends React.Component {
     this.setState(calculate(this.state, buttonName));
   };
 
+  componentDidMount = ()=>{
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  componentWillUnmount = ()=>{
+    document.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  handleKeyDown = (orgEvent)=>{
+    let key = orgEvent.key;
+    let isENTERKey = orgEvent.keyCode === keyCodes.ENTER;
+    if(isENTERKey || isAlphaNumericKey(orgEvent)){
+      if(key !== "x" && key !== "÷"){
+        if(key === '*'){ 
+          key = 'x'; 
+        }else if(key === "/"){ 
+          key = "÷"; 
+        }else if(isENTERKey){
+          key = "="; 
+        }
+        let validCalcKeys = ["%", "÷", "7", "8", "9", "x", "4", "5", "6", "-", "1", "2", "3", "+","0", ".", "=", "Backspace"];
+        if(validCalcKeys.indexOf(key) !== -1){
+          this.handleClick(key, true);
+        }
+      }
+    }
+  };
+
   render() {
     return (
       <div className="component-app">

src/logic/calculate.js

@@ -20,6 +20,18 @@ export default function calculate(obj, buttonName) {
       operation: null,
     };
   }
+  if(buttonName === "Backspace"){
+    let display = obj.total || obj.next;
+    if(!obj.operation && display && display !== "0"){
+      display = display.slice(0, display.length-1);
+      return {
+        total: obj.total ? display : obj.total,
+        next: obj.next ? display : obj.next,
+        operation: obj.operation
+      }
+    }
+    return {};
+  }
 
   if (isNumber(buttonName)) {
     if (buttonName === "0" && obj.next === "0") {

src/utils/helper_methods.js

@@ -0,0 +1,15 @@
+const keyCodes = {
+  SPACE: 32,
+  DELETE: 46,
+  BACKSPACE: 8,
+  ENTER: 13
+}
+const isAlphaNumericKey = function(orgEvent) {
+  let keyCode = orgEvent.keyCode;
+  return !(orgEvent.metaKey || orgEvent.ctrlKey) && ((keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222) || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90 )|| (keyCode >= 97 && keyCode <= 122) || (keyCode === keyCodes.SPACE || keyCode === keyCodes.DELETE || keyCode === keyCodes.BACKSPACE));
+}
+const helpers = {
+  keyCodes,
+  isAlphaNumericKey
+}
+module.exports = helpers;