<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc';

// Redux
import { connect } from 'react-redux';

import { getFaqs, setFilters } from 'redactions/admin/faqs';

// Selectors
import getFilteredFaqs from 'selectors/admin/faqs';

// Components
import Spinner from 'components/ui/Spinner';
import CustomTable from 'components/ui/customtable/CustomTable';
import SearchInput from 'components/ui/SearchInput';
import Icon from 'components/ui/Icon';

// Table components
import EditAction from './actions/EditAction';
import DeleteAction from './actions/DeleteAction';

// TDs
import QuestionTD from './td/QuestionTD';

const SortableItem = SortableElement(({ value }) => value);

const DragHandle = SortableHandle(() => (
  <span className="handler">
    <Icon name="icon-drag-dots" className="-small" />
  </span>
));

const SortableList = SortableContainer(({ items }) => (
  <ul className="faqs-list">
    {items.map((value, index) =>
      <SortableItem key={value.key} index={index} value={value} />
    )}
  </ul>
));


class FaqsTable extends React.Component {
  constructor(props) {
    super(props);

    // ------------------ Bindings ------------------------
    this.onSearch = this.onSearch.bind(this);
    // ----------------------------------------------------
  }

  componentDidMount() {
    this.props.setFilters([]);
    this.props.getFaqs();
  }

  /**
   * Event handler executed when the user search for a dataset
   * @param {string} { value } Search keywords
   */
  onSearch(value) {
    if (!value.length) {
      this.props.setFilters([]);
    } else {
      this.props.setFilters([{ key: 'question', value }, { key: 'answer', value }]);
    }
  }

  /**
   * HELPERS
   * - getFaqs
   * - getFilteredFaqs
  */
  getFaqs() {
    return this.props.faqs;
  }

  getFilteredFaqs() {
    return this.props.filteredFaqs;
  }

  getLegendItems() {
    const { faqs } = this.props;

    return faqs.map(faq => (
      <li key={faq.answer}>
        <span>{faq.id}</span>
        <span>{faq.answer}</span>

        <DragHandle />
      </li>
    ));
  }

  onSortEnd = ({ oldIndex, newIndex }) => {
    const { faqs } = this.props;
    const newFaqsList = arrayMove(faqs, oldIndex, newIndex);
    console.log(newFaqsList);
  }

  render() {
    return (
      <div className="c-faqs-table">
        <Spinner className="-light" isLoading={this.props.loading} />

        <SortableList
          items={this.getLegendItems()}
          helperClass=""
          axis="y"
          lockAxis="y"
          useDragHandle
          onSortEnd={this.onSortEnd}
        />


        {this.props.error && (
          <p>Error: {this.props.error}</p>
        )}

        <SearchInput
          input={{
            placeholder: 'Search faq'
          }}
          link={{
            label: 'New faq',
            route: 'admin_faqs_detail',
            params: { tab: 'faqs', id: 'new' }
          }}
          onSearch={this.onSearch}
        />

        {!this.props.error && (
          <CustomTable<commit_msg>Fix: restore faq table state<commit_after>import React from 'react';
import PropTypes from 'prop-types';

// Redux
import { connect } from 'react-redux';

import { getFaqs, setFilters } from 'redactions/admin/faqs';

// Selectors
import getFilteredFaqs from 'selectors/admin/faqs';

// Components
import Spinner from 'components/ui/Spinner';
import CustomTable from 'components/ui/customtable/CustomTable';
import SearchInput from 'components/ui/SearchInput';

// Table components
import EditAction from './actions/EditAction';
import DeleteAction from './actions/DeleteAction';

// TDs
import QuestionTD from './td/QuestionTD';

class FaqsTable extends React.Component {
  constructor(props) {
    super(props);

    // ------------------ Bindings ------------------------
    this.onSearch = this.onSearch.bind(this);
    // ----------------------------------------------------
  }

  componentDidMount() {
    this.props.setFilters([]);
    this.props.getFaqs();
  }

  /**
   * Event handler executed when the user search for a dataset
   * @param {string} { value } Search keywords
   */
  onSearch(value) {
    if (!value.length) {
      this.props.setFilters([]);
    } else {
      this.props.setFilters([{ key: 'question', value }, { key: 'answer', value }]);
    }
  }

  /**
   * HELPERS
   * - getFaqs
   * - getFilteredFaqs
  */
  getFaqs() {
    return this.props.faqs;
  }

  getFilteredFaqs() {
    return this.props.filteredFaqs;
  }

  render() {
    return (
      <div className="c-faqs-table">
        <Spinner className="-light" isLoading={this.props.loading} />

        {this.props.error && (
          <p>Error: {this.props.error}</p>
        )}

        <SearchInput
          input={{
            placeholder: 'Search faq'
          }}
          link={{
            label: 'New faq',
            route: 'admin_faqs_detail',
            params: { tab: 'faqs', id: 'new' }
          }}
          onSearch={this.onSearch}
        />

        {!this.props.error && (
          <CustomTable
{'fraction_non_alphanumeric': 0.17882079131109388, 'fraction_numerical': 0.0, 'mean_word_length': 2.191212871287129, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, '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': '5988018', 'n_tokens_mistral': 1607, 'n_tokens_neox': 1570, 'n_words': 328}