import React, { useEffect, useLayoutEffect, useState, useCallback } from 'react';
import { useRouteMatch, Switch, Route } from "react-router-dom";
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 MemberPages from './MemberPages.js'
import Loading from "./Loading.js";
import API_URL from "../Constants/constants.js";
import { FaPlus } from "react-icons/fa";
export default function Memberlist() {
const { path } = useRouteMatch();
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 [memberData, setMemberData ] = useState([]);
const [filteredMembers, setFilteredMembers ] = useState([]);
const [sortedMembers, setSortedMembers ] = useState([]);
const [searchBy, setSearchBy] = useState('name')
const [sortBy, setSortBy] = useState('name')
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 => {
setMembers(data)
setIsLoading(false);
})
.catch (error => {
console.log(error);
setIsError(true);
setIsLoading(false);
})
}, [userId])
useLayoutEffect(() => {
fetchMembers();
}, [fetchMembers])
useEffect(() => {
let Members = members.map(member => {
if (member.display_name) {
return {...member, displayName: member.display_name}
} return {...member, displayName: member.name}
})
let Members1 = Members.map(member => {
if (member.description) {
return {...member, desc: member.description}
} return {...member, desc: "(no description)"}
})
setMemberData(Members1);
}, [members])
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 => {
setErrorAlert(false);
closeModal();
fetchMembers();
}
).catch (error => {
console.error(error);
setErrorAlert(true);
});
}
const indexOfLastMember = currentPage * membersPerPage;
const indexOfFirstMember = indexOfLastMember - membersPerPage;
useEffect(() => {
searchMembers();
}, [value, memberData, searchBy])
function searchMembers() {
const currentMembers = memberData.filter(member => {
if (!value) return true;
if (searchBy === 'name') {
if (member.name.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
} else if (searchBy === 'display name') {
if (member.displayName.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false
} else if (searchBy === 'description') {
if (member.desc.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
} else if (searchBy === 'ID') {
if (member.id.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
}
return false;
})
setFilteredMembers(currentMembers);
}
useEffect (() => {
if (sortBy === 'name') {
const sortMembers = filteredMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
setSortedMembers(sortMembers);
} else if (sortBy === 'display name') {
const sortMembers = filteredMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
setSortedMembers(sortMembers);
} else if (sortBy === 'ID') {
const sortMembers = filteredMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
setSortedMembers(sortMembers);
} else if (sortBy === 'date created') {
const sortMembers = filteredMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
setSortedMembers(sortMembers);
}
}, [sortBy, filteredMembers, indexOfFirstMember, indexOfLastMember])
const active = currentPage;
const pageAmount = Math.ceil(filteredMembers.length / membersPerPage);
const memberList = sortedMembers.map((member) =>
);
return (
<>
{
setMembersPerPage(e.target.value);
setCurrentPage(1);
}}>
{
setSearchBy(e.target.value)
}}>
{
setSortBy(e.target.value)
}}>
{setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>
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)} />}
{ isLoading ? : isError ?
Error fetching members. :
<>
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}
}
{ isLoading ? :
}
)
}