From 56c7c219a9cf7b87bbfa85411e044784917aafc4 Mon Sep 17 00:00:00 2001 From: Spectralitree Date: Sun, 13 Dec 2020 23:38:10 +0100 Subject: [PATCH] Add settings --- .eslintcache | 2 +- src/App.js | 45 ++++++++++++++++++++++++++++++++++-- src/Components/MemberCard.js | 10 ++++++-- src/Components/Memberlist.js | 15 ++++-------- src/Components/Navigation.js | 21 ++++++++++++----- src/Components/Profile.js | 15 ++++++++++++ src/Components/System.js | 9 +++++++- src/Custom.scss | 21 +++++++++++++++++ 8 files changed, 116 insertions(+), 22 deletions(-) create mode 100644 src/Components/Profile.js diff --git a/.eslintcache b/.eslintcache index d5ab67c0..b474d01f 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"10","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js":"11","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js":"12"},{"size":329,"mtime":1607554515255,"results":"13","hashOfConfig":"14"},{"size":87,"mtime":1607504507181,"results":"15","hashOfConfig":"14"},{"size":3605,"mtime":1607811162774,"results":"16","hashOfConfig":"14"},{"size":243,"mtime":1607696817140,"results":"17","hashOfConfig":"14"},{"size":73,"mtime":1607504507180,"results":"18","hashOfConfig":"14"},{"size":231,"mtime":1607504507174,"results":"19","hashOfConfig":"14"},{"size":1217,"mtime":1607794085434,"results":"20","hashOfConfig":"14"},{"size":9865,"mtime":1607803350196,"results":"21","hashOfConfig":"14"},{"size":14073,"mtime":1607858026799,"results":"22","hashOfConfig":"14"},{"size":18896,"mtime":1607857981162,"results":"23","hashOfConfig":"14"},{"size":10382,"mtime":1607549930730,"results":"24","hashOfConfig":"14"},{"size":741,"mtime":1607797507192,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1uc84gl",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js",[]] \ No newline at end of file +[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"10","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js":"11","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js":"12","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Profile.js":"13"},{"size":329,"mtime":1607895960007,"results":"14","hashOfConfig":"15"},{"size":87,"mtime":1607504507181,"results":"16","hashOfConfig":"15"},{"size":5394,"mtime":1607898785732,"results":"17","hashOfConfig":"15"},{"size":243,"mtime":1607696817140,"results":"18","hashOfConfig":"15"},{"size":73,"mtime":1607504507180,"results":"19","hashOfConfig":"15"},{"size":231,"mtime":1607504507174,"results":"20","hashOfConfig":"15"},{"size":1775,"mtime":1607899033295,"results":"21","hashOfConfig":"15"},{"size":10249,"mtime":1607892068230,"results":"22","hashOfConfig":"15"},{"size":14056,"mtime":1607899022832,"results":"23","hashOfConfig":"15"},{"size":19256,"mtime":1607893177574,"results":"24","hashOfConfig":"15"},{"size":10382,"mtime":1607549930730,"results":"25","hashOfConfig":"15"},{"size":741,"mtime":1607797507192,"results":"26","hashOfConfig":"15"},{"size":436,"mtime":1607896148590,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1uc84gl",{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],["55","56"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Profile.js",[],{"ruleId":"57","replacedBy":"58"},{"ruleId":"59","replacedBy":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index a8fa107e..93f70986 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,22 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, useCallback} from 'react'; import { Router, Switch, Route, Redirect } from 'react-router-dom'; import * as BS from 'react-bootstrap' import { useForm } from "react-hook-form"; import * as fetch from 'node-fetch'; +import Toggle from 'react-toggle' import './App.scss'; import 'bootstrap/dist/css/bootstrap.min.css'; import { FaLock } from "react-icons/fa"; +import { FaCog } from "react-icons/fa"; + import Dash from './Components/Dash.js' import history from "./History.js"; import Loading from "./Components/Loading.js"; import Navigation from "./Components/Navigation.js"; import Footer from './Components/Footer.js' +import Profile from './Components/Profile.js' import API_URL from "./Constants/constants.js"; @@ -21,6 +25,8 @@ export default function App() { const [isLoading, setIsLoading ] = useState(false); const [isSubmit, setIsSubmit ] = useState(false); const [isInvalid, setIsInvalid] = useState(false); + const [, updateState] = useState(); + const forceUpdate = useCallback(() => updateState({}), []); const { register, handleSubmit } = useForm(); @@ -35,6 +41,7 @@ export default function App() { logIn(); }; + function logIn() { setIsInvalid(false); setIsLoading(true); @@ -61,11 +68,12 @@ export default function App() { return ( +
- + { !localStorage.getItem('token') || isInvalid ? : } @@ -97,9 +105,42 @@ export default function App() { } + + + + + + + Settings + + +

Change how you view and use pk-webs here, changes will be saved after refreshing. You will have to apply them again in different browsers and on different devices.

+
+ + + { localStorage.getItem('opendyslexic') ? + { + localStorage.removeItem('opendyslexic'); + forceUpdate()}} /> : + { + localStorage.setItem('opendyslexic', 'true') + forceUpdate()}} /> } + Use opendyslexic? + + + + +
+
); } diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js index e4f4fe09..37cb6960 100644 --- a/src/Components/MemberCard.js +++ b/src/Components/MemberCard.js @@ -198,8 +198,14 @@ export default function MemberCard(props) { {member.name} ({member.id}) - { member.avatar_url ? : - } + { member.avatar_url ? } className="avatar" modal> + {close => ( +
close()}> + +
+ )} + : + } diff --git a/src/Components/Memberlist.js b/src/Components/Memberlist.js index df2b8916..87a66ae8 100644 --- a/src/Components/Memberlist.js +++ b/src/Components/Memberlist.js @@ -101,12 +101,6 @@ export default function Memberlist(props) { const active = currentPage; const pageAmount = Math.ceil(members.length / membersPerPage); - const pageNumbers = []; - for ( let i = currentPage; (i <= currentPage + 1) && (i < pageAmount); i++ ) { - pageNumbers.push( - setCurrentPage(i)} active={i === active}>{i} - ); - } const memberList = currentMembers.map((member, index) => { currentPage === 1 ? : setCurrentPage(currentPage - 1)} />} setCurrentPage(1)} active={1 === active}>{1} - - { currentPage > 1 ? setCurrentPage(currentPage - 1)} active={currentPage - 1 === active}>{currentPage - 1} : "" } - {pageNumbers} - + + { currentPage > 1 ? setCurrentPage(currentPage - 1)}>{currentPage - 1} : "" } + setCurrentPage(currentPage)} active={currentPage === active}>{currentPage} + { currentPage < pageAmount ? setCurrentPage(currentPage + 1)}>{currentPage + 1} : "" } + setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount} { currentPage === pageAmount ? : setCurrentPage(currentPage + 1)} />} diff --git a/src/Components/Navigation.js b/src/Components/Navigation.js index f64b2b12..a637ced4 100644 --- a/src/Components/Navigation.js +++ b/src/Components/Navigation.js @@ -1,3 +1,4 @@ +import { useState, useCallback } from 'react'; import * as BS from 'react-bootstrap' import useDarkMode from 'use-dark-mode'; import Toggle from 'react-toggle' @@ -7,6 +8,9 @@ import "react-toggle/style.css" import history from "../History.js"; export default function Navigation() { + + const [, updateState] = useState(); + const forceUpdate = useCallback(() => updateState({}), []); const darkMode = useDarkMode(false); @@ -14,13 +18,21 @@ export default function Navigation() { localStorage.removeItem("token"); localStorage.removeItem("user"); history.push('/pk-webs'); + forceUpdate(); } return ( - - - pk-web + + + pk-webs + + { localStorage.getItem('token') ? logOut()}>Log out : "" } + history.push('/pk-webs/dash')} >Dash + history.push('/pk-webs/settings')} >Settings + history.push('/pk-webs/profile')}>Public profile + + {darkMode.value ? : } - - { localStorage.getItem('token') ? Log Out : "" } - ) } \ No newline at end of file diff --git a/src/Components/Profile.js b/src/Components/Profile.js new file mode 100644 index 00000000..941167d6 --- /dev/null +++ b/src/Components/Profile.js @@ -0,0 +1,15 @@ +import * as BS from 'react-bootstrap'; +import { FaStar } from "react-icons/fa"; + +export default function Profile () { + return ( + + + Profile + + + WIP. Public profiles coming soon here! + + + ) +} \ No newline at end of file diff --git a/src/Components/System.js b/src/Components/System.js index f4d2bbc5..619c2026 100644 --- a/src/Components/System.js +++ b/src/Components/System.js @@ -4,6 +4,7 @@ import { useForm } from "react-hook-form"; import autosize from 'autosize'; import moment from 'moment'; import 'moment-timezone'; +import Popup from 'reactjs-popup'; import API_URL from "../Constants/constants.js"; @@ -107,7 +108,13 @@ const submitPrivacy = data => { {user.name} - { user.avatar_url ? : + { user.avatar_url ? } className="avatar" modal> + {close => ( +
close()}> + +
+ )} + : } diff --git a/src/Custom.scss b/src/Custom.scss index d8d19474..e4a70161 100644 --- a/src/Custom.scss +++ b/src/Custom.scss @@ -1,3 +1,8 @@ +@font-face { + font-family: 'openDyslexic'; + src: url('https://dl.dropboxusercontent.com/s/qfpakpjedhsrdb9/OpenDyslexicAlta-Regular.ttf'); +} + html { position: relative; min-height: 100vh; @@ -7,6 +12,10 @@ body { padding-bottom: 60px; } +.opendyslexic { + font-family: "OpenDyslexic"; +} + .dark-mode { background-color: $gray-800; transition: background-color 0.3s ease; @@ -233,5 +242,17 @@ blockquote { border-color: #191c1f !important; } +.toggles { + position: absolute !important; + right: 50%; + margin-right: -100px; ; +} + +.d-emoji { + height: 25px; + width: auto; + image-rendering: crisp-edges; +} + @import "~bootstrap/scss/bootstrap";