pastetoday

import React, { useState, useEffect } from 'react';

const MemberSearchby = () => {
  const [searchInput, setSearchInput] = useState('');
  const [members, setMembers] = useState([]);
  const [filteredMembers, setFilteredMembers] = useState([]);

  fetchMemberData = (selectedMember) => {
    console.log(`selected Member ${selectedMember}`);
    const accessToken = localStorage.getItem('accessToken');
    fetch(`http://192.0.1.23:5000/scheme-member/search?schemeId=7950`, {
        headers: {
            Authorization: `${accessToken}`,
        },
    })
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
            this.props.setData( data );
        })
        .catch((error) => {
            console.error('Error fetching scheme options from API:', error);
        });
};


  // Filter members based on search input
  const filterMembers = () => {
    const filtered = members.filter(
      (member) =>
        member.name.toLowerCase().includes(searchInput.toLowerCase()) ||
        member.memberId.includes(searchInput)
    );
    setFilteredMembers(filtered);
  };

  // Fetch data from the API when the component mounts
  useEffect(() => {
    fetchMemberData();
  }, []);

  // Handle search input changes
  const handleSearchInputChange = (event) => {
    setSearchInput(event.target.value);
  };

  // Handle search button click
  const handleSearchClick = () => {
    filterMembers();
  };

  return (
    <div>
      <h1>Member Search</h1>
      <div>
        <input
          type="text"
          placeholder="Search by name or member ID"
          value={searchInput}
          onChange={handleSearchInputChange}
        />
        <button onClick={handleSearchClick}>Search</button>
      </div>
      <div>
        <h2>Search Results</h2>
        <ul>
          {filteredMembers.map((member) => (
            <li key={member.id}>
              {member.name} (Member ID: {member.memberId})
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default MemberSearchby;