add templates

src/App.js

@@ -12,6 +12,7 @@ import Footer from './Components/Footer.js'
 import Public from './Pages/Public.js'
 import Home from './Pages/Home.js'
 import Settings from './Pages/Settings.js'
+import Template from './Pages/Template.js'
 import Navbar from './Components/Navbar.js'
 
 export default function App() {
@@ -42,6 +43,9 @@ export default function App() {
               <Route path="/pk-webs/settings">
                 <Settings forceUpdate={forceUpdate}/>
               </Route>
+              <Route path="/pk-webs/template">
+                <Template/>
+              </Route>
             </Switch>
           </BS.Container>
           </div>

src/Components/Navbar.js

@@ -27,6 +27,7 @@ const Navbar = ({ setIsSubmit, forceUpdate}) => {
             {/* for some reason just using react router's link elements doesn't work here, maybe look into that */}
             <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/template')}>Templates</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></> : "" }
 

src/Components/Private/MemberCard.js

@@ -47,7 +47,8 @@ export default function MemberCard(props) {
 
     const {
         register: registerEdit,
-        handleSubmit: handleSubmitEdit
+        handleSubmit: handleSubmitEdit,
+        setValue
       } = useForm();
 
     const {
@@ -259,7 +260,8 @@ export default function MemberCard(props) {
                 </BS.Col>
             </BS.Form.Row>
             <BS.Form.Group className="mt-3">
-                <BS.Form.Label>Description:</BS.Form.Label>
+                <BS.Form.Label>Description:</BS.Form.Label><br/>
+                { localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setValue('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
                 <BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} 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>

src/Components/Private/Memberlist.js

@@ -43,7 +43,7 @@ export default function Memberlist() {
       prefix: "", suffix: ""
     }]);
 
-    const {register, handleSubmit} = useForm();
+    const {register, handleSubmit, setValue: setTemplate} = useForm();
 
   const fetchMembers = useCallback( () => {
     setIsLoading(true);
@@ -401,7 +401,8 @@ export default function Memberlist() {
                 </BS.Form.Row>               
                 <hr/></> : "" }
                 <BS.Form.Group className="mt-3">
-                        <BS.Form.Label>Description:</BS.Form.Label>
+                        <BS.Form.Label>Description:</BS.Form.Label><br/>
+                        { localStorage.getItem('template1') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template1'))}>Template 1</BS.Button> : ""} { localStorage.getItem('template2') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template2'))}>Template 2</BS.Button> : ""} { localStorage.getItem('template3') ? <BS.Button className="mb-2" size="sm" variant="primary" onClick={() => setTemplate('description', localStorage.getItem('template3'))}>Template 3</BS.Button> : ""}
                         <BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" {...register("description")}  defaultValue={''}/>
                     </BS.Form.Group>
                     <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>

src/Pages/Template.js

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import * as BS from 'react-bootstrap';
+import { FaFileAlt } from 'react-icons/fa';
+import { useForm } from 'react-hook-form';
+import autosize from 'autosize';
+
+const Template = () => {
+    const [isSubmit, setIsSubmit] = useState(false);
+
+    const { register, handleSubmit } = useForm();
+    
+    var template1 = "";
+    var template2 = "";
+    var template3 = "";
+    if (localStorage.getItem('template1') !== null) template1 = localStorage.getItem('template1');
+    if (localStorage.getItem('template2') !== null) template2 = localStorage.getItem('template2');
+    if (localStorage.getItem('template3') !== null) template3 = localStorage.getItem('template3');
+
+    const onSubmit = data => {
+        localStorage.setItem('template1', data.template1);
+        localStorage.setItem('template2', data.template2);
+        localStorage.setItem('template3', data.template3);
+        setIsSubmit(true);
+    };
+
+    useEffect(() => {
+        autosize(document.querySelectorAll('textarea'));
+    });
+
+    return (
+        <>
+        <BS.Card className="mb-3">
+            <BS.Card.Header>
+                <BS.Card.Title>
+                <FaFileAlt className="mr-3" />
+                Templates
+                </BS.Card.Title>
+            </BS.Card.Header>
+            <BS.Card.Body>
+                <p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
+                <p><b>Note:</b> just like the settings, these templates are saved in your localstorage, which means you will have to set them again on every different device/browser you use. If you clear your local storage, the templates will also be cleared!</p>
+            </BS.Card.Body>
+        </BS.Card>
+        
+        <BS.Card>
+            <BS.Card.Body>
+                <BS.Form onSubmit={handleSubmit(onSubmit)}>
+                    <BS.Form.Group className="mt-3">
+                        <BS.Form.Label><b>Template 1.</b></BS.Form.Label>
+                        <BS.Form.Control maxLength="1000" as="textarea" name="template1" {...register("template1")} defaultValue={template1}/>
+                    </BS.Form.Group>
+                    <BS.Form.Group className="mt-3">
+                        <BS.Form.Label><b>Template 2.</b></BS.Form.Label>
+                        <BS.Form.Control maxLength="1000" as="textarea" name="template2" {...register("template2")} defaultValue={template2}/>
+                    </BS.Form.Group>
+                    <BS.Form.Group className="mt-3">
+                        <BS.Form.Label><b>Template 3.</b></BS.Form.Label>
+                        <BS.Form.Control maxLength="1000" as="textarea" name="template3" {...register("template3")} defaultValue={template3}/>
+                    </BS.Form.Group>
+                    <BS.Button variant="primary" className="float-left mr-2" type="submit">Submit</BS.Button> { isSubmit? <p style={{opacity: 0.7}}>Templates saved!</p> : ""}
+                </BS.Form>
+            </BS.Card.Body>
+        </BS.Card>
+    </>
+    );
+}
+
+export default Template;