mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Front page forum
This commit is contained in:
mrfry
parent
a09e9734da
commit
561aa21d93
15 changed files with 484 additions and 136 deletions
|
|
@ -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 (
|
||||
<div className={styles.commentAreaContainer}>
|
||||
<textarea
|
||||
autoFocus
|
||||
className={styles.commentArea}
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
onSubmit(val)
|
||||
}}
|
||||
className={styles.button}
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
onCancel()
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -33,10 +39,10 @@ function CommentInput({ onSubmit }) {
|
|||
function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
|
||||
const [displayed, setDisplayed] = useState(true)
|
||||
const [commenting, setCommenting] = useState(false)
|
||||
const { text, subComments, date, user, reacts, adminComment } = comment
|
||||
const { content, subComments, date, user, reacts, admin } = comment
|
||||
const own = uid === user
|
||||
|
||||
const commentStyle = adminComment
|
||||
const commentStyle = admin
|
||||
? styles.adminComment
|
||||
: own
|
||||
? styles.ownComment
|
||||
|
|
@ -60,25 +66,23 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
|
|||
<div>{date}</div>
|
||||
</div>
|
||||
<div className={`${!displayed && styles.hidden}`}>
|
||||
<div className={styles.commentText}> {text}</div>
|
||||
<div className={styles.actionsContainer}>
|
||||
<div
|
||||
className={styles.button}
|
||||
<div className={styles.commentText}> {content}</div>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
setCommenting(true)
|
||||
}}
|
||||
>
|
||||
Reply...
|
||||
</div>
|
||||
</span>
|
||||
{own && (
|
||||
<div
|
||||
className={styles.button}
|
||||
<span
|
||||
onClick={() => {
|
||||
onDelete([index])
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
<ReactButton
|
||||
onClick={(reaction, isDelete) => {
|
||||
|
|
@ -90,6 +94,9 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
|
|||
</div>
|
||||
{commenting && (
|
||||
<CommentInput
|
||||
onCancel={() => {
|
||||
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 (
|
||||
<div>
|
||||
{comments && comments.length > 0 ? (
|
||||
comments.map((comment, i) => {
|
||||
return (
|
||||
<Comment
|
||||
onReact={onReact}
|
||||
onComment={onComment}
|
||||
onDelete={onDelete}
|
||||
comment={comment}
|
||||
index={i}
|
||||
key={i}
|
||||
uid={uid}
|
||||
/>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div>
|
||||
<div>No comments yet</div>
|
||||
</div>
|
||||
)}
|
||||
{addingNewComment ? (
|
||||
<CommentInput
|
||||
onSubmit={(e) => {
|
||||
setAddingNewComment(false)
|
||||
onComment([], e)
|
||||
{commentsShowing ? (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setCommentsShowing(false)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={() => {
|
||||
setAddingNewComment(true)
|
||||
}}
|
||||
className={styles.button}
|
||||
>
|
||||
Add new
|
||||
{comments && comments.length > 0
|
||||
? comments.map((comment, i) => {
|
||||
return (
|
||||
<Comment
|
||||
onReact={onReact}
|
||||
onComment={onComment}
|
||||
onDelete={onDelete}
|
||||
comment={comment}
|
||||
index={i}
|
||||
key={i}
|
||||
uid={uid}
|
||||
/>
|
||||
)
|
||||
})
|
||||
: null}
|
||||
{commentCount !== 0 ? (
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
setAddingNewComment(true)
|
||||
}}
|
||||
>
|
||||
New comment
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{addingNewComment ? (
|
||||
<CommentInput
|
||||
onSubmit={(e) => {
|
||||
if (!e) {
|
||||
alert('Írj be valamit, hogy kommentelhess...')
|
||||
return
|
||||
}
|
||||
setAddingNewComment(false)
|
||||
onComment([], e)
|
||||
}}
|
||||
onCancel={() => {
|
||||
setAddingNewComment(false)
|
||||
if (commentCount === 0) {
|
||||
setCommentsShowing(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</Modal>
|
||||
) : null}
|
||||
<div
|
||||
className={'actions'}
|
||||
onClick={() => {
|
||||
setCommentsShowing(true)
|
||||
if (commentCount === 0) {
|
||||
setAddingNewComment(true)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{commentCount === 0
|
||||
? 'New comment'
|
||||
: `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
119
src/components/composer.js
Normal file
119
src/components/composer.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import Modal from './modal'
|
||||
|
||||
import styles from './composer.module.css'
|
||||
|
||||
function FileUploader({ onChange }) {
|
||||
return (
|
||||
<div className={styles.inputArea}>
|
||||
<div className={styles.textTitle}>Fájl csatolása</div>
|
||||
<input
|
||||
className={styles.fileInput}
|
||||
type="file"
|
||||
name="file"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<div
|
||||
onClick={() => {
|
||||
setEditorShowing(true)
|
||||
}}
|
||||
className={styles.new}
|
||||
>
|
||||
Új bejegyzés / feedback
|
||||
</div>
|
||||
{editorShowing && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
{type !== 'private' && (
|
||||
<input
|
||||
placeholder={'Téma'}
|
||||
value={title}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<textarea
|
||||
placeholder={'...'}
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
{type === 'private' && (
|
||||
<FileUploader
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files[0])
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.typeSelector}>
|
||||
<div>Post típusa:</div>
|
||||
<div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
|
||||
<input
|
||||
onChange={(e) => {
|
||||
setType(e.target.value)
|
||||
}}
|
||||
type="radio"
|
||||
name="type"
|
||||
value="public"
|
||||
defaultChecked
|
||||
/>
|
||||
Publikus
|
||||
</div>
|
||||
<div title="Csak a weboldal üzemeltetője látja">
|
||||
<input
|
||||
onChange={(e) => {
|
||||
setType(e.target.value)
|
||||
}}
|
||||
type="radio"
|
||||
name="type"
|
||||
value="private"
|
||||
/>
|
||||
Privát
|
||||
</div>
|
||||
<div className={styles.tip}>
|
||||
(Tartsd egered opciókra több infóért)
|
||||
</div>
|
||||
</div>
|
||||
<div className={'actions'}>
|
||||
<span
|
||||
onClick={() => {
|
||||
onSubmit(type, title, val, file)
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
Post
|
||||
</span>
|
||||
<span
|
||||
onClick={() => {
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
32
src/components/composer.module.css
Normal file
32
src/components/composer.module.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.listItem:hover {
|
||||
background-color: #666;
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default function Modal(props) {
|
|||
❌
|
||||
</div>
|
||||
)}
|
||||
{props.children}
|
||||
<div className={styles.children}>{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
<div
|
||||
className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
|
||||
>
|
||||
<div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
|
||||
<div className={styles.newsHeader}>
|
||||
<div
|
||||
className={styles.newsTitle}
|
||||
|
|
@ -32,8 +30,19 @@ export default function NewsEntry({
|
|||
</div>
|
||||
<div
|
||||
className={styles.newsBody}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
</div>
|
||||
<div className={'actions'}>
|
||||
{uid === user ? (
|
||||
<span
|
||||
onClick={() => {
|
||||
onPostDelete()
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</span>
|
||||
) : null}
|
||||
<ReactButton
|
||||
existingReacts={reacts}
|
||||
uid={uid}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.adminPost {
|
||||
border-left: 5px solid yellow;
|
||||
border-left: 2px solid yellow;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@ import Tooltip from './tooltip.js'
|
|||
import styles from './reactButton.module.css'
|
||||
import reactions from '../data/reactions.json'
|
||||
|
||||
// TODO: fixdis
|
||||
const breakEvery = 7
|
||||
|
||||
function ExistingReacts({ existingReacts, onClick, uid }) {
|
||||
return (
|
||||
<div className={styles.reactionContainer}>
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<input
|
||||
|
|
@ -55,20 +52,15 @@ function RenderEmojis({ onClick }) {
|
|||
return null
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{index++ % breakEvery === 0 && (
|
||||
<div key={`${key}_break`} className={styles.break} />
|
||||
)}
|
||||
<div
|
||||
title={key}
|
||||
key={key}
|
||||
onClick={() => {
|
||||
onClick(key)
|
||||
}}
|
||||
>
|
||||
{reaction.emoji}
|
||||
</div>
|
||||
</>
|
||||
<div
|
||||
title={key}
|
||||
key={key}
|
||||
onClick={() => {
|
||||
onClick(key)
|
||||
}}
|
||||
>
|
||||
{reaction.emoji}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
|
|
@ -81,9 +73,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
|
|||
return (
|
||||
<div
|
||||
className={styles.reactContainer}
|
||||
onMouseEnter={() => {
|
||||
onClick={() => {
|
||||
setOpened(true)
|
||||
}}
|
||||
onMouseEnter={() => {}}
|
||||
onMouseLeave={() => {
|
||||
setOpened(false)
|
||||
}}
|
||||
|
|
@ -93,7 +86,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
|
|||
text={() => (
|
||||
<ExistingReacts
|
||||
uid={uid}
|
||||
onClick={onClick}
|
||||
onClick={(key, isDelete) => {
|
||||
onClick(key, isDelete)
|
||||
setOpened(false)
|
||||
}}
|
||||
existingReacts={existingReacts}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<NewsEntry
|
||||
onPostDelete={() => {
|
||||
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 (
|
||||
<div>
|
||||
<div className={styles.title}>News</div>
|
||||
<div className={styles.title}>Forum</div>
|
||||
<hr />
|
||||
<Composer
|
||||
onSubmit={(type, title, content, file) => {
|
||||
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)
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<div>{newsItems}</div>
|
||||
</div>
|
||||
|
|
@ -165,7 +281,6 @@ export default function Index({ globalData }) {
|
|||
<div>
|
||||
<div className={styles.title}>MOTD</div>
|
||||
<hr />
|
||||
<hr />
|
||||
{motd ? (
|
||||
<div
|
||||
className={styles.motd}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.clickable:hover {
|
||||
background-color: #666666;
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue