mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
April update
This commit is contained in:
mrfry
parent
4748c23769
commit
ce63911b68
18 changed files with 1046 additions and 253 deletions
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
.commentAreaContainer > textarea {
|
||||
width: 99%;
|
||||
font-size: 18px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.commentAreaContainer > div {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ import React, { useState } from 'react'
|
|||
import Modal from './modal'
|
||||
|
||||
import styles from './composer.module.css'
|
||||
import constants from '../constants.json'
|
||||
|
||||
export default function Composer({ onSubmit }) {
|
||||
export default function Composer({ onSubmit, allowFile, fileOnly }) {
|
||||
const [editorShowing, setEditorShowing] = useState(false)
|
||||
const [val, setVal] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [file, setFile] = useState()
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -18,7 +20,7 @@ export default function Composer({ onSubmit }) {
|
|||
}}
|
||||
className={styles.new}
|
||||
>
|
||||
Bejegyzés írása...
|
||||
Új poszt ...
|
||||
</div>
|
||||
</div>
|
||||
{editorShowing && (
|
||||
|
|
@ -37,27 +39,70 @@ export default function Composer({ onSubmit }) {
|
|||
setTitle(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<textarea
|
||||
placeholder={'Írj ide valamit...'}
|
||||
required
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
{!fileOnly && (
|
||||
<textarea
|
||||
placeholder={'Írj ide valamit...'}
|
||||
required
|
||||
value={val}
|
||||
onChange={(e) => {
|
||||
setVal(e.target.value)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{(allowFile || fileOnly) && (
|
||||
<input
|
||||
className={styles.fileInput}
|
||||
type="file"
|
||||
name="file"
|
||||
accept={`${constants.imageExts
|
||||
.map((x) => `.${x}`)
|
||||
.join(',')},${constants.videoExts
|
||||
.map((x) => `.${x}`)
|
||||
.join(',')}`}
|
||||
onChange={(e) => {
|
||||
const selectedFile = e.target.files[0]
|
||||
setFile(selectedFile)
|
||||
if (!title) {
|
||||
setTitle(
|
||||
selectedFile.name.split('.').slice(0, -1).join('.')
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={`actions ${styles.composerAction}`}>
|
||||
<span
|
||||
onClick={() => {
|
||||
if (!title) {
|
||||
alert('Üres a tartalom!')
|
||||
return
|
||||
}
|
||||
if (!val) {
|
||||
alert('Üres a téma!')
|
||||
return
|
||||
}
|
||||
if (!val && !fileOnly) {
|
||||
alert('Üres a tartalom!')
|
||||
return
|
||||
}
|
||||
if (fileOnly && !file) {
|
||||
alert('Kérlek tölts fel egy fájlt!')
|
||||
return
|
||||
}
|
||||
|
||||
onSubmit(title, val)
|
||||
const ext = file.name.split('.').reverse()[0]
|
||||
if (
|
||||
!constants.imageExts.includes(ext.toLowerCase()) &&
|
||||
!constants.videoExts.includes(ext.toLowerCase())
|
||||
) {
|
||||
alert(
|
||||
`Kérlek helyes formátum fájlt tölts fel! (${constants.imageExts.join(
|
||||
', '
|
||||
)}, ${constants.videoExts.join(', ')})`
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
onSubmit(title, val, file)
|
||||
setTitle('')
|
||||
setVal('')
|
||||
setFile(undefined)
|
||||
setEditorShowing(false)
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -189,6 +189,8 @@ function UserStatus({ userId, unreads, onClick }) {
|
|||
className={styles.logout}
|
||||
title="Kijelentkezés"
|
||||
onClick={() => {
|
||||
const res = window.confirm('Kijelentkezel?')
|
||||
if (!res) return
|
||||
fetch(constants.apiUrl + 'logout', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
.modalContent {
|
||||
display: flex;
|
||||
max-height: 80%;
|
||||
max-height: 90%;
|
||||
height: auto;
|
||||
width: 50%;
|
||||
width: 60%;
|
||||
position: fixed;
|
||||
background: var(--background-color);
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,56 @@ import ReactButton from './reactButton.js'
|
|||
import Comments from './comments.js'
|
||||
import Link from 'next/link'
|
||||
|
||||
import constants from '../constants.json'
|
||||
|
||||
import styles from './newsEntry.module.css'
|
||||
|
||||
const Media = ({ url, onClick }) => {
|
||||
const ext = url.split('.').reverse()[0]
|
||||
if (constants.imageExts.includes(ext.toLowerCase())) {
|
||||
return (
|
||||
<img
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
if (onClick) onClick()
|
||||
}}
|
||||
src={url}
|
||||
/>
|
||||
)
|
||||
} else if (constants.videoExts.includes(ext.toLowerCase())) {
|
||||
return (
|
||||
<video controls style={{ maxHeight: '700px' }}>
|
||||
<source src={url} type={`video/${ext === 'mkv' ? 'mp4' : ext}`} />
|
||||
</video>
|
||||
)
|
||||
} else {
|
||||
return <div>Invalid media: {ext} :/</div>
|
||||
}
|
||||
}
|
||||
|
||||
const Content = ({ admin, content, mediaPath, onMediaClick }) => {
|
||||
return (
|
||||
<>
|
||||
{mediaPath && (
|
||||
<div className={styles.mediaContainer}>
|
||||
<Media
|
||||
onClick={onMediaClick}
|
||||
url={`${constants.apiUrl}forumFiles/${mediaPath}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{admin ? (
|
||||
<div
|
||||
className={styles.newsBody}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.newsBody}>{content}</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NewsEntry({
|
||||
newsItem,
|
||||
uid,
|
||||
|
|
@ -14,21 +62,35 @@ export default function NewsEntry({
|
|||
onComment,
|
||||
onDelete,
|
||||
onPostDelete,
|
||||
showUpDownVote,
|
||||
hideAdminIndicator,
|
||||
onTitleClick,
|
||||
}) {
|
||||
const { reacts, title, content, user, comments, date, admin } = newsItem
|
||||
const { reacts, title, content, user, comments, date, admin, mediaPath } =
|
||||
newsItem
|
||||
const dateObj = new Date(date)
|
||||
|
||||
const isPostAdmin = !hideAdminIndicator && admin
|
||||
|
||||
return (
|
||||
<div className={styles.newsRoot}>
|
||||
<div
|
||||
className={`${styles.newsContainer} ${admin && styles.adminPost} ${
|
||||
!admin && styles.userPost
|
||||
} ${uid === user && styles.ownPost} ${
|
||||
uid === user && admin && styles.adminPost
|
||||
}`}
|
||||
className={`${styles.newsContainer} ${
|
||||
isPostAdmin && styles.adminPost
|
||||
} ${!isPostAdmin && styles.userPost} ${
|
||||
uid === user && styles.ownPost
|
||||
} ${uid === user && isPostAdmin && styles.adminPost}`}
|
||||
>
|
||||
<div className={styles.newsHeader}>
|
||||
<div className={styles.newsTitle}>{title}</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
if (onTitleClick) onTitleClick()
|
||||
}}
|
||||
style={{ cursor: onTitleClick ? 'pointer' : 'default' }}
|
||||
className={styles.newsTitle}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className={styles.userinfo}>
|
||||
<Link href={`/chat?user=${user}`}>
|
||||
<a title={`Chat #${user}-el`} className={'userId'}>
|
||||
|
|
@ -43,14 +105,12 @@ export default function NewsEntry({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{admin ? (
|
||||
<div
|
||||
className={styles.newsBody}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
) : (
|
||||
<div className={styles.newsBody}>{content}</div>
|
||||
)}
|
||||
<Content
|
||||
onMediaClick={onTitleClick}
|
||||
admin={admin}
|
||||
content={content}
|
||||
mediaPath={mediaPath}
|
||||
/>
|
||||
</div>
|
||||
<div className={'actions'}>
|
||||
<Comments
|
||||
|
|
@ -72,6 +132,7 @@ export default function NewsEntry({
|
|||
</span>
|
||||
) : null}
|
||||
<ReactButton
|
||||
showUpDownVote={showUpDownVote}
|
||||
existingReacts={reacts}
|
||||
uid={uid}
|
||||
onClick={(reaction, isDelete) => {
|
||||
|
|
|
|||
|
|
@ -39,12 +39,6 @@
|
|||
border-left: 4px dotted azure;
|
||||
}
|
||||
|
||||
.newsContainer img {
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.newsHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -88,3 +82,17 @@
|
|||
padding: 10px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.newsContainer img {
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.newsContainer video {
|
||||
max-width: 500px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import Tooltip from './tooltip.js'
|
|||
import styles from './reactButton.module.css'
|
||||
import reactions from '../data/reactions.json'
|
||||
|
||||
const upDownVoteKeys = { 'thumbs up': [-1], 'thumbs down': [-1] }
|
||||
|
||||
function useOutsideAlerter(ref, action) {
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
|
|
@ -20,12 +22,24 @@ function useOutsideAlerter(ref, action) {
|
|||
}, [ref])
|
||||
}
|
||||
|
||||
function ExistingReacts({ existingReacts, onClick, uid }) {
|
||||
function mergeEmptyUpDownVoteObjWithExisting(existingReacts) {
|
||||
if (!existingReacts) return upDownVoteKeys
|
||||
|
||||
return Object.keys(existingReacts).reduce((acc, reactKey) => {
|
||||
return { ...acc, [reactKey]: existingReacts[reactKey] }
|
||||
}, upDownVoteKeys)
|
||||
}
|
||||
|
||||
function ExistingReacts({ existingReacts, onClick, uid, showUpDownVote }) {
|
||||
const mergedReactions = showUpDownVote
|
||||
? mergeEmptyUpDownVoteObjWithExisting(existingReacts)
|
||||
: existingReacts
|
||||
|
||||
return (
|
||||
<>
|
||||
{existingReacts &&
|
||||
Object.keys(existingReacts).map((key) => {
|
||||
const currReact = existingReacts[key]
|
||||
{mergedReactions &&
|
||||
Object.keys(mergedReactions).map((key) => {
|
||||
const currReact = mergedReactions[key]
|
||||
const react = reactions[key]
|
||||
if (!react) {
|
||||
return null
|
||||
|
|
@ -40,7 +54,7 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
|
|||
onClick(key, currReact.includes(uid))
|
||||
}}
|
||||
>
|
||||
{react.emoji} {currReact.length}
|
||||
{react.emoji} {currReact[0] === -1 ? 0 : currReact.length}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
|
|
@ -54,6 +68,7 @@ function RenderEmojis({ onClick }) {
|
|||
return (
|
||||
<>
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
placeholder="Keresés..."
|
||||
onChange={(event) => {
|
||||
|
|
@ -81,7 +96,12 @@ function RenderEmojis({ onClick }) {
|
|||
)
|
||||
}
|
||||
|
||||
export default function ReactButton({ onClick, existingReacts, uid }) {
|
||||
export default function ReactButton({
|
||||
onClick,
|
||||
existingReacts,
|
||||
uid,
|
||||
showUpDownVote,
|
||||
}) {
|
||||
const [opened, setOpened] = useState(false)
|
||||
const wrapperRef = useRef(null)
|
||||
useOutsideAlerter(wrapperRef, () => {
|
||||
|
|
@ -91,8 +111,8 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
|
|||
return (
|
||||
<>
|
||||
<Tooltip
|
||||
width={300}
|
||||
height={250}
|
||||
width={300}
|
||||
height={250}
|
||||
text={() => {
|
||||
return (
|
||||
<span
|
||||
|
|
@ -116,6 +136,7 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
|
|||
</div>
|
||||
</Tooltip>
|
||||
<ExistingReacts
|
||||
showUpDownVote={showUpDownVote}
|
||||
uid={uid}
|
||||
onClick={(key, isDelete) => {
|
||||
onClick(key, isDelete)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue