Added reactions on news items

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     'no-prototype-builtins': 'off',
     'id-length': [
       'warn',
-      { exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b'] },
+      { exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b', 'e'] },
     ],
   },
   root: true,

src/components/newsEntry.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ReactButton from './reactButton.js'
+
+import styles from './newsEntry.module.css'
+
+export default function NewsEntry({ newsKey, newsItem, uid, onReact }) {
+  return (
+    <div>
+      <div className={styles.newsContainer}>
+        <div className={styles.itemNumber}>{newsKey} :</div>
+        <div
+          className={styles.newsTitle}
+          dangerouslySetInnerHTML={{ __html: newsItem.title }}
+        />
+        <div
+          className={styles.newsBody}
+          dangerouslySetInnerHTML={{ __html: newsItem.body }}
+        />
+      </div>
+      <ReactButton
+        existingReacts={newsItem.reacts}
+        uid={uid}
+        onClick={onReact}
+      />
+      <hr />
+    </div>
+  )
+}

src/components/newsEntry.module.css

@@ -0,0 +1,26 @@
+.newsBody {
+  margin: 0px 5px;
+  font-size: 18px;
+  color: #fff;
+}
+
+.newsTitle {
+  font-size: 28px;
+  color: var(--text-color);
+  margin: 0px 5px;
+}
+
+.itemNumber {
+  color: #fff;
+  margin: 0px 5px;
+  font-size: 24px;
+}
+
+.newsContainer {
+  margin: 20px 5px;
+}
+
+.newsContainer img {
+  max-width: 100%;
+  min-width: 200px;
+}

src/components/reactButton.js

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+
+import Tooltip from './tooltip.js'
+
+import styles from './reactButton.module.css'
+import reactions from '../data/reactions.json'
+
+const breakEvery = 7
+
+function ExistingReacts({ existingReacts, onClick, uid }) {
+  return (
+    <div className={styles.reactionContainer}>
+      <div>React</div>
+      {existingReacts &&
+        Object.keys(existingReacts).map((key) => {
+          const currReact = existingReacts[key]
+          const react = reactions[key]
+          if (!react) {
+            return null
+          }
+          return (
+            <div
+              className={`${currReact.includes(uid) && styles.reacted}`}
+              key={key}
+              onClick={() => {
+                onClick(key, currReact.includes(uid))
+              }}
+            >
+              {react.emoji} {currReact.length}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function RenderEmojis({ onClick }) {
+  const [search, setSearch] = useState('')
+
+  let index = 0
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Keresés..."
+        onChange={(event) => {
+          setSearch(event.target.value)
+        }}
+      />
+      {Object.keys(reactions).map((key) => {
+        const reaction = reactions[key]
+        if (!key.includes(search.toLowerCase())) {
+          return null
+        }
+        return (
+          <>
+            {index++ % breakEvery === 0 && (
+              <div key={`${key}_break`} className={styles.break} />
+            )}
+            <div
+              title={key}
+              key={key}
+              onClick={() => {
+                onClick(key)
+              }}
+            >
+              {reaction.emoji}
+            </div>
+          </>
+        )
+      })}
+    </>
+  )
+}
+
+export default function ReactButton({ onClick, existingReacts, uid }) {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setOpened(true)
+      }}
+      onMouseLeave={() => {
+        setOpened(false)
+      }}
+    >
+      <Tooltip
+        opened={opened}
+        text={() => (
+          <ExistingReacts
+            uid={uid}
+            onClick={onClick}
+            existingReacts={existingReacts}
+          />
+        )}
+      >
+        <div className={styles.reactionContainer}>
+          <RenderEmojis
+            onClick={(e) => {
+              // setOpened(false)
+              onClick(e)
+            }}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}

src/components/reactButton.module.css

@@ -0,0 +1,37 @@
+.reactionContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.reactionContainer > input {
+  width: 100%;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: none;
+  border-radius: 3px;
+  margin: 2px 5px;
+  font-size: 16px;
+}
+
+.reactionContainer > div {
+  margin: 2px 2px;
+  padding: 0px 8px;
+  background-color: #444;
+  border-radius: 6px;
+  cursor: pointer;
+
+  font-size: 18px;
+}
+
+.reactionContainer > div:hover {
+  background-color: #666;
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.reacted {
+  color: yellow;
+}

src/components/tooltip.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './tooltip.module.css'
+
+export default function Tooltip({ children, text, opened }) {
+  return (
+    <div>
+      <div className={styles.tooltip}>
+        {text()}
+        {opened && <span className={styles.tooltiptext}>{children}</span>}
+      </div>
+    </div>
+  )
+}

src/components/tooltip.module.css

@@ -0,0 +1,28 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  width: 280px;
+  height: 250px;
+  max-width: 280px;
+  max-height: 250px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 0%;
+  margin-left: -60px;
+  transition: opacity 0.3s;
+
+  overflow-y: scroll;
+}
+
+.container {
+}

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;