Added reactions on news items

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 {
+}