mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Removed memes
This commit is contained in:
mrfry
parent
e15bc6a782
commit
e65739a64a
6 changed files with 780 additions and 780 deletions
|
|
@ -1,11 +1,7 @@
|
||||||
{
|
{
|
||||||
"index": {
|
"index": {
|
||||||
"href": "/",
|
"href": "/",
|
||||||
"text": "Memes"
|
"text": "Főoldal"
|
||||||
},
|
|
||||||
"main": {
|
|
||||||
"href": "/main",
|
|
||||||
"text": "(Fő)oldal"
|
|
||||||
},
|
},
|
||||||
"script": {
|
"script": {
|
||||||
"href": "/script",
|
"href": "/script",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { useQuery } from 'react-query'
|
|
||||||
import fetch from 'unfetch'
|
import fetch from 'unfetch'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
|
||||||
|
|
@ -7,102 +6,12 @@ import LoadingIndicator from '../components/LoadingIndicator'
|
||||||
import Sleep from '../components/sleep'
|
import Sleep from '../components/sleep'
|
||||||
import NewsEntry from '../components/newsEntry'
|
import NewsEntry from '../components/newsEntry'
|
||||||
import Composer from '../components/composer'
|
import Composer from '../components/composer'
|
||||||
import Modal from '../components/modal'
|
|
||||||
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import constants from '../constants.json'
|
import constants from '../constants.json'
|
||||||
|
|
||||||
const forumPostPerPage = 5
|
const forumPostPerPage = 5
|
||||||
const frontpageForumName = 'memes'
|
const frontpageForumName = 'frontpage'
|
||||||
|
|
||||||
const LeaderBoard = ({ leaderBoard, userId }) => {
|
|
||||||
if (!leaderBoard) return <LoadingIndicator />
|
|
||||||
return (
|
|
||||||
<div className={styles.msg}>
|
|
||||||
<div style={{ padding: 8 }}>Ranglista</div>
|
|
||||||
<div className={styles.leaderBoard}>
|
|
||||||
<div></div>
|
|
||||||
<div>User #</div>
|
|
||||||
<div>Up</div>
|
|
||||||
<div>Down</div>
|
|
||||||
<div>Sum</div>
|
|
||||||
</div>
|
|
||||||
{leaderBoard &&
|
|
||||||
leaderBoard.map((x, i) => {
|
|
||||||
if (i > 9) return null
|
|
||||||
const { up, down, user, sum } = x
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`${styles.leaderBoard} ${
|
|
||||||
userId === parseInt(user) && styles.selfRow
|
|
||||||
}`}
|
|
||||||
key={user}
|
|
||||||
>
|
|
||||||
<div>{`${i + 1}.`}</div>
|
|
||||||
<div>#{user}</div>
|
|
||||||
<div>{up}</div>
|
|
||||||
<div>{down}</div>
|
|
||||||
<div>{sum}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Header = ({ leaderBoard, userId }) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.header}>
|
|
||||||
<div className={styles.msg}>
|
|
||||||
Mivel mostanában elég népszerű lett az oldal, ezért egy új rész lett
|
|
||||||
hozzáadva: Memes
|
|
||||||
<p /> Ide lehet posztolni akármilyen vicces tartalmat, és upvoteolni /
|
|
||||||
downvoteolni lehet a többiek által feltöltötteket
|
|
||||||
<p />
|
|
||||||
Have fun! :)
|
|
||||||
</div>
|
|
||||||
<LeaderBoard leaderBoard={leaderBoard} userId={userId} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchLeaderboard() {
|
|
||||||
const { data } = useQuery('leaderBoard', () => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
fetch(`${constants.apiUrl}forumRanklist?forumName=memes`, {
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}, { staleTime: Infinity })
|
|
||||||
return data || []
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchEntry(postKey) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
fetch(
|
|
||||||
`${constants.apiUrl}forumEntry?forumName=${frontpageForumName}&postKey=${postKey}`,
|
|
||||||
{
|
|
||||||
credentials: 'include',
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((resp) => {
|
|
||||||
return resp.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchForum(from) {
|
function fetchForum(from) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
|
|
@ -125,7 +34,7 @@ function fetchForum(from) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPost(title, content, file) {
|
function addPost(title, content) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
fetch(constants.apiUrl + 'addPost', {
|
fetch(constants.apiUrl + 'addPost', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|
@ -138,27 +47,13 @@ function addPost(title, content, file) {
|
||||||
forumName: frontpageForumName,
|
forumName: frontpageForumName,
|
||||||
title: title,
|
title: title,
|
||||||
content: content,
|
content: content,
|
||||||
image: file.name,
|
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
return res.json()
|
return res.json()
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const formData = new FormData() // eslint-disable-line
|
resolve(res)
|
||||||
formData.append('file', file)
|
|
||||||
|
|
||||||
fetch(constants.apiUrl + 'postMeme', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
},
|
|
||||||
body: formData,
|
|
||||||
}).then((imgPostRes) => {
|
|
||||||
console.info(imgPostRes)
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -181,214 +76,16 @@ function updateForumPost(forum, postKey, postData) {
|
||||||
}, {})
|
}, {})
|
||||||
}
|
}
|
||||||
|
|
||||||
const NewsEntryContainer = ({
|
export default function Main({ globalData, globalState, setGlobalState }) {
|
||||||
postKey,
|
|
||||||
setNews,
|
|
||||||
news,
|
|
||||||
userId,
|
|
||||||
newsEntryData,
|
|
||||||
onTitleClick,
|
|
||||||
}) => {
|
|
||||||
const [error, setError] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!newsEntryData && !error) {
|
|
||||||
fetchEntry(postKey)
|
|
||||||
.then((res) => {
|
|
||||||
const { success, entry, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews({ [postKey]: entry, ...news })
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
setError(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.error(e)
|
|
||||||
setError(true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (!newsEntryData) {
|
|
||||||
return <LoadingIndicator />
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div>Lil fuckup</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NewsEntry
|
|
||||||
showUpDownVote
|
|
||||||
onTitleClick={onTitleClick}
|
|
||||||
uid={userId}
|
|
||||||
key={postKey}
|
|
||||||
newsKey={postKey}
|
|
||||||
newsItem={newsEntryData}
|
|
||||||
onPostDelete={() => {
|
|
||||||
fetch(constants.apiUrl + 'rmPost', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
postKey: postKey,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(
|
|
||||||
Object.keys(news).reduce((acc, key) => {
|
|
||||||
const entry = news[key]
|
|
||||||
if (key !== postKey) {
|
|
||||||
acc = {
|
|
||||||
...acc,
|
|
||||||
[key]: entry,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, {})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onNewsReact={({ reaction, isDelete }) => {
|
|
||||||
fetch(constants.apiUrl + 'react', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
reaction: reaction,
|
|
||||||
postKey: postKey,
|
|
||||||
isDelete: isDelete,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
setNews(updateForumPost(news, postKey, res.postData))
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onCommentReact={({ path, reaction, isDelete }) => {
|
|
||||||
fetch(constants.apiUrl + 'react', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'reaction',
|
|
||||||
postKey: postKey,
|
|
||||||
path: path,
|
|
||||||
reaction: reaction,
|
|
||||||
isDelete: isDelete,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onDelete={(path) => {
|
|
||||||
fetch(constants.apiUrl + 'comment', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'delete',
|
|
||||||
path: path,
|
|
||||||
postKey: postKey,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onComment={(path, content) => {
|
|
||||||
fetch(constants.apiUrl + 'comment', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'add',
|
|
||||||
path: path,
|
|
||||||
content: content,
|
|
||||||
postKey: postKey,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Memes({
|
|
||||||
router,
|
|
||||||
globalData,
|
|
||||||
globalState,
|
|
||||||
setGlobalState,
|
|
||||||
}) {
|
|
||||||
const userId = globalData.userId
|
const userId = globalData.userId
|
||||||
|
const motd = globalData.motd
|
||||||
const [news, setNews] = useState(null)
|
const [news, setNews] = useState(null)
|
||||||
const [nextEntryKey, setNextEntryKey] = useState()
|
const [nextEntryKey, setNextEntryKey] = useState()
|
||||||
const [fetchingForum, setFetchingForum] = useState(false)
|
const [fetchingForum, setFetchingForum] = useState(false)
|
||||||
const [postInModalKey, setPostInModalKey] = useState()
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
|
||||||
const { leaderBoard } = fetchLeaderboard()
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (globalState.memes) {
|
if (globalState.news) {
|
||||||
const { entries, nextKey } = globalState.memes
|
const { entries, nextKey } = globalState.news
|
||||||
setNextEntryKey(nextKey)
|
setNextEntryKey(nextKey)
|
||||||
setNews(entries)
|
setNews(entries)
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -398,76 +95,184 @@ export default function Memes({
|
||||||
const { entries, nextKey } = res
|
const { entries, nextKey } = res
|
||||||
setNextEntryKey(nextKey)
|
setNextEntryKey(nextKey)
|
||||||
setNews(entries)
|
setNews(entries)
|
||||||
setGlobalState({ memes: res })
|
setGlobalState({ news: res })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const postKey = router.query.postKey
|
|
||||||
? decodeURIComponent(router.query.postKey)
|
|
||||||
: ''
|
|
||||||
|
|
||||||
if (postKey) {
|
|
||||||
setPostInModalKey(postKey)
|
|
||||||
}
|
|
||||||
}, [router.query.postKey])
|
|
||||||
|
|
||||||
const renderNews = () => {
|
const renderNews = () => {
|
||||||
if (news) {
|
if (news) {
|
||||||
const newsItems = Object.keys(news).map((postKey) => {
|
let newsItems = Object.keys(news).map((postKey) => {
|
||||||
const newsEntryData = news[postKey]
|
let newsEntryData = news[postKey]
|
||||||
return (
|
return (
|
||||||
<NewsEntryContainer
|
<NewsEntry
|
||||||
onTitleClick={() => {
|
hideAdminIndicator
|
||||||
setPostInModalKey(postKey)
|
onPostDelete={() => {
|
||||||
router.replace(
|
fetch(constants.apiUrl + 'rmPost', {
|
||||||
`${router.pathname}?postKey=${encodeURIComponent(postKey)}`,
|
method: 'POST',
|
||||||
undefined,
|
credentials: 'include',
|
||||||
{ shallow: true }
|
headers: {
|
||||||
)
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
postKey: postKey,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(
|
||||||
|
Object.keys(news).reduce((acc, key) => {
|
||||||
|
const entry = news[key]
|
||||||
|
if (key !== postKey) {
|
||||||
|
acc = {
|
||||||
|
...acc,
|
||||||
|
[key]: entry,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
}}
|
}}
|
||||||
|
onNewsReact={({ reaction, isDelete }) => {
|
||||||
|
fetch(constants.apiUrl + 'react', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
reaction: reaction,
|
||||||
|
postKey: postKey,
|
||||||
|
isDelete: isDelete,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
setNews(updateForumPost(news, postKey, res.postData))
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onCommentReact={({ path, reaction, isDelete }) => {
|
||||||
|
fetch(constants.apiUrl + 'react', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'reaction',
|
||||||
|
postKey: postKey,
|
||||||
|
path: path,
|
||||||
|
reaction: reaction,
|
||||||
|
isDelete: isDelete,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onDelete={(path) => {
|
||||||
|
fetch(constants.apiUrl + 'comment', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'delete',
|
||||||
|
path: path,
|
||||||
|
postKey: postKey,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onComment={(path, content) => {
|
||||||
|
fetch(constants.apiUrl + 'comment', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'add',
|
||||||
|
path: path,
|
||||||
|
content: content,
|
||||||
|
postKey: postKey,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
uid={userId}
|
||||||
key={postKey}
|
key={postKey}
|
||||||
postKey={postKey}
|
newsKey={postKey}
|
||||||
setNews={setNews}
|
newsItem={newsEntryData}
|
||||||
news={news}
|
|
||||||
userId={userId}
|
|
||||||
newsEntryData={newsEntryData}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div className={styles.title}>Fórum/Hírek</div>
|
||||||
|
<hr />
|
||||||
<Composer
|
<Composer
|
||||||
allowFile
|
onSubmit={(title, content) => {
|
||||||
fileOnly
|
addPost(title, content).then((res) => {
|
||||||
onSubmit={(title, content, file) => {
|
|
||||||
if (!file) return
|
|
||||||
setIsUploading(true)
|
|
||||||
addPost(title, content, file).then((res) => {
|
|
||||||
const { success, newPostKey, newEntry, msg } = res
|
const { success, newPostKey, newEntry, msg } = res
|
||||||
if (success) {
|
if (success) {
|
||||||
setNews({ [newPostKey]: newEntry, ...news })
|
setNews({ [newPostKey]: newEntry, ...news })
|
||||||
} else {
|
} else {
|
||||||
alert(msg)
|
alert(msg)
|
||||||
}
|
}
|
||||||
setIsUploading(false)
|
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{isUploading && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{'Feltöltés ...'}
|
|
||||||
<LoadingIndicator />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div>{newsItems}</div>
|
<div>{newsItems}</div>
|
||||||
{nextEntryKey ? (
|
{nextEntryKey ? (
|
||||||
<div
|
<div
|
||||||
|
|
@ -518,39 +323,31 @@ export default function Memes({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderMotd = () => {
|
||||||
|
if (motd) {
|
||||||
|
return (
|
||||||
|
<div className={styles.motd}>
|
||||||
|
<div className={styles.title}>MOTD</div>
|
||||||
|
{motd ? (
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: motd }} />
|
||||||
|
) : (
|
||||||
|
<div>...</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Qmining | Frylabs.net</title>
|
<title>Qmining | Frylabs.net</title>
|
||||||
</Head>
|
</Head>
|
||||||
<Header leaderBoard={leaderBoard} userId={userId} />
|
{renderMotd()}
|
||||||
<div className={styles.description}>
|
|
||||||
{
|
|
||||||
'A "Memes" rész Április 8-ig lesz elérhető, vagy ha népszerű lesz, akkor véglegesen bekerülhet a menübe.'
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<Sleep />
|
<Sleep />
|
||||||
{renderNews()}
|
{renderNews()}
|
||||||
{postInModalKey && (
|
|
||||||
<Modal
|
|
||||||
closeClick={() => {
|
|
||||||
setPostInModalKey(undefined)
|
|
||||||
router.replace(router.pathname, undefined, { shallow: true })
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{news ? (
|
|
||||||
<NewsEntryContainer
|
|
||||||
postKey={postInModalKey}
|
|
||||||
setNews={setNews}
|
|
||||||
news={news}
|
|
||||||
userId={userId}
|
|
||||||
newsEntryData={news[postInModalKey]}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<LoadingIndicator />
|
|
||||||
)}
|
|
||||||
</Modal>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg {
|
.motd {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
|
margin-bottom: 30px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -94,41 +95,3 @@
|
||||||
.loadMoreButton:hover {
|
.loadMoreButton:hover {
|
||||||
background-color: var(--hoover-color);
|
background-color: var(--hoover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaderBoard {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 2px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaderBoard > div:first-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaderBoard > div {
|
|
||||||
flex: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaderBoard:hover {
|
|
||||||
background-color: var(--hoover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.selfRow {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,353 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
import fetch from 'unfetch'
|
|
||||||
import Head from 'next/head'
|
|
||||||
|
|
||||||
import LoadingIndicator from '../components/LoadingIndicator'
|
|
||||||
import Sleep from '../components/sleep'
|
|
||||||
import NewsEntry from '../components/newsEntry'
|
|
||||||
import Composer from '../components/composer'
|
|
||||||
|
|
||||||
import styles from './main.module.css'
|
|
||||||
import constants from '../constants.json'
|
|
||||||
|
|
||||||
const forumPostPerPage = 5
|
|
||||||
const frontpageForumName = 'frontpage'
|
|
||||||
|
|
||||||
function fetchForum(from) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
fetch(
|
|
||||||
`${
|
|
||||||
constants.apiUrl
|
|
||||||
}forumEntries?forumName=${frontpageForumName}&getContent=true${
|
|
||||||
from ? `&from=${from}` : ''
|
|
||||||
}&count=${forumPostPerPage}`,
|
|
||||||
{
|
|
||||||
credentials: 'include',
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((resp) => {
|
|
||||||
return resp.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
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({
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
title: title,
|
|
||||||
content: content,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateForumPost(forum, postKey, postData) {
|
|
||||||
return Object.keys(forum).reduce((acc, key) => {
|
|
||||||
const entry = forum[key]
|
|
||||||
if (key === postKey) {
|
|
||||||
acc = {
|
|
||||||
...acc,
|
|
||||||
[key]: postData,
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
acc = {
|
|
||||||
...acc,
|
|
||||||
[key]: entry,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Main({ globalData, globalState, setGlobalState }) {
|
|
||||||
const userId = globalData.userId
|
|
||||||
const motd = globalData.motd
|
|
||||||
const [news, setNews] = useState(null)
|
|
||||||
const [nextEntryKey, setNextEntryKey] = useState()
|
|
||||||
const [fetchingForum, setFetchingForum] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (globalState.news) {
|
|
||||||
const { entries, nextKey } = globalState.news
|
|
||||||
setNextEntryKey(nextKey)
|
|
||||||
setNews(entries)
|
|
||||||
} else {
|
|
||||||
setFetchingForum(true)
|
|
||||||
fetchForum().then((res) => {
|
|
||||||
setFetchingForum(false)
|
|
||||||
const { entries, nextKey } = res
|
|
||||||
setNextEntryKey(nextKey)
|
|
||||||
setNews(entries)
|
|
||||||
setGlobalState({ news: res })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const renderNews = () => {
|
|
||||||
if (news) {
|
|
||||||
let newsItems = Object.keys(news).map((postKey) => {
|
|
||||||
let newsEntryData = news[postKey]
|
|
||||||
return (
|
|
||||||
<NewsEntry
|
|
||||||
hideAdminIndicator
|
|
||||||
onPostDelete={() => {
|
|
||||||
fetch(constants.apiUrl + 'rmPost', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
postKey: postKey,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(
|
|
||||||
Object.keys(news).reduce((acc, key) => {
|
|
||||||
const entry = news[key]
|
|
||||||
if (key !== postKey) {
|
|
||||||
acc = {
|
|
||||||
...acc,
|
|
||||||
[key]: entry,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, {})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onNewsReact={({ reaction, isDelete }) => {
|
|
||||||
fetch(constants.apiUrl + 'react', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
reaction: reaction,
|
|
||||||
postKey: postKey,
|
|
||||||
isDelete: isDelete,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
setNews(updateForumPost(news, postKey, res.postData))
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onCommentReact={({ path, reaction, isDelete }) => {
|
|
||||||
fetch(constants.apiUrl + 'react', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'reaction',
|
|
||||||
postKey: postKey,
|
|
||||||
path: path,
|
|
||||||
reaction: reaction,
|
|
||||||
isDelete: isDelete,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onDelete={(path) => {
|
|
||||||
fetch(constants.apiUrl + 'comment', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'delete',
|
|
||||||
path: path,
|
|
||||||
postKey: postKey,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
onComment={(path, content) => {
|
|
||||||
fetch(constants.apiUrl + 'comment', {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
Accept: 'application/json',
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
type: 'add',
|
|
||||||
path: path,
|
|
||||||
content: content,
|
|
||||||
postKey: postKey,
|
|
||||||
forumName: frontpageForumName,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
return res.json()
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
const { success, postData, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews(updateForumPost(news, postKey, postData))
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
uid={userId}
|
|
||||||
key={postKey}
|
|
||||||
newsKey={postKey}
|
|
||||||
newsItem={newsEntryData}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className={styles.title}>Fórum/Hírek</div>
|
|
||||||
<hr />
|
|
||||||
<Composer
|
|
||||||
onSubmit={(title, content) => {
|
|
||||||
addPost(title, content).then((res) => {
|
|
||||||
const { success, newPostKey, newEntry, msg } = res
|
|
||||||
if (success) {
|
|
||||||
setNews({ [newPostKey]: newEntry, ...news })
|
|
||||||
} else {
|
|
||||||
alert(msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div>{newsItems}</div>
|
|
||||||
{nextEntryKey ? (
|
|
||||||
<div
|
|
||||||
className={styles.loadMoreButton}
|
|
||||||
onClick={() => {
|
|
||||||
if (fetchingForum) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setFetchingForum(true)
|
|
||||||
fetchForum(nextEntryKey).then((res) => {
|
|
||||||
setFetchingForum(false)
|
|
||||||
|
|
||||||
const { entries, nextKey } = res
|
|
||||||
setNextEntryKey(nextKey)
|
|
||||||
setNews({ ...news, ...entries })
|
|
||||||
setGlobalState({
|
|
||||||
news: {
|
|
||||||
entries: { ...news, ...entries },
|
|
||||||
nextKey: nextKey,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{fetchingForum ? (
|
|
||||||
<LoadingIndicator />
|
|
||||||
) : (
|
|
||||||
'Több bejegyzés betöltése'
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 16,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
fontStyle: 'italic',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{'The end'}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return <LoadingIndicator />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderMotd = () => {
|
|
||||||
if (motd) {
|
|
||||||
return (
|
|
||||||
<div className={styles.motd}>
|
|
||||||
<div className={styles.title}>MOTD</div>
|
|
||||||
{motd ? (
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: motd }} />
|
|
||||||
) : (
|
|
||||||
<div>...</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Head>
|
|
||||||
<title>Qmining | Frylabs.net</title>
|
|
||||||
</Head>
|
|
||||||
{renderMotd()}
|
|
||||||
<Sleep />
|
|
||||||
{renderNews()}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
560
src/pages/memes.js
Normal file
560
src/pages/memes.js
Normal file
|
|
@ -0,0 +1,560 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useQuery } from 'react-query'
|
||||||
|
import fetch from 'unfetch'
|
||||||
|
import Head from 'next/head'
|
||||||
|
|
||||||
|
import LoadingIndicator from '../components/LoadingIndicator'
|
||||||
|
import Sleep from '../components/sleep'
|
||||||
|
import NewsEntry from '../components/newsEntry'
|
||||||
|
import Composer from '../components/composer'
|
||||||
|
import Modal from '../components/modal'
|
||||||
|
|
||||||
|
import styles from './memes.module.css'
|
||||||
|
import constants from '../constants.json'
|
||||||
|
|
||||||
|
const forumPostPerPage = 5
|
||||||
|
const frontpageForumName = 'memes'
|
||||||
|
|
||||||
|
const LeaderBoard = ({ leaderBoard, userId }) => {
|
||||||
|
if (!leaderBoard) return <LoadingIndicator />
|
||||||
|
return (
|
||||||
|
<div className={styles.msg}>
|
||||||
|
<div style={{ padding: 8 }}>Ranglista</div>
|
||||||
|
<div className={styles.leaderBoard}>
|
||||||
|
<div></div>
|
||||||
|
<div>User #</div>
|
||||||
|
<div>Up</div>
|
||||||
|
<div>Down</div>
|
||||||
|
<div>Sum</div>
|
||||||
|
</div>
|
||||||
|
{leaderBoard &&
|
||||||
|
leaderBoard.map((x, i) => {
|
||||||
|
if (i > 9) return null
|
||||||
|
const { up, down, user, sum } = x
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles.leaderBoard} ${
|
||||||
|
userId === parseInt(user) && styles.selfRow
|
||||||
|
}`}
|
||||||
|
key={user}
|
||||||
|
>
|
||||||
|
<div>{`${i + 1}.`}</div>
|
||||||
|
<div>#{user}</div>
|
||||||
|
<div>{up}</div>
|
||||||
|
<div>{down}</div>
|
||||||
|
<div>{sum}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Header = ({ leaderBoard, userId }) => {
|
||||||
|
return (
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.msg}>
|
||||||
|
Mivel mostanában elég népszerű lett az oldal, ezért egy új rész lett
|
||||||
|
hozzáadva: Memes
|
||||||
|
<p /> Ide lehet posztolni akármilyen vicces tartalmat, és upvoteolni /
|
||||||
|
downvoteolni lehet a többiek által feltöltötteket
|
||||||
|
<p />
|
||||||
|
Have fun! :)
|
||||||
|
</div>
|
||||||
|
<LeaderBoard leaderBoard={leaderBoard} userId={userId} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchLeaderboard() {
|
||||||
|
const { data } = useQuery(
|
||||||
|
'leaderBoard',
|
||||||
|
() => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
fetch(`${constants.apiUrl}forumRanklist?forumName=memes`, {
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ staleTime: Infinity }
|
||||||
|
)
|
||||||
|
return data || []
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchEntry(postKey) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
fetch(
|
||||||
|
`${constants.apiUrl}forumEntry?forumName=${frontpageForumName}&postKey=${postKey}`,
|
||||||
|
{
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((resp) => {
|
||||||
|
return resp.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchForum(from) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
fetch(
|
||||||
|
`${
|
||||||
|
constants.apiUrl
|
||||||
|
}forumEntries?forumName=${frontpageForumName}&getContent=true${
|
||||||
|
from ? `&from=${from}` : ''
|
||||||
|
}&count=${forumPostPerPage}`,
|
||||||
|
{
|
||||||
|
credentials: 'include',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((resp) => {
|
||||||
|
return resp.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function addPost(title, content, file) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
fetch(constants.apiUrl + 'addPost', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
title: title,
|
||||||
|
content: content,
|
||||||
|
image: file.name,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const formData = new FormData() // eslint-disable-line
|
||||||
|
formData.append('file', file)
|
||||||
|
|
||||||
|
fetch(constants.apiUrl + 'postMeme', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
body: formData,
|
||||||
|
}).then((imgPostRes) => {
|
||||||
|
console.info(imgPostRes)
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateForumPost(forum, postKey, postData) {
|
||||||
|
return Object.keys(forum).reduce((acc, key) => {
|
||||||
|
const entry = forum[key]
|
||||||
|
if (key === postKey) {
|
||||||
|
acc = {
|
||||||
|
...acc,
|
||||||
|
[key]: postData,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
acc = {
|
||||||
|
...acc,
|
||||||
|
[key]: entry,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const NewsEntryContainer = ({
|
||||||
|
postKey,
|
||||||
|
setNews,
|
||||||
|
news,
|
||||||
|
userId,
|
||||||
|
newsEntryData,
|
||||||
|
onTitleClick,
|
||||||
|
}) => {
|
||||||
|
const [error, setError] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!newsEntryData && !error) {
|
||||||
|
fetchEntry(postKey)
|
||||||
|
.then((res) => {
|
||||||
|
const { success, entry, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews({ [postKey]: entry, ...news })
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
setError(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(e)
|
||||||
|
setError(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (!newsEntryData) {
|
||||||
|
return <LoadingIndicator />
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Lil fuckup</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NewsEntry
|
||||||
|
showUpDownVote
|
||||||
|
onTitleClick={onTitleClick}
|
||||||
|
uid={userId}
|
||||||
|
key={postKey}
|
||||||
|
newsKey={postKey}
|
||||||
|
newsItem={newsEntryData}
|
||||||
|
onPostDelete={() => {
|
||||||
|
fetch(constants.apiUrl + 'rmPost', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
postKey: postKey,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(
|
||||||
|
Object.keys(news).reduce((acc, key) => {
|
||||||
|
const entry = news[key]
|
||||||
|
if (key !== postKey) {
|
||||||
|
acc = {
|
||||||
|
...acc,
|
||||||
|
[key]: entry,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onNewsReact={({ reaction, isDelete }) => {
|
||||||
|
fetch(constants.apiUrl + 'react', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
reaction: reaction,
|
||||||
|
postKey: postKey,
|
||||||
|
isDelete: isDelete,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
setNews(updateForumPost(news, postKey, res.postData))
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onCommentReact={({ path, reaction, isDelete }) => {
|
||||||
|
fetch(constants.apiUrl + 'react', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'reaction',
|
||||||
|
postKey: postKey,
|
||||||
|
path: path,
|
||||||
|
reaction: reaction,
|
||||||
|
isDelete: isDelete,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onDelete={(path) => {
|
||||||
|
fetch(constants.apiUrl + 'comment', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'delete',
|
||||||
|
path: path,
|
||||||
|
postKey: postKey,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onComment={(path, content) => {
|
||||||
|
fetch(constants.apiUrl + 'comment', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
type: 'add',
|
||||||
|
path: path,
|
||||||
|
content: content,
|
||||||
|
postKey: postKey,
|
||||||
|
forumName: frontpageForumName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return res.json()
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
const { success, postData, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews(updateForumPost(news, postKey, postData))
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Memes({
|
||||||
|
router,
|
||||||
|
globalData,
|
||||||
|
globalState,
|
||||||
|
setGlobalState,
|
||||||
|
}) {
|
||||||
|
const userId = globalData.userId
|
||||||
|
const [news, setNews] = useState(null)
|
||||||
|
const [nextEntryKey, setNextEntryKey] = useState()
|
||||||
|
const [fetchingForum, setFetchingForum] = useState(false)
|
||||||
|
const [postInModalKey, setPostInModalKey] = useState()
|
||||||
|
const [isUploading, setIsUploading] = useState(false)
|
||||||
|
const { leaderBoard } = fetchLeaderboard()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (globalState.memes) {
|
||||||
|
const { entries, nextKey } = globalState.memes
|
||||||
|
setNextEntryKey(nextKey)
|
||||||
|
setNews(entries)
|
||||||
|
} else {
|
||||||
|
setFetchingForum(true)
|
||||||
|
fetchForum().then((res) => {
|
||||||
|
setFetchingForum(false)
|
||||||
|
const { entries, nextKey } = res
|
||||||
|
setNextEntryKey(nextKey)
|
||||||
|
setNews(entries)
|
||||||
|
setGlobalState({ memes: res })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const postKey = router.query.postKey
|
||||||
|
? decodeURIComponent(router.query.postKey)
|
||||||
|
: ''
|
||||||
|
|
||||||
|
if (postKey) {
|
||||||
|
setPostInModalKey(postKey)
|
||||||
|
}
|
||||||
|
}, [router.query.postKey])
|
||||||
|
|
||||||
|
const renderNews = () => {
|
||||||
|
if (news) {
|
||||||
|
const newsItems = Object.keys(news).map((postKey) => {
|
||||||
|
const newsEntryData = news[postKey]
|
||||||
|
return (
|
||||||
|
<NewsEntryContainer
|
||||||
|
onTitleClick={() => {
|
||||||
|
setPostInModalKey(postKey)
|
||||||
|
router.replace(
|
||||||
|
`${router.pathname}?postKey=${encodeURIComponent(postKey)}`,
|
||||||
|
undefined,
|
||||||
|
{ shallow: true }
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
key={postKey}
|
||||||
|
postKey={postKey}
|
||||||
|
setNews={setNews}
|
||||||
|
news={news}
|
||||||
|
userId={userId}
|
||||||
|
newsEntryData={newsEntryData}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Composer
|
||||||
|
allowFile
|
||||||
|
fileOnly
|
||||||
|
onSubmit={(title, content, file) => {
|
||||||
|
if (!file) return
|
||||||
|
setIsUploading(true)
|
||||||
|
addPost(title, content, file).then((res) => {
|
||||||
|
const { success, newPostKey, newEntry, msg } = res
|
||||||
|
if (success) {
|
||||||
|
setNews({ [newPostKey]: newEntry, ...news })
|
||||||
|
} else {
|
||||||
|
alert(msg)
|
||||||
|
}
|
||||||
|
setIsUploading(false)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{isUploading && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{'Feltöltés ...'}
|
||||||
|
<LoadingIndicator />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>{newsItems}</div>
|
||||||
|
{nextEntryKey ? (
|
||||||
|
<div
|
||||||
|
className={styles.loadMoreButton}
|
||||||
|
onClick={() => {
|
||||||
|
if (fetchingForum) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setFetchingForum(true)
|
||||||
|
fetchForum(nextEntryKey).then((res) => {
|
||||||
|
setFetchingForum(false)
|
||||||
|
|
||||||
|
const { entries, nextKey } = res
|
||||||
|
setNextEntryKey(nextKey)
|
||||||
|
setNews({ ...news, ...entries })
|
||||||
|
setGlobalState({
|
||||||
|
news: {
|
||||||
|
entries: { ...news, ...entries },
|
||||||
|
nextKey: nextKey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{fetchingForum ? (
|
||||||
|
<LoadingIndicator />
|
||||||
|
) : (
|
||||||
|
'Több bejegyzés betöltése'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: 16,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontStyle: 'italic',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{'The end'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return <LoadingIndicator />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>Qmining | Frylabs.net</title>
|
||||||
|
</Head>
|
||||||
|
<Header leaderBoard={leaderBoard} userId={userId} />
|
||||||
|
<div className={styles.description}>
|
||||||
|
{
|
||||||
|
'A "Memes" rész Április 8-ig lesz elérhető, vagy ha népszerű lesz, akkor véglegesen bekerülhet a menübe.'
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<Sleep />
|
||||||
|
{renderNews()}
|
||||||
|
{postInModalKey && (
|
||||||
|
<Modal
|
||||||
|
closeClick={() => {
|
||||||
|
setPostInModalKey(undefined)
|
||||||
|
router.replace(router.pathname, undefined, { shallow: true })
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{news ? (
|
||||||
|
<NewsEntryContainer
|
||||||
|
postKey={postInModalKey}
|
||||||
|
setNews={setNews}
|
||||||
|
news={news}
|
||||||
|
userId={userId}
|
||||||
|
newsEntryData={news[postInModalKey]}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<LoadingIndicator />
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.motd {
|
.msg {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
margin-bottom: 30px;
|
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -95,3 +94,41 @@
|
||||||
.loadMoreButton:hover {
|
.loadMoreButton:hover {
|
||||||
background-color: var(--hoover-color);
|
background-color: var(--hoover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header > * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBoard {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 2px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBoard > div:first-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBoard > div {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaderBoard:hover {
|
||||||
|
background-color: var(--hoover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selfRow {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue