Added db selector, modal

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>