Using new forum apis

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
 }

src/defaultStyles.css

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

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`, {
+    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,24 +100,42 @@ 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')
+    fetchForum().then((res) => {
-    fetchNews().then((res) => {
+      const { entries, nextKey } = res
-      setNews(res)
+      setNextEntryKey(nextKey)
+      setNews(entries)
     })
   }, [])
 
   const renderNews = () => {
     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 (
           <NewsEntry
             onPostDelete={() => {
@@ -119,14 +147,31 @@ export default function Index({ globalData }) {
                   'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    newsKey: key,
+                  forumName: frontpageForumName,
+                  postKey: postKey,
                 }),
               })
                 .then((res) => {
                   return res.json()
                 })
                 .then((res) => {
-                    setNews(res.news)
+                  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 }) => {
@@ -139,15 +184,15 @@ export default function Index({ globalData }) {
                 },
                 body: JSON.stringify({
                   reaction: reaction,
-                    newsKey: key,
+                  postKey: postKey,
                   isDelete: isDelete,
+                  forumName: frontpageForumName,
                 }),
               })
                 .then((res) => {
                   return res.json()
                 })
                 .then((res) => {
-                    console.log(res)
                   setNews(res.news)
                 })
             }}
@@ -161,17 +206,23 @@ export default function Index({ globalData }) {
                 },
                 body: JSON.stringify({
                   type: 'reaction',
-                    newsKey: key,
+                  postKey: postKey,
                   path: path,
                   reaction: reaction,
                   isDelete: isDelete,
+                  forumName: frontpageForumName,
                 }),
               })
                 .then((res) => {
                   return res.json()
                 })
                 .then((res) => {
-                    setNews(res.news)
+                  const { success, postData, msg } = res
+                  if (success) {
+                    setNews(updateForumPost(news, postKey, postData))
+                  } else {
+                    alert(msg)
+                  }
                 })
             }}
             onDelete={(path) => {
@@ -185,14 +236,20 @@ export default function Index({ globalData }) {
                 body: JSON.stringify({
                   type: 'delete',
                   path: path,
-                    newsKey: key,
+                  postKey: postKey,
+                  forumName: frontpageForumName,
                 }),
               })
                 .then((res) => {
                   return res.json()
                 })
                 .then((res) => {
-                    setNews(res.news)
+                  const { success, postData, msg } = res
+                  if (success) {
+                    setNews(updateForumPost(news, postKey, postData))
+                  } else {
+                    alert(msg)
+                  }
                 })
             }}
             onComment={(path, content) => {
@@ -207,24 +264,29 @@ export default function Index({ globalData }) {
                   type: 'add',
                   path: path,
                   content: content,
-                    newsKey: key,
+                  postKey: postKey,
+                  forumName: frontpageForumName,
                 }),
               })
                 .then((res) => {
                   return res.json()
                 })
                 .then((res) => {
-                    setNews(res.news)
+                  const { success, postData, msg } = res
+                  if (success) {
+                    setNews(updateForumPost(news, postKey, postData))
+                  } else {
+                    alert(msg)
+                  }
                 })
             }}
             uid={userId}
-              key={key}
+            key={postKey}
-              newsKey={key}
+            newsKey={postKey}
             newsItem={newsEntryData}
           />
         )
       })
-        .reverse()
 
       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 {

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);
+}