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 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 [currentPage, setCurrentPage] = useState(1);
const [membersPerPage, setMembersPerPage] = useState(25);
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);
setMembersPerPage(25);
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])
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
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 indexOfLastMember = currentPage * membersPerPage;
const indexOfFirstMember = indexOfLastMember - membersPerPage;
const currentMembers = 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)).slice(indexOfFirstMember, indexOfLastMember);
const active = currentPage;
const pageAmount = Math.ceil(members.length / membersPerPage);
const memberList = currentMembers.map((member) =>
);
return (
<>
{ isLoading ? : isError ?
Error fetching members. :
<>
{
setMembersPerPage(e.target.value);
setCurrentPage(1);
}}>
{setValue(e.target.value); setCurrentPage(1)}} placeholder="Search"/>
fetchMembers()}>Refresh
{ currentPage === 1 ? : setCurrentPage(currentPage - 1)} />}
{ currentPage < 3 ? "" : setCurrentPage(1)} active={1 === active}>{1}}
{ currentPage < 4 ? "" :}
{ currentPage > 1 ? setCurrentPage(currentPage - 1)}>{currentPage - 1} : "" }
setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}
{ currentPage < pageAmount ? setCurrentPage(currentPage + 1)}>{currentPage + 1} : "" }
{ currentPage > pageAmount - 3 ? "" : }
{ currentPage > pageAmount - 2 ? "" : setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}}
{ currentPage === pageAmount ? : setCurrentPage(currentPage + 1)} />}
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}
}
)
}