diff --git a/src/components/comments.js b/src/components/comments.js
index 0524073..5323f09 100644
--- a/src/components/comments.js
+++ b/src/components/comments.js
@@ -1,30 +1,36 @@
import React, { useState } from 'react'
import ReactButton from './reactButton.js'
+import Modal from './modal.js'
import styles from './comments.module.css'
-function CommentInput({ onSubmit }) {
+function CommentInput({ onSubmit, onCancel }) {
const [val, setVal] = useState('')
return (
-
{text}
-
-
{content}
+
+ {
setCommenting(true)
}}
>
Reply...
-
+
{own && (
-
{
onDelete([index])
}}
>
Delete
-
+
)}
{
@@ -90,6 +94,9 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
{commenting && (
{
+ setCommenting(false)
+ }}
onSubmit={(e) => {
onComment([index], e)
setCommenting(false)
@@ -110,8 +117,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
onDelete={(path) => {
onDelete([...path, index])
}}
- onComment={(path, text) => {
- onComment([...path, index], text)
+ onComment={(path, content) => {
+ onComment([...path, index], content)
}}
index={i}
key={i}
@@ -124,6 +131,17 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
)
}
+function countComments(comments) {
+ return comments.reduce((acc, comment) => {
+ if (comment.subComments) {
+ acc += countComments(comment.subComments) + 1
+ } else {
+ acc += 1
+ }
+ return acc
+ }, 0)
+}
+
export default function Comments({
comments,
onComment,
@@ -132,44 +150,78 @@ export default function Comments({
uid,
}) {
const [addingNewComment, setAddingNewComment] = useState(false)
+ const [commentsShowing, setCommentsShowing] = useState(false)
+ const commentCount = comments ? countComments(comments) : 0
+
return (
- {comments && comments.length > 0 ? (
- comments.map((comment, i) => {
- return (
-
- )
- })
- ) : (
-
- )}
- {addingNewComment ? (
-
{
- setAddingNewComment(false)
- onComment([], e)
+ {commentsShowing ? (
+ {
+ setCommentsShowing(false)
}}
- />
- ) : (
- {
- setAddingNewComment(true)
- }}
- className={styles.button}
>
- Add new
+ {comments && comments.length > 0
+ ? comments.map((comment, i) => {
+ return (
+
+ )
+ })
+ : null}
+ {commentCount !== 0 ? (
+
+ {
+ setAddingNewComment(true)
+ }}
+ >
+ New comment
+
+
+ ) : null}
+ {addingNewComment ? (
+ {
+ if (!e) {
+ alert('Írj be valamit, hogy kommentelhess...')
+ return
+ }
+ setAddingNewComment(false)
+ onComment([], e)
+ }}
+ onCancel={() => {
+ setAddingNewComment(false)
+ if (commentCount === 0) {
+ setCommentsShowing(false)
+ }
+ }}
+ />
+ ) : null}
+
+ ) : null}
+ {
+ setCommentsShowing(true)
+ if (commentCount === 0) {
+ setAddingNewComment(true)
+ }
+ }}
+ >
+
+ {commentCount === 0
+ ? 'New comment'
+ : `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
- )}
+
)
}
diff --git a/src/components/comments.module.css b/src/components/comments.module.css
index 43bad99..91e3a12 100644
--- a/src/components/comments.module.css
+++ b/src/components/comments.module.css
@@ -6,10 +6,13 @@
.commentData {
padding: 5px 2px;
border-left: 2px solid var(--text-color);
- background-color: #222;
border-radius: 3px;
}
+.commentData:hover {
+ background-color: var(--hoover-color);
+}
+
.commentHeader {
display: flex;
justify-content: space-between;
@@ -46,32 +49,6 @@
display: none;
}
-.actionsContainer {
- display: flex;
- align-items: center;
-}
-
-.button {
- margin: 2px 2px;
- padding: 0px 10px;
- border: 1px solid #444;
- border-radius: 6px;
- cursor: pointer;
-}
-
-.button:hover {
- background-color: #444;
-}
-
-.commentArea {
- color: var(--text-color);
- background-color: var(--background-color);
- font-size: 16px;
- box-sizing: border-box;
- height: 120px;
- width: 100%;
-}
-
.commentAreaContainer {
margin: 0px 8px 3px 8px;
}
diff --git a/src/components/composer.js b/src/components/composer.js
new file mode 100644
index 0000000..e9fc533
--- /dev/null
+++ b/src/components/composer.js
@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+
+import Modal from './modal'
+
+import styles from './composer.module.css'
+
+function FileUploader({ onChange }) {
+ return (
+
+ )
+}
+
+export default function Composer({ onSubmit }) {
+ const [editorShowing, setEditorShowing] = useState(false)
+ const [val, setVal] = useState('')
+ const [type, setType] = useState('public')
+ const [title, setTitle] = useState('')
+ const [file, setFile] = useState()
+
+ return (
+ <>
+ {
+ setEditorShowing(true)
+ }}
+ className={styles.new}
+ >
+ Új bejegyzés / feedback
+
+ {editorShowing && (
+ {
+ setEditorShowing(false)
+ }}
+ >
+
+
+ )}
+ >
+ )
+}
diff --git a/src/components/composer.module.css b/src/components/composer.module.css
new file mode 100644
index 0000000..9bdf88b
--- /dev/null
+++ b/src/components/composer.module.css
@@ -0,0 +1,32 @@
+.container {
+ display: flex;
+ flex-flow: column;
+}
+
+.container > input,
+.container > textarea {
+ margin: 5px 0px;
+ padding: 4px;
+}
+
+.typeSelector {
+ display: flex;
+ align-items: center;
+}
+
+.tip {
+ font-size: 10px;
+ margin: 0px 10px;
+}
+
+.new {
+ padding: 10px;
+ text-align: center;
+ border: 2px dashed var(--text-color);
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.new:hover {
+ background-color: var(--hoover-color);
+}
diff --git a/src/components/dbSelector.module.css b/src/components/dbSelector.module.css
index 81779c7..5c247a9 100644
--- a/src/components/dbSelector.module.css
+++ b/src/components/dbSelector.module.css
@@ -15,7 +15,7 @@
}
.listItem:hover {
- background-color: #666;
+ background-color: var(--hoover-color);
}
.text {
diff --git a/src/components/modal.js b/src/components/modal.js
index 8c449ab..cc51083 100644
--- a/src/components/modal.js
+++ b/src/components/modal.js
@@ -46,7 +46,7 @@ export default function Modal(props) {
❌
)}
- {props.children}
+ {props.children}
)
diff --git a/src/components/modal.module.css b/src/components/modal.module.css
index 4723bd0..a1a03e2 100644
--- a/src/components/modal.module.css
+++ b/src/components/modal.module.css
@@ -1,4 +1,5 @@
.modal {
+ z-index: 9999;
position: fixed;
top: 0;
left: 0;
@@ -8,16 +9,19 @@
}
.modalContent {
+ display: flex;
+ align-items: stretch;
+ max-height: 80%;
+ width: 80%;
position: fixed;
background: var(--background-color);
- width: 70%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- border-radius: 5px;
+ border-radius: 8px;
- padding: 20px;
+ padding: 20px 30px;
cursor: auto;
}
@@ -26,8 +30,14 @@
font-size: 18px;
position: absolute;
- position: absolute;
top: 10px;
right: 10px;
display: inline;
}
+
+.children {
+ max-height: 100%;
+ width: 100%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js
index 4942bd9..f980347 100644
--- a/src/components/newsEntry.js
+++ b/src/components/newsEntry.js
@@ -6,20 +6,18 @@ import Comments from './comments.js'
import styles from './newsEntry.module.css'
export default function NewsEntry({
- newsKey,
newsItem,
uid,
onReact,
onComment,
onDelete,
+ onPostDelete,
}) {
- const { reacts, title, text, user, comments, date, adminPost } = newsItem
+ const { reacts, title, content, user, comments, date, admin } = newsItem
return (
-
+
+
+ {uid === user ? (
+
{
+ onPostDelete()
+ }}
+ >
+ Delete
+
+ ) : null}
@@ -24,7 +21,8 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
title={currReact.join(', ')}
className={`${currReact.includes(uid) && styles.reacted}`}
key={key}
- onClick={() => {
+ onClick={(e) => {
+ e.stopPropagation()
onClick(key, currReact.includes(uid))
}}
>
@@ -39,7 +37,6 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
function RenderEmojis({ onClick }) {
const [search, setSearch] = useState('')
- let index = 0
return (
<>
- {index++ % breakEvery === 0 && (
-
- )}
- {
- onClick(key)
- }}
- >
- {reaction.emoji}
-
- >
+ {
+ onClick(key)
+ }}
+ >
+ {reaction.emoji}
+
)
})}
>
@@ -81,9 +73,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
return (
{
+ onClick={() => {
setOpened(true)
}}
+ onMouseEnter={() => {}}
onMouseLeave={() => {
setOpened(false)
}}
@@ -93,7 +86,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
text={() => (
{
+ onClick(key, isDelete)
+ setOpened(false)
+ }}
existingReacts={existingReacts}
/>
)}
diff --git a/src/components/reactButton.module.css b/src/components/reactButton.module.css
index 9c53a71..cce9089 100644
--- a/src/components/reactButton.module.css
+++ b/src/components/reactButton.module.css
@@ -19,10 +19,11 @@
border: 1px solid #444;
border-radius: 6px;
cursor: pointer;
+ user-select: none;
}
.reactionContainer > div:hover {
- background-color: #666;
+ background-color: var(--hoover-color);
}
.break {
diff --git a/src/components/tooltip.module.css b/src/components/tooltip.module.css
index 05b9267..b7beba2 100644
--- a/src/components/tooltip.module.css
+++ b/src/components/tooltip.module.css
@@ -4,11 +4,12 @@
}
.tooltip .tooltiptext {
- width: 280px;
+ width: 300px;
+ max-width: 300px;
height: 250px;
- max-width: 280px;
max-height: 250px;
- background-color: #555;
+ background-color: var(--background-color);
+ border-radius: 5px;
color: #fff;
text-align: center;
border-radius: 6px;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 660fdc7..f52c246 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -1,5 +1,6 @@
:root {
--text-color: #9999ff;
+ --primary-color: #9999ff;
--bright-color: #f2f2f2;
--background-color: #222426;
--hoover-color: #202020;
@@ -14,6 +15,23 @@ a {
color: white;
}
+textarea {
+ color: var(--text-color);
+ background-color: var(--background-color);
+ box-sizing: border-box;
+ height: 120px;
+ width: 100%;
+ border: 1px solid #666;
+ border-radius: 3px;
+}
+
+input {
+ color: var(--text-color);
+ background-color: var(--background-color);
+ border: 1px solid #444;
+ border-radius: 3px;
+}
+
.link {
margin: 20px;
font-size: 20px;
@@ -263,3 +281,21 @@ select:hover {
.msgs > div {
margin: 0px 5px;
}
+
+.actions {
+ display: flex;
+ align-items: center;
+}
+
+.actions > span {
+ margin: 2px 2px;
+ padding: 0px 10px;
+ border: 1px solid #444;
+ border-radius: 6px;
+ cursor: pointer;
+ user-select: none;
+}
+
+.actions > span:hover {
+ background-color: var(--hoover-color);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 23f193f..1700aa2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import Link from 'next/link'
import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import NewsEntry from '../components/newsEntry'
+import Composer from '../components/composer'
import DbSelector from '../components/dbSelector.js'
import styles from './index.module.css'
@@ -36,6 +37,72 @@ function fetchNews() {
})
}
+function addPost(title, content) {
+ return new Promise((resolve) => {
+ fetch(constants.apiUrl + 'addPost', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ title: title,
+ content: content,
+ }),
+ })
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ resolve(res)
+ })
+ })
+}
+
+function postFeedback(content, file) {
+ return new Promise((resolve) => {
+ const promises = [
+ fetch(constants.apiUrl + 'postfeedback', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ content: content,
+ }),
+ }).then((res) => {
+ return res.json()
+ }),
+ ]
+
+ if (file) {
+ console.log('FIEEEEEEEEEELE')
+ const formData = new FormData() // eslint-disable-line
+ formData.append('file', file)
+
+ promises.push(
+ fetch(constants.apiUrl + 'postfeedbackfile', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json',
+ },
+ body: formData,
+ }).then((res) => {
+ return res.json()
+ })
+ )
+ }
+
+ Promise.all(promises).then((res) => {
+ resolve(res)
+ })
+ })
+}
+
export default function Index({ globalData }) {
const userId = globalData.userId
const motd = globalData.motd
@@ -57,6 +124,25 @@ export default function Index({ globalData }) {
let newsEntryData = news[key]
return (
{
+ fetch(constants.apiUrl + 'rmPost', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ newsKey: key,
+ }),
+ })
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ setNews(res.news)
+ })
+ }}
onReact={({ type, path, reaction, isDelete }) => {
if (type === 'news') {
fetch(constants.apiUrl + 'infos', {
@@ -71,12 +157,13 @@ export default function Index({ globalData }) {
newsKey: key,
isDelete: isDelete,
}),
- }).then((res) => {
- // TODO: dont refetch news
- fetchNews().then((res) => {
- setNews(res)
- })
})
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ setNews(res.news)
+ })
} else if (type === 'comment') {
fetch(constants.apiUrl + 'comment', {
method: 'POST',
@@ -92,11 +179,13 @@ export default function Index({ globalData }) {
reaction: reaction,
isDelete: isDelete,
}),
- }).then((res) => {
- fetchNews().then((res) => {
- setNews(res)
- })
})
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ setNews(res.news)
+ })
}
}}
onDelete={(path) => {
@@ -112,13 +201,15 @@ export default function Index({ globalData }) {
path: path,
newsKey: key,
}),
- }).then(() => {
- fetchNews().then((res) => {
- setNews(res)
- })
})
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ setNews(res.news)
+ })
}}
- onComment={(path, text) => {
+ onComment={(path, content) => {
fetch(constants.apiUrl + 'comment', {
method: 'POST',
credentials: 'include',
@@ -129,14 +220,16 @@ export default function Index({ globalData }) {
body: JSON.stringify({
type: 'add',
path: path,
- text: text,
+ content: content,
newsKey: key,
}),
- }).then(() => {
- fetchNews().then((res) => {
- setNews(res)
- })
})
+ .then((res) => {
+ return res.json()
+ })
+ .then((res) => {
+ setNews(res.news)
+ })
}}
uid={userId}
key={key}
@@ -149,8 +242,31 @@ export default function Index({ globalData }) {
return (
-
News
+
Forum
+
{
+ if (!content) {
+ alert('Üres a tartalom!')
+ return
+ }
+ console.log(type, title, content, file)
+ if (type === 'private') {
+ postFeedback(content, file).then((res) => {
+ console.log(res)
+ alert('Privát visszajelzés elküldve!')
+ })
+ } else {
+ if (!title) {
+ alert('Üres a téma!')
+ return
+ }
+ addPost(title, content).then((res) => {
+ setNews(res.news)
+ })
+ }
+ }}
+ />
{newsItems}
@@ -165,7 +281,6 @@ export default function Index({ globalData }) {