From e65739a64a15a86dbde7aa74647fe6c7b5ec8254 Mon Sep 17 00:00:00 2001 From: mrfry Date: Sat, 9 Apr 2022 10:35:50 +0200 Subject: [PATCH] Removed memes --- src/data/tabs.json | 6 +- src/pages/index.js | 559 ++++++----------- src/pages/index.module.css | 41 +- src/pages/main.js | 353 ----------- src/pages/memes.js | 560 ++++++++++++++++++ .../{main.module.css => memes.module.css} | 41 +- 6 files changed, 780 insertions(+), 780 deletions(-) delete mode 100644 src/pages/main.js create mode 100644 src/pages/memes.js rename src/pages/{main.module.css => memes.module.css} (75%) diff --git a/src/data/tabs.json b/src/data/tabs.json index 621f709..4dcf602 100644 --- a/src/data/tabs.json +++ b/src/data/tabs.json @@ -1,11 +1,7 @@ { "index": { "href": "/", - "text": "Memes" - }, - "main": { - "href": "/main", - "text": "(Fő)oldal" + "text": "Főoldal" }, "script": { "href": "/script", diff --git a/src/pages/index.js b/src/pages/index.js index 3414532..25c2a54 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import { useQuery } from 'react-query' import fetch from 'unfetch' import Head from 'next/head' @@ -7,102 +6,12 @@ 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 = 'memes' - -const LeaderBoard = ({ leaderBoard, userId }) => { - if (!leaderBoard) return - return ( -
-
Ranglista
-
-
-
User #
-
Up
-
Down
-
Sum
-
- {leaderBoard && - leaderBoard.map((x, i) => { - if (i > 9) return null - const { up, down, user, sum } = x - return ( -
-
{`${i + 1}.`}
-
#{user}
-
{up}
-
{down}
-
{sum}
-
- ) - })} -
- ) -} - -const Header = ({ leaderBoard, userId }) => { - return ( -
-
- Mivel mostanában elég népszerű lett az oldal, ezért egy új rész lett - hozzáadva: Memes -

Ide lehet posztolni akármilyen vicces tartalmat, és upvoteolni / - downvoteolni lehet a többiek által feltöltötteket -

- Have fun! :) -

- -
- ) -} - -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) - }) - }) - }, { staleTime: Infinity }) - return data || [] -} - -function fetchEntry(postKey) { - return new Promise((resolve) => { - fetch( - `${constants.apiUrl}forumEntry?forumName=${frontpageForumName}&postKey=${postKey}`, - { - credentials: 'include', - } - ) - .then((resp) => { - return resp.json() - }) - .then((res) => { - resolve(res) - }) - }) -} +const frontpageForumName = 'frontpage' function fetchForum(from) { return new Promise((resolve) => { @@ -125,7 +34,7 @@ function fetchForum(from) { }) } -function addPost(title, content, file) { +function addPost(title, content) { return new Promise((resolve) => { fetch(constants.apiUrl + 'addPost', { method: 'POST', @@ -138,27 +47,13 @@ function addPost(title, content, file) { forumName: frontpageForumName, title: title, content: content, - image: file.name, }), }) .then((res) => { return res.json() }) .then((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) - }) + resolve(res) }) }) } @@ -181,214 +76,16 @@ function updateForumPost(forum, postKey, postData) { }, {}) } -const NewsEntryContainer = ({ - postKey, - setNews, - news, - userId, - newsEntryData, - onTitleClick, -}) => { - const [error, setError] = useState(false) - - useEffect(() => { - if (!newsEntryData && !error) { - fetchEntry(postKey) - .then((res) => { - const { success, entry, msg } = res - if (success) { - setNews({ [postKey]: entry, ...news }) - } else { - alert(msg) - setError(true) - } - }) - .catch((e) => { - console.error(e) - setError(true) - }) - } - }, []) - - if (!newsEntryData) { - return - } - - if (error) { - return
Lil fuckup
- } - - 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) => { - 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) - } - }) - }} - /> - ) -} - -export default function Memes({ - router, - globalData, - globalState, - setGlobalState, -}) { +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) - const [postInModalKey, setPostInModalKey] = useState() - const [isUploading, setIsUploading] = useState(false) - const { leaderBoard } = fetchLeaderboard() useEffect(() => { - if (globalState.memes) { - const { entries, nextKey } = globalState.memes + if (globalState.news) { + const { entries, nextKey } = globalState.news setNextEntryKey(nextKey) setNews(entries) } else { @@ -398,76 +95,184 @@ export default function Memes({ const { entries, nextKey } = res setNextEntryKey(nextKey) setNews(entries) - setGlobalState({ memes: res }) + setGlobalState({ news: res }) }) } }, []) - useEffect(() => { - const postKey = router.query.postKey - ? decodeURIComponent(router.query.postKey) - : '' - - if (postKey) { - setPostInModalKey(postKey) - } - }, [router.query.postKey]) - const renderNews = () => { if (news) { - const newsItems = Object.keys(news).map((postKey) => { - const newsEntryData = news[postKey] + let newsItems = Object.keys(news).map((postKey) => { + let newsEntryData = news[postKey] return ( - { - setPostInModalKey(postKey) - router.replace( - `${router.pathname}?postKey=${encodeURIComponent(postKey)}`, - undefined, - { shallow: true } - ) + { + 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} - postKey={postKey} - setNews={setNews} - news={news} - userId={userId} - newsEntryData={newsEntryData} + newsKey={postKey} + newsItem={newsEntryData} /> ) }) return (
+
Fórum/Hírek
+
{ - if (!file) return - setIsUploading(true) - addPost(title, content, file).then((res) => { + onSubmit={(title, content) => { + addPost(title, content).then((res) => { const { success, newPostKey, newEntry, msg } = res if (success) { setNews({ [newPostKey]: newEntry, ...news }) } else { alert(msg) } - setIsUploading(false) }) }} /> - {isUploading && ( -
- {'Feltöltés ...'} - -
- )}
{newsItems}
{nextEntryKey ? (
{ + if (motd) { + return ( +
+
MOTD
+ {motd ? ( +
+ ) : ( +
...
+ )} +
+ ) + } else { + return null + } + } + return (
Qmining | Frylabs.net -
-
- { - 'A "Memes" rész Április 8-ig lesz elérhető, vagy ha népszerű lesz, akkor véglegesen bekerülhet a menübe.' - } -
+ {renderMotd()} {renderNews()} - {postInModalKey && ( - { - setPostInModalKey(undefined) - router.replace(router.pathname, undefined, { shallow: true }) - }} - > - {news ? ( - - ) : ( - - )} - - )}
) } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index f0a3624..af24549 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -2,7 +2,7 @@ width: 100%; } -.msg { +.motd { text-align: center; font-size: 20px; @@ -12,6 +12,7 @@ padding-left: 5px; padding-right: 5px; margin-top: 18px; + margin-bottom: 30px; margin-left: 5px; margin-right: 5px; } @@ -94,41 +95,3 @@ .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; -} diff --git a/src/pages/main.js b/src/pages/main.js deleted file mode 100644 index fa0a482..0000000 --- a/src/pages/main.js +++ /dev/null @@ -1,353 +0,0 @@ -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 ( - { - 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 ( -
-
Fórum/Hírek
-
- { - addPost(title, content).then((res) => { - const { success, newPostKey, newEntry, msg } = res - if (success) { - setNews({ [newPostKey]: newEntry, ...news }) - } else { - alert(msg) - } - }) - }} - /> -
{newsItems}
- {nextEntryKey ? ( -
{ - 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 ? ( - - ) : ( - 'Több bejegyzés betöltése' - )} -
- ) : ( -
- {'The end'} -
- )} -
- ) - } else { - return - } - } - - const renderMotd = () => { - if (motd) { - return ( -
-
MOTD
- {motd ? ( -
- ) : ( -
...
- )} -
- ) - } else { - return null - } - } - - return ( -
- - Qmining | Frylabs.net - - {renderMotd()} - - {renderNews()} -
- ) -} diff --git a/src/pages/memes.js b/src/pages/memes.js new file mode 100644 index 0000000..8cc41e8 --- /dev/null +++ b/src/pages/memes.js @@ -0,0 +1,560 @@ +import React, { useState, useEffect } from 'react' +import { useQuery } from 'react-query' +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 Modal from '../components/modal' + +import styles from './memes.module.css' +import constants from '../constants.json' + +const forumPostPerPage = 5 +const frontpageForumName = 'memes' + +const LeaderBoard = ({ leaderBoard, userId }) => { + if (!leaderBoard) return + return ( +
+
Ranglista
+
+
+
User #
+
Up
+
Down
+
Sum
+
+ {leaderBoard && + leaderBoard.map((x, i) => { + if (i > 9) return null + const { up, down, user, sum } = x + return ( +
+
{`${i + 1}.`}
+
#{user}
+
{up}
+
{down}
+
{sum}
+
+ ) + })} +
+ ) +} + +const Header = ({ leaderBoard, userId }) => { + return ( +
+
+ Mivel mostanában elég népszerű lett az oldal, ezért egy új rész lett + hozzáadva: Memes +

Ide lehet posztolni akármilyen vicces tartalmat, és upvoteolni / + downvoteolni lehet a többiek által feltöltötteket +

+ Have fun! :) +

+ +
+ ) +} + +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) + }) + }) + }, + { staleTime: Infinity } + ) + return data || [] +} + +function fetchEntry(postKey) { + return new Promise((resolve) => { + fetch( + `${constants.apiUrl}forumEntry?forumName=${frontpageForumName}&postKey=${postKey}`, + { + credentials: 'include', + } + ) + .then((resp) => { + return resp.json() + }) + .then((res) => { + resolve(res) + }) + }) +} + +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, file) { + 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, + image: file.name, + }), + }) + .then((res) => { + return res.json() + }) + .then((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) + }) + }) + }) +} + +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 + }, {}) +} + +const NewsEntryContainer = ({ + postKey, + setNews, + news, + userId, + newsEntryData, + onTitleClick, +}) => { + const [error, setError] = useState(false) + + useEffect(() => { + if (!newsEntryData && !error) { + fetchEntry(postKey) + .then((res) => { + const { success, entry, msg } = res + if (success) { + setNews({ [postKey]: entry, ...news }) + } else { + alert(msg) + setError(true) + } + }) + .catch((e) => { + console.error(e) + setError(true) + }) + } + }, []) + + if (!newsEntryData) { + return + } + + if (error) { + return
Lil fuckup
+ } + + 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) => { + 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) + } + }) + }} + /> + ) +} + +export default function Memes({ + router, + globalData, + globalState, + setGlobalState, +}) { + const userId = globalData.userId + 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.memes) { + const { entries, nextKey } = globalState.memes + setNextEntryKey(nextKey) + setNews(entries) + } else { + setFetchingForum(true) + fetchForum().then((res) => { + setFetchingForum(false) + const { entries, nextKey } = res + setNextEntryKey(nextKey) + setNews(entries) + setGlobalState({ memes: res }) + }) + } + }, []) + + useEffect(() => { + const postKey = router.query.postKey + ? decodeURIComponent(router.query.postKey) + : '' + + if (postKey) { + setPostInModalKey(postKey) + } + }, [router.query.postKey]) + + const renderNews = () => { + if (news) { + const newsItems = Object.keys(news).map((postKey) => { + const newsEntryData = news[postKey] + return ( + { + setPostInModalKey(postKey) + router.replace( + `${router.pathname}?postKey=${encodeURIComponent(postKey)}`, + undefined, + { shallow: true } + ) + }} + key={postKey} + postKey={postKey} + setNews={setNews} + news={news} + userId={userId} + newsEntryData={newsEntryData} + /> + ) + }) + + return ( +
+ { + 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 && ( +
+ {'Feltöltés ...'} + +
+ )} +
{newsItems}
+ {nextEntryKey ? ( +
{ + 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 ? ( + + ) : ( + 'Több bejegyzés betöltése' + )} +
+ ) : ( +
+ {'The end'} +
+ )} +
+ ) + } else { + return + } + } + + return ( +
+ + Qmining | Frylabs.net + +
+
+ { + 'A "Memes" rész Április 8-ig lesz elérhető, vagy ha népszerű lesz, akkor véglegesen bekerülhet a menübe.' + } +
+ + {renderNews()} + {postInModalKey && ( + { + setPostInModalKey(undefined) + router.replace(router.pathname, undefined, { shallow: true }) + }} + > + {news ? ( + + ) : ( + + )} + + )} +
+ ) +} diff --git a/src/pages/main.module.css b/src/pages/memes.module.css similarity index 75% rename from src/pages/main.module.css rename to src/pages/memes.module.css index af24549..f0a3624 100644 --- a/src/pages/main.module.css +++ b/src/pages/memes.module.css @@ -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; +}