add logic

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "big.js": "^6.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,9 +1,9 @@
-import DisplayCalculator from './components/DisplayCalculator';
+import Calculator from './components/Calculator';
 
 function App() {
   return (
     <div className="app">
-      <DisplayCalculator />
+      <Calculator />
     </div>
   );
 }

src/components/DisplayCalculator.js → src/components/Calculator.js

@@ -1,11 +1,11 @@
 import Buttons from './Buttons';
 
-function DisplayCalculator() {
+function Calculator() {
   return (
     <div className="calculator">
       <input type="text" placeholder="0" className="input" />
       <Buttons />
     </div>
   );
 }
-export default DisplayCalculator;
+export default Calculator;

src/logic/calculate.js

@@ -0,0 +1,133 @@
+import operate from './operate';
+
+function isNumber(item) {
+  return !!item.match(/[0-9]+/);
+}
+
+/**
+ * Given a button name and a calculator data object, return an updated
+ * calculator data object.
+ *
+ * Calculator data object contains:
+ *   total:s      the running total
+ *   next:String       the next number to be operated on with the total
+ *   operation:String  +, -, etc.
+ */
+export default function calculate(obj, buttonName) {
+  if (buttonName === 'AC') {
+    return {
+      total: null,
+      next: null,
+      operation: null,
+    };
+  }
+
+  if (isNumber(buttonName)) {
+    if (buttonName === '0' && obj.next === '0') {
+      return {};
+    }
+    // If there is an operation, update next
+    if (obj.operation) {
+      if (obj.next && obj.next !== '0') {
+        return { ...obj, next: obj.next + buttonName };
+      }
+      return { ...obj, next: buttonName };
+    }
+    // If there is no operation, update next and clear the value
+    if (obj.next && obj.next !== '0') {
+      return {
+        next: obj.next + buttonName,
+        total: null,
+      };
+    }
+    return {
+      next: buttonName,
+      total: null,
+    };
+  }
+
+  if (buttonName === '.') {
+    if (obj.next) {
+      if (obj.next.includes('.')) {
+        return { ...obj };
+      }
+      return { ...obj, next: `${obj.next}.` };
+    }
+    if (obj.operation) {
+      return { ...obj, next: '0.' };
+    }
+    if (obj.total) {
+      if (obj.total.includes('.')) {
+        return {};
+      }
+      return { ...obj, next: `${obj.total}.` };
+    }
+    return { ...obj, next: '0.' };
+  }
+
+  if (buttonName === '=') {
+    if (obj.next && obj.operation) {
+      return {
+        total: operate(obj.total, obj.next, obj.operation),
+        next: null,
+        operation: null,
+      };
+    }
+    // '=' with no operation, nothing to do
+    return {};
+  }
+
+  if (buttonName === '+/-') {
+    if (obj.next) {
+      return { ...obj, next: (-1 * parseFloat(obj.next)).toString() };
+    }
+    if (obj.total) {
+      return { ...obj, total: (-1 * parseFloat(obj.total)).toString() };
+    }
+    return {};
+  }
+
+  // Button must be an operation
+
+  // When the user presses an operation button without having entered
+  // a number first, do nothing.
+  // if (!obj.next && !obj.total) {
+  //   return {};
+  // }
+
+  // User pressed an operation after pressing '='
+  if (!obj.next && obj.total && !obj.operation) {
+    return { ...obj, operation: buttonName };
+  }
+
+  // User pressed an operation button and there is an existing operation
+  if (obj.operation) {
+    if (obj.total && !obj.next) {
+      return { ...obj, operation: buttonName };
+    }
+
+    if (!obj.total) {
+      return { total: 0, operation: buttonName };
+    }
+
+    return {
+      total: operate(obj.total, obj.next, obj.operation),
+      next: null,
+      operation: buttonName,
+    };
+  }
+
+  // no operation yet, but the user typed one
+
+  // The user hasn't typed a number yet, just save the operation
+  if (!obj.next) {
+    return { operation: buttonName };
+  }
+
+  // save the operation and shift 'next' into 'total'
+  return {
+    total: obj.next,
+    next: null,
+    operation: buttonName,
+  };
+}

src/logic/operate.js

@@ -0,0 +1,30 @@
+import Big from 'big.js';
+
+export default function operate(numberOne, numberTwo, operation) {
+  const one = Big(numberOne);
+  const two = Big(numberTwo);
+  if (operation === '+') {
+    return one.plus(two).toString();
+  }
+  if (operation === '-') {
+    return one.minus(two).toString();
+  }
+  if (operation === 'x') {
+    return one.times(two).toString();
+  }
+  if (operation === '÷') {
+    try {
+      return one.div(two).toString();
+    } catch (err) {
+      return "Can't divide by 0.";
+    }
+  }
+  if (operation === '%') {
+    try {
+      return one.mod(two).toString();
+    } catch (err) {
+      return "Can't find modulo as can't divide by 0.";
+    }
+  }
+  throw Error(`Unknown operation '${operation}'`);
+}