fix rendering issues

2021-02-06 17:02:26 +01:00 · 2021-02-06 17:02:26 +01:00 · 586782ae67
commit 586782ae67
parent 82b529eb6a
5 changed files with 117 additions and 90 deletions
--- a/src/App.js
+++ b/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 />
              }
--- 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 ?   <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> : 
--- 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 ?   <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></>
    )
 }
--- 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) => <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 (() => { 
--- 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) => <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.Col className="ml-lg-2 mb-3" xs={12} lg={6}>
+        <BS.Row className="justify-content-md-center">
+        <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>
    )