From d3253d8c901fc08275c4cc5d322b793acff8cc1e Mon Sep 17 00:00:00 2001
From: bortojac <bortojac@gmail.com>
Date: Thu, 29 Mar 2018 23:48:00 -0400
Subject: [PATCH 1/3] close form when new hand clicked

- update to React 16.3
- remove componentWillMount in exchange for new static lifestyle method getDerivedStateFromProps
- feature implemented by lifting 'active' form state up to index where they are rendered
- known issue - Warning received in console claiming that componentWillReceiveProps() is being called in Form component.
- Form state is not cleared when clicking the same hand
---
 components/form.js | 30 ++++++++++++++++++++++--------
 components/hand.js |  8 +++++---
 package.json       |  6 +++---
 pages/index.js     | 36 ++++++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/components/form.js b/components/form.js
index 8271cf5..9239646 100644
--- a/components/form.js
+++ b/components/form.js
@@ -3,8 +3,28 @@ import PropTypes from 'prop-types';
 import firebase from 'lib/firebase';
 
 class Form extends Component {
-  constructor() {
-    super();
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.name !== prevState.hand) {
+      return {
+        hand: nextProps.name,
+        origin: '',
+        email: '',
+        comments: '',
+      };
+    }
+    if (!nextProps.active) {
+      return {
+        hand: prevState.hand,
+        origin: '',
+        email: '',
+        comments: '',
+      };
+    }
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.state = {
@@ -15,12 +35,6 @@ class Form extends Component {
     };
   }
 
-  componentWillMount() {
-    this.setState({
-      hand: this.props.name,
-    });
-  }
-
   componentDidMount() {
     this.submissionsRef = firebase.database().ref('submissions');
   }
diff --git a/components/hand.js b/components/hand.js
index f1c3d49..d5869b1 100644
--- a/components/hand.js
+++ b/components/hand.js
@@ -6,15 +6,14 @@ class Hand extends React.Component {
     super(props);
     this.state = {
       handActive: false,
-      form: false,
     };
     this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
     this.setState({
       handActive: !this.state.handActive,
-      form: !this.state.form,
     });
+    this.props.resetFormState(this.props.name);
   }
   render() {
     const isActive = this.state.handActive ? 'active' : '';
@@ -32,7 +31,7 @@ class Hand extends React.Component {
             <img src={this.props.bwHand} className="black-white" alt={this.props.name} />
           </figure>
         </div>
-        <Form name={this.props.name} active={this.state.form} color={this.props.color} />
+        <Form name={this.props.name} active={this.props.formActive} color={this.props.color} />
         <style jsx>
           {`
             @import './styles/variables.css';
@@ -106,6 +105,7 @@ Hand.defaultProps = {
   color: '#000000',
   colorHand: '',
   bwHand: '',
+  formActive: false,
 };
 
 Hand.propTypes = {
@@ -113,6 +113,8 @@ Hand.propTypes = {
   color: PropTypes.string,
   colorHand: PropTypes.string,
   bwHand: PropTypes.string,
+  formActive: PropTypes.bool,
+  resetFormState: PropTypes.func.isRequired,
 };
 
 export default Hand;
diff --git a/package.json b/package.json
index e2375c5..99ba8be 100644
--- a/package.json
+++ b/package.json
@@ -50,14 +50,14 @@
     "babel-plugin-transform-assets-import-to-string": "^1.0.1",
     "babel-plugin-transform-inline-environment-variables": "^0.3.0",
     "firebase": "^4.10.1",
-    "next": "^5.0.0",
+    "next": "^5.1.0",
     "postcss-cssnext": "^3.1.0",
     "postcss-easy-import": "^3.0.0",
     "postcss-import": "^11.1.0",
     "prettier": "^1.8.2",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "styled-jsx-plugin-postcss": "^0.1.2"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index 501589d..d110204 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -28,6 +28,7 @@ class Index extends React.Component {
           color: '#ffc74f',
           colorHand: bangladesh,
           bwHand: bangladeshBW,
+          formActive: false,
         },
         {
           order: 1,
@@ -35,6 +36,7 @@ class Index extends React.Component {
           color: '#d09afc',
           colorHand: centralEurope,
           bwHand: centralEuropeBW,
+          formActive: false,
         },
         {
           order: 2,
@@ -42,6 +44,7 @@ class Index extends React.Component {
           color: '#475aeb',
           colorHand: china,
           bwHand: chinaBW,
+          formactive: false,
         },
         {
           order: 3,
@@ -49,6 +52,7 @@ class Index extends React.Component {
           color: '#6ad4fc',
           colorHand: japan,
           bwHand: japanBW,
+          formActive: false,
         },
         {
           order: 4,
@@ -56,6 +60,7 @@ class Index extends React.Component {
           color: '#fc92e7',
           colorHand: northAmerica,
           bwHand: northAmericaBW,
+          formActive: false,
         },
         {
           order: 5,
@@ -63,6 +68,7 @@ class Index extends React.Component {
           color: '#5ae079',
           colorHand: taiwan,
           bwHand: taiwanBW,
+          formActive: false,
         },
         {
           order: 6,
@@ -70,9 +76,37 @@ class Index extends React.Component {
           color: '#f21c1c',
           colorHand: other,
           bwHand: otherBW,
+          formActive: false,
         },
       ],
     };
+    this.resetFormState = this.resetFormState.bind(this);
+  }
+
+  resetFormState(activeFormName) {
+    // we want to update the formActive state for all hands except activeFormName
+    const newRegions = this.state.regions.map(obj => {
+      if (obj.name === activeFormName) {
+        return {
+          order: obj.order,
+          name: obj.name,
+          color: obj.color,
+          colorHand: obj.colorHand,
+          bwHand: obj.bwHand,
+          formActive: true,
+        };
+      }
+      return {
+        order: obj.order,
+        name: obj.name,
+        color: obj.color,
+        colorHand: obj.colorHand,
+        bwHand: obj.bwHand,
+        formActive: false,
+      };
+    });
+
+    this.setState({ regions: newRegions });
   }
 
   render() {
@@ -104,6 +138,8 @@ class Index extends React.Component {
               color={hand.color}
               colorHand={hand.colorHand}
               bwHand={hand.bwHand}
+              formActive={hand.formActive}
+              resetFormState={this.resetFormState}
             />
           ))}
         </section>

From d7cb1966b313646e3f71f64597507782d4d75c9c Mon Sep 17 00:00:00 2001
From: bortojac <bortojac@gmail.com>
Date: Thu, 29 Mar 2018 23:54:08 -0400
Subject: [PATCH 2/3] clear Form when clicking the active hand

- no other changes to last commit
---
 components/form.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/form.js b/components/form.js
index 9239646..6bf2779 100644
--- a/components/form.js
+++ b/components/form.js
@@ -12,15 +12,13 @@ class Form extends Component {
         comments: '',
       };
     }
-    if (!nextProps.active) {
-      return {
-        hand: prevState.hand,
-        origin: '',
-        email: '',
-        comments: '',
-      };
-    }
-    return null;
+
+    return {
+      hand: prevState.hand,
+      origin: '',
+      email: '',
+      comments: '',
+    };
   }
 
   constructor(props) {

From f41cadde8762fa455296fa38b03ce2c25d822129 Mon Sep 17 00:00:00 2001
From: bortojac <bortojac@gmail.com>
Date: Tue, 10 Apr 2018 21:04:32 -0400
Subject: [PATCH 3/3] remove redundancy within getDerivedStateFromProps in
 form.js and in resetFormState() in index.js

---
 components/form.js | 12 +-----------
 pages/index.js     | 28 ++++++++--------------------
 2 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/components/form.js b/components/form.js
index 6bf2779..fcad1a4 100644
--- a/components/form.js
+++ b/components/form.js
@@ -4,17 +4,8 @@ import firebase from 'lib/firebase';
 
 class Form extends Component {
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.name !== prevState.hand) {
-      return {
-        hand: nextProps.name,
-        origin: '',
-        email: '',
-        comments: '',
-      };
-    }
-
     return {
-      hand: prevState.hand,
+      hand: nextProps.name !== prevState.hand ? nextProps.name : prevState.hand,
       origin: '',
       email: '',
       comments: '',
@@ -52,7 +43,6 @@ class Form extends Component {
   render() {
     const isActive = this.props.active ? 'active' : '';
     const { name } = this.props;
-
     return (
       <form className={`form ${isActive}`}>
         <label className="label" htmlFor="origin">
diff --git a/pages/index.js b/pages/index.js
index d110204..030a177 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -85,26 +85,14 @@ class Index extends React.Component {
 
   resetFormState(activeFormName) {
     // we want to update the formActive state for all hands except activeFormName
-    const newRegions = this.state.regions.map(obj => {
-      if (obj.name === activeFormName) {
-        return {
-          order: obj.order,
-          name: obj.name,
-          color: obj.color,
-          colorHand: obj.colorHand,
-          bwHand: obj.bwHand,
-          formActive: true,
-        };
-      }
-      return {
-        order: obj.order,
-        name: obj.name,
-        color: obj.color,
-        colorHand: obj.colorHand,
-        bwHand: obj.bwHand,
-        formActive: false,
-      };
-    });
+    const newRegions = this.state.regions.map(obj => ({
+      order: obj.order,
+      name: obj.name,
+      color: obj.color,
+      colorHand: obj.colorHand,
+      bwHand: obj.bwHand,
+      formActive: obj.name === activeFormName,
+    }));
 
     this.setState({ regions: newRegions });
   }