diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css index d5214fd..09f57c2 100644 --- a/src/components/newsEntry.module.css +++ b/src/components/newsEntry.module.css @@ -61,7 +61,7 @@ } .newsRoot { - background-color: #191919; + background-color: var(--dark-color); margin-left: 8px; margin-right: 8px; margin-bottom: 16px; diff --git a/src/defaultStyles.css b/src/defaultStyles.css index 600af5c..2d08488 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -4,6 +4,7 @@ --bright-color: #f2f2f2; --background-color: #222426; --hoover-color: #393939; + --dark-color: #191919; } @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; width: 80%; font-family: inherit; + border: 1px solid #444; + width: 98%; +} + +input:focus { + border: 0px solid #444; } .link { diff --git a/src/pages/index.js b/src/pages/index.js index fe4e635..da93824 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 ( - { - 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 ( + { + 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 (
@@ -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) + } }) } }} />
{newsItems}
+ {nextEntryKey && ( +
{ + fetchForum(nextEntryKey).then((res) => { + console.log(res) + const { entries, nextKey } = res + setNextEntryKey(nextKey) + setNews({ ...news, ...entries }) + }) + }} + > + Több bejegyzés betöltése +
+ )}
) } else { diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 3a08d8e..b5f7f9b 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -78,3 +78,19 @@ display: flex; 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); +} diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js index 8cc247a..83f615e 100644 --- a/src/pages/ranklist.js +++ b/src/pages/ranklist.js @@ -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 [selfUserId, setSelfUserId] = useState('...') const [key, setKey] = useState('newQuestions') @@ -112,14 +113,19 @@ export default function RankList() { getList() }, []) - useEffect( - () => { - getList() - }, - [since] - ) + useEffect(() => { + getList() + }, [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) => { setSince(keyword) @@ -218,7 +224,7 @@ export default function RankList() { styles.selfRow}`} key={i} > -
{i + 1}
+
{listItem.rank + 1}
{'#' + listItem.userId}
{Object.keys(selectOptions).map((listKey) => { const val = listItem[listKey]