Kutt/client/components/Shortener/Shortener.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled from 'styled-components';
import ShortenerResult from './ShortenerResult';
import ShortenerTitle from './ShortenerTitle';
import ShortenerInput from './ShortenerInput';
import ShortenerCaptcha from './ShortenerCaptcha';
import { createShortUrl, setShortenerFormError } from '../../actions';
import showRecaptcha from '../../helpers/recaptcha';
import { fadeIn } from '../../helpers/animations';

const Wrapper = styled.div`
  position: relative;
  width: 800px;
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin: 16px 0 40px;
  padding-bottom: 125px;
  animation: ${fadeIn} 0.8s ease-out;

  @media only screen and (max-width: 800px) {
    padding: 0 8px 96px;
  }
`;

const ResultWrapper = styled.div`
  position: relative;
  height: 96px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;

  @media only screen and (max-width: 448px) {
    height: 72px;
  }
`;

class Shortener extends Component {
  constructor() {
    super();
    this.state = {
      isCopied: false,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.copyHandler = this.copyHandler.bind(this);
  }

  componentDidMount() {
    showRecaptcha();
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { isAuthenticated, shortenerError, shortenerLoading, url: { isShortened } } = this.props;
    return (
      isAuthenticated !== nextProps.isAuthenticated ||
      shortenerError !== nextProps.shortenerError ||
      isShortened !== nextProps.url.isShortened ||
      shortenerLoading !== nextProps.shortenerLoading ||
      this.state.isCopied !== nextState.isCopied
    );
  }

  handleSubmit(e) {
    const { isAuthenticated } = this.props;
    e.preventDefault();
    const shortenerForm = document.getElementById('shortenerform');
    const {
      target: originalUrl,
      customurl: customurlInput,
      password: pwd,
      'g-recaptcha-input': recaptcha,
    } = shortenerForm.elements;
    const target = originalUrl.value.trim();
    const customurl = customurlInput && customurlInput.value.trim();
    const password = pwd && pwd.value;
    const reCaptchaToken = !isAuthenticated && recaptcha && recaptcha.value;
    if (!isAuthenticated && !reCaptchaToken) {
      window.grecaptcha.reset();
      return this.props.setShortenerFormError('reCAPTCHA is not valid. Try again.');
    }
    const options = isAuthenticated && { customurl, password };
    shortenerForm.reset();
    if (!isAuthenticated && recaptcha) window.grecaptcha.reset();
    return this.props.createShortUrl({ target, reCaptchaToken, ...options });
  }

  copyHandler() {
    this.setState({ isCopied: true });
    setTimeout(() => {
      this.setState({ isCopied: false });
    }, 1500);
  }

  render() {
    const { isCopied } = this.state;
    const { isAuthenticated, shortenerError, shortenerLoading, url } = this.props;
    return (
      <Wrapper>
        <ResultWrapper>
          {!shortenerError && (url.isShortened || shortenerLoading) ? (
            <ShortenerResult
              copyHandler={this.copyHandler}
              loading={shortenerLoading}
              url={url}
              isCopied={isCopied}
            />
          ) : (
            <ShortenerTitle />
          )}
        </ResultWrapper>
        <ShortenerInput
          isAuthenticated={isAuthenticated}
          handleSubmit={this.handleSubmit}
          setShortenerFormError={this.props.setShortenerFormError}
        />
        {!isAuthenticated && <ShortenerCaptcha />}
      </Wrapper>
    );
  }
}

Shortener.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  createShortUrl: PropTypes.func.isRequired,
  shortenerError: PropTypes.string.isRequired,
  shortenerLoading: PropTypes.bool.isRequired,
  setShortenerFormError: PropTypes.func.isRequired,
  url: PropTypes.shape({
    isShortened: PropTypes.bool.isRequired,
  }).isRequired,
};

const mapStateToProps = ({
  auth: { isAuthenticated },
  error: { shortener: shortenerError },
  loading: { shortener: shortenerLoading },
  url,
}) => ({
  isAuthenticated,
  shortenerError,
  shortenerLoading,
  url,
});

const mapDispatchToProps = dispatch => ({
  createShortUrl: bindActionCreators(createShortUrl, dispatch),
  setShortenerFormError: bindActionCreators(setShortenerFormError, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Shortener);