Changed/added donate page

src/components/layout.js

@@ -6,7 +6,7 @@ import constants from '../constants.json'
 
 // FIXME: window resize event listener to show sidebar on resize
 
-export default function Layout (props) {
+export default function Layout(props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
 
@@ -28,40 +28,40 @@ export default function Layout (props) {
 
   return (
     <div>
-      <div className='sidebar'>
-        <div className='headercontainer'>
-          <span onClick={() => { setSidebarOpen(!sidebarOpen) }} className='menuicon'>
+      <div className="sidebar">
+        <div className="headercontainer">
+          <span
+            onClick={() => {
+              setSidebarOpen(!sidebarOpen)
+            }}
+            className="menuicon"
+          >
             <div />
             <div />
             <div />
           </span>
-          <div className='sidebarheader' >
-            Frylabs
-          </div>
+          <div className="sidebarheader">Frylabs</div>
         </div>
-        {sidebarOpen
-          ? <div id='sideBarLinks'>
+        {sidebarOpen ? (
+          <div id="sideBarLinks">
             {Object.keys(tabs).map((key) => {
               const item = tabs[key]
               return (
-                <Link href={item.href} key={key} >
+                <Link href={item.href} key={key}>
                   <a
                     onClick={closeSideBar}
                     className={href.includes(key) ? 'active' : undefined}
                     id={item.id || undefined}
-                  >{item.text}</a>
+                  >
+                    {item.text}
+                  </a>
                 </Link>
               )
             })}
-            <a href='/donate'>
-              Donate
-            </a>
           </div>
-          : null}
-      </div>
-      <div className='content'>
-        {props.children}
+        ) : null}
       </div>
+      <div className="content">{props.children}</div>
     </div>
   )
 }

src/data/tabs.json

@@ -35,5 +35,9 @@
     "href": "/feedback",
     "text": "Feedback",
     "id": "feedback"
+  },
+  "donate": {
+    "href": "/donate",
+    "text": "Donate"
   }
 }

src/pages/donate.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+
+import LoadingIndicator from '../components/LoadingIndicator.js'
+
+import constants from '../constants.json'
+import styles from './donate.module.css'
+
+export default function Donate(props) {
+  const [btcAddress, setBtcAddress] = useState()
+
+  useEffect(() => {
+    console.info('Fetching news.json')
+    fetch(`${constants.apiUrl}btc/btcaddress`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.text()
+      })
+      .then((data) => {
+        setBtcAddress(data)
+      })
+  }, [])
+
+  if (!btcAddress) {
+    return <LoadingIndicator />
+  } else {
+    return (
+      <div className={styles.container}>
+        <div className={styles.text}>
+          Privacy okokból csak bitcoint lehet adományozni. Ezen az oldalon
+          található a bitcoin cím, és a hozzá tartozó QR kód.
+        </div>
+        <div className={styles.address}>{btcAddress}</div>
+        <div>
+          <img
+            src={`${constants.apiUrl}btc/btcaddress.png`}
+            className={styles.qr}
+          />
+        </div>
+      </div>
+    )
+  }
+}

src/pages/donate.module.css

@@ -0,0 +1,24 @@
+.address {
+  margin: 20px 0px;
+  font-size: 20px;
+  color: white;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
+.text {
+  margin: 5px 0px;
+  text-align: center;
+}
+
+.qr {
+  max-width: 100%;
+  width: 400px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}