Calculator App using functional components

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "calculator",
+  "name": "calculator-converted-to-functional-react",
   "version": "0.1.0",
   "license": "MIT",
   "homepage": "http://ahfarmer.github.io/calculator",
@@ -36,5 +36,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
-}
+  },
+  "keywords": [],
+  "description": ""
+}

src/component/App.js

@@ -1,26 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Display from "./Display";
 import ButtonPanel from "./ButtonPanel";
 import calculate from "../logic/calculate";
 import "./App.css";
 
-export default class App extends React.Component {
-  state = {
+// -->New App built using function instead of class
+export default function AppFunction() {
+  // -->Initialize a state
+  const [state, setState] = useState({
     total: null,
     next: null,
-    operation: null,
-  };
+    operation: null
+  });
 
-  handleClick = buttonName => {
-    this.setState(calculate(this.state, buttonName));
-  };
-
-  render() {
-    return (
-      <div className="component-app">
-        <Display value={this.state.next || this.state.total || "0"} />
-        <ButtonPanel clickHandler={this.handleClick} />
-      </div>
-    );
+  // -->Handle Click function that takes a button value
+  //    passes it through the logic.js
+  //    and sets the state to the object returned from calculate
+  function handleClick(buttonName) {
+    console.log(buttonName);
+    setState(calculate(state, buttonName));
   }
+
+  return (
+    <div className="component-app">
+      {/* State is sent to the display component */}
+      <Display value={state.next || state.total || "0"} />
+
+      {/* handleClick is a callback function that sends back button name */}
+      <ButtonPanel handleClick={handleClick} />
+    </div>
+  );
 }

src/component/Button.js

@@ -1,30 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
+//import PropTypes from "prop-types";
 import "./Button.css";
 
-export default class Button extends React.Component {
-  static propTypes = {
-    name: PropTypes.string,
-    orange: PropTypes.bool,
-    wide: PropTypes.bool,
-    clickHandler: PropTypes.func,
-  };
+//Button component reacives all the destructured props
+export default function Button({ name, orange, wide, clickHandler }) {
+  const className = [
+    "component-button",
+    orange ? "orange" : "",
+    wide ? "wide" : ""
+  ];
 
-  handleClick = () => {
-    this.props.clickHandler(this.props.name);
-  };
-
-  render() {
-    const className = [
-      "component-button",
-      this.props.orange ? "orange" : "",
-      this.props.wide ? "wide" : "",
-    ];
-
-    return (
-      <div className={className.join(" ").trim()}>
-        <button onClick={this.handleClick}>{this.props.name}</button>
-      </div>
-    );
-  }
+  return (
+    <div className={className.join(" ").trim()}>
+      {/* The Class is Dynamically ^ named based on the props recived */}
+      {/* The onClick callsback clickhandler and send the props name back */}
+      <button onClick={() => clickHandler(name)}>{name}</button>
+    </div>
+  );
 }

src/component/ButtonPanel.js

@@ -1,51 +1,43 @@
 import Button from "./Button";
 import React from "react";
-import PropTypes from "prop-types";
+//import PropTypes from "prop-types";
 
 import "./ButtonPanel.css";
 
-export default class ButtonPanel extends React.Component {
-  static propTypes = {
-    clickHandler: PropTypes.func,
-  };
-
-  handleClick = buttonName => {
-    this.props.clickHandler(buttonName);
-  };
-
-  render() {
-    return (
-      <div className="component-button-panel">
-        <div>
-          <Button name="AC" clickHandler={this.handleClick} />
-          <Button name="+/-" clickHandler={this.handleClick} />
-          <Button name="%" clickHandler={this.handleClick} />
-          <Button name="÷" clickHandler={this.handleClick} orange />
-        </div>
-        <div>
-          <Button name="7" clickHandler={this.handleClick} />
-          <Button name="8" clickHandler={this.handleClick} />
-          <Button name="9" clickHandler={this.handleClick} />
-          <Button name="x" clickHandler={this.handleClick} orange />
-        </div>
-        <div>
-          <Button name="4" clickHandler={this.handleClick} />
-          <Button name="5" clickHandler={this.handleClick} />
-          <Button name="6" clickHandler={this.handleClick} />
-          <Button name="-" clickHandler={this.handleClick} orange />
-        </div>
-        <div>
-          <Button name="1" clickHandler={this.handleClick} />
-          <Button name="2" clickHandler={this.handleClick} />
-          <Button name="3" clickHandler={this.handleClick} />
-          <Button name="+" clickHandler={this.handleClick} orange />
-        </div>
-        <div>
-          <Button name="0" clickHandler={this.handleClick} wide />
-          <Button name="." clickHandler={this.handleClick} />
-          <Button name="=" clickHandler={this.handleClick} orange />
-        </div>
+//recive the props -> handleClick funcion using object destructuring {handleClick}
+export default function ButtonPanel({ handleClick }) {
+  return (
+    <div className="component-button-panel">
+      <div>
+        {/* Handle Click is passed down to the Button Component */}
+        <Button name="AC" clickHandler={handleClick} />
+        <Button name="+/-" clickHandler={handleClick} />
+        <Button name="%" clickHandler={handleClick} />
+        <Button name="÷" clickHandler={handleClick} orange />
+      </div>
+      <div>
+        <Button name="7" clickHandler={handleClick} />
+        <Button name="8" clickHandler={handleClick} />
+        <Button name="9" clickHandler={handleClick} />
+        <Button name="x" clickHandler={handleClick} orange />
+      </div>
+      <div>
+        <Button name="4" clickHandler={handleClick} />
+        <Button name="5" clickHandler={handleClick} />
+        <Button name="6" clickHandler={handleClick} />
+        <Button name="-" clickHandler={handleClick} orange />
+      </div>
+      <div>
+        <Button name="1" clickHandler={handleClick} />
+        <Button name="2" clickHandler={handleClick} />
+        <Button name="3" clickHandler={handleClick} />
+        <Button name="+" clickHandler={handleClick} orange />
+      </div>
+      <div>
+        <Button name="0" clickHandler={handleClick} wide />
+        <Button name="." clickHandler={handleClick} />
+        <Button name="=" clickHandler={handleClick} orange />
       </div>
-    );
-  }
+    </div>
+  );
 }

src/component/Display.js

@@ -1,18 +1,11 @@
 import React from "react";
-import PropTypes from "prop-types";
-
 import "./Display.css";
 
-export default class Display extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-  };
-
-  render() {
-    return (
-      <div className="component-display">
-        <div>{this.props.value}</div>
-      </div>
-    );
-  }
+//Displays value passes to it in a div
+export default function Display({ value }) {
+  return (
+    <div className="component-display">
+      <div>{value}</div>
+    </div>
+  );
 }