<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux'
// import { Route } from 'react-router-dom'
// App.css imports Bootsrap4 css files
import '../styles/App.css';
import {addCategory} from "../actions/index";

// import Posts from './components/Posts'
// import Categories from './components/Categories'


class App extends Component {
     // generate random integer for key index where no unique value available
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
     getRandomInt = (min = 1, max = 999999) =>  {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }


  render() {
         console.log('Props: ', this.props)

    return (
      <div className="App">

          {/* Routes */}
{/*          <Route exact path="/" render={() => (
              <div>
                  <h1>Post, listen, react</h1>
                  show categories
                      <div id="cat-view">
                          <div>
                              { console.log (this.state.commentApp)}
                              <ul id="cat-list">
                                  {
                                      this.state.commentApp.sampleCats.map( (categoryObj) => (
                                          <li key= {this.getRandomInt()}>
                                              { categoryObj.name }
                                          </li>
                                      ) )
                                  }
                              </ul>
                          </div>
                          <div>
                              <input
                                  type="'text"
                                  ref={(input) => this.input = input}
                                  placeholder="enter new category"
                              />
                              <button onClick={this.submitCategory}>Submit</button>
                          </div>
                      </div>
                  show posts
                  <div>

                  </div>
              </div>

          )}
          />*/}
          <p>Hello World</p>

      </div>
    );
  }
}

// mapStateToProps must return a plain object
function mapStateToProps(commentApp) {
    return {}

}

export default connect(mapStateToProps)(App);<commit_msg>cats show in App via connect, will try category component next<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux'
// import { Route } from 'react-router-dom'
// App.css imports Bootsrap4 css files
import '../styles/App.css';
import {addCategory} from "../actions/index";

// import Posts from './components/Posts'
// import Categories from './components/Categories'


class App extends Component {
     // generate random integer for key index where no unique value available
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
     getRandomInt = (min = 1, max = 999999) =>  {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }


  render() {
      console.log('Props: ', this.props);

    return (
      <div className="App">
              <div>
                  <h1>Post, listen, react</h1>
                  show categories
                      <div id="cat-view">
                          <div>
                              <ul id="cat-list">
                                                {/*TODO: using forEach did not work, because does not return array??*/}
                                  {
                                      this.props.categories.map( (category) => (
                                          <li key= {this.getRandomInt()}>
                                              { category }
                                          </li>
                                      ) )
                                  }
                              </ul>
                          </div>
                          <div>
                              <input
                                  type="'text"
                                  ref={(input) => this.input = input}
                                  placeholder="enter new category"
                              />
                              <button onClick={this.submitCategory}>Submit</button>
                          </div>
                      </div>
                  show posts
                  <div>

                  </div>
              </div>

          <p>Hello World</p>

      </div>
    );
  }
}

// mapStateToProps must return a plain object
function mapStateToProps(commentApp) {
    let catArray =  () => {
        let cats = [];
        commentApp.sampleCats.forEach((cat) => { cats.push(cat.name) } )
        return cats;
    }

    return {
        categories : catArray()
    };
}

export default connect(mapStateToProps)(App);
{'fraction_non_alphanumeric': 0.11352418558736427, 'fraction_numerical': 0.003948667324777887, 'mean_word_length': 1.0255897640943623, 'pattern_counts': {'":': 0, '<': 50, '<?xml version=': 0, '>': 59, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '731307', 'n_tokens_mistral': 1243, 'n_tokens_neox': 1173, 'n_words': 279}