All files / src/components/CookieNotice CookieNotice.jsx

50% Statements 7/14
41.67% Branches 5/12
40% Functions 2/5
50% Lines 7/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81              1x 1x             1x             1x           1x                       1x   1x                                                                            
import React, { PureComponent } from 'react';
import { Link } from 'react-router-dom';
 
import styles from './CookieNotice.scss';
 
class CookieNotice extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      accepted: localStorage ? localStorage.getItem('cookiesAccepted') : false,
      dismissed: false,
      noticeDelivered: localStorage ? localStorage.getItem('noticeDelivered') : null,
    };
  }
 
  handleAccept = () => {
    this.setState({
      accepted: true,
      dismissed: true,
    });
  }
 
  handleDismiss = () => {
    this.setState({
      dismissed: true,
    });
  }
 
  handleDismissEnd = (event) => {
    if (localStorage && event.target === event.currentTarget) {
      const { accepted } = this.state;
      localStorage.setItem('noticeDelivered', true);
      localStorage.setItem('cookiesAccepted', accepted);
      this.setState({
        noticeDelivered: true,
      });
    }
  }
 
  render() {
    const { dismissed, noticeDelivered } = this.state;
 
    return (Boolean(noticeDelivered) === false && (
      <div
        className={`${styles.notice}${dismissed ? ` ${styles['notice--fade']}` : ''}`}
        onTransitionEnd={this.handleDismissEnd}
      >
        <section>
          <button
            onClick={this.handleDismiss}
            className={styles.notice__dismiss}
            type="button"
          >
            <i className="material-icons">close</i>
          </button>
        </section>
        <section className={styles.notice__text}>
          This website uses Google Analytics in order to collect anonymous usage data.
          You can find out more in my
          {' '}
          <Link to="/privacy" className={styles.notice__link}>privacy policy.</Link>
          {' '}
          By using this website, you consent to the use of
          statistical information according to the privacy policy.
        </section>
        <section>
          <button
            onClick={this.handleAccept}
            className={styles.notice__accept}
            type="button"
          >
            Accept
          </button>
        </section>
      </div>
    ));
  }
}
 
export default CookieNotice;