score:1

Accepted answer

Here you go the working code snippet, i made as less as possible code modification to make the search and the sort working together at your App.js.

import React from 'react';

import InquiresList from './InquiryList.json';

class Inquiry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchInquiries: null,
      answerStatus: 'all',
      data: InquiresList,
    };
  }
  handleSearch = (event) => {
    this.setState({ searchInquiries: event.target.value });
  };
  handleAnswer = (event) => {
    this.setState({ answerStatus: event.target.value });
  };
  render() {
    const padding = {
      padding: '20px',
    };
    const marginBottom = {
      marginBottom: '0px',
    };
    const row = {
      margin: '0px',
    };
    let inquiries = InquiresList.filter((data) => {
      if (this.state.searchInquiries !== null) {
        return data.user_code
          .toLowerCase()
          .includes(this.state.searchInquiries.toLowerCase());
      }

      return data;
    });

    if (this.state.answerStatus === 'answered') {
      inquiries.sort((a, b) => {
        if (a.answered < b.answered) return -1;
        if (a.answered > b.answered) return 1;
        return 0;
      });
    } else if (this.state.answerStatus === 'unanswered') {
      inquiries.sort((a, b) => {
        if (a.answered > b.answered) return -1;
        if (a.answered < b.answered) return 1;
        return 0;
      });
    }

    return (
      <div className='col-md-12 bg-gray' style={{ padding: '30px' }}>
        <div className='row' style={row}>
          <h3 className='roboto paragraph mgb-30'>Inquiries List</h3>
        </div>
        <div className='row border-radius-10 default-shadow' style={row}>
          <div className='col-md-12 bg-white border-radius-10' style={padding}>
            <div className='row'>
              <div className='col-md-6 flex all-center'>
                <i className='i fa fa-search table-search-icon' />
                <input
                  type='text'
                  onChange={this.handleSearch}
                  className='form-control'
                  style={{ borderRadius: '30px' }}
                  placeholder='Search'
                />
              </div>
              <div className='col-md-6 flex flex-end' style={row}>
                <select
                  name='inquiry-filter'
                  onChange={this.handleAnswer}
                  className='inquiry-filter'
                >
                  <option value='all'>All</option>
                  <option value='answered'>Answered</option>
                  <option value='unanswered'>Unanswered</option>
                </select>
              </div>
            </div>
          </div>
          <div className='col-md-12 bg-white' style={{ padding: '0px' }}>
            <table className='table table-striped table-hover table-bordered'>
              <thead>
                <tr>
                  <td>
                    <p className='paragraph' style={marginBottom}>
                      Created
                    </p>
                  </td>
                  <td>
                    <p className='paragraph' style={marginBottom}>
                      User Code
                    </p>
                  </td>
                  <td>
                    <p className='paragraph' style={marginBottom}>
                      Email
                    </p>
                  </td>
                  <td>
                    <p className='paragraph' style={marginBottom}>
                      Subject
                    </p>
                  </td>
                  <td>
                    <p className='paragraph' style={marginBottom}>
                      Answer
                    </p>
                  </td>
                </tr>
              </thead>
              <tbody>
                {inquiries.map((inquiry) => (
                  <tr>
                    <td>
                      <h3 className='paragraph'>{inquiry.created_date}</h3>
                    </td>
                    <td>
                      <h3 className='paragraph' style={marginBottom}>
                        {inquiry.user_code}
                      </h3>
                    </td>
                    <td>
                      <p className='paragraph' style={marginBottom}>
                        {inquiry.email}
                      </p>
                    </td>
                    <td>
                      <p className='paragraph' style={marginBottom}>
                        {inquiry.subject}
                      </p>
                    </td>

                    <td>
                      <div className='custom-control custom-checkbox'>
                        {inquiry.answered ? (
                          <input
                            type='checkbox'
                            checked
                            className='custom-control-input'
                            id={'answer-status-' + inquiry.id}
                            name={'answer-status-' + inquiry.id}
                          />
                        ) : (
                          <input
                            type='checkbox'
                            className='custom-control-input'
                            id={'answer-status-' + inquiry.id}
                            name={'answer-status-' + inquiry.id}
                          />
                        )}
                        <label
                          className='custom-control-label'
                          for={'answer-status-' + inquiry.id}
                        />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className='col-md-12 bg-white flex flex-end' style={padding}>
            <ul
              className='list list-inline pagination-list'
              style={marginBottom}
            >
              <li className='list-inline-item'>
                <button
                  type='button'
                  className='color-golden bg-white'
                  style={{
                    border: 'none',
                    boxShadow: '0px 0px 0px #ffff',
                    borderRight: '1px solid #d3d3d3',
                  }}
                >
                  Previous
                </button>
              </li>
              <li className='list-inline-item active bg-golden number-container'>
                1
              </li>
              <li className='list-inline-item number-container'>2</li>
              <li className='list-inline-item number-container'>3</li>
              <li className='list-inline-item number-container'>4</li>
              <li className='list-inline-item'>
                <button
                  type='button'
                  className='color-golden bg-white'
                  style={{
                    border: 'none',
                    boxShadow: '0px 0px 0px #ffff',
                    borderLeft: '1px solid #d3d3d3',
                  }}
                >
                  Next
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default Inquiry;

score:0

you can try in this way.

import InquiresList from '../dashboard/inquiries/InquiriesList.json';

export default class index extends Component {
    constructor(props) {
      super(props);
      this.state = {
        searchInquiries: null,
        answerStatus: "all",
        inquiries: InquiresList,
        copyInquiries: InquiresList,
      };
    }

    onSearchHandler = (value) => {
      const searchResult = this.state.copyInquiries
        .filter(function (item) {
          const itemData = item.user_code.toLowerCase();
          const textData = value.toLowerCase();
          return itemData.indexOf(textData) > -1;
        })
        .sort((a, b) => a.answerStatus - b.answerStatus);
      this.setState({ searchInquiries: value, inquiries: searchResult });
    };
    render() {
      return (
        <div className="col-md-12 bg-gray" style={{ padding: "30px" }}>
          <div className="row" style={row}>
            <h3 className="roboto paragraph mgb-30">Inquiries List</h3>
          </div>
          <div className="row border-radius-10 default-shadow" style={row}>
            <div className="col-md-12 bg-white border-radius-10" style={padding}>
              <div className="row">
                <div className="col-md-6 flex all-center">
                  <i className="i fa fa-search table-search-icon"></i>
                  <input
                    type="text"
                    onChange={this.handleSearch}
                    className="form-control"
                    style={{ borderRadius: "30px" }}
                    placeholder="Search"
                  />
                </div>
                <div className="col-md-6 flex flex-end" style={row}>
                  <select
                    name="inquiry-filter"
                    onChange={this.handleAnswer}
                    className="inquiry-filter"
                  >
                    <option value="all">All</option>
                    <option value="answered">Answered</option>
                    <option value="unanswered">Unanswered</option>
                  </select>
                </div>
              </div>
            </div>
            <div className="col-md-12 bg-white" style={{ padding: "0px" }}>
              <table className="table table-striped table-hover table-bordered">
                <thead>
                  <tr>
                    <td>
                      <p className="paragraph" style={marginBottom}>
                        Created
                      </p>
                    </td>
                    <td>
                      <p className="paragraph" style={marginBottom}>
                        User Code
                      </p>
                    </td>
                    <td>
                      <p className="paragraph" style={marginBottom}>
                        Email
                      </p>
                    </td>
                    <td>
                      <p className="paragraph" style={marginBottom}>
                        Subject
                      </p>
                    </td>
                    <td>
                      <p className="paragraph" style={marginBottom}>
                        Answer
                      </p>
                    </td>
                  </tr>
                </thead>
                <tbody>
                  {inquiries.map((inquiry) => (
                    <tr>
                      <td>
                        <h3 className="paragraph">{inquiry.created_date}</h3>
                      </td>
                      <td>
                        <h3 className="paragraph" style={marginBottom}>
                          {inquiry.user_code}
                        </h3>
                      </td>
                      <td>
                        <p className="paragraph" style={marginBottom}>
                          {inquiry.email}
                        </p>
                      </td>
                      <td>
                        <p className="paragraph" style={marginBottom}>
                          {inquiry.subject}
                        </p>
                      </td>

                      <td>
                        <div className="custom-control custom-checkbox">
                          {inquiry.answered ? (
                            <input
                              type="checkbox"
                              checked
                              className="custom-control-input"
                              id={"answer-status-" + inquiry.id}
                              name={"answer-status-" + inquiry.id}
                            />
                          ) : (
                            <input
                              type="checkbox"
                              className="custom-control-input"
                              id={"answer-status-" + inquiry.id}
                              name={"answer-status-" + inquiry.id}
                            />
                          )}
                          <label
                            className="custom-control-label"
                            for={"answer-status-" + inquiry.id}
                          ></label>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      );
    }
  }


Related Query

More Query from same tag