<commit_before>import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { style } from '../utils';

const { flex, media } = style;

class Main extends Component {
  componentDidMount() {
    // make user info request here using the user Id + JWT in header!
    const { requestUser, user } = this.props;
    requestUser(user.userId);
  }

  render() {
    if (!this.props.user.first_name) {
      return null;
    }
    return (
      <Wrapper>
        Hola, <Emphasis>{this.props.user.first_name}!</Emphasis>
      </Wrapper>
    );
  }
}

export default Main;

const fadeInFromTop = keyframes`
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;

const Wrapper = styled.div`
  font-size: 1.5em;
  animation: 1s ${fadeInFromTop} ease;
`;

const Emphasis = styled.span`
  font-weight: 500;
`;<commit_msg>creating a <Greeting> flow when authenticated -- still need to plan out some wireframes before doing any more UI work<commit_after>import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { style, constants } from '../utils';

const { hello } = constants;
const { flex, media } = style;

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      view: 'hello',
    };
  }
  componentWillMount() {
    // make user info request here using the user Id + JWT in header!
    const { requestUser, user } = this.props;
    requestUser(user.userId);
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        view: 'weight',
      });
    }, 2500);
  }

  render() {
    const { view } = this.state;

    if (!this.props.user.first_name) {
      return null;
    }
    return (
      <Wrapper>
        {view === 'hello' &&
          <Greeting>
            {hello[Math.floor(Math.random() * hello.length)]}
            ,
            {' '}
            <Emphasis>{this.props.user.first_name}!</Emphasis>
          </Greeting>}

        {view === 'weight' &&
          <Greeting>{'Please input your weight now:'}</Greeting>}
      </Wrapper>
    );
  }
}

export default Main;

const fadeInFromTop = keyframes`
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;

const Wrapper = styled.div`
  font-size: 1.5em;
`;

const Greeting = styled.div`
  animation: 1s ${fadeInFromTop} ease;
`;

const Emphasis = styled.span`
  font-weight: 500;
`;
{'fraction_non_alphanumeric': 0.14387351778656127, 'fraction_numerical': 0.013438735177865613, 'mean_word_length': 2.5799151343705797, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '792562', 'n_tokens_mistral': 865, 'n_tokens_neox': 830, 'n_words': 211}