<commit_before>// @flow
import React from 'react'
import Layout from '../components/Layout'
import * as Moltin from '../utils/js/moltin'
import ProductListItem from '../components/ProductListItem'
import type { TMoltinProduct } from '../utils/js/types'

export default class Home extends React.Component {
  static async getInitialProps ({ query }) {
    const id = query.id ? query.id : query.slug.split('_')[1]
    const product = await Moltin.fetchProduct(id)

    return { product }
  }

  render () {
    const { product } = this.props
    const { title, description, brand } = product

    return (
      <Layout title={title}>
        <section className='section'>
          <div className='container'>
            <div className='heading'>
              <h1 className='title'>{ title }</h1>
              <h2 className='subtitle'>{ brand.value }</h2>
            </div>
            <p className='content'>
              { description }
            </p>
          </div>
        </section>
      </Layout>
    )
  }
}<commit_msg>Improve detail page<commit_after>// @flow
import React from 'react'
import Layout from '../components/Layout'
import * as Moltin from '../utils/js/moltin'
import ProductListItem from '../components/ProductListItem'
import Button from '../components/Button'
import type { TMoltinProduct } from '../utils/js/types'

export default class Home extends React.Component {
  static async getInitialProps ({ query }) {
    const id = query.id ? query.id : query.slug.split('_')[1]
    const product = await Moltin.fetchProduct(id)

    return { product }
  }

  render () {
    const { product } = this.props
    const { title, description, brand, images } = product

    return (
      <Layout title={title}>
        <div className='container'>
          <div className='columns'>
            <div className='column is-half'>
              <img src={images[0].url.http} alt={images[0].name} />
            </div>
            <div className='column is-half'>
              <section className='section'>
                <div className='heading'>
                  <h1 className='title'>{ title }</h1>
                  <h2 className='subtitle'>{ brand.value }</h2>
                </div>
                <p className='content'>
                  { description }
                </p>
                <div>
                  <Button type='primary'>
                    Ajouter au panier
                  </Button>
                </div>
              </section>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}
{'fraction_non_alphanumeric': 0.13561964146531566, 'fraction_numerical': 0.004676539360872954, 'mean_word_length': 1.8842696629213482, 'pattern_counts': {'":': 0, '<': 42, '<?xml version=': 0, '>': 42, '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': '2832145', 'n_tokens_mistral': 711, 'n_tokens_neox': 690, 'n_words': 187}