Globally storing some data, other minor fixes

src/components/layout.js

@@ -17,8 +17,11 @@ const renderSnow = () => {
 export default function Layout(props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
-  const [userId, setUserId] = useState(null)
   const [windowSize, setWindowSize] = useState([100, 200])
+  const userId = props.globalData.userId
+  const userSpecificMotd = props.globalData.userSpecificMotd
+
+  console.log(userSpecificMotd)
 
   if (href === '/' || href === '') {
     href = 'index'
@@ -32,20 +35,6 @@ export default function Layout(props) {
     }
   }
 
-  useEffect(() => {
-    fetch(`${constants.apiUrl}infos`, {
-      credentials: 'include',
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setUserId(data.uid)
-      })
-  }, [])
-
   useEffect(() => {
     closeSideBar()
     setWindowSize([window.innerWidth, window.innerHeight])
@@ -108,7 +97,23 @@ export default function Layout(props) {
                 </a>
               </Link>
             </div>
-            <div className="userInfo">User #{userId}</div>
+            <div className="userStatus">
+              {userSpecificMotd ? (
+                <div
+                  onClick={() => {
+                    // TODO: modal
+                    alert(userSpecificMotd)
+                  }}
+                  style={{ cursor: 'pointer' }}
+                  title={"You've got Mail!"}
+                >
+                  📬
+                </div>
+              ) : (
+                <div>📭</div>
+              )}
+              <div>User #{userId || '...'}</div>
+            </div>
           </>
         ) : null}
       </div>

src/defaultStyles.css

@@ -55,11 +55,21 @@ a {
   color: white;
 }
 
-.userInfo {
+.userStatus {
+  display: flex;
+  align-items: center;
   margin-bottom: 15px;
   margin-top: auto;
 }
 
+.userStatus :first-child {
+  font-size: 25px;
+}
+
+.userStatus > div {
+  margin: 3px 5px;
+}
+
 .content {
   margin-left: 200px;
   padding: 1px 16px;

src/pages/_app.js

@@ -1,13 +1,42 @@
 // import App from 'next/app'
 
-import React from 'react'
+import React, { useState, useEffect } from 'react'
-import '../defaultStyles.css'
+
 import Layout from '../components/layout'
 
+import '../defaultStyles.css'
+import constants from '../constants.json'
+
 function MyApp({ Component, pageProps, router }) {
+  const [userId, setUserId] = useState()
+  const [motd, setMotd] = useState()
+  const [userSpecificMotd, setUserSpecificMotd] = useState()
+
+  useEffect(() => {
+    fetch(`${constants.apiUrl}infos?motd=true`, {
+      credentials: 'include',
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        setUserId(data.uid)
+        setMotd(data.motd)
+        setUserSpecificMotd(data.userSpecificMotd)
+      })
+  }, [])
+
+  const globalData = {
+    userId,
+    motd,
+    userSpecificMotd,
+  }
+
   return (
-    <Layout route={router.route}>
+    <Layout route={router.route} globalData={globalData}>
-      <Component {...pageProps} router={router} />
+      <Component {...pageProps} router={router} globalData={globalData} />
     </Layout>
   )
 }

src/pages/allQuestions.js

@@ -22,7 +22,7 @@ function mergeData(data) {
       ...db.data.map((subj) => {
         return {
           ...subj,
-          Name: `${subj.Name} (${db.dbName})`,
+          Name: `${subj.Name} [ DB: ${db.dbName} ]`,
         }
       }),
     ]

src/pages/contribute.js

@@ -94,6 +94,13 @@ export default function contribute() {
             )
           })}
         </ul>
+        <hr />
+        <div style={{ textAlign: 'center' }}>
+          <img
+            style={{ maxWidth: '100%', width: '400px' }}
+            src={`${constants.siteUrl}img/bug.png`}
+          />
+        </div>
       </div>
     </div>
   )

src/pages/index.js

@@ -10,10 +10,10 @@ import styles from './index.module.css'
 import links from '../data/links.json'
 import constants from '../constants.json'
 
-export default function Index() {
+export default function Index(props) {
-  const [motd, setMotd] = useState('loading...')
-  const [userSpecificMotd, setUserSpecificMotd] = useState('loading...')
   const [news, setNews] = useState(null)
+  const motd = props.globalData.motd
+  const userSpecificMotd = props.globalData.userSpecificMotd
 
   useEffect(() => {
     console.info('Fetching news.json')
@@ -28,49 +28,33 @@ export default function Index() {
       })
   }, [])
 
-  useEffect(() => {
+  const renderQAItem = (newsItem, key) => {
-    console.info('Fetching data')
-    fetch(`${constants.apiUrl}infos?motd=true`, {
-      credentials: 'include',
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setMotd(data.motd)
-        setUserSpecificMotd(data.userSpecificMotd)
-      })
-  }, [])
-
-  const renderQAItem = (n, key) => {
     return (
       <div key={key} className={styles.itemContainer}>
         <div className={styles.itemNumber}>{key} :</div>
         <div
           className={styles.question}
-          dangerouslySetInnerHTML={{ __html: n.q }}
+          dangerouslySetInnerHTML={{ __html: newsItem.q }}
         />
         <div
           className={styles.answer}
-          dangerouslySetInnerHTML={{ __html: n.a }}
+          dangerouslySetInnerHTML={{ __html: newsItem.a }}
         />
       </div>
     )
   }
 
-  const renderNewsItem = (n, key) => {
+  const renderNewsItem = (newsItem, key) => {
     return (
       <div key={key} className={styles.itemContainer}>
         <div className={styles.itemNumber}>{key} :</div>
         <div
           className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: n.title }}
+          dangerouslySetInnerHTML={{ __html: newsItem.title }}
         />
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: n.body }}
+          dangerouslySetInnerHTML={{ __html: newsItem.body }}
         />
       </div>
     )
@@ -79,19 +63,19 @@ export default function Index() {
   const renderNews = () => {
     if (news) {
       let questions = Object.keys(news)
-        .map((key, i) => {
+        .map((key) => {
-          let n = news[key]
+          let newsItem = news[key]
-          if (n.q) {
+          if (newsItem.q) {
             return (
               <div key={key}>
-                {renderQAItem(n, key)}
+                {renderQAItem(newsItem, key)}
                 <hr />
               </div>
             )
           } else {
             return (
               <div key={key}>
-                {renderNewsItem(n, key)}
+                {renderNewsItem(newsItem, key)}
                 <hr />
               </div>
             )
@@ -118,10 +102,14 @@ export default function Index() {
         <div className={styles.title}>MOTD</div>
         <hr />
         <hr />
-        <div
+        {motd ? (
-          className={styles.motd}
+          <div
-          dangerouslySetInnerHTML={{ __html: motd }}
+            className={styles.motd}
-        />
+            dangerouslySetInnerHTML={{ __html: motd }}
+          />
+        ) : (
+          <div>...</div>
+        )}
       </div>
     )
   }
@@ -129,13 +117,18 @@ export default function Index() {
   const renderUserSpecificMotd = () => {
     return (
       <div>
-        <div className={styles.motdHeader}>
+        <hr />
+        <div className={styles.subtitle}>
           Felhasználó MOTD (ezt csak te látod):
         </div>
-        <div
+        {userSpecificMotd ? (
-          className={styles.motd}
+          <div
-          dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
+            className={styles.motd}
-        />
+            dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
+          />
+        ) : (
+          <div>...</div>
+        )}
       </div>
     )
   }

src/pages/index.module.css

@@ -49,6 +49,12 @@
   text-align: center;
 }
 
+.subtitle {
+  color: #9999ff;
+  font-size: 20px;
+  text-align: center;
+}
+
 .newsTitle {
   font-size: 28px;
   color: var(--text-color);