Merged with news-to-forum, ranklist viewing user always first

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;

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 {

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

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(
+  useEffect(() => {
-    () => {
     getList()
-    },
+  }, [since])
-    [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}
                 >
-                  <div>{i + 1}</div>
+                  <div>{listItem.rank + 1}</div>
                   <div>{'#' + listItem.userId}</div>
                   {Object.keys(selectOptions).map((listKey) => {
                     const val = listItem[listKey]