albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merged with news-to-forum, ranklist viewing user always first

Browse source
This commit is contained in:
mrfry 2021-04-13 14:17:30 +02:00
commit 6865b07bf8
5 changed files with 246 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/newsEntry.module.css
View file

@ -61,7 +61,7 @@
} }
.newsRoot { .newsRoot {
background-color: #191919; background-color: var(--dark-color);
margin-left: 8px; margin-left: 8px;
margin-right: 8px; margin-right: 8px;
margin-bottom: 16px; margin-bottom: 16px;

7
src/defaultStyles.css
View file

@ -4,6 +4,7 @@
--bright-color: #f2f2f2; --bright-color: #f2f2f2;
--background-color: #222426; --background-color: #222426;
--hoover-color: #393939; --hoover-color: #393939;
--dark-color: #191919;
} }
@import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
@ -44,6 +45,12 @@ input {
border-radius: 5px; border-radius: 5px;
width: 80%; width: 80%;
font-family: inherit; font-family: inherit;
border: 1px solid #444;
width: 98%;
}
input:focus {
border: 0px solid #444;
} }
.link { .link {

333
src/pages/index.js
View file

@ -10,11 +10,21 @@ import Composer from '../components/composer'
import styles from './index.module.css' import styles from './index.module.css'
import constants from '../constants.json' import constants from '../constants.json'
function fetchNews() { const forumPostPerPage = 2
const frontpageForumName = 'frontpage'
function fetchForum(from) {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(`${constants.apiUrl}news.json`, { fetch(
credentials: 'include', `${
}) constants.apiUrl
}forumEntries?forumName=${frontpageForumName}&getContent=true${
from ? `&from=${from}` : ''
}&count=${forumPostPerPage}`,
{
credentials: 'include',
}
)
.then((resp) => { .then((resp) => {
return resp.json() return resp.json()
}) })
@ -34,6 +44,7 @@ function addPost(title, content) {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
forumName: frontpageForumName,
title: title, title: title,
content: content, content: content,
}), }),
@ -66,7 +77,6 @@ function postFeedback(content, file) {
] ]
if (file) { if (file) {
console.log('FIEEEEEEEEEELE')
const formData = new FormData() // eslint-disable-line const formData = new FormData() // eslint-disable-line
formData.append('file', file) formData.append('file', file)
@ -90,141 +100,193 @@ function postFeedback(content, file) {
}) })
} }
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 Index({ globalData }) { export default function Index({ globalData }) {
const userId = globalData.userId const userId = globalData.userId
const motd = globalData.motd const motd = globalData.motd
const [news, setNews] = useState(null) const [news, setNews] = useState(null)
// const userSpecificMotd = props.globalData.userSpecificMotd const [nextEntryKey, setNextEntryKey] = useState()
useEffect(() => { useEffect(() => {
console.info('Fetching news.json') fetchForum().then((res) => {
fetchNews().then((res) => { const { entries, nextKey } = res
setNews(res) setNextEntryKey(nextKey)
setNews(entries)
}) })
}, []) }, [])
const renderNews = () => { const renderNews = () => {
if (news) { if (news) {
let newsItems = Object.keys(news) let newsItems = Object.keys(news).map((postKey) => {
.map((key) => { let newsEntryData = news[postKey]
let newsEntryData = news[key] return (
return ( <NewsEntry
<NewsEntry onPostDelete={() => {
onPostDelete={() => { fetch(constants.apiUrl + 'rmPost', {
fetch(constants.apiUrl + 'rmPost', { method: 'POST',
method: 'POST', credentials: 'include',
credentials: 'include', headers: {
headers: { Accept: 'application/json',
Accept: 'application/json', 'Content-Type': 'application/json',
'Content-Type': 'application/json', },
}, body: JSON.stringify({
body: JSON.stringify({ forumName: frontpageForumName,
newsKey: key, postKey: postKey,
}), }),
})
.then((res) => {
return res.json()
}) })
.then((res) => { .then((res) => {
return res.json() const { success, msg } = res
}) if (success) {
.then((res) => { setNews(
setNews(res.news) Object.keys(news).reduce((acc, key) => {
}) const entry = news[key]
}} if (key !== postKey) {
onNewsReact={({ reaction, isDelete }) => { acc = {
fetch(constants.apiUrl + 'react', { ...acc,
method: 'POST', [key]: entry,
credentials: 'include', }
headers: { }
Accept: 'application/json', return acc
'Content-Type': 'application/json', }, {})
}, )
body: JSON.stringify({ } else {
reaction: reaction, alert(msg)
newsKey: key, }
isDelete: isDelete,
}),
}) })
.then((res) => { }}
return res.json() onNewsReact={({ reaction, isDelete }) => {
}) fetch(constants.apiUrl + 'react', {
.then((res) => { method: 'POST',
console.log(res) credentials: 'include',
setNews(res.news) headers: {
}) Accept: 'application/json',
}} 'Content-Type': 'application/json',
onCommentReact={({ path, reaction, isDelete }) => { },
fetch(constants.apiUrl + 'react', { body: JSON.stringify({
method: 'POST', reaction: reaction,
credentials: 'include', postKey: postKey,
headers: { isDelete: isDelete,
Accept: 'application/json', forumName: frontpageForumName,
'Content-Type': 'application/json', }),
}, })
body: JSON.stringify({ .then((res) => {
type: 'reaction', return res.json()
newsKey: key,
path: path,
reaction: reaction,
isDelete: isDelete,
}),
}) })
.then((res) => { .then((res) => {
return res.json() setNews(res.news)
})
.then((res) => {
setNews(res.news)
})
}}
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,
newsKey: key,
}),
}) })
.then((res) => { }}
return res.json() onCommentReact={({ path, reaction, isDelete }) => {
}) fetch(constants.apiUrl + 'react', {
.then((res) => { method: 'POST',
setNews(res.news) credentials: 'include',
}) headers: {
}} Accept: 'application/json',
onComment={(path, content) => { 'Content-Type': 'application/json',
fetch(constants.apiUrl + 'comment', { },
method: 'POST', body: JSON.stringify({
credentials: 'include', type: 'reaction',
headers: { postKey: postKey,
Accept: 'application/json', path: path,
'Content-Type': 'application/json', reaction: reaction,
}, isDelete: isDelete,
body: JSON.stringify({ forumName: frontpageForumName,
type: 'add', }),
path: path, })
content: content, .then((res) => {
newsKey: key, return res.json()
}),
}) })
.then((res) => { .then((res) => {
return res.json() const { success, postData, msg } = res
}) if (success) {
.then((res) => { setNews(updateForumPost(news, postKey, postData))
setNews(res.news) } else {
}) alert(msg)
}} }
uid={userId} })
key={key} }}
newsKey={key} onDelete={(path) => {
newsItem={newsEntryData} fetch(constants.apiUrl + 'comment', {
/> method: 'POST',
) credentials: 'include',
}) headers: {
.reverse() 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 ( return (
<div> <div>
@ -236,7 +298,6 @@ export default function Index({ globalData }) {
alert('Üres a tartalom!') alert('Üres a tartalom!')
return return
} }
console.log(type, title, content, file)
if (type === 'private') { if (type === 'private') {
postFeedback(content, file).then((res) => { postFeedback(content, file).then((res) => {
console.log(res) console.log(res)
@ -248,12 +309,32 @@ export default function Index({ globalData }) {
return return
} }
addPost(title, content).then((res) => { addPost(title, content).then((res) => {
setNews(res.news) const { success, newPostKey, newEntry, msg } = res
if (success) {
setNews({ [newPostKey]: newEntry, ...news })
} else {
alert(msg)
}
}) })
} }
}} }}
/> />
<div>{newsItems}</div> <div>{newsItems}</div>
{nextEntryKey && (
<div
className={styles.loadMoreButton}
onClick={() => {
fetchForum(nextEntryKey).then((res) => {
console.log(res)
const { entries, nextKey } = res
setNextEntryKey(nextKey)
setNews({ ...news, ...entries })
})
}}
>
Több bejegyzés betöltése
</div>
)}
</div> </div>
) )
} else { } else {

16
src/pages/index.module.css
View file

@ -78,3 +78,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.loadMoreButton {
text-align: center;
background-color: var(--dark-color);
margin-left: 8px;
margin-right: 8px;
margin-bottom: 16px;
margin-top: 16px;
padding: 10px;
cursor: pointer;
}
.loadMoreButton:hover {
background-color: var(--hoover-color);
}

24
src/pages/ranklist.js
View file

@ -85,7 +85,8 @@ function sortDataBy(data, key) {
}) })
} }
export default function RankList() { export default function RankList({ globalData }) {
const userId = globalData.userId
const [ranklist, setRanklist] = useState(null) const [ranklist, setRanklist] = useState(null)
const [selfUserId, setSelfUserId] = useState('...') const [selfUserId, setSelfUserId] = useState('...')
const [key, setKey] = useState('newQuestions') const [key, setKey] = useState('newQuestions')
@ -112,14 +113,19 @@ export default function RankList() {
getList() getList()
}, []) }, [])
useEffect( useEffect(() => {
() => { getList()
getList() }, [since])
},
[since]
)
const list = ranklist && sortDataBy(ranklist, key) const list =
ranklist &&
sortDataBy(ranklist, key).reduce((acc, entry, i) => {
if (entry.userId === userId) {
return [{ rank: i, ...entry }, ...acc]
} else {
return [...acc, { rank: i, ...entry }]
}
}, [])
const updateSince = (keyword) => { const updateSince = (keyword) => {
setSince(keyword) setSince(keyword)
@ -218,7 +224,7 @@ export default function RankList() {
styles.selfRow}`} styles.selfRow}`}
key={i} key={i}
> >
<div>{i + 1}</div> <div>{listItem.rank + 1}</div>
<div>{'#' + listItem.userId}</div> <div>{'#' + listItem.userId}</div>
{Object.keys(selectOptions).map((listKey) => { {Object.keys(selectOptions).map((listKey) => {
const val = listItem[listKey] const val = listItem[listKey]