Merge pull request #7 from hessnd/feature/openOneFormAndClear

Feature/open one form and clear
hessnd · Apr 12, 2018 · 140148b · 140148b
2 parents b6cffb5 + f41cadd
commit 140148b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/components/form.js b/components/form.js
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import firebase from 'lib/firebase';
 
 class Form extends Component {
-  constructor() {
-    super();
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return {
+      hand: nextProps.name !== prevState.hand ? nextProps.name : 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 +24,6 @@ class Form extends Component {
     };
   }
 
-  componentWillMount() {
-    this.setState({
-      hand: this.props.name,
-    });
-  }
-
   componentDidMount() {
     this.submissionsRef = firebase.database().ref('submissions');
   }
@@ -40,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/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,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;
diff --git 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
@@ -28,51 +28,73 @@ 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 => ({
+      order: obj.order,
+      name: obj.name,
+      color: obj.color,
+      colorHand: obj.colorHand,
+      bwHand: obj.bwHand,
+      formActive: obj.name === activeFormName,
+    }));
+
+    this.setState({ regions: newRegions });
   }
 
   render() {
@@ -104,6 +126,8 @@ class Index extends React.Component {
               color={hand.color}
               colorHand={hand.colorHand}
               bwHand={hand.bwHand}
+              formActive={hand.formActive}
+              resetFormState={this.resetFormState}
             />
           ))}
         </section>