Repository: usememos/memos
File: web/src/components/Settings/MemberSection.tsx (TypeScript)

Code before:
import { useTranslation } from "react-i18next";
import { userService } from "../../services";
import { useAppSelector } from "../../store";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import Icon from "../Icon";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
import "../../less/settings/member-section.less";

interface State {
  createUserUsername: string;
  createUserPassword: string;
}

const PreferencesSection = () => {
  const { t } = useTranslation();
  const currentUser = useAppSelector((state) => state.user.user);
  const [state, setState] = useState<State>({
    createUserUsername: "",
    createUserPassword: "",
  });
  const [userNameQueryText, setUserNameQueryText] = useState("");
  const [userList, setUserList] = useState<User[]>([]);
  const [showUserList, setShowUserList] = useState<User[]>([]);

  useEffect(() => {
    fetchUserList();
    setShowUserList(userList);
  }, []);

  useEffect(() => {
    filterUserList();
  }, [userNameQueryText, userList]);

  const fetchUserList = async () => {
    const { data } = (await api.getUserList()).data;
    setUserList(data);
  };

  const filterUserList = async () => {
    const data = userList.filter((user: User) => {
      return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
    });
    setShowUserList(data);
  };

  const handleUsernameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,

Review comment (suggestion):
We can get `showUserList` from `userList` with `queryText`. e.g.

<img width="789" alt="image" src="https://user-images.githubusercontent.com/24653555/204268081-b7b7f9ba-c007-4111-b4f2-b99e24f44f24.png">


Code after:
import { useTranslation } from "react-i18next";
import { userService } from "../../services";
import { useAppSelector } from "../../store";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import Icon from "../Icon";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
import "../../less/settings/member-section.less";

interface State {
  createUserUsername: string;
  createUserPassword: string;
}

const PreferencesSection = () => {
  const { t } = useTranslation();
  const currentUser = useAppSelector((state) => state.user.user);
  const [state, setState] = useState<State>({
    createUserUsername: "",
    createUserPassword: "",
  });
  const [userNameQueryText, setUserNameQueryText] = useState("");
  const [userList, setUserList] = useState<User[]>([]);

  const showUserList = userList.filter((user: User) => {
    return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
  });

  useEffect(() => {
    fetchUserList();
  }, []);

  const fetchUserList = async () => {
    const { data } = (await api.getUserList()).data;
    setUserList(data);
  };

  const handleUsernameInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      createUserUsername: event.target.value,
    });
  };

  const handlePasswordInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      createUserPassword: event.target.value,
    });