Optimize ref in LoginContainer

kokororin · Jun 23, 2018 · 24749f0 · 24749f0
1 parent ebb44db
commit 24749f0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 101 deletions.
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -12,16 +12,22 @@ import Icon from 'react-mdl/lib/Icon';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
-import withRef from '@/utils/withRef';
 
-class Login extends React.Component {
+@injectIntl
+@CSSModules(styles, { allowMultiple: true })
+export default class Login extends React.Component {
   static propTypes = {
+    onRef: PropTypes.func,
     onLogoutClick: PropTypes.func,
     onLogoutClick: PropTypes.func,
     isSubmitting: PropTypes.bool,
     authData: PropTypes.object
   };
 
+  static defaultProps = {
+    onRef() {}
+  };
+
   constructor(props) {
     super(props);
 
@@ -36,6 +42,7 @@ class Login extends React.Component {
   }
 
   componentDidMount() {
+    this.props.onRef(this);
     const authData = Storage.get('auth');
     this.setState({
       authData
@@ -161,9 +168,3 @@ class Login extends React.Component {
     );
   }
 }
-
-export default withRef(
-  // eslint-disable-next-line babel/new-cap
-  CSSModules(Login, styles, { allowMultiple: true }),
-  injectIntl
-);
diff --git a/src/containers/IllustContainer.js b/src/containers/IllustContainer.js
@@ -97,7 +97,7 @@ export default class IllustContainer extends React.Component {
   onFavouriteClick(event) {
     const authData = Storage.get('auth');
     if (authData === null || authData.expires_at < moment().unix()) {
-      return this.loginRef.getRef().open();
+      return this.loginRef.open();
     }
     const target = event.target,
       body = document.body;
@@ -307,7 +307,7 @@ export default class IllustContainer extends React.Component {
               <Loading isHidden={!this.props.illust.isFetchingComments} />
             </div>
           </InfiniteScroll>
-          <LoginContainer ref={ref => (this.loginRef = ref)} />
+          <LoginContainer onRef={ref => (this.loginRef = ref)} />
           <Alert ref={ref => (this.alertRef = ref)} />
         </div>
       );

diff --git a/src/containers/LoginContainer.js b/src/containers/LoginContainer.js
@@ -1,16 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 
 import Alert from '@/components/Alert';
 import Login from '@/components/Login';
 import cachedFetch from '@/utils/cachedFetch';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
-import withRef from '@/utils/withRef';
 
 import config from '@/config';
 
-class LoginContainer extends React.Component {
+@injectIntl
+export default class LoginContainer extends React.Component {
+  static propTypes = {
+    onRef: PropTypes.func
+  };
+
+  static defaultProps = {
+    onRef() {}
+  };
+
   constructor(props) {
     super(props);
 
@@ -21,6 +30,7 @@ class LoginContainer extends React.Component {
   }
 
   componentDidMount() {
+    this.props.onRef(this);
     const authData = Storage.get('auth');
     this.setState({
       authData
@@ -35,25 +45,22 @@ class LoginContainer extends React.Component {
   @autobind
   onKeydown(event) {
     if (event.keyCode === 27) {
-      this.loginRef.getRef().close();
+      this.loginRef.close();
     }
 
-    if (
-      this.loginRef.getRef().state.isHidden === false &&
-      event.keyCode === 13
-    ) {
+    if (this.loginRef.state.isHidden === false && event.keyCode === 13) {
       this.onLoginClick();
     }
   }
 
   @autobind
   open() {
-    this.loginRef.getRef().open();
+    this.loginRef.open();
   }
 
   @autobind
   close() {
-    this.loginRef.getRef().close();
+    this.loginRef.close();
   }
 
   @autobind
@@ -70,8 +77,8 @@ class LoginContainer extends React.Component {
       );
     }
 
-    const username = this.loginRef.getRef().getUsername();
-    const password = this.loginRef.getRef().getPassword();
+    const username = this.loginRef.getUsername();
+    const password = this.loginRef.getPassword();
 
     if (username === '') {
       return this.alertRef.setContent(
@@ -115,8 +122,8 @@ class LoginContainer extends React.Component {
           });
           setTimeout(() => {
             this.close();
-            this.loginRef.getRef().setUsername('');
-            this.loginRef.getRef().setPassword('');
+            this.loginRef.setUsername('');
+            this.loginRef.setPassword('');
           }, 1500);
         } else {
           this.alertRef.setContent(data.message);
@@ -149,7 +156,7 @@ class LoginContainer extends React.Component {
     return (
       <div>
         <Login
-          ref={ref => (this.loginRef = ref)}
+          onRef={ref => (this.loginRef = ref)}
           onLoginClick={this.onLoginClick}
           onLogoutClick={this.onLogoutClick}
           isSubmitting={this.state.isSubmitting}
@@ -160,5 +167,3 @@ class LoginContainer extends React.Component {
     );
   }
 }
-
-export default withRef(LoginContainer, injectIntl);
diff --git a/src/utils/withRef.js b/src/utils/withRef.js