From 4f9a41dea854de5d0e14a6acb06d2c6accd5cebf Mon Sep 17 00:00:00 2001 From: mrfry Date: Thu, 1 Apr 2021 10:08:52 +0200 Subject: [PATCH 1/3] Using new forum apis --- src/constants.json | 2 +- src/defaultStyles.css | 2 +- src/pages/index.js | 333 +++++++++++++++++++++++-------------- src/pages/index.module.css | 16 ++ 4 files changed, 225 insertions(+), 128 deletions(-) diff --git a/src/constants.json b/src/constants.json index 8650745..dec44ec 100644 --- a/src/constants.json +++ b/src/constants.json @@ -1,6 +1,6 @@ { "siteUrl": "https://qmining.frylabs.net/", - "apiUrl": "https://api.frylabs.net/", + "apiUrl": "http://localhost:8080/", "mobileWindowWidth": 700, "maxQuestionsToRender": 250 } diff --git a/src/defaultStyles.css b/src/defaultStyles.css index 6bb2434..c59813c 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -12,7 +12,7 @@ body { font-family: 'Kameron', serif; font-family: 'Overpass Mono', monospace; color: #999999; - /* cursor: default; */ + cursor: default; } li { 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..9b61bc9 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: #191919; + margin-left: 8px; + margin-right: 8px; + margin-bottom: 16px; + margin-top: 16px; + padding: 10px; + + cursor: pointer; +} + +.loadMoreButton:hover { + background-color: var(--hoover-color); +} From 982244484f4ad147d44e310615af91ff3f52bfef Mon Sep 17 00:00:00 2001 From: mrfry Date: Fri, 9 Apr 2021 17:12:00 +0200 Subject: [PATCH 2/3] Css changes (var) --- src/components/composer.module.css | 2 +- src/components/newsEntry.module.css | 2 +- src/data/tabs.json | 4 ++++ src/defaultStyles.css | 5 +++-- src/pages/index.module.css | 2 +- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/composer.module.css b/src/components/composer.module.css index 012e515..7d3139a 100644 --- a/src/components/composer.module.css +++ b/src/components/composer.module.css @@ -40,7 +40,7 @@ .new { text-align: center; - background-color: #191919; + background-color: var(--dark-color); border-radius: 3px; cursor: pointer; margin: 8px; 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/data/tabs.json b/src/data/tabs.json index 4c0077f..caec209 100644 --- a/src/data/tabs.json +++ b/src/data/tabs.json @@ -11,6 +11,10 @@ "href": "/allQuestions", "text": "Kérdések és tárgyak" }, + "userFiles": { + "href": "/userFiles", + "text": "StudyDocs" + }, "contribute": { "href": "/contribute", "text": "Teendők" diff --git a/src/defaultStyles.css b/src/defaultStyles.css index c59813c..3a80a0b 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'); @@ -40,8 +41,8 @@ textarea { input { color: var(--text-color); background-color: var(--background-color); - border: 0px solid #444; - width: 100%; + border: 1px solid #444; + width: 98%; } input:focus { diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9b61bc9..b5f7f9b 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -81,7 +81,7 @@ .loadMoreButton { text-align: center; - background-color: #191919; + background-color: var(--dark-color); margin-left: 8px; margin-right: 8px; margin-bottom: 16px; From f4aeb4b5a303328f9522c9295aa2f8110991fec7 Mon Sep 17 00:00:00 2001 From: mrfry Date: Mon, 12 Apr 2021 20:03:27 +0200 Subject: [PATCH 3/3] Changed constant urls --- src/constants.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants.json b/src/constants.json index dec44ec..8650745 100644 --- a/src/constants.json +++ b/src/constants.json @@ -1,6 +1,6 @@ { "siteUrl": "https://qmining.frylabs.net/", - "apiUrl": "http://localhost:8080/", + "apiUrl": "https://api.frylabs.net/", "mobileWindowWidth": 700, "maxQuestionsToRender": 250 }