<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchChatMessages, deleteChatMessage } from '../actions/index';
import { bindActionCreators } from 'redux';
import _ from 'lodash'

import CreateChatMessage from './create_chat_message';

class Chat extends Component {
  componentWillMount() {
    this.props.fetchChatMessages();
  }

  renderChatMessages(messages) {
    return this.props.messages.map((message) => {
      return (
        <div key={message._id} style={{border: '1px solid red' }}>
          <p>{message.user}</p>
          <p>{message.date}</p>
          <p>{message.message}</p>
          <button
            className='btn btn-danger'
            onClick={this.onDeleteMessage.bind(this, message._id)}>
            Delete
          </button>
        </div>
      );
    });
  }

  onDeleteMessage(id) {
    this.props.deleteChatMessage(id)

  }

  render() {
    return (
      <div style={{height: '100%'}}>
        <div style={{overflow: 'scroll', height: '100%'}}>
          {this.renderChatMessages()}
        </div>
        <CreateChatMessage />
      </div>
    );
  };
};

function mapStateToProps(state) {
  //whatever is returned will show up as props inside of Chat
  return {
    messages: state.chatMessages.messages
  };<commit_msg>added loading message when fetching messages from database, work in progress, possible solution is to create a field in the reducer to track if fetch or not<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchChatMessages, deleteChatMessage } from '../actions/index';
import { bindActionCreators } from 'redux';
import _ from 'lodash'

import CreateChatMessage from './create_chat_message';

class Chat extends Component {
  componentDidMount() {
    setTimeout(this.props.fetchChatMessages());
  }

  renderChatMessages(messages) {
    return this.props.messages.map((message) => {
      return (
        <div key={message._id} style={{border: '1px solid red' }}>
          <p>{message.user}</p>
          <p>{message.date}</p>
          <p>{message.message}</p>
          <button
            className='btn btn-danger'
            onClick={this.onDeleteMessage.bind(this, message._id)}>
            Delete
          </button>
        </div>
      );
    });
  }

  onDeleteMessage(id) {
    this.props.deleteChatMessage(id)

  }

  render() {
    if(this.props.messages === null) {
      return (
        <div style={{height: '100%'}}>
          <div style={{overflow: 'auto', height: '100%'}}>
            Loading Messages...
          </div>
        </div>
      )
    }

    return (
      <div style={{height: '100%'}}>
        <div style={{overflow: 'scroll', height: '100%'}}>
          {this.renderChatMessages()}
        </div>
        <CreateChatMessage />
      </div>
    );
  };
};

function mapStateToProps(state) {
  //whatever is returned will show up as props inside of Chat
  return {
    messages: state.chatMessages.messages
  };
{'fraction_non_alphanumeric': 0.14469772051536176, 'fraction_numerical': 0.006607201850016518, 'mean_word_length': 2.5415204678362575, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, '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': '5757602', 'n_tokens_mistral': 909, 'n_tokens_neox': 893, 'n_words': 209}