qmining-page/src/pages/index.js

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 './index.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 Index({ 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 (
          <NewsEntry
            onPostDelete={() => {
              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 (
        <div>
          <div className={styles.title}>Fórum/Hírek</div>
          <hr />
          <Composer
            onSubmit={(title, content) => {
              addPost(title, content).then((res) => {
                const { success, newPostKey, newEntry, msg } = res
                if (success) {
                  setNews({ [newPostKey]: newEntry, ...news })
                } else {
                  alert(msg)
                }
              })
            }}
          />
          <div>{newsItems}</div>
          {nextEntryKey && (
            <div
              className={styles.loadMoreButton}
              onClick={() => {
                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 ? (
                <LoadingIndicator />
              ) : (
                'Több bejegyzés betöltése'
              )}
            </div>
          )}
        </div>
      )
    } else {
      return <LoadingIndicator />
    }
  }

  const renderMotd = () => {
    if (motd) {
      return (
        <div className={styles.motd}>
          <div className={styles.title}>MOTD</div>
          {motd ? (
            <div dangerouslySetInnerHTML={{ __html: motd }} />
          ) : (
            <div>...</div>
          )}
        </div>
      )
    } else {
      return null
    }
  }

  return (
    <div>
      <Head>
        <title>Qmining | Frylabs.net</title>
      </Head>
      {renderMotd()}
      <Sleep />
      {renderNews()}
    </div>
  )
}