<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Form from '../../Models/Form';
import FormItem from './FormItem';

function getCurrentSection(form, currentSectionId) {
  if (!currentSectionId) {
    return form.getSections().get(0);
  } else {
    return form.getSection(currentSectionId);
  }
}

function renderProgress(form, section) {
  const sections = form.getSections();
  const sectionIndex = sections.indexOf(section);
  const progressPercentValue = Math.round((sectionIndex / sections.size) * 100);
  const progressPercent = `${progressPercentValue}%`;

  return (
    <div className="progress">
      <div
        className="progress-bar"
        role="progressbar"
        style={{ width: progressPercent }}
        aria-valuenow={progressPercentValue}
        aria-valuemin="0"
        aria-valuemax="100"
      >
        {progressPercent}
      </div>
    </div>
  );
}

function renderSection(form, section) {
  const items = form.getItemsInSection(section.id).map(item => (
    <FormItem key={item.id} formItem={item} />
  ));

  return (
    <section>
      <h2>{section.title}</h2>

      {renderProgress(form, section)}

      {items}
    </section>
  );
}

function renderBackButton(currentSectionIndex, onClick) {
  if (currentSectionIndex < 1) {
    return null;
  }

  return (
    <button className="btn btn-secondary" onClick={onClick}>
      <i className="fa fa-chevron-left"></i> Back
    </button>
  );
}

function renderContinueButton(currentSectionIndex, sections, onClick) {
  if (currentSectionIndex >= sections.size - 1) {
    return null;
  }

  return (
    <button className="btn btn-primary" onClick={onClick}>
      Continue <i className="fa fa-chevron-right"></i>
    </button>
  );
}

const FormPresenter = ({ form, currentSectionId, previousSection, nextSection }) => {
  if (!form) {
    return <div></div>;
  }

  const currentSection = getCurrentSection(form, currentSectionId);
  const sections = form.getSections();
  const currentSectionIndex = sections.indexOf(currentSection);

  return (
    <div>
      {renderSection(form, currentSection)}

      <div className="my-4 d-flex justify-content-between">
        <div>{renderBackButton(currentSectionIndex, previousSection)}</div>
        <div>{renderContinueButton(currentSectionIndex, sections, nextSection)}</div><commit_msg>Put the form in a card<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Form from '../../Models/Form';
import FormItem from './FormItem';

function getCurrentSection(form, currentSectionId) {
  if (!currentSectionId) {
    return form.getSections().get(0);
  } else {
    return form.getSection(currentSectionId);
  }
}

function renderProgress(form, section) {
  const sections = form.getSections();
  const sectionIndex = sections.indexOf(section);
  const progressPercentValue = Math.round((sectionIndex / sections.size) * 100);
  const progressPercent = `${progressPercentValue}%`;

  return (
    <div className="progress card-img-top" style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}>
      <div
        className="progress-bar"
        role="progressbar"
        style={{ width: progressPercent }}
        aria-valuenow={progressPercentValue}
        aria-valuemin="0"
        aria-valuemax="100"
      >
        {progressPercent}
      </div>
    </div>
  );
}

function renderSection(form, section) {
  const items = form.getItemsInSection(section.id).map(item => (
    <FormItem key={item.id} formItem={item} />
  ));

  return (
    <div>
      {renderProgress(form, section)}

      <div className="card-header">
        <h4>{section.title}</h4>
      </div>

      <div className="card-block">
        {items}
      </div>
    </div>
  );
}

function renderBackButton(currentSectionIndex, onClick) {
  if (currentSectionIndex < 1) {
    return null;
  }

  return (
    <button className="btn btn-secondary" onClick={onClick}>
      <i className="fa fa-chevron-left"></i> Back
    </button>
  );
}

function renderContinueButton(currentSectionIndex, sections, onClick) {
  if (currentSectionIndex >= sections.size - 1) {
    return null;
  }

  return (
    <button className="btn btn-primary" onClick={onClick}>
      Continue <i className="fa fa-chevron-right"></i>
    </button>
  );
}

const FormPresenter = ({ form, currentSectionId, previousSection, nextSection }) => {
  if (!form) {
    return <div></div>;
  }

  const currentSection = getCurrentSection(form, currentSectionId);
  const sections = form.getSections();
  const currentSectionIndex = sections.indexOf(currentSection);

  return (
    <div className="card mb-4">
      {renderSection(form, currentSection)}

      <div className="card-footer d-flex justify-content-between">
        <div>{renderBackButton(currentSectionIndex, previousSection)}</div>
        <div>{renderContinueButton(currentSectionIndex, sections, nextSection)}</div>
{'fraction_non_alphanumeric': 0.13862991487636805, 'fraction_numerical': 0.005674908796108634, 'mean_word_length': 3.5779220779220777, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 63, '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': '3401668', 'n_tokens_mistral': 1487, 'n_tokens_neox': 1447, 'n_words': 308}