Added db selector, modal

src/components/dbSelector.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react'
+
+import Modal from './modal.js'
+import constants from '../constants.json'
+
+import styles from './dbSelector.module.css'
+
+export default function DbSelector({ onDbSelect, closeClick, text, showAll }) {
+  const [qdbs, setQdbs] = useState(null)
+
+  useEffect(() => {
+    console.info('Fetching dbs')
+    fetch(`${constants.apiUrl}getdbs`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setQdbs(data)
+      })
+  }, [])
+
+  return React.createElement(
+    Modal,
+    closeClick
+      ? {
+          closeClick: () => {
+            closeClick()
+          },
+        }
+      : {},
+    <>
+      {text && <div className={styles.text}>{text}</div>}
+      <div className={styles.container}>
+        {qdbs ? (
+          <>
+            {' '}
+            {qdbs.map((qdb) => {
+              return (
+                <div
+                  className={styles.listItem}
+                  onClick={() => {
+                    onDbSelect(qdb)
+                    closeClick()
+                  }}
+                  key={qdb.name}
+                >
+                  {qdb.name}
+                </div>
+              )
+            })}
+            {showAll && (
+              <div
+                className={styles.listItem}
+                onClick={() => {
+                  onDbSelect('all')
+                  closeClick()
+                }}
+              >
+                {'Összes'}
+              </div>
+            )}
+          </>
+        ) : (
+          '...'
+        )}
+      </div>
+    </>
+  )
+}

src/components/dbSelector.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  flex-flow: column;
+
+  padding: 5px;
+}
+
+.listItem {
+  display: flex;
+  justify-content: center;
+
+  padding: 5px;
+  cursor: pointer;
+  color: white;
+}
+
+.listItem:hover {
+  background-color: #666;
+}
+
+.text {
+  text-align: center;
+}

src/components/layout.js

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 
 const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })
 
+import Modal from './modal.js'
 import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 import BB from './b.js'
@@ -18,11 +19,11 @@ export default function Layout(props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [windowSize, setWindowSize] = useState([100, 200])
+  const [showMotdModal, setShowMotdModal] = useState(false)
+
   const userId = props.globalData.userId
   const userSpecificMotd = props.globalData.userSpecificMotd
 
-  console.log(userSpecificMotd)
-
   if (href === '/' || href === '') {
     href = 'index'
   }
@@ -101,8 +102,7 @@ export default function Layout(props) {
               {userSpecificMotd ? (
                 <div
                   onClick={() => {
-                    // TODO: modal
-                    alert(userSpecificMotd)
+                    setShowMotdModal(true)
                   }}
                   style={{ cursor: 'pointer' }}
                   title={"You've got Mail!"}
@@ -112,8 +112,20 @@ export default function Layout(props) {
               ) : (
                 <div>📭</div>
               )}
-              <div>User #{userId || '...'}</div>
+              <div>User ID: {userId || '...'}</div>
             </div>
+            {showMotdModal ? (
+              <Modal
+                backgroundClick={() => {
+                  setShowMotdModal(false)
+                }}
+              >
+                <div style={{ textAlign: 'center' }}>
+                  Üzenet az oldal készítőjétől:
+                </div>
+                <div>{userSpecificMotd}</div>
+              </Modal>
+            ) : null}
           </>
         ) : null}
       </div>

src/components/modal.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react'
+
+import styles from './modal.module.css'
+
+export default function Modal(props) {
+  const { closeClick } = props
+
+  const keyHandler = (event) => {
+    if (event.key === 'Escape' && closeClick) {
+      closeClick()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('keydown', keyHandler)
+    return () => {
+      document.removeEventListener('keydown', keyHandler)
+    }
+  }, [])
+
+  return (
+    <div
+      style={{
+        cursor: closeClick ? 'pointer' : 'auto',
+      }}
+      onClick={() => {
+        if (closeClick) {
+          closeClick()
+        }
+      }}
+      className={styles.modal}
+    >
+      <div
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+        className={styles.modalContent}
+      >
+        {props.children}
+      </div>
+    </div>
+  )
+}

src/components/modal.module.css

@@ -0,0 +1,22 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modalContent {
+  position: fixed;
+  background: var(--background-color);
+  width: 70%;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+
+  padding: 20px;
+  cursor: auto;
+}