Added reactions on news items

src/pages/index.js

@@ -5,6 +5,7 @@ import Link from 'next/link'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'
+import NewsEntry from '../components/newsEntry'
 import DbSelector from '../components/dbSelector.js'
 
 import styles from './index.module.css'
@@ -21,77 +22,67 @@ const links = {
   },
 }
 
-export default function Index(props) {
-  const [news, setNews] = useState(null)
-  const [allQrSelector, setAllQrSelector] = useState(null)
-  const motd = props.globalData.motd
-  // const userSpecificMotd = props.globalData.userSpecificMotd
-
-  useEffect(() => {
-    console.info('Fetching news.json')
+function fetchNews() {
+  return new Promise((resolve) => {
     fetch(`${constants.apiUrl}news.json`, {
       credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
       })
-      .then((data) => {
-        setNews(data)
+      .then((res) => {
+        resolve(res)
       })
+  })
+}
+
+export default function Index({ globalData }) {
+  const userId = globalData.userId
+  const motd = globalData.motd
+  const [news, setNews] = useState(null)
+  const [allQrSelector, setAllQrSelector] = useState(null)
+  // const userSpecificMotd = props.globalData.userSpecificMotd
+
+  useEffect(() => {
+    console.info('Fetching news.json')
+    fetchNews().then((res) => {
+      setNews(res)
+    })
   }, [])
 
-  const renderQAItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.question}
-          dangerouslySetInnerHTML={{ __html: newsItem.q }}
-        />
-        <div
-          className={styles.answer}
-          dangerouslySetInnerHTML={{ __html: newsItem.a }}
-        />
-      </div>
-    )
-  }
-
-  const renderNewsItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: newsItem.title }}
-        />
-        <div
-          className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: newsItem.body }}
-        />
-      </div>
-    )
-  }
-
   const renderNews = () => {
     if (news) {
-      let questions = Object.keys(news)
+      let newsItems = Object.keys(news)
         .map((key) => {
-          let newsItem = news[key]
-          if (newsItem.q) {
-            return (
-              <div key={key}>
-                {renderQAItem(newsItem, key)}
-                <hr />
-              </div>
-            )
-          } else {
-            return (
-              <div key={key}>
-                {renderNewsItem(newsItem, key)}
-                <hr />
-              </div>
-            )
-          }
+          let newsEntryData = news[key]
+          return (
+            <NewsEntry
+              onReact={(reaction, isDelete) => {
+                console.log(reaction, isDelete)
+                fetch(constants.apiUrl + 'infos', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    react: reaction,
+                    newsKey: key,
+                    isDelete: isDelete,
+                  }),
+                }).then((res) => {
+                  fetchNews().then((res) => {
+                    setNews(res)
+                  })
+                })
+              }}
+              uid={userId}
+              key={key}
+              newsKey={key}
+              newsItem={newsEntryData}
+            />
+          )
         })
         .reverse()
 
@@ -100,7 +91,7 @@ export default function Index(props) {
           <div className={styles.title}>News</div>
           <hr />
           <hr />
-          <div className={styles.questionscontainer}>{questions}</div>
+          <div>{newsItems}</div>
         </div>
       )
     } else {

src/pages/index.module.css

@@ -30,20 +30,6 @@
   margin: 5px;
 }
 
-.itemContainer {
-  margin: 20px 5px;
-}
-
-.itemContainer:hover {
-  background-color: var(--hoover-color);
-}
-
-.newsBody {
-  margin: 0px 5px;
-  font-size: 18px;
-  color: #fff;
-}
-
 .title {
   color: #9999ff;
   font-size: 30px;
@@ -56,12 +42,6 @@
   text-align: center;
 }
 
-.newsTitle {
-  font-size: 28px;
-  color: var(--text-color);
-  margin: 0px 5px;
-}
-
 .question {
   font-weight: 'bold';
   font-size: 16px;
@@ -73,12 +53,6 @@
   margin: 0px 5px;
 }
 
-.itemNumber {
-  color: #fff;
-  margin: 0px 5px;
-  font-size: 24px;
-}
-
 .repos {
   display: flex;
   flex-direction: column;