Add settings

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 (
+    <div className={localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}>
       <Router history={history} basename="/pk-webs">
         <Navigation/>
           <BS.Container>
             <Switch>
-            <Route path="/pk-webs/dash" >
+            <Route exact path="/pk-webs/dash" >
               { !localStorage.getItem('token') || isInvalid ? <Redirect to="/pk-webs"/> : <Dash />
               }
               </Route>
@@ -97,9 +105,42 @@ export default function App() {
           </BS.Card>
           }
               </Route>
+              <Route exact path="/pk-webs/profile">
+                <Profile />
+              </Route>
+              <Route exact path="/pk-webs/settings">
+              <BS.Card>
+            <BS.Card.Header className="d-flex align-items-center justify-content-between">
+            <BS.Card.Title><FaCog className="mr-3" />Settings</BS.Card.Title>
+            </BS.Card.Header>
+            <BS.Card.Body>
+            <p>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.</p>
+            <hr/>
+            <BS.Row>
+            <BS.Col xs={12} lg={4} className="mx-lg-2 d-flex align-items-center row">
+            { localStorage.getItem('opendyslexic') ? 
+                <Toggle className="mr-2"
+                defaultChecked={true}
+                icons={false}
+                onChange={() =>  {
+                    localStorage.removeItem('opendyslexic');
+                    forceUpdate()}} /> :
+                <Toggle className="mr-2"
+                defaultChecked={false}
+                icons={false}
+                onChange={() => {
+                    localStorage.setItem('opendyslexic', 'true')
+                    forceUpdate()}} />  }
+                Use opendyslexic?
+            </BS.Col>
+            </BS.Row>
+            </BS.Card.Body>
+        </BS.Card>
+              </Route>
             </Switch>
           </BS.Container>
           <Footer />
       </Router>
+      </div>
   );
 }

src/Components/MemberCard.js

@@ -198,8 +198,14 @@ export default function MemberCard(props) {
        <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" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
-            { member.avatar_url ? <BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> : 
+            { 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>
-        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}     
+                {close => (
+                    <div className="text-center w-100 m-0" onClick={() => close()}>
+                    <BS.Image src={`${member.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
+                    </div>
+                )}
+            </Popup> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabindex="0" className="float-right" roundedCircle />}
         </BS.Card.Header>
         <BS.Accordion.Collapse eventKey={member.id}>
             <BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>

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(
-      <BS.Pagination.Item key={i}  onClick={() => setCurrentPage(i)} active={i === active}>{i}</BS.Pagination.Item>
-      );
-    }
       
       const memberList = currentMembers.map((member, index) => <BS.Card key={member.id}>
         <MemberCard
@@ -150,10 +144,11 @@ export default function Memberlist(props) {
           <BS.Pagination className="ml-auto mr-auto">
           { currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
           <BS.Pagination.Item  onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>
-          <BS.Pagination.Ellipsis />
+          <BS.Pagination.Ellipsis disabled />
-          { currentPage > 1 ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage - 1)} active={currentPage - 1 === active}>{currentPage - 1}</BS.Pagination.Item> : "" }
+          { currentPage > 1 ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : "" }
-          {pageNumbers}
+          <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>
-          <BS.Pagination.Ellipsis />
+          { currentPage < pageAmount ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : "" }
+          <BS.Pagination.Ellipsis disabled />
           <BS.Pagination.Item  onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>
           { currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
           </BS.Pagination>

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 (
-        <BS.Navbar className="mb-5 align-items-center justify-content-between">
+        <BS.Navbar className="mb-5 align-items-center">
-            <BS.Navbar.Brand>
+            <BS.Navbar.Brand href="/pk-webs">
-                pk-web
+                pk-webs
             </BS.Navbar.Brand>
+            <BS.NavDropdown id="menu" className="mr-auto" title="Menu">
+            { localStorage.getItem('token') ? <BS.NavDropdown.Item onClick={() => logOut()}>Log out</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>
+
+            </BS.NavDropdown>
             <BS.Nav className="mr-lg-2 d-flex align-items-center row">
             <Toggle
                 defaultChecked={true}
@@ -28,9 +40,6 @@ export default function Navigation() {
                 onChange={darkMode.toggle} />
                 {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
             </BS.Nav>
-            <BS.Form inline>
-            { localStorage.getItem('token') ? <BS.Button className=" mr-lg-2" variant="primary" onClick={logOut}>Log Out</BS.Button> : "" }
-            </BS.Form>
         </BS.Navbar>
     )
 }

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 (
+        <BS.Card>
+            <BS.Card.Header>
+            <BS.Card.Title><FaStar className="mr-3" />Profile</BS.Card.Title>
+            </BS.Card.Header>
+            <BS.Card.Body>
+                WIP. Public profiles coming soon here!
+            </BS.Card.Body>
+        </BS.Card>
+    )
+}

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 => {
            <BS.Card className="mb-3 mt-3 w-100" >
                <BS.Card.Header className="d-flex align-items-center justify-content-between">
                   <BS.Card.Title className="float-left"><FaAddressCard className="mr-3" /> {user.name}</BS.Card.Title> 
-                  { user.avatar_url ? <BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> : 
+                  { user.avatar_url ? <Popup trigger={<BS.Image src={`${user.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={`${user.avatar_url}`} style={{width: 500, height: 'auto'}} thumbnail />
+                    </div>
+                )}
+            </Popup> : 
                <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
                </BS.Card.Header>
                <BS.Card.Body>

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";