styled components

Author: MacKentoch

Diff for: src/app/views/about/About.js

@@ -2,38 +2,26 @@
 
 // #region imports
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styles from './about.scss';
+import { type Match, type Location, type RouterHistory } from 'react-router';
 // #endregion
 
 // #region flow types
-type Props = any;
-type State = any;
-// #endregion
+type Props = {
+  match: Match,
+  location: Location,
+  history: RouterHistory,
+
+  currentView: string,
+  enterAbout: () => any,
+  leaveAbout: () => any,
+
+  ...any,
+};
 
-// #region constants
-// IMPORTANT: we need to bind classnames to CSSModule generated classes:
-const cx = classnames.bind(styles);
+type State = any;
 // #endregion
 
 class About extends PureComponent<Props, State> {
-  static propTypes = {
-    // react-router 4:
-    match: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-
-    // views
-    currentView: PropTypes.string.isRequired,
-    enterAbout: PropTypes.func.isRequired,
-    leaveAbout: PropTypes.func.isRequired,
-  };
-
-  state = {
-    viewEntersAnim: true,
-  };
-
   // #region lifecycle
   componentDidMount() {
     const { enterAbout } = this.props;
@@ -46,10 +34,8 @@ class About extends PureComponent<Props, State> {
   }
 
   render() {
-    const { viewEntersAnim } = this.state;
-
     return (
-      <div className={cx({ 'view-enter': viewEntersAnim })}>
+      <div>
         <h1>About</h1>
       </div>
     );

Diff for: src/app/views/about/about.scss

@@ -4,9 +4,7 @@
 import React, { PureComponent } from 'react';
 import { type Match, type Location, type RouterHistory } from 'react-router';
 import Jumbotron from '../../components/jumbotron/Jumbotron';
-// import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-// import styles from './home.scss';
 // #endregion
 
 // #region flow types
@@ -43,11 +41,6 @@ export type Props = {
 export type State = any;
 // #endregion
 
-// #region constants
-// IMPORTANT: we need to bind classnames to CSSModule generated classes:
-// const cx = classnames.bind(styles);
-// #endregion
-
 class Home extends PureComponent<Props, State> {
   // #region lifecycle
   componentDidMount() {

Diff for: src/app/views/home/Home.js

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { ErrorAlert } from '../../components';
 import * as UserAuthTypes from '../../redux/modules/userAuth.types';
 import { type Match, type Location, type RouterHistory } from 'react-router';
-// import styles from './login.scss';
+import styled from 'styled-components';
 // #endregion
 
 // #region flow types
@@ -55,9 +55,11 @@ export type State = {
 };
 // #endregion
 
-// #region constants
-// IMPORTANT: we need to bind classnames to CSSModule generated classes:
-// const cx = classnames.bind(styles);
+// #region styled components
+const LoginButton = styled.button`
+  margin-left: 10px;
+`;
+
 // #endregion
 
 class Login extends PureComponent<Props, State> {
@@ -131,13 +133,13 @@ class Login extends PureComponent<Props, State> {
                     <Link className="btn btn-default" to={'/'}>
                       Cancel
                     </Link>
-                    <button
-                      className="btn btn-primary loginButton"
+                    <LoginButton
+                      className="btn btn-primary"
                       disabled={mutationLoading}
                       onClick={this.handlesOnLogin}
                     >
                       Login
-                    </button>
+                    </LoginButton>
                   </div>
                 </div>
               </fieldset>
@@ -155,22 +157,32 @@ class Login extends PureComponent<Props, State> {
   }
   // #endregion
 
-  handlesOnEmailChange = event => {
-    event.preventDefault();
-    // should add some validator before setState in real use cases
-    this.setState({ email: event.target.value });
+  handlesOnEmailChange = (event: SyntheticEvent<>) => {
+    if (event) {
+      event.preventDefault();
+      // should add some validator before setState in real use cases
+      // $FlowIgnore
+      this.setState({ email: event.target.value });
+    }
   };
 
-  handlesOnPasswordChange = event => {
-    event.preventDefault();
-    // should add some validator before setState in real use cases
-    this.setState({ password: event.target.value });
+  handlesOnPasswordChange = (event: SyntheticEvent<>) => {
+    if (event) {
+      event.preventDefault();
+      // should add some validator before setState in real use cases
+      this.setState({
+        // $FlowIgnore
+        password: event.target.value,
+      });
+    }
   };
 
-  handlesOnLogin = async event => {
-    event.preventDefault();
-    const { loginUser, history } = this.props;
+  handlesOnLogin = async (event: SyntheticEvent<>) => {
+    if (event) {
+      event.preventDefault();
+    }
 
+    const { loginUser, history } = this.props;
     const { email, password } = this.state;
 
     const user = {
@@ -186,8 +198,10 @@ class Login extends PureComponent<Props, State> {
     }
   };
 
-  closeError = event => {
-    event.preventDefault();
+  closeError = (event: SyntheticEvent<>) => {
+    if (event) {
+      event.preventDefault();
+    }
     const { resetLogError } = this.props;
     resetLogError();
   };