close()}>
@@ -82,7 +85,8 @@ export default function MemberCard(props) {
ID: {member.id}
- { member.display_name ? Display name: {displayName} : "" }
+ { member.display_name ? localStorage.getItem('twemoji') ? Display name: {displayName} :
+ Display name: {displayName} : "" }
{ member.birthday ? Birthday: {birthday} : "" }
{ member.pronouns ? localStorage.getItem('twemoji') ? Pronouns: :
Pronouns: : "" }
@@ -99,7 +103,7 @@ export default function MemberCard(props) {
: "" }
Description:
{ localStorage.getItem('twemoji') ? : }
-
+
View page
diff --git a/src/Components/ProfileList.js b/src/Components/ProfileList.js
index 4bc3a90a..4f16d50f 100644
--- a/src/Components/ProfileList.js
+++ b/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) {
-
- const sysID = props.sysID;
+export default function Memberlist() {
+
+ 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 (
+
+
<>
@@ -209,5 +214,11 @@ export default function Memberlist(props) {
}
+
+
+ { isLoading ? :
+ }
+
+
)
}
\ No newline at end of file
diff --git a/src/Components/ProfilePage.js b/src/Components/ProfilePage.js
new file mode 100644
index 00000000..474e3a36
--- /dev/null
+++ b/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 ? <>
+
: "" }
+
You are currently viewing a member.
+
+
+ {member.name} ({member.id})
+ { member.avatar_url ? } className="avatar" modal>
+ {close => (
+ close()}>
+
+
+ )}
+ :
+ }
+
+
+
+ ID: {member.id}
+ { member.display_name ? localStorage.getItem('twemoji') ? Display name: {displayName} :
+ Display name: {displayName} : "" }
+ { member.birthday ? Birthday: {birthday} : "" }
+ { member.pronouns ? localStorage.getItem('twemoji') ? Pronouns: :
+ Pronouns: : "" }
+ { member.color ? Color: {color} : "" }
+ { proxyView ? "" : Proxy tags: setProxyView(true)}>View }
+
+
+ { proxyView ? <>
+ Viewing proxy tags
+
+ { proxyTags.length === 0 ? No proxy tags set. : proxyTags.map((proxytag) => {proxytag.prefix}text{proxytag.suffix} )}
+
+ setProxyView(false)}>Exit
+
: "" }
+ Description:
+ { localStorage.getItem('twemoji') ? : }
+ Back
+
+
+
+ )
+}
diff --git a/src/Components/ProfilePages.js b/src/Components/ProfilePages.js
new file mode 100644
index 00000000..dc2624bc
--- /dev/null
+++ b/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) =>
)
+
+ return (
+ <>
+ {memberpage}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/System.js b/src/Components/System.js
index c838e264..97c592ba 100644
--- a/src/Components/System.js
+++ b/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 (
diff --git a/src/Custom.scss b/src/Custom.scss
index 4f77831f..6e22c505 100644
--- a/src/Custom.scss
+++ b/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;
- background-color: $gray-900;
+ color: $gray-100 !important;
+ 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";