Refactor hooks

src/components/Calculator.js

@@ -1,64 +1,43 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import '../styles/calculator.css';
 import CalculatorButton from './CalculatorButton';
-import calculate from '../logic/calculate';
 import Display from './CalculatorDisplay';
-// As required for this project, components will be defined class based
 
-class Calculator extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      calculatorObj: {},
-    };
-    this.calculateHandler = this.calculateHandler.bind(this);
-  }
+const Calculator = () => {
+  const [calculatorObj, setCalculatorObj] = useState({});
 
-  componentWillUnmount() {
-    this.setState(() => ({
-      calculatorObj: {},
-    }));
-  }
+  useEffect(() => setCalculatorObj({}), []);
 
-  calculateHandler(buttonName) {
-    this.setState((previousState) => ({
-      calculatorObj: calculate(previousState.calculatorObj, buttonName),
-    }));
-  }
-
-  render() {
-    const { calculatorObj } = this.state;
-    return (
-      <div className="calculator-container">
-        <Display
-          total={calculatorObj.total}
-          next={calculatorObj.next}
-          operation={calculatorObj.operation}
-        />
-        <div className="calculator-buttons">
-          <CalculatorButton value="AC" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="+/-" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="%" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="÷" calculateHandler={this.calculateHandler} isSign />
-          <CalculatorButton value="7" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="8" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="9" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="x" calculateHandler={this.calculateHandler} isSign />
-          <CalculatorButton value="4" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="5" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="6" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="-" calculateHandler={this.calculateHandler} isSign />
-          <CalculatorButton value="1" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="2" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="3" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="+" calculateHandler={this.calculateHandler} isSign />
-          <CalculatorButton value="0" calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="." calculateHandler={this.calculateHandler} />
-          <CalculatorButton value="=" calculateHandler={this.calculateHandler} isSign />
-        </div>
+  return (
+    <div className="calculator-container">
+      <Display
+        total={calculatorObj.total}
+        next={calculatorObj.next}
+        operation={calculatorObj.operation}
+      />
+      <div className="calculator-buttons">
+        <CalculatorButton value="AC" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="+/-" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="%" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="÷" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} isSign />
+        <CalculatorButton value="7" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="8" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="9" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="x" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} isSign />
+        <CalculatorButton value="4" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="5" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="6" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="-" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} isSign />
+        <CalculatorButton value="1" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="2" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="3" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="+" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} isSign />
+        <CalculatorButton value="0" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="." calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} />
+        <CalculatorButton value="=" calculateHandler={setCalculatorObj} calculatorObj={calculatorObj} isSign />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Calculator;

src/components/CalculatorButton.js

@@ -1,31 +1,25 @@
 import React from 'react';
-
 import PropTypes from 'prop-types';
-
-// As required for this project, components will be defined class based
-
-class CalculatorButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.calculateHandler = this.calculateHandler.bind(this);
+import calculate from '../logic/calculate';
+
+const CalculatorButton = ({
+  value,
+  isSign,
+  calculateHandler,
+  calculatorObj,
+}) => {
+  const buttonCalculateHandler = () => {
+    calculateHandler(() => calculate(calculatorObj, value));
+  };
+
+  if (value === '0') {
+    return <button type="button" className="calculator-button zero-button" onClick={buttonCalculateHandler}>{value}</button>;
   }
-
-  calculateHandler() {
-    const { calculateHandler, value } = this.props;
-    calculateHandler(value);
+  if (isSign) {
+    return <button type="button" className="calculator-button sign-button" onClick={buttonCalculateHandler}>{value}</button>;
   }
-
-  render() {
-    const { value, isSign } = this.props;
-    if (value === '0') {
-      return <button type="button" className="calculator-button zero-button" onClick={this.calculateHandler}>{value}</button>;
-    }
-    if (isSign) {
-      return <button type="button" className="calculator-button sign-button" onClick={this.calculateHandler}>{value}</button>;
-    }
-    return <button type="button" className="calculator-button" onClick={this.calculateHandler}>{value}</button>;
-  }
-}
+  return <button type="button" className="calculator-button" onClick={buttonCalculateHandler}>{value}</button>;
+};
 
 CalculatorButton.defaultProps = {
   isSign: false,
@@ -35,6 +29,7 @@ CalculatorButton.propTypes = {
   value: PropTypes.string.isRequired,
   isSign: PropTypes.bool,
   calculateHandler: PropTypes.func.isRequired,
+  calculatorObj: PropTypes.objectOf(PropTypes.string).isRequired,
 };
 
 export default CalculatorButton;

src/components/CalculatorDisplay.js

@@ -2,37 +2,16 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-// As required for this project, components will be defined class based
-
-// eslint-disable-next-line react/prefer-stateless-function
-class Display extends React.Component {
-  render() {
-    const { total, next, operation } = this.props;
-
-    if (!next && !total) {
-      return (
-        <div className="display">
-          <span className="previusOperation"> 0 </span>
-          <p> 0 </p>
-        </div>
-      );
-    }
-    if (!next) {
-      return (
-        <div className="display">
-          <span className="previusOperation">
-            {total}
-            {' '}
-            {operation}
-            {' '}
-            {next}
-          </span>
-          <p>
-            {total}
-          </p>
-        </div>
-      );
-    }
+const Display = ({ total, next, operation }) => {
+  if (!next && !total) {
+    return (
+      <div className="display">
+        <span className="previusOperation"> 0 </span>
+        <p> 0 </p>
+      </div>
+    );
+  }
+  if (!next) {
     return (
       <div className="display">
         <span className="previusOperation">
@@ -43,12 +22,26 @@ class Display extends React.Component {
           {next}
         </span>
         <p>
-          {next}
+          {total}
         </p>
       </div>
     );
   }
-}
+  return (
+    <div className="display">
+      <span className="previusOperation">
+        {total}
+        {' '}
+        {operation}
+        {' '}
+        {next}
+      </span>
+      <p>
+        {next}
+      </p>
+    </div>
+  );
+};
 
 Display.defaultProps = {
   total: null,

src/styles/calculator.css

@@ -4,7 +4,7 @@
 
 .calculator-container p {
   width: 100%;
-  padding: 20px 5px;
+  padding: 30px 5px;
   text-align: right;
   background-color: rgb(159 165 180);
   color: white;