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
|
|
@ -7,7 +7,14 @@ import Layout from '../components/layout'
|
|||
import '../defaultStyles.css'
|
||||
import constants from '../constants.json'
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: Infinity,
|
||||
refetchOnWindowFocus: 'always',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const getGlobalProps = () => {
|
||||
return new Promise((resolve) => {
|
||||
|
|
|
|||
|
|
@ -357,7 +357,10 @@ export default function AllQuestions({ router, globalState, setGlobalState }) {
|
|||
)}
|
||||
</>
|
||||
) : fetchingData ? (
|
||||
<LoadingIndicator />
|
||||
<div>
|
||||
Kérdések betöltése, nagy adatbázisoknál ez sokáig tarthat ...
|
||||
<LoadingIndicator />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,12 +12,6 @@ const byDate = (a, b) => {
|
|||
return a.date - b.date
|
||||
}
|
||||
|
||||
function countAllMessages(msgs) {
|
||||
return Object.keys(msgs).reduce((acc, key) => {
|
||||
return acc + msgs[key].length
|
||||
}, 0)
|
||||
}
|
||||
|
||||
function groupPrevMessages(msgs, currUser) {
|
||||
return msgs.reduce((acc, msg) => {
|
||||
const group =
|
||||
|
|
@ -152,7 +146,6 @@ export default class Chat extends React.Component {
|
|||
}
|
||||
|
||||
if (
|
||||
prevState.selectedUser &&
|
||||
prevState.msgs &&
|
||||
prevState.msgs[prevState.selectedUser] &&
|
||||
this.state.msgs &&
|
||||
|
|
@ -164,6 +157,9 @@ export default class Chat extends React.Component {
|
|||
if (prevLatest && newLatest && prevLatest.date !== newLatest.date) {
|
||||
this.scrollToChatBottom()
|
||||
}
|
||||
if (prevState.msgs[prevState.selectedUser].msgs.length === 1) {
|
||||
this.scrollToChatBottom()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
import fetch from 'unfetch'
|
||||
import Head from 'next/head'
|
||||
|
||||
|
|
@ -6,12 +7,85 @@ 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 = 'frontpage'
|
||||
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)
|
||||
})
|
||||
})
|
||||
})
|
||||
return data || []
|
||||
}
|
||||
|
||||
function fetchForum(from) {
|
||||
return new Promise((resolve) => {
|
||||
|
|
@ -34,7 +108,7 @@ function fetchForum(from) {
|
|||
})
|
||||
}
|
||||
|
||||
function addPost(title, content) {
|
||||
function addPost(title, content, file) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(constants.apiUrl + 'addPost', {
|
||||
method: 'POST',
|
||||
|
|
@ -47,13 +121,27 @@ function addPost(title, content) {
|
|||
forumName: frontpageForumName,
|
||||
title: title,
|
||||
content: content,
|
||||
image: file.name,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(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)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -76,16 +164,185 @@ function updateForumPost(forum, postKey, postData) {
|
|||
}, {})
|
||||
}
|
||||
|
||||
export default function Index({ globalData, globalState, setGlobalState }) {
|
||||
const NewsEntryContainer = ({
|
||||
postKey,
|
||||
setNews,
|
||||
news,
|
||||
userId,
|
||||
newsEntryData,
|
||||
onTitleClick,
|
||||
}) => {
|
||||
return (
|
||||
<NewsEntry
|
||||
showUpDownVote
|
||||
onTitleClick={onTitleClick}
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Memes({
|
||||
router,
|
||||
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)
|
||||
const [postInModalKey, setPostInModalKey] = useState()
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const { leaderBoard } = fetchLeaderboard()
|
||||
|
||||
useEffect(() => {
|
||||
if (globalState.news) {
|
||||
const { entries, nextKey } = globalState.news
|
||||
if (globalState.memes) {
|
||||
const { entries, nextKey } = globalState.memes
|
||||
setNextEntryKey(nextKey)
|
||||
setNews(entries)
|
||||
} else {
|
||||
|
|
@ -95,185 +352,78 @@ export default function Index({ globalData, globalState, setGlobalState }) {
|
|||
const { entries, nextKey } = res
|
||||
setNextEntryKey(nextKey)
|
||||
setNews(entries)
|
||||
setGlobalState({ news: res })
|
||||
setGlobalState({ memes: res })
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const postKey = router.query.postKey
|
||||
? decodeURIComponent(router.query.postKey)
|
||||
: ''
|
||||
|
||||
if (postKey) {
|
||||
setPostInModalKey(postKey)
|
||||
}
|
||||
}, [router.query.postKey])
|
||||
|
||||
const renderNews = () => {
|
||||
if (news) {
|
||||
let newsItems = Object.keys(news).map((postKey) => {
|
||||
let newsEntryData = news[postKey]
|
||||
return (
|
||||
<NewsEntry
|
||||
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)
|
||||
}
|
||||
})
|
||||
<NewsEntryContainer
|
||||
onTitleClick={() => {
|
||||
setPostInModalKey(postKey)
|
||||
router.push(
|
||||
`${router.pathname}?postKey=${encodeURIComponent(postKey)}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
}}
|
||||
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}
|
||||
postKey={postKey}
|
||||
setNews={setNews}
|
||||
news={news}
|
||||
userId={userId}
|
||||
newsEntryData={newsEntryData}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.title}>Fórum/Hírek</div>
|
||||
<hr />
|
||||
<Composer
|
||||
onSubmit={(title, content) => {
|
||||
addPost(title, content).then((res) => {
|
||||
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 && (
|
||||
{nextEntryKey ? (
|
||||
<div
|
||||
className={styles.loadMoreButton}
|
||||
onClick={() => {
|
||||
|
|
@ -303,6 +453,17 @@ export default function Index({ globalData, globalState, setGlobalState }) {
|
|||
'Több bejegyzés betöltése'
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
padding: 16,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{'The end'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -311,31 +472,39 @@ export default function Index({ globalData, globalState, setGlobalState }) {
|
|||
}
|
||||
}
|
||||
|
||||
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()}
|
||||
<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.back({ 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;
|
||||
}
|
||||
|
|
|
|||
353
src/pages/main.js
Normal file
353
src/pages/main.js
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
97
src/pages/main.module.css
Normal file
97
src/pages/main.module.css
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
.hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.motd {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
border: 2px dashed var(--text-color);
|
||||
padding-top: 13px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.itemContainer {
|
||||
width: 100%;
|
||||
margin: 20px 5px;
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.newsBody {
|
||||
margin: 0px 5px;
|
||||
padding: 10px 14px;
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
letter-spacing: 2.5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsTitle {
|
||||
color: var(--text-color);
|
||||
font-size: 28px;
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.itemNumber {
|
||||
color: #a7a7a7;
|
||||
margin: 0px 5px;
|
||||
font-size: 22px;
|
||||
padding-top: 12px;
|
||||
padding-left: 13px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.repos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loadMoreButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--dark-color);
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
padding: 10px;
|
||||
|
||||
height: 50px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.loadMoreButton:hover {
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
|
@ -93,7 +93,6 @@ export default function RankList({ globalData, globalState, setGlobalState }) {
|
|||
const [ownEntryOnTop, setOwnEntryOnTop] = useState(false)
|
||||
|
||||
const getList = () => {
|
||||
console.log(globalState)
|
||||
setSum()
|
||||
setRanklist(null)
|
||||
if (globalState[`rankilst_${since}`]) {
|
||||
|
|
@ -106,7 +105,6 @@ export default function RankList({ globalData, globalState, setGlobalState }) {
|
|||
} else {
|
||||
getListFromServer(since)
|
||||
.then((data) => {
|
||||
console.log(since)
|
||||
const { list, sum, selfuserId } = data
|
||||
setRanklist(list || [])
|
||||
setSum(sum)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
|
@ -22,21 +23,10 @@ function fetchSupportedSites() {
|
|||
})
|
||||
}
|
||||
|
||||
export default function Script({ globalState, setGlobalState }) {
|
||||
const [supportedSites, setSupportedSites] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
if (globalState.supportedSites) {
|
||||
setSupportedSites(globalState.supportedSites)
|
||||
} else {
|
||||
fetchSupportedSites().then((res) => {
|
||||
setSupportedSites(res)
|
||||
setGlobalState({
|
||||
supportedSites: res,
|
||||
})
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
export default function Script() {
|
||||
const { data: supportedSites } = useQuery('leaderBoard', () =>
|
||||
fetchSupportedSites()
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue