import React, { useEffect, 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 '../../Pages/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 [searchBy, setSearchBy] = useState('name')
const [privacyFilter, setPrivacyFilter] = useState('all')
const [sortBy, setSortBy] = useState('name')
const [sortOrder, setSortOrder] = useState('ascending')
const [value, setValue] = useState('');
const [proxyTags, setProxyTags] = useState([{
prefix: "", suffix: ""
}]);
const {register, handleSubmit, setValue: setTemplate} = useForm();
const fetchMembers = useCallback( () => {
setIsLoading(true);
setIsError(false);
setMembersPerPage(localStorage.getItem("expandcards") ? 10 : 25);
fetch(`${API_URL}s/${userId}/members`,{
method: 'GET',
headers: {
'Authorization': localStorage.getItem("token")
}}).then ( res => res.json()
).then (data => {
setMembers(data)
setIsLoading(false);
})
.catch (error => {
console.log(error);
setIsError(true);
setIsLoading(false);
})
}, [userId])
useEffect(() => {
fetchMembers();
}, [fetchMembers])
const indexOfLastMember = currentPage * membersPerPage;
const indexOfFirstMember = indexOfLastMember - membersPerPage;
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)"}
})
const currentMembers = Members1.filter(member => {
if (!value & privacyFilter === 'all') return true;
if (privacyFilter === 'private') {
if (member.visibility !== 'private') {
return false;
}
} else if (privacyFilter === 'public') {
if (member.visibility !== 'public') {
return false;
}
}
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;
})
const active = currentPage;
const pageAmount = Math.ceil(currentMembers.length / membersPerPage);
var sortMembers = currentMembers;
if (sortBy === 'name') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'display name') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'ID') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'date created') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
}
const memberList = sortMembers.map((member) =>
setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}
/>
);
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': localStorage.getItem("token")
}}).then (res => res.json()
).then (data => {
setErrorAlert(false);
closeModal();
fetchMembers();
}
).catch (error => {
console.error(error);
setErrorAlert(true);
});
}
return (
<>
{
setMembersPerPage(e.target.value);
setCurrentPage(1);
}}>
{
setSearchBy(e.target.value)
}}>
{
setSortBy(e.target.value)
}}>
{
setSortOrder(e.target.value)
}}>
{
setPrivacyFilter(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 < 5 ? setCurrentPage(2)} active={2 === active}>{2} : }
{ 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 - 3 ? setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1} : }
{ 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:
Banner 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:
{ localStorage.getItem('template1') ? setTemplate('description', localStorage.getItem('template1'))}>Template 1 : ""} { localStorage.getItem('template2') ? setTemplate('description', localStorage.getItem('template2'))}>Template 2 : ""} { localStorage.getItem('template3') ? setTemplate('description', localStorage.getItem('template3'))}>Template 3 : ""}
Submit Cancel
{memberList}
{ currentPage === 1 ? : setCurrentPage(currentPage - 1)} />}
{ currentPage < 3 ? "" : setCurrentPage(1)} active={1 === active}>{1}}
{ currentPage < 4 ? "" : currentPage < 5 ? setCurrentPage(2)} active={2 === active}>{2} : }
{ 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 - 3 ? setCurrentPage(pageAmount - 1)} active={pageAmount - 1 === active}>{pageAmount - 1} : }
{ currentPage > pageAmount - 2 ? "" : setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}}
{ currentPage === pageAmount ? : setCurrentPage(currentPage + 1)} />}
}
{ isLoading ? :
setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member))}/>}
)
}