<commit_before>import React, { Component } from 'react'
import { connect } from 'react-redux'
import Meal from '../views/Meal'
import NewMeal from '../components/NewMeal'
import { Container } from 'semantic-ui-react'
import { Link, Route, Switch } from 'react-router-dom'
import { css } from 'glamor'

class MealsContainer extends Component {
  render() {
    return (
      <Container>
        <div {...gridContainer}>
          <div {...gridNav}>
            <h1>All Meals</h1>
            <ul>
              {this.props.meals.map(m =>
                <Link key={m.id} to={`/meals/${m.id}`}>
                  <h3 style={{ listStyleType: 'none' }}>
                    {m.name}
                  </h3>
                </Link>
              )}
            </ul>
          </div>
          <div {...gridMain}>
            <Switch>
              <Route path="/meals/new" component={NewMeal} />
              <Route exact path={`/meals/:id`} render={() => <Meal />} />
            </Switch>
          </div>
        </div>
      </Container>
    )
  }
}

export default connect(state => {
  return {
    meals: state.meals,
  }
})(MealsContainer)

let gridContainer = css({
  marginTop: '20px',
  display: 'grid',
  gridTemplateAreas: `"navigation main main"`,
})

let gridNav = css({
  gridArea: 'navigation',
})

let gridMain = css({
  gridArea: 'main',
})<commit_msg>Update map state to props to destructure meals<commit_after>import React, { Component } from 'react'
import { connect } from 'react-redux'
import Meal from '../views/Meal'
import NewMeal from '../components/NewMeal'
import { Container } from 'semantic-ui-react'
import { Link, Route, Switch } from 'react-router-dom'
import { css } from 'glamor'

class MealsContainer extends Component {
  render() {
    return (
      <Container>
        <div {...gridContainer}>
          <div {...gridNav}>
            <h1>All Meals</h1>
            <ul>
              {this.props.meals.map(m =>
                <Link key={m.id} to={`/meals/${m.id}`}>
                  <h3 style={{ listStyleType: 'none' }}>
                    {m.name}
                  </h3>
                </Link>
              )}
            </ul>
          </div>
          <div {...gridMain}>
            <Switch>
              <Route path="/meals/new" component={NewMeal} />
              <Route exact path={`/meals/:id`} render={() => <Meal />} />
            </Switch>
          </div>
        </div>
      </Container>
    )
  }
}

export default connect(({ meals }) => ({ meals }))(MealsContainer)

let gridContainer = css({
  marginTop: '20px',
  display: 'grid',
  gridTemplateAreas: `"navigation main main"`,
})

let gridNav = css({
  gridArea: 'navigation',
})

let gridMain = css({
  gridArea: 'main',
})
{'fraction_non_alphanumeric': 0.16654518950437316, 'fraction_numerical': 0.004373177842565598, 'mean_word_length': 1.826982492276004, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 51, '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': '5194974', 'n_tokens_mistral': 870, 'n_tokens_neox': 865, 'n_words': 208}