import React, { useEffect, useState, useCallBack } from 'react';
import * as BS from 'react-bootstrap'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import { useForm } from "react-hook-form";
import autosize from 'autosize';
import MemberCard from './MemberCard.js'
import Loading from "./Loading.js";
import API_URL from "../Constants/constants.js";
import { FaPlus } from "react-icons/fa";
export default function Memberlist(props) {
const user = JSON.parse(localStorage.getItem('user'));
const userId = user.id;
const [isLoading, setIsLoading ] = useState(false);
const [isError, setIsError ] = useState(false);
const [errorAlert, setErrorAlert ] = useState(false);
const [proxyView, setProxyView] = useState(false);
const [privacyView, setPrivacyView] = useState(false);
const [open, setOpen] = useState(false);
const closeModal = () => setOpen(false);
const [members, setMembers ] = useState([]);
const [newMember, setNewMember ] = useState('');
const [value, setValue] = useState('');
const [proxyTags, setProxyTags] = useState([{
prefix: "", suffix: ""
}]);
const {register, handleSubmit} = useForm();
const fetchMembers = useCallBack( () => {
setIsLoading(true);
setIsError(false);
fetch(`${API_URL}s/${userId}/members`,{
method: 'get',
headers: {
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
}}).then ( res => res.json()
).then (data => {
newMember ? setMembers([...data, newMember]) : setMembers(data)
setIsLoading(false);
})
.catch (error => {
console.log(error);
setIsError(true);
setIsLoading(false);
})
}, [newMember, userId])
useEffect(() => {
fetchMembers();
}, [fetchMembers])
useEffect(() => {
autosize(document.querySelector('textarea'));
})
function addProxyField() {
setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
}
const submitMember = data => {
setIsLoading(true);
const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))} : data
console.log(newdata);
fetch(`${API_URL}m/`,{
method: 'POST',
body: JSON.stringify(newdata),
headers: {
'Content-Type': 'application/json',
'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
}}).then (res => res.json()
).then (data => {
setNewMember(data);
setErrorAlert(false);
closeModal();
}
).catch (error => {
console.error(error);
setErrorAlert(true);
});
}
const memberList = members.filter(member => {
if (!value) return true;
if (member.name.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
}).sort((a, b) => a.name.localeCompare(b.name)).map((member) =>
);
return (
<>
{ isLoading ? : isError ?
Error fetching members. :
<>
setValue(e.target.value)} placeholder="Search"/>
fetchMembers()}>Refresh
setOpen(o => !o)}>Add Member
Add member
{ errorAlert ? Something went wrong, please try logging in and out again. : "" }
Name:
Display name:
Birthday:
(YYYY-MM-DD)
Pronouns:
Avatar url:
Color:
(hexcode)
Proxy tags:
setProxyView(view => !view)}> { proxyView ? "Hide" : "Show" }
Privacy settings:
setPrivacyView(view => !view)}> { privacyView ? "Hide" : "Show" }
{ proxyView ? <>
Proxy Tags
{ proxyTags.map((item, index) => (
))} addProxyField()}>Add new
: "" }
{ privacyView ? <>privacy settings
Visibility:
Name:
Description:
Birthday:
Pronouns:
Meta:
: "" }
Description:
Submit Cancel
{memberList}
}
)
}