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": {
|
||||
"href": "/",
|
||||
"text": "Memes"
|
||||
},
|
||||
"main": {
|
||||
"href": "/main",
|
||||
"text": "(Fő)oldal"
|
||||
"text": "Főoldal"
|
||||
},
|
||||
"script": {
|
||||
"href": "/script",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
import fetch from 'unfetch'
|
||||
import Head from 'next/head'
|
||||
|
||||
|
|
@ -7,102 +6,12 @@ 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 './index.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)
|
||||
})
|
||||
})
|
||||
}
|
||||
const frontpageForumName = 'frontpage'
|
||||
|
||||
function fetchForum(from) {
|
||||
return new Promise((resolve) => {
|
||||
|
|
@ -125,7 +34,7 @@ function fetchForum(from) {
|
|||
})
|
||||
}
|
||||
|
||||
function addPost(title, content, file) {
|
||||
function addPost(title, content) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(constants.apiUrl + 'addPost', {
|
||||
method: 'POST',
|
||||
|
|
@ -138,29 +47,15 @@ function addPost(title, content, file) {
|
|||
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) {
|
||||
|
|
@ -181,51 +76,37 @@ function updateForumPost(forum, postKey, postData) {
|
|||
}, {})
|
||||
}
|
||||
|
||||
const NewsEntryContainer = ({
|
||||
postKey,
|
||||
setNews,
|
||||
news,
|
||||
userId,
|
||||
newsEntryData,
|
||||
onTitleClick,
|
||||
}) => {
|
||||
const [error, setError] = useState(false)
|
||||
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 (!newsEntryData && !error) {
|
||||
fetchEntry(postKey)
|
||||
.then((res) => {
|
||||
const { success, entry, msg } = res
|
||||
if (success) {
|
||||
setNews({ [postKey]: entry, ...news })
|
||||
if (globalState.news) {
|
||||
const { entries, nextKey } = globalState.news
|
||||
setNextEntryKey(nextKey)
|
||||
setNews(entries)
|
||||
} else {
|
||||
alert(msg)
|
||||
setError(true)
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
setError(true)
|
||||
setFetchingForum(true)
|
||||
fetchForum().then((res) => {
|
||||
setFetchingForum(false)
|
||||
const { entries, nextKey } = res
|
||||
setNextEntryKey(nextKey)
|
||||
setNews(entries)
|
||||
setGlobalState({ news: res })
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (!newsEntryData) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Lil fuckup</div>
|
||||
}
|
||||
|
||||
const renderNews = () => {
|
||||
if (news) {
|
||||
let newsItems = Object.keys(news).map((postKey) => {
|
||||
let newsEntryData = news[postKey]
|
||||
return (
|
||||
<NewsEntry
|
||||
showUpDownVote
|
||||
onTitleClick={onTitleClick}
|
||||
uid={userId}
|
||||
key={postKey}
|
||||
newsKey={postKey}
|
||||
newsItem={newsEntryData}
|
||||
hideAdminIndicator
|
||||
onPostDelete={() => {
|
||||
fetch(constants.apiUrl + 'rmPost', {
|
||||
method: 'POST',
|
||||
|
|
@ -368,106 +249,30 @@ const NewsEntryContainer = ({
|
|||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
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 }
|
||||
)
|
||||
}}
|
||||
uid={userId}
|
||||
key={postKey}
|
||||
postKey={postKey}
|
||||
setNews={setNews}
|
||||
news={news}
|
||||
userId={userId}
|
||||
newsEntryData={newsEntryData}
|
||||
newsKey={postKey}
|
||||
newsItem={newsEntryData}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.title}>Fórum/Hírek</div>
|
||||
<hr />
|
||||
<Composer
|
||||
allowFile
|
||||
fileOnly
|
||||
onSubmit={(title, content, file) => {
|
||||
if (!file) return
|
||||
setIsUploading(true)
|
||||
addPost(title, content, file).then((res) => {
|
||||
onSubmit={(title, content) => {
|
||||
addPost(title, content).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
|
||||
|
|
@ -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 (
|
||||
<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>
|
||||
{renderMotd()}
|
||||
<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%;
|
||||
}
|
||||
|
||||
.msg {
|
||||
.motd {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -94,41 +95,3 @@
|
|||
.loadMoreButton:hover {
|
||||
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%;
|
||||
}
|
||||
|
||||
.motd {
|
||||
.msg {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -95,3 +94,41 @@
|
|||
.loadMoreButton:hover {
|
||||
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