onChange.js

import React, { useEffect, useState, useCallback } from "react";
import MnassaInput from "../../../../components/MnassaInput";
import {
  getConnectionRequest,
  clearGetConnectionResult,
} from "../../../../store/actions/getConnections";
import { useDispatch, useSelector } from "react-redux";
import { searchConnectionRequest } from "../../../../store/actions/getConnections/searchConnections";
import loadingSpinner from "../../../../images/spinner-icon-gif-10.gif";

const UserList = ({
  currentModal,
  modalToOpen,
  setIsOpen,
  buttonText,
  selectedUser,
  setSelectedUser,
  userId,
  displayTab,
  setDisplayTab,
}) => {
  const dispatch = useDispatch();
  const connectionsStore = useSelector((s) => s.getUserConnections);
  const searchStore = useSelector((s) => s.searchConnections);
  const connectionsState = useSelector((s) => s.getUserConnections.data);
  const searchConnectionState = useSelector((s) => s.searchConnections.data);

  const [query, setQuery] = useState("");
  const [searched, setSearched] = useState(false);

  useEffect(() => {
    dispatch(getConnectionRequest(undefined, undefined, "accepted"));
  }, [dispatch]);

  useEffect(() => {
    if (searched && !query) {
      const args = displayTab.users
        ? [undefined, undefined, "accepted"]
        : [undefined, undefined, undefined, "communities"];

      dispatch(getConnectionRequest(...args));
    }
  }, [dispatch, searched, query, displayTab]);

  const debounce = (func, waitFor = 500) => {
    let timeout;

    return (...args) =>
      new Promise((resolve) => {
        if (timeout) {
          clearTimeout(timeout);
        }

        timeout = setTimeout(() => resolve(func(...args)), waitFor);
      });
  };

  const handleConnectionSearch = (term) => {
    setQuery(term);
    setSearched(true);
    const type = displayTab.users ? "users" : "communities";

    if (term.length > 2) {
      dispatch(clearGetConnectionResult());
      dispatch(
        searchConnectionRequest(term, undefined, undefined, undefined, type)
      );
    }
  };

  const debounceCall = useCallback(debounce(handleConnectionSearch), [
    displayTab,
  ]);

  const handleTabItemClick = (e, itemToShow) => {
    e.stopPropagation();
    const clickedEle = e.target;

    const tabItem = document.querySelectorAll(".tab-item");

    tabItem.forEach((item) => {
      item.classList.remove("tab-item-active");
    });
    setDisplayTab({ [itemToShow]: true });
    clickedEle.classList.add("tab-item-active");

    if (itemToShow === "communities") {
      setSelectedUser({ id: "", name: "" });
      dispatch(
        getConnectionRequest(undefined, undefined, undefined, "communities")
      );
    }
    if (itemToShow === "users") {
      setSelectedUser({ id: "", name: "" });
      dispatch(getConnectionRequest(undefined, undefined, "accepted"));
    }
  };
  const UserListItem = (props) => {
    const photo = displayTab.users ? props.item.photo : props.item.image[0];
    const name = displayTab.users ? props.item.display_name : props.item.name;

    const idForUser =
      userId === props.item.to_be_accepted_by
        ? props.item.requested_by
        : props.item.to_be_accepted_by;

    const id = displayTab.users ? idForUser : props.item.uuid;
    return (
      <div
        className="mt-4 pointer txt-left "
        onClick={(e) => {
          console.log("About to run");
          e.stopPropagation();
        }}
      >
        <label className="checkbox-container">
          <img
            alt="user profile"
            className="profile-img"
            src={
              photo
                ? photo
                : "https://res.cloudinary.com/fxola/image/upload/v1562711912/ezkc4mj7pktwzqhmrbpt.png"
            }
          />
          <span className="ml-10">{name}</span>
          <input
            type="checkbox"
            checked={selectedUser.id && selectedUser.id === id}
            onChange={() => {
              console.log("About to run");
              props.setSelectedUser({
                id,
                name: name,
              });
            }}
          />
          <span className="checkmark"></span>
        </label>
      </div>
    );
  };
  const renderContent = () => {
    if (connectionsStore.isLoading || searchStore.isLoading) {
      return (
        <img
          src={loadingSpinner}
          alt="Loading Spinner"
          height={"auto"}
          width={20}
        />
      );
    }
    if (
      connectionsState &&
      connectionsState.data &&
      connectionsState.data.data.length > 0
    ) {
      return connectionsState.data.data.map((item, keyId) => (
        <UserListItem
          key={keyId}
          item={item}
          setSelectedUser={setSelectedUser}
        />
      ));
    }
    if (searchConnectionState && searchConnectionState.data) {
      return searchConnectionState.data.data.map((item, keyId) => (
        <UserListItem
          key={keyId}
          item={item}
          id={selectedUser.id}
          setSelectedUser={setSelectedUser}
        />
      ));
    }
    if (
      displayTab.communities &&
      connectionsState &&
      connectionsState.data.data.length === 0
    ) {
      return <div>You have not joined any communities</div>;
    }
  };

  return (
    <div>
      <form>
        <MnassaInput
          placeholder="Search through connections"
          value={query}
          onInputChange={debounceCall}
        />
      </form>
      <div className="tab-item-wrap txt-left">
        <span
          className="tab-item mr-11 tab-item-active"
          onClick={(e) => {
            handleTabItemClick(e, "users");
          }}
        >
          Connections
        </span>{" "}
        <span
          className="tab-item mr-11"
          onClick={(e) => {
            handleTabItemClick(e, "communities");
          }}
        >
          {" "}
          Communities
        </span>{" "}
      </div>
      {renderContent()}
      {!connectionsStore.isLoading &&
        selectedUser &&
        selectedUser.id &&
        connectionsState &&
        connectionsState.data.data.length > 0 && (
          <button
            onClick={(e) => {
              e.preventDefault();
              setIsOpen((prevState) => ({
                ...prevState,
                [currentModal]: false,
                [modalToOpen]: true,
              }));
            }}
            className="width-100 transaction_modal__button"
          >
            {buttonText || "Continue"}
          </button>
        )}
    </div>
  );
};

export default UserList;