styled components

Author: MacKentoch

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>
  );

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() {

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();
  };