<commit_before>import {div, p, input, h1, h2, tr, td, tbody, thead, th, table, h4} from '@cycle/dom'
import { Observable } from 'rxjs'

export function App (sources) {

  const intents$ = {
    apiResponse: sources.HTTP.select('api').flatten(),

    changeSearchTerm: sources.DOM.select('#search.form-control')
      .events("input")
      .map(ev => ev.target.value)
      .startWith('')
  }

  const state$ = state(intents$)

  return {
    DOM: view(state$),
    HTTP: intents$.changeSearchTerm.map( searchTerm => {
      return {
        url: 'https://swapi.co/api/people/?search=' + searchTerm,
        category: 'api',
      }
    })
  };
}

function state(intents$){

  return Observable.combineLatest(intents$.apiResponse, intents$.changeSearchTerm)
    .map((combined) => {

      const [response, searchTerm] = combined

      return {
        characters: response.body.results,
        searchTerm: searchTerm
      };
    })
    .startWith({
      characters: [{name: 'Loading...'}],
      searchTerm: ''
    })
}


function view(state$) {
  return state$.map((state) => {

    const list = state.characters.map( character => {
      return tr(td(character.name));
    });

    return div(".card", [
      div('.card-header', [
        h4('.title', 'Star Wars Character Search'),
        input('#search.form-control', {props: {type: "text", placeholder: "Type to search"}})
      ]),
      div('.card-content .table-responsive',[
        table('.table', [
          thead(tr(th('Name'))),
          tbody(list)
        ])
      ])
    ]);


  });
}<commit_msg>table head<commit_after>import {div, p, input, h1, h2, tr, td, tbody, thead, th, table, h4, h5} from '@cycle/dom'
import { Observable } from 'rxjs'

export function App (sources) {

  const intents$ = {
    apiResponse: sources.HTTP.select('api').flatten(),

    changeSearchTerm: sources.DOM.select('#search.form-control')
      .events("input")
      .map(ev => ev.target.value)
      .startWith('')
  }

  const state$ = state(intents$)

  return {
    DOM: view(state$),
    HTTP: intents$.changeSearchTerm.map( searchTerm => {
      return {
        url: 'https://swapi.co/api/people/?search=' + searchTerm,
        category: 'api',
      }
    })
  };
}

function state(intents$){

  return Observable.combineLatest(intents$.apiResponse, intents$.changeSearchTerm)
    .map((combined) => {

      const [response, searchTerm] = combined

      return {
        characters: response.body.results,
        searchTerm: searchTerm
      };
    })
    .startWith({
      characters: [{name: 'Loading...'}],
      searchTerm: ''
    })
}


function view(state$) {
  return state$.map((state) => {

    const list = state.characters.map( character => {
      return tr(td(character.name));
    });

    return div(".card", [
      div('.card-header', [
        h4('.title', 'Star Wars Character Search'),
        input('#search.form-control', {props: {type: "text", placeholder: "Type to search"}})
      ]),
      div('.card-content .table-responsive',[
        table('.table', [
          thead(tr(th(h5('Name')))),
          tbody(list)
        ])
      ])
    ]);


  });
}
{'fraction_non_alphanumeric': 0.17699396250397204, 'fraction_numerical': 0.0031776294884016524, 'mean_word_length': 2.5410573678290214, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4168799', 'n_tokens_mistral': 1019, 'n_tokens_neox': 986, 'n_words': 200}