Globally storing some data, other minor fixes

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() {
-  const [motd, setMotd] = useState('loading...')
-  const [userSpecificMotd, setUserSpecificMotd] = useState('loading...')
+export default function Index(props) {
   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(() => {
-    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) => {
+  const renderQAItem = (newsItem, 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) => {
-          let n = news[key]
-          if (n.q) {
+        .map((key) => {
+          let newsItem = news[key]
+          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
-          className={styles.motd}
-          dangerouslySetInnerHTML={{ __html: motd }}
-        />
+        {motd ? (
+          <div
+            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
-          className={styles.motd}
-          dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
-        />
+        {userSpecificMotd ? (
+          <div
+            className={styles.motd}
+            dangerouslySetInnerHTML={{ __html: userSpecificMotd }}
+          />
+        ) : (
+          <div>...</div>
+        )}
       </div>
     )
   }