fix rendering issues

src/App.js

@@ -105,7 +105,7 @@ export default function App() {
                 pk-webs
             </BS.Navbar.Brand>
             <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
-            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash/reload')} >Dash</BS.NavDropdown.Item>
+            <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/dash')} >Dash</BS.NavDropdown.Item>
             <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/settings')} >Settings</BS.NavDropdown.Item>
             <BS.NavDropdown.Item onClick={() => history.push('/pk-webs/profile')}>Public profile</BS.NavDropdown.Item>
             { localStorage.getItem('token') ? <><hr className="my-1"/><BS.NavDropdown.Item onClick={() => logOut()}>Log out</BS.NavDropdown.Item></> : "" }
@@ -122,7 +122,6 @@ export default function App() {
         <div className="content">
           <BS.Container>
             <Switch>
-            <Redirect exact from="/pk-webs/dash/reload" to="/pk-webs/dash" />
             <Route path="/pk-webs/dash">
               { !localStorage.getItem('token') || isInvalid ? <Redirect to="/pk-webs"/> : <Dash />
               }

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(member.birthday, 'YYYY-MM-DD').format('MMM D');
-                var bdaymoment = moment(bday, 'MM-DD').format('MMM D');
                 setBirthday(bdaymoment);
             } else {
                 var birthdaymoment =  moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
@@ -202,6 +201,16 @@ export default function MemberCard(props) {
             });
     }
 
+    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}`
         var textField = document.createElement('textarea')
@@ -231,7 +240,7 @@ export default function MemberCard(props) {
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
                     <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail />
+                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
                     </div>
                 )}
             </Popup> : 

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(member.birthday, 'YYYY-MM-DD').format('MMM D');
-                var bdaymoment = moment(bday, 'MM-DD').format('MMM D');
                 setBirthday(bdaymoment);
             } else {
                 var birthdaymoment =  moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
@@ -202,6 +201,16 @@ export default function MemberPage(props) {
             });
     }
     
+    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}`
         var textField = document.createElement('textarea')
@@ -234,7 +243,7 @@ export default function MemberPage(props) {
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
                     <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail />
+                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
                     </div>
                 )}
             </Popup> : 
@@ -408,7 +417,7 @@ export default function MemberPage(props) {
             <hr/></> : "" }
             <p><b>Description:</b></p>
             { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
-                { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to="/pk-webs/dash/reload" ><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></>}
+                { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to="/pk-webs/dash" ><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></>}
             </> } </BS.Card.Body></BS.Card></>
     )
 }

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) => <MemberPage key={member.id} member={member}/>)
+    const memberpage = memberpages.map((member) => <MemberPage key={member.id} member={member} edit={props.edit}/>)
     const noMatch = memberpages.length === 0;
 
     useEffect (() => { 

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) => <BS.Card key={member.id}>
+      <MemberCard
+      member={member} 
+      edit={memberEdit => {setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member)); console.log(members)}}
+      />
+    </BS.Card>
+    );
 
     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) => <BS.Card key={member.id}>
-        <MemberCard
-        member={member} 
-        />
-    </BS.Card>
-    );
-
     return (
       <Switch>
         <Route exact path={path}>
         <>
-        <BS.Row className="mb-3 justfiy-content-md-center">
+        <BS.Row className="mb-lg-3 justfiy-content-md-center">
         <BS.Col xs={12} lg={4}>
         <BS.Form>
           <BS.InputGroup className="mb-3">
@@ -227,13 +222,27 @@ export default function Memberlist() {
         </BS.Form>
         </BS.Col>
         </BS.Row>
-        <BS.Row noGutters="true" className="justify-content-md-center">
+        <BS.Row className="justify-content-md-center">
-        <BS.Col className="ml-lg-2 mb-3" xs={12} lg={6}>
+        <BS.Col xs={12} lg={3}>
+        <BS.Form>
+          <BS.InputGroup className="mb-3">
+          <BS.Form.Control disabled placeholder='Only show:'/>
+            <BS.Form.Control as="select" defaultValue={privacyFilter} onChange={e => {
+              setPrivacyFilter(e.target.value)
+              }}>
+              <option>all</option>
+              <option>private</option>
+              <option>public</option>
+            </BS.Form.Control>
+            </BS.InputGroup>
+        </BS.Form>
+        </BS.Col>
+        <BS.Col className="mb-3" xs={12} lg={7}>
         <BS.Form>
             <BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>
         </BS.Form>
         </BS.Col>
-        <BS.Col className="ml-lg-2 mb-3" xs={12} lg={1}>
+        <BS.Col className="mb-3" xs={12} lg={2}>
           <BS.Button type="primary" className="m-0" block onClick={() => fetchMembers()}>Refresh</BS.Button>
         </BS.Col>
         </BS.Row>
@@ -388,7 +397,8 @@ export default function Memberlist() {
         </Route>
         <Route path={`${path}/:memberID`}>
           { isLoading ? <Loading/> :
-          <MemberPages members={members}/>}
+          <MemberPages members={members}
+          edit={memberEdit => {setMembers(members.map(member => member.id === memberEdit.id ? Object.assign(member, memberEdit) : member)); console.log(members)}}/>}
         </Route>
         </Switch>
     )