12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import React, { useEffect, useRef, useState } from "react";
- import { connect, useDispatch } from "react-redux";
- import { actionFindUsers } from "../actions";
- import { CSearchAvatar } from "../components/Avatar";
- import Button from "react-bootstrap/esm/Button";
- import { Link } from "react-router-dom";
- const useDebounce = (cb, depArray, delay, onAdd) => {
- let timeoutRef = useRef();
- useEffect(() => {
- clearInterval(timeoutRef.current);
- timeoutRef.current === undefined
- ? (timeoutRef.current = -1)
- : (timeoutRef.current = setTimeout(cb, delay));
- }, depArray);
- };
- const SearchByLogin = ({ onGetUser, foundUsers, onChange }) => {
- const [login, setLogin] = useState();
- useDebounce(() => onGetUser(login), [login], 2000);
- const newUserId = (user) => {
- onChange(user)
- }
- return (
- <form>
- <label for="loginInput">Add users to a group: </label>
- <div className="search-box">
- <input
- className="form-control-editing form-control"
- placeholder=""
- value={login}
- onChange={(e) => setLogin(e.target.value)}
- />
- </div>
- {foundUsers
- ? foundUsers.map((user) => {
- return (
- <div className="searchBlock">
- {user?.avatar !== null ? (
- <CSearchAvatar avatarUrl={user} />
- ) : (
- <div className="avatarStubChat2"></div>
- )}
- <div>{user?.login ? user.login : "anon"}</div>
- <div>
- <Button
- user={user}
- onClick={() => console.log(user)}
- onChange={newUserId}
- >
- +
- </Button>
- </div>
- </div>
- );
- })
- : null}
- </form>
- );
- };
- export const CSearchByLogin = connect(
- (state) => ({
- foundUsers: state?.promise?.findUsers?.payload,
- // state: state
- }),
- {
- onGetUser: actionFindUsers,
- }
- )(SearchByLogin);
|