Merge pull request #43 from shanedgarrity/true-ref-forwarding

implement true ref forwarding, eliminate setTimeout/state/ref workaround
shanedg · Sep 10, 2018 · 6bb6611 · 6bb6611
2 parents d52e361 + 2b548b7
commit 6bb6611
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 28 deletions.
diff --git a/src/App.js b/src/App.js
@@ -37,15 +37,13 @@ class App extends Component {
   }
 
   componentDidMount() {
-    setTimeout(() => {
-      if (!this.state.consent.alreadyAsked) {
-        this.setState({
-          extraPadding: {
-            paddingBottom: this.toasterRef.current.state.height + 'px'
-          }
-        });
-      }
-    }, 0);
+    if (!this.state.consent.alreadyAsked) {
+      this.setState({
+        extraPadding: {
+          paddingBottom: this.toasterRef.current.clientHeight
+        }
+      });
+    }
   }
 
   updateConsent(isGranted) {
@@ -143,10 +141,14 @@ class App extends Component {
             transitionLeaveTimeout={500}>
             {this.state.consent &&
               !this.state.consent.alreadyAsked &&
-              <ConsentToaster ref={this.toasterRef} key={'consent-toaster'} consentHandler={this.consentHandler} dismissHandler={this.dismissHandler} />
+              <ConsentToaster
+                key={'consent-toaster'}
+                ref={this.toasterRef}
+                consentHandler={this.consentHandler}
+                dismissHandler={this.dismissHandler}
+              />
             }
           </ReactCSSTransitionGroup>
-
         </div>
       </Router>
     );

diff --git a/src/components/Utils/ConsentToaster.js b/src/components/Utils/ConsentToaster.js
@@ -7,27 +7,12 @@ import './ConsentToaster.css';
 
 class ConsentToaster extends Component {
 
-  constructor(props) {
-    super(props);
-    this.toasterDOM = React.createRef();
-
-    this.state = {
-      height: 0
-    };
-  }
-
-  componentDidMount() {
-    this.setState(() => ({
-      height: this.toasterDOM.current.clientHeight
-    }));
-  }
-
   render() {
 
     return (
       <div className="Consent-Toaster">
         <button className="button dismiss-toaster" id="dismiss-consent-toaster" onClick={this.props.dismissHandler}>X</button>
-        <div className="toaster-body" ref={this.toasterDOM}>
+        <div className="toaster-body" ref={this.props.forwardedRef}>
           <p>This site uses <a href="https://en.wikipedia.org/wiki/HTTP_cookie" target="_blank" rel="noopener noreferrer" title="read more about Cookies">Cookies</a>; do you consent to allowing this site to store Cookies on your device? You can always change your mind later <Link to="/preferences">here</Link>.</p>
           <span className="span consent-choice">
             <button className="button" id="cookie-consent-yes" onClick={this.props.consentHandler}>Yes</button>
@@ -39,4 +24,9 @@ class ConsentToaster extends Component {
   }
 }
 
-export default ConsentToaster;
+export default React.forwardRef((props, ref) => {
+  return <ConsentToaster
+    {...props}
+    forwardedRef={ref}
+  />;
+});