import React, { useEffect, useState } from "react"; import { isEmpty } from "lodash-es"; import api from "../../helpers/api"; import toastHelper from "../Toast"; import "../../less/settings/member-section.less"; interface Props {} interface State { createUserEmail: string; createUserPassword: string; } const PreferencesSection: React.FC = () => { const [state, setState] = useState({ createUserEmail: "", createUserPassword: "", }); const [userList, setUserList] = useState([]); useEffect(() => { fetchUserList(); }, []); const fetchUserList = async () => { const data = await api.getUserList(); setUserList(data); }; const handleEmailInputChange = (event: React.ChangeEvent) => { setState({ ...state, createUserEmail: event.target.value, }); }; const handlePasswordInputChange = (event: React.ChangeEvent) => { setState({ ...state, createUserPassword: event.target.value, }); }; const handleCreateUserBtnClick = async () => { if (isEmpty(state.createUserEmail) || isEmpty(state.createUserPassword)) { toastHelper.error("Please fill out this form"); return; } const userCreate: API.UserCreate = { email: state.createUserEmail, password: state.createUserPassword, role: "USER", name: state.createUserEmail, }; try { await api.createUser(userCreate); } catch (error: any) { toastHelper.error(error.message); } await fetchUserList(); setState({ createUserEmail: "", createUserPassword: "", }); }; return (

Create a member

Email
Password

Member list

{userList.map((user) => (
{user.id} {user.email}
))}
); }; export default PreferencesSection;