Changed button layout on main page /IRC button removed temporarily/

Remade design on passwordgen page

src/pages/index.js

@@ -5,6 +5,8 @@ import Link from 'next/link'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'
+import NewsEntry from '../components/newsEntry'
+import Composer from '../components/composer'
 import DbSelector from '../components/dbSelector.js'
 
 import styles from './index.module.css'
@@ -25,83 +27,251 @@ const links = {
   },
 }
 
-export default function Index(props) {
-  const [news, setNews] = useState(null)
-  const [allQrSelector, setAllQrSelector] = useState(null)
-  const motd = props.globalData.motd
-  // const userSpecificMotd = props.globalData.userSpecificMotd
-
-  useEffect(() => {
-    console.info('Fetching news.json')
+function fetchNews() {
+  return new Promise((resolve) => {
     fetch(`${constants.apiUrl}news.json`, {
       credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
       })
-      .then((data) => {
-        setNews(data)
+      .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({
+        title: title,
+        content: content,
+      }),
+    })
+      .then((res) => {
+        return res.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
+function postFeedback(content, file) {
+  return new Promise((resolve) => {
+    const promises = [
+      fetch(constants.apiUrl + 'postfeedback', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: content,
+        }),
+      }).then((res) => {
+        return res.json()
+      }),
+    ]
+
+    if (file) {
+      console.log('FIEEEEEEEEEELE')
+      const formData = new FormData() // eslint-disable-line
+      formData.append('file', file)
+
+      promises.push(
+        fetch(constants.apiUrl + 'postfeedbackfile', {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+          },
+          body: formData,
+        }).then((res) => {
+          return res.json()
+        })
+      )
+    }
+
+    Promise.all(promises).then((res) => {
+      resolve(res)
+    })
+  })
+}
+
+export default function Index({ globalData }) {
+  const userId = globalData.userId
+  const motd = globalData.motd
+  const [news, setNews] = useState(null)
+  const [allQrSelector, setAllQrSelector] = useState(null)
+  // const userSpecificMotd = props.globalData.userSpecificMotd
+
+  useEffect(() => {
+    console.info('Fetching news.json')
+    fetchNews().then((res) => {
+      setNews(res)
+    })
   }, [])
 
-  const renderQAItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.question}
-          dangerouslySetInnerHTML={{ __html: newsItem.q }}
-        />
-        <div
-          className={styles.answer}
-          dangerouslySetInnerHTML={{ __html: newsItem.a }}
-        />
-      </div>
-    )
-  }
-
-  const renderNewsItem = (newsItem, key) => {
-    return (
-      <div key={key} className={styles.itemContainer}>
-        <div className={styles.itemNumber}>{key} :</div>
-        <div
-          className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: newsItem.title }}
-        />
-        <div
-          className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: newsItem.body }}
-        />
-      </div>
-    )
-  }
-
   const renderNews = () => {
     if (news) {
-      let questions = Object.keys(news)
+      let newsItems = Object.keys(news)
         .map((key) => {
-          let newsItem = news[key]
-          if (newsItem.q) {
-            return (
-              <div key={key}>
-                {renderQAItem(newsItem, key)}
-              </div>
-            )
-          } else {
-            return (
-              <div key={key}>
-                {renderNewsItem(newsItem, key)}
-              </div>
-            )
-          }
+          let newsEntryData = news[key]
+          return (
+            <NewsEntry
+              onPostDelete={() => {
+                fetch(constants.apiUrl + 'rmPost', {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    newsKey: key,
+                  }),
+                })
+                  .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) => {
+                    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,
+                  }),
+                })
+                  .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) => {
+                    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,
+                  }),
+                })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
+                  })
+              }}
+              uid={userId}
+              key={key}
+              newsKey={key}
+              newsItem={newsEntryData}
+            />
+          )
         })
         .reverse()
 
       return (
         <div>
-          <div className={styles.title}>Hírek</div>
-            <hr />
-          <div className={styles.questionscontainer}>{questions}</div>
+          <div className={styles.title}>Fórum</div>
+          <hr />
+          <Composer
+            onSubmit={(type, title, content, file) => {
+              if (!content) {
+                alert('Üres a tartalom!')
+                return
+              }
+              console.log(type, title, content, file)
+              if (type === 'private') {
+                postFeedback(content, file).then((res) => {
+                  console.log(res)
+                  alert('Privát visszajelzés elküldve!')
+                })
+              } else {
+                if (!title) {
+                  alert('Üres a téma!')
+                  return
+                }
+                addPost(title, content).then((res) => {
+                  setNews(res.news)
+                })
+              }
+            }}
+          />
+          <div>{newsItems}</div>
         </div>
       )
     } else {
@@ -125,23 +295,6 @@ export default function Index(props) {
     )
   }
 
-  // const renderUserSpecificMotd = () => {
-  //   return (
-  //     <div>
-  //       <hr />
-  //       <div className={styles.subtitle}>Üzenet admintól:</div>
-  //       {userSpecificMotd ? (
-  //         <div
-  //           className={styles.motd}
-  //           dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
-  //         />
-  //       ) : (
-  //         <div>...</div>
-  //       )}
-  //     </div>
-  //   )
-  // }
-
   const renderDbSelector = () => {
     if (allQrSelector) {
       return (
@@ -196,15 +349,6 @@ export default function Index(props) {
         >
           {'Összes kérdés TXT'}
         </a>
-        
-        <a
-          /*onClick={() => {
-            setAllQrSelector('json')
-          }}
-          className={styles.button}*/
-        >
-          {/*'Összes kérdés JSON'*/}
-        </a>
       </div>
       {renderMotd()}
       {/*{userSpecificMotd && renderUserSpecificMotd()} */}