Lint & Modernize ZoomOutButton.jsx

Author: louislo7

webapp/javascript/components/ZoomOutButton.jsx

@@ -1,33 +1,26 @@
-import React from 'react';
+import React from "react";
 import { connect } from "react-redux";
-import { setDateRange } from "../redux/actions";
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearchMinus } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearchMinus } from "@fortawesome/free-solid-svg-icons";
+import { setDateRange } from "../redux/actions";
 
-class ZoomOutButton extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+function ZoomOutButton(props) {
+  const { from, until, setDateRange } = props;
 
-  zoomOut = () => {
-    let from = this.props.from;
-    let until = this.props.until;
-    this.props.setDateRange(from, until);
+  const zoomOut = () => {
+    setDateRange(from, until);
   };
 
-  render() {
-    return <div>
-      <button className="btn" onClick={this.zoomOut}>
+  return (
+    <div>
+      <button className="btn" onClick={zoomOut}>
         &nbsp;
         <FontAwesomeIcon icon={faSearchMinus} />
         &nbsp;
       </button>
     </div>
-  }
+  );
 }
 
-export default connect(
-  (x) => x,
-  { setDateRange }
-)(ZoomOutButton);
+export default connect((x) => x, { setDateRange })(ZoomOutButton);