Added reactions on news items

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