Feature/open one form and clear

components/form.js

@@ -3,8 +3,26 @@ 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: '',
+      };
+    }
+
+    return {
+      hand: prevState.hand,
+      origin: '',
+      email: '',
+      comments: '',
+    };
+  }
+
+  constructor(props) {
+    super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.state = {
@@ -15,12 +33,6 @@ class Form extends Component {
     };
   }
 
-  componentWillMount() {
-    this.setState({
-      hand: this.props.name,
-    });
-  }
-
   componentDidMount() {
     this.submissionsRef = firebase.database().ref('submissions');
   }

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,13 +105,16 @@ Hand.defaultProps = {
   color: '#000000',
   colorHand: '',
   bwHand: '',
+  formActive: false,
 };
 
 Hand.propTypes = {
   name: PropTypes.string,
   color: PropTypes.string,
   colorHand: PropTypes.string,
   bwHand: PropTypes.string,
+  formActive: PropTypes.bool,
+  resetFormState: PropTypes.func.isRequired,
 };
 
 export default Hand;

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": {

pages/index.js

@@ -28,51 +28,85 @@ class Index extends React.Component {
           color: '#ffc74f',
           colorHand: bangladesh,
           bwHand: bangladeshBW,
+          formActive: false,
         },
         {
           order: 1,
           name: 'central europe',
           color: '#d09afc',
           colorHand: centralEurope,
           bwHand: centralEuropeBW,
+          formActive: false,
         },
         {
           order: 2,
           name: 'china',
           color: '#475aeb',
           colorHand: china,
           bwHand: chinaBW,
+          formactive: false,
         },
         {
           order: 3,
           name: 'japan',
           color: '#6ad4fc',
           colorHand: japan,
           bwHand: japanBW,
+          formActive: false,
         },
         {
           order: 4,
           name: 'north america',
           color: '#fc92e7',
           colorHand: northAmerica,
           bwHand: northAmericaBW,
+          formActive: false,
         },
         {
           order: 5,
           name: 'taiwan',
           color: '#5ae079',
           colorHand: taiwan,
           bwHand: taiwanBW,
+          formActive: false,
         },
         {
           order: 6,
           name: 'other',
           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>