From 37fca17194873735342c3aa5af1feb4840bcc3aa Mon Sep 17 00:00:00 2001
From: Nikola Dojic <nicolladojic@gmail.com>
Date: Sat, 3 Dec 2022 18:08:32 +0100
Subject: [PATCH] Add mapDispatchToProps in components

---
 src/components/dates/DatePicker.jsx      | 19 +++++++++++--------
 src/components/status/StatusSelector.jsx | 17 ++++++++++-------
 src/components/type/TypeSelector.jsx     | 11 +++++++----
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/dates/DatePicker.jsx b/src/components/dates/DatePicker.jsx
index 1409c3f..c712f24 100644
--- a/src/components/dates/DatePicker.jsx
+++ b/src/components/dates/DatePicker.jsx
@@ -11,7 +11,7 @@ export class DatePicker extends React.Component {
   }
 
   onChange(event) {
-    this.props.dispatch(setDate(event.target.value, this.props.onChangeAction));
+    this.props.setDate(event.target.value, this.props.onChangeAction);
   }
 
   render() {
@@ -32,16 +32,19 @@ export class DatePicker extends React.Component {
 }
 
 DatePicker.propTypes = {
-  value: PropTypes.string,
-  setDate: PropTypes.func,
-  dispatch: PropTypes.func,
+  colour: PropTypes.string,
   onChangeAction: PropTypes.string,
+  setDate: PropTypes.func,
   title: PropTypes.string,
-  colour: PropTypes.string
+  value: PropTypes.string,
 };
 
-const mapStateToProps = state => ({
-  value: state.value
+const mapStateToProps = (state) => ({
+  value: state.value,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setDate: (value, dateActionType) => dispatch(setDate(value, dateActionType)),
 });
 
-export default connect(mapStateToProps)(DatePicker);
+export default connect(mapStateToProps, mapDispatchToProps)(DatePicker);
diff --git a/src/components/status/StatusSelector.jsx b/src/components/status/StatusSelector.jsx
index e2bc395..09e23dc 100644
--- a/src/components/status/StatusSelector.jsx
+++ b/src/components/status/StatusSelector.jsx
@@ -11,7 +11,7 @@ export class StatusSelector extends React.Component {
   }
 
   onChange(event) {
-    this.props.dispatch(setStatus(event.target.value));
+    this.props.setStatus(event.target.value);
   }
 
   render() {
@@ -26,7 +26,7 @@ export class StatusSelector extends React.Component {
             id="status"
           >
             <option value="">All</option>
-            {Object.keys(STATUSES).map(status => (
+            {Object.keys(STATUSES).map((status) => (
               <option value={status} key={status}>
                 {status}
               </option>
@@ -39,13 +39,16 @@ export class StatusSelector extends React.Component {
 }
 
 StatusSelector.propTypes = {
-  value: PropTypes.string,
   setStatus: PropTypes.func,
-  dispatch: PropTypes.func
+  value: PropTypes.string,
 };
 
-const mapStateToProps = state => ({
-  value: state.value
+const mapStateToProps = (state) => ({
+  value: state.value,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setStatus: (status) => dispatch(setStatus(status)),
 });
 
-export default connect(mapStateToProps)(StatusSelector);
+export default connect(mapStateToProps, mapDispatchToProps)(StatusSelector);
diff --git a/src/components/type/TypeSelector.jsx b/src/components/type/TypeSelector.jsx
index fe4d01b..cfd6dda 100644
--- a/src/components/type/TypeSelector.jsx
+++ b/src/components/type/TypeSelector.jsx
@@ -17,7 +17,7 @@ export class TypeSelector extends React.Component {
         return option.value;
       });
     }
-    this.props.dispatch(setType(types));
+    this.props.setType(types);
   }
 
   render() {
@@ -45,13 +45,16 @@ export class TypeSelector extends React.Component {
 }
 
 TypeSelector.propTypes = {
-  value: PropTypes.string,
   setType: PropTypes.func,
-  dispatch: PropTypes.func,
+  value: PropTypes.string,
 };
 
 const mapStateToProps = (state) => ({
   value: state.value,
 });
 
-export default connect(mapStateToProps)(TypeSelector);
+const mapDispatchToProps = (dispatch) => ({
+  setType: (types) => dispatch(setType(types)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TypeSelector);