From 586782ae67b4ac5ac273532b16abd7a90d6f1b0c Mon Sep 17 00:00:00 2001 From: Spectralitree Date: Sat, 6 Feb 2021 17:02:26 +0100 Subject: [PATCH] fix rendering issues --- src/App.js | 3 +- src/Components/MemberCard.js | 19 ++-- src/Components/MemberPage.js | 21 +++-- src/Components/MemberPages.js | 2 +- src/Components/Memberlist.js | 162 ++++++++++++++++++---------------- 5 files changed, 117 insertions(+), 90 deletions(-) diff --git a/src/App.js b/src/App.js index 082bbf09..c6352c53 100644 --- a/src/App.js +++ b/src/App.js @@ -105,7 +105,7 @@ export default function App() { pk-webs - history.push('/pk-webs/dash/reload')} >Dash + history.push('/pk-webs/dash')} >Dash history.push('/pk-webs/settings')} >Settings history.push('/pk-webs/profile')}>Public profile { localStorage.getItem('token') ? <>
logOut()}>Log out : "" } @@ -122,7 +122,6 @@ export default function App() {
- { !localStorage.getItem('token') || isInvalid ? : } diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js index 9a418fb8..279f3cda 100644 --- a/src/Components/MemberCard.js +++ b/src/Components/MemberCard.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { Link } from "react-router-dom"; import * as BS from 'react-bootstrap' import { useForm } from "react-hook-form"; @@ -78,8 +78,7 @@ export default function MemberCard(props) { if (member.birthday) { setBirthdate(member.birthday) if (member.birthday.startsWith('0004-')) { - var bday = member.birthday.replace('0004-',''); - var bdaymoment = moment(bday, 'MM-DD').format('MMM D'); + var bdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D'); setBirthday(bdaymoment); } else { var birthdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY'); @@ -200,7 +199,17 @@ export default function MemberCard(props) { console.error(error); setErrorAlert(true); }); - } + } + + const didMount = useRef(false); + + useEffect(() => { + if (didMount.current) { + props.edit(member); + } else { + didMount.current = true; + } + }, [props, member]); function copyLink() { var link = `https://spectralitree.github.io/pk-webs/profile/${sysID}/${member.id}` @@ -231,7 +240,7 @@ export default function MemberCard(props) { { member.avatar_url ? } className="avatar" modal> {close => (
close()}> - +
)} : diff --git a/src/Components/MemberPage.js b/src/Components/MemberPage.js index 83b138d8..15287cf1 100644 --- a/src/Components/MemberPage.js +++ b/src/Components/MemberPage.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { Link } from 'react-router-dom'; import * as BS from 'react-bootstrap' import { useForm } from "react-hook-form"; @@ -78,8 +78,7 @@ export default function MemberPage(props) { if (member.birthday) { setBirthdate(member.birthday) if (member.birthday.startsWith('0004-')) { - var bday = member.birthday.replace('0004-',''); - var bdaymoment = moment(bday, 'MM-DD').format('MMM D'); + var bdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D'); setBirthday(bdaymoment); } else { var birthdaymoment = moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY'); @@ -200,7 +199,17 @@ export default function MemberPage(props) { console.error(error); setErrorAlert(true); }); - } + } + + const didMount = useRef(false); + + useEffect(() => { + if (didMount.current) { + props.edit(member); + } else { + didMount.current = true; + } + }, [props, member]); function copyLink() { var link = `https://spectralitree.github.io/pk-webs/profile/${sysID}/${member.id}` @@ -234,7 +243,7 @@ export default function MemberPage(props) { { member.avatar_url ? } className="avatar" modal> {close => (
close()}> - +
)} : @@ -408,7 +417,7 @@ export default function MemberPage(props) {
: "" }

Description:

{ localStorage.getItem('twemoji') ?

:

} - { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <> setEditMode(true)}>Edit Back} + { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <> setEditMode(true)}>Edit Back} } ) } diff --git a/src/Components/MemberPages.js b/src/Components/MemberPages.js index f41af1de..6aaf37ca 100644 --- a/src/Components/MemberPages.js +++ b/src/Components/MemberPages.js @@ -8,7 +8,7 @@ export default function MemberPages(props) { const memberpages = props.members.filter((member) => member.id === memberID) - const memberpage = memberpages.map((member) => ) + const memberpage = memberpages.map((member) => ) const noMatch = memberpages.length === 0; useEffect (() => { diff --git a/src/Components/Memberlist.js b/src/Components/Memberlist.js index e786b7dc..166b52f0 100644 --- a/src/Components/Memberlist.js +++ b/src/Components/Memberlist.js @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useState, useCallback } from 'react'; +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'; @@ -32,11 +32,9 @@ export default function Memberlist() { 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 [privacyFilter, setPrivacyFilter] = useState('all') const [sortBy, setSortBy] = useState('name') const [value, setValue] = useState(''); @@ -67,11 +65,13 @@ export default function Memberlist() { }) }, [userId]) - useLayoutEffect(() => { + useEffect(() => { fetchMembers(); }, [fetchMembers]) - useEffect(() => { + const indexOfLastMember = currentPage * membersPerPage; + const indexOfFirstMember = indexOfLastMember - membersPerPage; + let Members = members.map(member => { if (member.display_name) { return {...member, displayName: member.display_name} @@ -82,8 +82,66 @@ export default function Memberlist() { return {...member, desc: member.description} } return {...member, desc: "(no description)"} }) - setMemberData(Members1); - }, [members]) + + 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') { + sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember); + } else if (sortBy === 'display name') { + sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember); + } else if (sortBy === 'ID') { + sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember); + } else if (sortBy === 'date created') { + 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)); console.log(members)}} + /> + + ); function addProxyField() { setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] ) @@ -112,74 +170,11 @@ export default function Memberlist() { }); } - 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 ( <> - + @@ -227,13 +222,27 @@ export default function Memberlist() { - - + + + + + + { + setPrivacyFilter(e.target.value) + }}> + + + + + + + + {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/> - + fetchMembers()}>Refresh @@ -388,7 +397,8 @@ export default function Memberlist() { { isLoading ? : - } + {setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member)); console.log(members)}}/>} )