membersearchmorning.jsx

import React, { Component } from 'react';

class SchemeMemberSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchQuery: '', // Initialize search query state
      results: [],
      error: null,
      filterOptions: {
        category: '', // Initialize with an empty filter
      },
      sortOption: 'name_asc', // Initialize with a default sorting option
    };
  }

  // Function to handle changes in the search input field
  handleSearchInputChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  // Function to handle changes in the category filter
  handleCategoryFilterChange = (event) => {
    const selectedCategory = event.target.value;
    this.setState({
      filterOptions: {
        category: selectedCategory,
      },
    });
  };

  // Function to handle changes in the sort option
  handleSortOptionChange = (event) => {
    const selectedSortOption = event.target.value;
    this.setState({
      sortOption: selectedSortOption,
    });
  };

  // Function to perform the search
  performSearch = () => {
    // Replace with your actual access token
    const accessToken = localStorage.getItem('accessToken');
    const schemeId = 7950;
    const apiUrl = `http://192.0.1.23:5000/scheme-member/search?schemeId=${schemeId}&category=${this.state.filterOptions.category}&sort=${this.state.sortOption}`;

    // Fetch data with authorization header
    fetch(apiUrl, {
      headers: {
        Authorization: `${accessToken}`, // Use 'Bearer' for authorization
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Network response was not ok: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        // Filter the results based on the search query
        const filteredResults = data.filter((member) => {
          // Assuming you want to search for the memberNumber field
          return member.memberNumber === this.state.searchQuery;
        });

        // Update the state with the filtered results
        this.setState({ results: filteredResults, error: null });
        console.log(filteredResults);
      })
      .catch((error) => {
        // Handle errors and update the state
        this.setState({ error });
      });
  };

  render() {
    const { searchQuery, results, error, filterOptions, sortOption } = this.state;

    return (
      <div>
        <h1>Scheme Member Search</h1>
        <div>
          <label htmlFor="searchInput">Search:</label>
          <input
            type="text"
            id="searchInput"
            value={searchQuery}
            onChange={this.handleSearchInputChange}
          />
          <button onClick={this.performSearch}>Search</button>
        </div>
        <div>
          <label htmlFor="categoryFilter">Filter by Category:</label>
          <select
            id="categoryFilter"
            value={filterOptions.category}
            onChange={this.handleCategoryFilterChange}
          >
            <option value="">All</option>
            <option value="category1">Category 1</option>
            <option value="category2">Category 2</option>
            {/* Add more options as needed */}
          </select>
        </div>
        <div>
          <label htmlFor="sortOptions">Sort by:</label>
          <select
            id="sortOptions"
            value={sortOption}
            onChange={this.handleSortOptionChange}
          >
            <option value="name_asc">Name (A-Z)</option>
            <option value="name_desc">Name (Z-A)</option>
            <option value="date_asc">Date (Oldest First)</option>
            <option value="date_desc">Date (Newest First)</option>
            {/* Add more sorting options as needed */}
          </select>
        </div>
        {error ? (
          <p>Error: {error.message}</p>
        ) : (
          <div>
  <h2>Results:</h2>
  <ul>
    {results.map((result, index) => (
      <li key={index}>
        <p>First Name: {result.member.firstName}</p>
        <p>Middle Name: {result.member.middleName}</p>
        <p>Last Name: {result.member.lastName}</p>
      </li>
    ))}
  </ul>
</div>
        )}
      </div>
    );
  }
}

export default SchemeMemberSearch;