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

Using new forum apis

Browse source
This commit is contained in:
mrfry 2021-04-01 10:08:52 +02:00
parent 47a2227f87
commit 4f9a41dea8
4 changed files with 225 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/constants.json
View file

@ -1,6 +1,6 @@
{
"siteUrl": "https://qmining.frylabs.net/",
"apiUrl": "https://api.frylabs.net/",
"apiUrl": "http://localhost:8080/",
"mobileWindowWidth": 700,
"maxQuestionsToRender": 250
}

2
src/defaultStyles.css
View file

@ -12,7 +12,7 @@ body {
font-family: 'Kameron', serif;
font-family: 'Overpass Mono', monospace;
color: #999999;
/* cursor: default; */
cursor: default;
}
li {

333
src/pages/index.js
View file

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

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

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