diff --git a/.eslintrc.js b/.eslintrc.js
index 6d44a27..f572f7a 100644
--- a/.eslintrc.js
+++ b/.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,
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
new file mode 100644
index 0000000..58228d2
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css
new file mode 100644
index 0000000..7ac797b
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/reactButton.js b/src/components/reactButton.js
new file mode 100644
index 0000000..1937463
--- /dev/null
+++ b/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 (
+
+
React
+ {existingReacts &&
+ Object.keys(existingReacts).map((key) => {
+ const currReact = existingReacts[key]
+ const react = reactions[key]
+ if (!react) {
+ return null
+ }
+ return (
+
{
+ onClick(key, currReact.includes(uid))
+ }}
+ >
+ {react.emoji} {currReact.length}
+
+ )
+ })}
+
{
+ onClick(key)
+ }}
+ >
+ {reaction.emoji}
+
+
+ )
+ })}
+
+ )
+}
+
+export default function ReactButton({ onClick, existingReacts, uid }) {
+ const [opened, setOpened] = useState(false)
+
+ return (
+ {
+ setOpened(true)
+ }}
+ onMouseLeave={() => {
+ setOpened(false)
+ }}
+ >
+
(
+
+ )}
+ >
+
+ {
+ // setOpened(false)
+ onClick(e)
+ }}
+ />
+
+
+
+
+ {text()}
+ {opened && {children}}
+
+
- {renderQAItem(newsItem, key)}
-
-
- )
- } else {
- return (
-
- {renderNewsItem(newsItem, key)}
-
-
- )
- }
+ let newsEntryData = news[key]
+ return (
+ {
+ 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) {
News
- {questions}
+ {newsItems}
)
} else {
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index e29b3ae..bab4ce3 100644
--- a/src/pages/index.module.css
+++ b/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;