add individual member pages

src/Components/MemberCard.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Link } from "react-router-dom";
 import  * as BS from 'react-bootstrap'
 import { useForm } from "react-hook-form";
 import moment from 'moment';
@@ -203,7 +204,9 @@ export default function MemberCard(props) {
        memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
        <LazyLoad offset={100}>
            <BS.Card.Header className="d-flex align-items-center justify-content-between">
-        <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
+        { localStorage.getItem('pagesonly') ? 
+        <Link to={`dash/${member.id}`}><BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button></Link>
+        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}
             { 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()}>
@@ -275,7 +278,8 @@ export default function MemberCard(props) {
             <>
             <BS.Row>
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
-                { member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name: </b>{displayName}</BS.Col> : "" }
+                { member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
                 { member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
                 { member.pronouns ?  localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> : 
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
@@ -359,7 +363,7 @@ export default function MemberCard(props) {
          <BS.Form onSubmit={handleSubmitProxy(submitProxy)}>
              <BS.Form.Row>
                 { proxyTags.map((item, index) => (
-                    <BS.Col key={item.id} className="mb-lg-2" xs={12} lg={2}>
+                    <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}>
                         <BS.Form.Row>
                         <BS.InputGroup className="ml-1 mr-1 mb-1">
                         <BS.Form.Control name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={registerProxy}/> 
@@ -375,13 +379,13 @@ export default function MemberCard(props) {
          <><hr/>
              <h5>Viewing proxy tags</h5>
          <BS.Row className="mb-2">
-          { proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag) => <BS.Col key={proxytag.index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
+          { proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag, index) => <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
          </BS.Row>
          <BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setProxyMode(true)}>Edit</BS.Button>
             <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>}
+                { proxyView ? "" : privacyMode ? "" : privacyView ? "" : <><BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button> <Link to={`dash/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></> }
             </> } </BS.Card.Body>
         </BS.Accordion.Collapse>
         </LazyLoad>

src/Components/MemberPage.js

@@ -0,0 +1,395 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import  * as BS from 'react-bootstrap'
+import { useForm } from "react-hook-form";
+import moment from 'moment';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import autosize from 'autosize';
+import Twemoji from 'react-twemoji';
+
+import API_URL from "../Constants/constants.js";
+import history from "../History.js";
+
+import defaultAvatar from '../default_discord_avatar.png'
+import { FaUser, FaTrashAlt } from "react-icons/fa";
+
+export default function MemberPage(props) {
+
+    const [ member, setMember] = useState(props.member);
+
+    const [ displayName, setDisplayName ] = useState("");
+    const [ birthday, setBirthday ] = useState("");
+    const [ birthdate, setBirthdate ] = useState("");
+    const [ pronouns, setPronouns ] = useState("");
+    const [ editPronouns, setEditPronouns ] = useState("");
+    const [ avatar, setAvatar ] = useState("");
+    const [ color, setColor ] = useState("");
+    const [ desc, setDesc ] = useState("");
+    const [ editDesc, setEditDesc ] = useState("");
+    const [ proxyTags, setProxyTags ] = useState(member.proxy_tags);
+
+    const [ editMode, setEditMode ] = useState(false);
+    const [ privacyMode, setPrivacyMode ] = useState(false);
+    const [ privacyView, setPrivacyView ] = useState(false);
+    const [ proxyView, setProxyView ] = useState(false);
+    const [ proxyMode, setProxyMode ] = useState(false);
+    
+    const [open, setOpen] = useState(false);
+    const closeModal = () => setOpen(false);
+
+    const [ errorAlert, setErrorAlert ] = useState(false);
+    const [ wrongID, setWrongID ] = useState(false);
+    const [ memberDeleted, setMemberDeleted ] = useState(false);
+
+    const {
+        register: registerEdit,
+        handleSubmit: handleSubmitEdit
+      } = useForm();
+
+    const {
+        register: registerPrivacy,
+        handleSubmit: handleSubmitPrivacy
+      } = useForm();
+
+    const {
+        register: registerDelete,
+        handleSubmit: handleSubmitDelete
+      } = useForm();
+  
+      const {
+        register: registerProxy,
+        handleSubmit: handleSubmitProxy,
+        } = useForm();
+
+        useEffect(() => {
+            autosize(document.querySelector('textarea'));
+        })
+
+    useEffect(() => {
+        const { toHTML } = require('../Functions/discord-parser.js');
+
+        if (member.display_name) {
+            setDisplayName(member.display_name)
+        } else setDisplayName('')
+
+        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');
+                setBirthday(bdaymoment);
+            } else {
+                var birthdaymoment =  moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
+                setBirthday(birthdaymoment);
+            }
+        } else { setBirthday('');
+        setBirthdate('');
+    }
+
+        if (member.pronouns) {
+            setPronouns(toHTML(member.pronouns));
+            setEditPronouns(member.pronouns);
+        } else { setPronouns('');
+        setEditPronouns('');
+    }
+
+        if (member.avatar_url) {
+            var avatarsmall = member.avatar_url.replace('&format=jpeg', '');
+            setAvatar(avatarsmall.replace('?width=256&height=256', ''))
+        } else setAvatar('')
+        
+        if (member.color) {
+            setColor(member.color);
+        } else setColor('');
+
+        if (member.description) {
+            setDesc(toHTML(member.description));
+            setEditDesc(member.description);
+        } else { setDesc("(no description)");
+        setEditDesc("");
+    }
+    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]);
+
+    const submitEdit = data => {
+        fetch(`${API_URL}m/${member.id}`,{
+            method: 'PATCH',
+            body: JSON.stringify(data),
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+            }}).then (res => res.json()
+            ).then (data => { 
+                setMember(prevState => {return {...prevState, ...data}});
+                setErrorAlert(false);
+                setEditMode(false);
+        }
+            ).catch (error => {
+                console.error(error);
+                setErrorAlert(true);
+            });
+    }
+
+    const submitPrivacy = data => {
+        fetch(`${API_URL}m/${member.id}`,{
+            method: 'PATCH',
+            body: JSON.stringify(data),
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+            }}).then (res => res.json()
+            ).then (data => {
+                setMember(prevState => {return {...prevState, ...data}});
+                setErrorAlert(false); 
+                setPrivacyMode(false)
+        }
+            ).catch (error => {
+                console.error(error);
+                setErrorAlert(true);
+             })
+    }
+
+    const deleteMember = data => {
+        if (data.memberID !== member.id) {
+        setWrongID(true);
+        } else {
+            fetch(`${API_URL}m/${member.id}`,{
+                method: 'DELETE',
+                headers: {
+                'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+                }}).then (() => {
+                    setErrorAlert(false);
+                    setMemberDeleted(true);
+                })
+                .catch (error => {
+                    console.error(error);
+                    setErrorAlert(true);
+                })
+        }
+    }
+
+    function addProxyField() {
+        setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )
+    }
+
+    function resetProxyFields() {
+        setProxyMode(false);
+        setProxyTags(member.proxy_tags);
+    }
+
+    const submitProxy = data => {
+
+        const newdata = {proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))}
+
+        fetch(`${API_URL}m/${member.id}`,{
+            method: 'PATCH',
+            body: JSON.stringify(newdata),
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+            }}).then (res => res.json()
+            ).then (data => { 
+                setMember(prevState => {return {...prevState, ...data}}); 
+                setProxyTags(data.proxy_tags); 
+                setErrorAlert(false)
+                setProxyMode(false);
+        }
+            ).catch (error => {
+                console.error(error);
+                setErrorAlert(true);
+            });
+    }    
+
+    return (
+        memberDeleted ? <BS.Card className="mb-5"><BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header>
+        <BS.Card.Body>
+            Member successfully deleted, click the button below to go back to the dash.
+            <BS.Button variant="primary" className="float-right" onClick={() => history.push("/pk-webs/dash/reload")}>Back</BS.Button>
+        </BS.Card.Body></BS.Card> :
+        <>
+        { localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+        <div className="backdrop-overlay"/></> : "" }
+        <BS.Card className="mb-5">
+        <BS.Card.Header className="d-flex align-items-center justify-content-between">
+        <BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button>
+            { 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 />
+                    </div>
+                )}
+            </Popup> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
+        </BS.Card.Header>
+                <BS.Card.Body style={{ borderLeft: localStorage.getItem('colorbg') ? `5px solid #${color}` : ''}}>
+                { errorAlert ? <BS.Alert variant="danger">Something went wrong, please try logging in and out again.</BS.Alert> : "" }
+                { editMode ?
+                <>
+                <BS.Form id='Edit' onSubmit={handleSubmitEdit(submitEdit)}>
+                <BS.Form.Row>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Name:</BS.Form.Label>
+                   <BS.Form.Control name="name" ref={registerEdit} defaultValue={member.name} />
+                </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Display name: </BS.Form.Label>
+                    <BS.Form.Control name="display_name" ref={registerEdit}  defaultValue={displayName} />
+                </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Birthday:</BS.Form.Label>
+                    <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" ref={registerEdit}  defaultValue={birthdate}/>
+                    <BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
+                </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Pronouns:</BS.Form.Label>
+                    <BS.Form.Control maxLength="100" name="pronouns" ref={registerEdit} defaultValue={editPronouns} />
+                </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Avatar url:</BS.Form.Label> 
+                  <BS.Form.Control type="url" name="avatar_url" ref={registerEdit}  defaultValue={avatar} />
+                </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Color:</BS.Form.Label> 
+                   <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" ref={registerEdit}  defaultValue={color} />
+                    <BS.Form.Text>(hexcode)</BS.Form.Text>
+                </BS.Col>
+            </BS.Form.Row>
+            <BS.Form.Group className="mt-3">
+                <BS.Form.Label>Description:</BS.Form.Label>
+                <BS.Form.Control maxLength="1000" as="textarea" name="description" ref={registerEdit} defaultValue={editDesc}/>
+            </BS.Form.Group>
+            <BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>
+            </BS.Form>
+                   <Popup open={open} position="top-center" modal>
+                       <BS.Container>
+                       <BS.Card>
+                           <BS.Card.Header>
+                               <h5><FaTrashAlt className="mr-3"/> Are you sure you want to delete {member.name}?</h5>
+                           </BS.Card.Header>
+                           <BS.Card.Body>
+                             { wrongID ? <BS.Alert variant="danger">Incorrect ID, please check the spelling.</BS.Alert> : "" }
+                               <p>If you're sure you want to delete this member, please enter the member ID ({member.id}) below.</p>
+                               <BS.Form id='Delete' onSubmit={handleSubmitDelete(deleteMember)}>
+                                   <BS.Form.Label>Member ID:</BS.Form.Label>
+                                   <BS.Form.Control className="mb-4" name="memberID" ref={registerDelete({required: true})} placeholder={member.id} />
+                                   <BS.Button variant="danger" type="submit">Delete</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
+                               </BS.Form>
+                           </BS.Card.Body>
+                       </BS.Card>
+                       </BS.Container>
+                    </Popup></>
+                 :
+            <>
+            <BS.Row>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
+                { member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
+                { member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
+                { member.pronouns ?  localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> : 
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
+                { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
+                { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
+                { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                
+            </BS.Row>
+            { privacyMode ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
+                <hr/>
+                <h5>Editing privacy settings</h5>
+                    <BS.Form.Row>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                        <BS.Form.Label>Visibility:</BS.Form.Label>
+                        <BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Name:</BS.Form.Label>
+                        <BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Description:</BS.Form.Label>
+                        <BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Avatar:</BS.Form.Label>
+                        <BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Birthday:</BS.Form.Label>
+                        <BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Pronouns:</BS.Form.Label>
+                        <BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                    <BS.Col className="mb-3" xs={12} lg={3}>
+                    <BS.Form.Label>Meta:</BS.Form.Label>
+                        <BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" ref={registerPrivacy}>
+                            <option>public</option>
+                            <option>private</option>
+                        </BS.Form.Control>
+                    </BS.Col>
+                </BS.Form.Row>
+                <BS.Button variant="light" onClick={() => setPrivacyMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>                
+                <hr/>
+            </BS.Form> : privacyView ? <><hr/>
+                <h5>Viewing privacy settings</h5>
+            <BS.Row>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Visibility:</b> {member.visibility}</BS.Col>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Name: </b>{member.name_privacy}</BS.Col>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Description:</b> {member.description_privacy}</BS.Col> 
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Avatar:</b> {member.avatar_privacy}</BS.Col>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {member.birthday_privacy}</BS.Col>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> {member.pronoun_privacy}</BS.Col>
+                <BS.Col className="mb-3" xs={12} lg={3}><b>Meta:</b> {member.metadata_privacy}</BS.Col>
+            </BS.Row>
+         <BS.Button variant="light" onClick={() => setPrivacyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setPrivacyMode(true)}>Edit</BS.Button>
+         <hr/></> : "" }
+         { proxyMode ?
+         <><hr/>
+         <h5>Editing proxy tags</h5>
+         <BS.Form onSubmit={handleSubmitProxy(submitProxy)}>
+             <BS.Form.Row>
+                { proxyTags.map((item, index) => (
+                    <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}>
+                        <BS.Form.Row>
+                        <BS.InputGroup className="ml-1 mr-1 mb-1">
+                        <BS.Form.Control name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={registerProxy}/> 
+                        <BS.Form.Control disabled placeholder='text'/>
+                        <BS.Form.Control name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} ref={registerProxy}/>
+                        </BS.InputGroup>
+                        </BS.Form.Row>
+                    </BS.Col>
+                ))} <BS.Col className="mb-2" xs={12} lg={2}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
+             </BS.Form.Row>
+             <BS.Button variant="light" onClick={() => resetProxyFields()}>Exit</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
+        </BS.Form><hr/></> : proxyView ? 
+         <><hr/>
+             <h5>Viewing proxy tags</h5>
+         <BS.Row className="mb-2">
+          { proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag, index) => <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
+         </BS.Row>
+         <BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>  <BS.Button variant="primary" onClick={() => setProxyMode(true)}>Edit</BS.Button>
+            <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></>}
+            </> } </BS.Card.Body></BS.Card></>
+    )
+}

src/Components/MemberPages.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from "react-router-dom";
+import MemberPage from './MemberPage.js'
+
+export default function MemberPages(props) {
+    const { memberID } = useParams();
+    
+    const memberpage = props.members.filter((member) => member.id === memberID).map((member) => <MemberPage key={member.id} member={member}/>)
+
+    return (
+        <>
+            {memberpage}
+        </>
+    )
+}

src/Components/Memberlist.js

@@ -1,16 +1,20 @@
-import React, { useEffect, useState, useCallback } from 'react';
+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(props) {
+export default function Memberlist() {
+
+    const { path } = useRouteMatch();
     
     const user = JSON.parse(localStorage.getItem('user'));
     const userId = user.id;
@@ -63,7 +67,7 @@ export default function Memberlist(props) {
     })
   }, [userId])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     fetchMembers();
   }, [fetchMembers])
 
@@ -100,6 +104,7 @@ export default function Memberlist(props) {
         ).then (data => { 
             setErrorAlert(false);
             closeModal();
+            fetchMembers();
     }
         ).catch (error => {
             console.error(error);
@@ -160,8 +165,6 @@ export default function Memberlist(props) {
       }
     }, [sortBy, filteredMembers, indexOfFirstMember, indexOfLastMember])
 
-
-
     const active = currentPage;
     const pageAmount = Math.ceil(filteredMembers.length / membersPerPage);
       
@@ -173,6 +176,8 @@ export default function Memberlist(props) {
     );
 
     return (
+      <Switch>
+        <Route exact path={path}>
         <>
         <BS.Row className="mb-3 justfiy-content-md-center">
         <BS.Col xs={12} lg={4}>
@@ -380,5 +385,11 @@ export default function Memberlist(props) {
         </>
         }
         </>
+        </Route>
+        <Route path={`${path}/:memberID`}>
+          { isLoading ? <Loading/> :
+          <MemberPages members={members}/>}
+        </Route>
+        </Switch>
     )
 }

src/Components/Profile.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useRouteMatch } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
 import * as BS from 'react-bootstrap';
 import Popup from 'reactjs-popup';
@@ -12,6 +13,8 @@ import ProfileList from "./ProfileList.js";
 
 export default function Profile () {
 
+    const match = useRouteMatch("/pk-webs/profile/:sysID/:memberID");
+
     const { sysID } = useParams();
     const [ system, setSystem ] = useState('');
     const [ name, setName ] = useState('');
@@ -63,8 +66,8 @@ export default function Profile () {
         } else setDesc("(no description)");
     }, [system.description, system.tag, system.avatar_url, system.tz, system.name]);
 
-
+   return (match ? <ProfileList sysID={sysID} /> :
-   return (<>{ isLoading ? <Loading /> : isError ?  <BS.Alert variant="danger">Something went wrong, either the system doesn't exist, or there was an error fetching data.</BS.Alert> :
+   <>{ isLoading ? <Loading /> : isError ?  <BS.Alert variant="danger">Something went wrong, either the system doesn't exist, or there was an error fetching data.</BS.Alert> :
     <><BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
         <BS.Card className="mb-3 mt-3 w-100" >
         <BS.Card.Header className="d-flex align-items-center justify-content-between">

src/Components/ProfileCard.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
 import  * as BS from 'react-bootstrap'
 import moment from 'moment';
 import Popup from 'reactjs-popup';
@@ -11,7 +12,7 @@ import defaultAvatar from '../default_discord_avatar.png'
 import { FaUser } from "react-icons/fa";
 
 export default function MemberCard(props) {
-
+    const { sysID } = useParams();
     const member = props.member;
 
     const [ avatar, setAvatar ] = useState('')
@@ -68,7 +69,9 @@ export default function MemberCard(props) {
     return (
        <LazyLoad offset={100}>
            <BS.Card.Header className="d-flex align-items-center justify-content-between">
-        <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
+           { localStorage.getItem('pagesonly') ? 
+        <Link to={`${sysID}/${member.id}`}><BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button></Link>
+        : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}
             { 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()}>
@@ -82,7 +85,8 @@ export default function MemberCard(props) {
             <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
             <BS.Row>
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
-                { member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name: </b>{displayName}</BS.Col> : "" }
+                { member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
                 { member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
                 { member.pronouns ?  localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> : 
                 <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
@@ -99,7 +103,7 @@ export default function MemberCard(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>}
-            </BS.Card.Body>
+            <BS.Row><BS.Col><Link to={`${sysID}/${member.id}`}><BS.Button variant="primary" className="float-right">View page</BS.Button></Link></BS.Col></BS.Row> </BS.Card.Body>
         </BS.Accordion.Collapse>
         </LazyLoad>
         

src/Components/ProfileList.js

@@ -1,14 +1,17 @@
 import React, { useEffect, useState, useCallback } from 'react';
+import { Switch, Route, useParams, useRouteMatch } from 'react-router-dom';
 import  * as BS from 'react-bootstrap'
 import 'reactjs-popup/dist/index.css';
 
 import ProfileCard from './ProfileCard.js'
+import ProfilePages from './ProfilePages.js'
 import Loading from "./Loading.js";
 import API_URL from "../Constants/constants.js";
 
-export default function Memberlist(props) {
+export default function Memberlist() {
 
-    const sysID = props.sysID;
+    const { path } = useRouteMatch();
+    const { sysID } = useParams();
 
     const [isLoading, setIsLoading ] = useState(false);
     const [isError, setIsError ] = useState(false);
@@ -128,6 +131,8 @@ export default function Memberlist(props) {
     );
 
     return (
+      <Switch>
+        <Route exact path={path}>
       <>
       <BS.Row className="mb-3 justfiy-content-md-center">
       <BS.Col xs={12} lg={4}>
@@ -209,5 +214,11 @@ export default function Memberlist(props) {
         </>
         }
         </>
+          </Route>
+            <Route path={`/pk-webs/profile/${sysID}/:memberID`}>
+              { isLoading ? <Loading/> :
+            <ProfilePages members={members}/>}
+          </Route>
+        </Switch>
     )
 }

src/Components/ProfilePage.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import  * as BS from 'react-bootstrap'
+import moment from 'moment';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import autosize from 'autosize';
+import Twemoji from 'react-twemoji';
+
+import defaultAvatar from '../default_discord_avatar.png'
+import { FaUser } from "react-icons/fa";
+
+export default function ProfilePage(props) {
+
+    const location = useLocation();
+    const member = props.member;
+
+    const [ avatar, setAvatar ] = useState('')
+    const [ displayName, setDisplayName ] = useState("");
+    const [ birthday, setBirthday ] = useState("");
+    const [ pronouns, setPronouns ] = useState("");
+    const [ color, setColor ] = useState("");
+    const [ desc, setDesc ] = useState("");
+    const proxyTags = member.proxy_tags;
+
+    const [ proxyView, setProxyView ] = useState(false);
+
+        useEffect(() => {
+            autosize(document.querySelector('textarea'));
+        })
+
+    useEffect(() => {
+        const { toHTML } = require('../Functions/discord-parser.js');
+
+        if (member.display_name) {
+            setDisplayName(member.display_name)
+        } else setDisplayName('')
+
+        if (member.birthday) { 
+            if (member.birthday.startsWith('0004-')) {
+                var bday = member.birthday.replace('0004-','');
+                var bdaymoment = moment(bday, 'MM-DD').format('MMM D');
+                setBirthday(bdaymoment);
+            } else {
+                var birthdaymoment =  moment(member.birthday, 'YYYY-MM-DD').format('MMM D, YYYY');
+                setBirthday(birthdaymoment);
+            }
+        } else { setBirthday('');
+    }
+
+    if (member.avatar_url) {
+        var avatarsmall = member.avatar_url.replace('&format=jpeg', '');
+        setAvatar(avatarsmall.replace('?width=256&height=256', ''))
+    } else setAvatar('')
+
+        if (member.pronouns) {
+            setPronouns(toHTML(member.pronouns))
+        } else setPronouns('')
+
+        if (member.color) {
+            setColor(member.color);
+        } else setColor('');
+
+        if (member.description) {
+            setDesc(toHTML(member.description));
+        } else setDesc("(no description)");
+    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]);
+
+    return (
+       <> 
+       { localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+        <div className="backdrop-overlay"/></> : "" }
+        <BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert>
+        <BS.Card className="mb-5">
+        <BS.Card.Header className="d-flex align-items-center justify-content-between">
+        <BS.Button variant="link" className="float-left"><FaUser className="mr-4 float-left" /> <b>{member.name}</b> ({member.id})</BS.Button>
+            { 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 />
+                    </div>
+                )}
+            </Popup> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
+        </BS.Card.Header>
+                <BS.Card.Body style={{ borderLeft: localStorage.getItem('colorbg') ? `5px solid #${color}` : ''}}>
+            <BS.Row>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
+                { member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
+                { member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
+                { member.pronouns ?  localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> : 
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
+                { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
+                { proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
+                
+            </BS.Row>
+            { proxyView ? <><hr/>
+             <h5>Viewing proxy tags</h5>
+         <BS.Row className="mb-2">
+          { proxyTags.length === 0 ? <BS.Col className="mb-lg-2"><b>No proxy tags set.</b></BS.Col> : proxyTags.map((proxytag) => <BS.Col key={proxytag.index} className="mb-lg-2" xs={12} lg={2}> <code>{proxytag.prefix}text{proxytag.suffix}</code></BS.Col> )}
+         </BS.Row>
+         <BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>
+            <hr/></> : "" }
+            <p><b>Description:</b></p>
+            { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
+            <BS.Row><BS.Col><Link to={location.pathname.substring(0, location.pathname.lastIndexOf('/'))}><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></BS.Col></BS.Row>
+            </BS.Card.Body>
+        </BS.Card>
+        </>
+    )
+}

src/Components/ProfilePages.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from "react-router-dom";
+import ProfilePage from './ProfilePage.js'
+
+export default function MemberPages(props) {
+    const { memberID } = useParams();
+    
+    const memberpage = props.members.filter((member) => member.id === memberID).map((member) => <ProfilePage key={member.id} member={member}/>)
+
+    return (
+        <>
+            {memberpage}
+        </>
+    )
+}

src/Components/System.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import  * as BS from 'react-bootstrap'
+import { useRouteMatch } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import autosize from 'autosize';
 import moment from 'moment';
@@ -15,6 +16,8 @@ import { FaAddressCard } from "react-icons/fa";
 
 export default function System(props) {
 
+    const match = useRouteMatch("/pk-webs/dash/:memberID");
+
     const {
         register: registerEdit,
         handleSubmit: handleSubmitEdit
@@ -112,6 +115,8 @@ const submitPrivacy = data => {
         })
 }
 
+        if (match) return null;
+
         return (
            <BS.Card className="mb-3 mt-3 w-100" >
                <BS.Card.Header className="d-flex align-items-center justify-content-between">

src/Custom.scss

@@ -3,6 +3,10 @@
   src: url('https://dl.dropboxusercontent.com/s/qfpakpjedhsrdb9/OpenDyslexicAlta-Regular.ttf');
 }
 
+#root {
+  z-index: -5;
+}
+
 html {
   position: relative;
   min-height: 100vh;
@@ -21,12 +25,21 @@ body {
   transition: background-color 0.3s ease;
 }
 
+.card-header {
+  background-color: $gray-200 !important;
+  opacity: 1 !important;
+}
+
 .dark-mode .card {
   color: $white;
   background-color: $gray-800;
   border: 1px solid #191c1f !important;
 }
 
+.card-body {
+  background-color: $white;
+}
+
 .dark-mode .card-body {
   color: $white;
   background-color: $gray-800;
@@ -34,8 +47,8 @@ body {
 }
 
 .dark-mode .card-header {
-  color: $gray-100;
+  color: $gray-100 !important;
-  background-color: $gray-900;
+  background-color: $gray-900 !important;
   transition: background-color 0.3s ease;
 }
 
@@ -265,4 +278,36 @@ blockquote {
   width: auto;
 }
 
+.backdrop {
+  position:fixed;
+  padding:0;
+  margin:0;
+
+  top:0;
+  left:0;
+
+  width: 100%;
+  height: 100%;
+  z-index: -4;
+  opacity: 0.6;
+}
+
+.backdrop-overlay {
+  position:fixed;
+  padding:0;
+  margin:0;
+
+  top:0;
+  left:0;
+
+  width: 100%;
+  height: 100%;
+  z-index: -3;
+  background: linear-gradient(to bottom,  rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.dark-mode .backdrop-overlay {
+  background: linear-gradient(to bottom,  rgba(52, 58, 64, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
 @import "~bootstrap/scss/bootstrap";