Front page forum

src/components/comments.js

@@ -1,30 +1,36 @@
 import React, { useState } from 'react'
 
 import ReactButton from './reactButton.js'
+import Modal from './modal.js'
 
 import styles from './comments.module.css'
 
-function CommentInput({ onSubmit }) {
+function CommentInput({ onSubmit, onCancel }) {
   const [val, setVal] = useState('')
   return (
     <div className={styles.commentAreaContainer}>
       <textarea
         autoFocus
-        className={styles.commentArea}
         value={val}
         onChange={(e) => {
           setVal(e.target.value)
         }}
       />
-      <div>
+      <div className={'actions'}>
         <span
           onClick={() => {
             onSubmit(val)
           }}
-          className={styles.button}
         >
           Submit
         </span>
+        <span
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          Cancel
+        </span>
       </div>
     </div>
   )
@@ -33,10 +39,10 @@ function CommentInput({ onSubmit }) {
 function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   const [displayed, setDisplayed] = useState(true)
   const [commenting, setCommenting] = useState(false)
-  const { text, subComments, date, user, reacts, adminComment } = comment
+  const { content, subComments, date, user, reacts, admin } = comment
   const own = uid === user
 
-  const commentStyle = adminComment
+  const commentStyle = admin
     ? styles.adminComment
     : own
     ? styles.ownComment
@@ -60,25 +66,23 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
           <div>{date}</div>
         </div>
         <div className={`${!displayed && styles.hidden}`}>
-          <div className={styles.commentText}> {text}</div>
+          <div className={styles.commentText}> {content}</div>
-          <div className={styles.actionsContainer}>
+          <div className={'actions'}>
-            <div
+            <span
-              className={styles.button}
               onClick={() => {
                 setCommenting(true)
               }}
             >
               Reply...
-            </div>
+            </span>
             {own && (
-              <div
+              <span
-                className={styles.button}
                 onClick={() => {
                   onDelete([index])
                 }}
               >
                 Delete
-              </div>
+              </span>
             )}
             <ReactButton
               onClick={(reaction, isDelete) => {
@@ -90,6 +94,9 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
           </div>
           {commenting && (
             <CommentInput
+              onCancel={() => {
+                setCommenting(false)
+              }}
               onSubmit={(e) => {
                 onComment([index], e)
                 setCommenting(false)
@@ -110,8 +117,8 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
                 onDelete={(path) => {
                   onDelete([...path, index])
                 }}
-                onComment={(path, text) => {
+                onComment={(path, content) => {
-                  onComment([...path, index], text)
+                  onComment([...path, index], content)
                 }}
                 index={i}
                 key={i}
@@ -124,6 +131,17 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
   )
 }
 
+function countComments(comments) {
+  return comments.reduce((acc, comment) => {
+    if (comment.subComments) {
+      acc += countComments(comment.subComments) + 1
+    } else {
+      acc += 1
+    }
+    return acc
+  }, 0)
+}
+
 export default function Comments({
   comments,
   onComment,
@@ -132,10 +150,19 @@ export default function Comments({
   uid,
 }) {
   const [addingNewComment, setAddingNewComment] = useState(false)
+  const [commentsShowing, setCommentsShowing] = useState(false)
+  const commentCount = comments ? countComments(comments) : 0
+
   return (
     <div>
-      {comments && comments.length > 0 ? (
+      {commentsShowing ? (
-        comments.map((comment, i) => {
+        <Modal
+          closeClick={() => {
+            setCommentsShowing(false)
+          }}
+        >
+          {comments && comments.length > 0
+            ? comments.map((comment, i) => {
                 return (
                   <Comment
                     onReact={onReact}
@@ -148,28 +175,53 @@ export default function Comments({
                   />
                 )
               })
-      ) : (
+            : null}
-        <div>
+          {commentCount !== 0 ? (
-          <div>No comments yet</div>
+            <div className={'actions'}>
-        </div>
-      )}
-      {addingNewComment ? (
-        <CommentInput
-          onSubmit={(e) => {
-            setAddingNewComment(false)
-            onComment([], e)
-          }}
-        />
-      ) : (
               <span
                 onClick={() => {
                   setAddingNewComment(true)
                 }}
-          className={styles.button}
               >
-          Add new
+                New comment
               </span>
-      )}
+            </div>
+          ) : null}
+          {addingNewComment ? (
+            <CommentInput
+              onSubmit={(e) => {
+                if (!e) {
+                  alert('Írj be valamit, hogy kommentelhess...')
+                  return
+                }
+                setAddingNewComment(false)
+                onComment([], e)
+              }}
+              onCancel={() => {
+                setAddingNewComment(false)
+                if (commentCount === 0) {
+                  setCommentsShowing(false)
+                }
+              }}
+            />
+          ) : null}
+        </Modal>
+      ) : null}
+      <div
+        className={'actions'}
+        onClick={() => {
+          setCommentsShowing(true)
+          if (commentCount === 0) {
+            setAddingNewComment(true)
+          }
+        }}
+      >
+        <span>
+          {commentCount === 0
+            ? 'New comment'
+            : `Show ${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+        </span>
+      </div>
     </div>
   )
 }

src/components/comments.module.css

@@ -6,10 +6,13 @@
 .commentData {
   padding: 5px 2px;
   border-left: 2px solid var(--text-color);
-  background-color: #222;
   border-radius: 3px;
 }
 
+.commentData:hover {
+  background-color: var(--hoover-color);
+}
+
 .commentHeader {
   display: flex;
   justify-content: space-between;
@@ -46,32 +49,6 @@
   display: none;
 }
 
-.actionsContainer {
-  display: flex;
-  align-items: center;
-}
-
-.button {
-  margin: 2px 2px;
-  padding: 0px 10px;
-  border: 1px solid #444;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-color: #444;
-}
-
-.commentArea {
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-size: 16px;
-  box-sizing: border-box;
-  height: 120px;
-  width: 100%;
-}
-
 .commentAreaContainer {
   margin: 0px 8px 3px 8px;
 }

src/components/composer.js

@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+
+import Modal from './modal'
+
+import styles from './composer.module.css'
+
+function FileUploader({ onChange }) {
+  return (
+    <div className={styles.inputArea}>
+      <div className={styles.textTitle}>Fájl csatolása</div>
+      <input
+        className={styles.fileInput}
+        type="file"
+        name="file"
+        onChange={onChange}
+      />
+    </div>
+  )
+}
+
+export default function Composer({ onSubmit }) {
+  const [editorShowing, setEditorShowing] = useState(false)
+  const [val, setVal] = useState('')
+  const [type, setType] = useState('public')
+  const [title, setTitle] = useState('')
+  const [file, setFile] = useState()
+
+  return (
+    <>
+      <div
+        onClick={() => {
+          setEditorShowing(true)
+        }}
+        className={styles.new}
+      >
+        Új bejegyzés / feedback
+      </div>
+      {editorShowing && (
+        <Modal
+          closeClick={() => {
+            setEditorShowing(false)
+          }}
+        >
+          <div className={styles.container}>
+            {type !== 'private' && (
+              <input
+                placeholder={'Téma'}
+                value={title}
+                onChange={(e) => {
+                  setTitle(e.target.value)
+                }}
+              />
+            )}
+            <textarea
+              placeholder={'...'}
+              value={val}
+              onChange={(e) => {
+                setVal(e.target.value)
+              }}
+            />
+            {type === 'private' && (
+              <FileUploader
+                onChange={(e) => {
+                  setFile(e.target.files[0])
+                }}
+              />
+            )}
+            <div className={styles.typeSelector}>
+              <div>Post típusa:</div>
+              <div title="Minden felhasználó látja főoldalon, és tudnak rá válaszolni">
+                <input
+                  onChange={(e) => {
+                    setType(e.target.value)
+                  }}
+                  type="radio"
+                  name="type"
+                  value="public"
+                  defaultChecked
+                />
+                Publikus
+              </div>
+              <div title="Csak a weboldal üzemeltetője látja">
+                <input
+                  onChange={(e) => {
+                    setType(e.target.value)
+                  }}
+                  type="radio"
+                  name="type"
+                  value="private"
+                />
+                Privát
+              </div>
+              <div className={styles.tip}>
+                (Tartsd egered opciókra több infóért)
+              </div>
+            </div>
+            <div className={'actions'}>
+              <span
+                onClick={() => {
+                  onSubmit(type, title, val, file)
+                  setEditorShowing(false)
+                }}
+              >
+                Post
+              </span>
+              <span
+                onClick={() => {
+                  setEditorShowing(false)
+                }}
+              >
+                Cancel
+              </span>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}

src/components/composer.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  flex-flow: column;
+}
+
+.container > input,
+.container > textarea {
+  margin: 5px 0px;
+  padding: 4px;
+}
+
+.typeSelector {
+  display: flex;
+  align-items: center;
+}
+
+.tip {
+  font-size: 10px;
+  margin: 0px 10px;
+}
+
+.new {
+  padding: 10px;
+  text-align: center;
+  border: 2px dashed var(--text-color);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.new:hover {
+  background-color: var(--hoover-color);
+}

src/components/dbSelector.module.css

@@ -15,7 +15,7 @@
 }
 
 .listItem:hover {
-  background-color: #666;
+  background-color: var(--hoover-color);
 }
 
 .text {

src/components/modal.js

@@ -46,7 +46,7 @@ export default function Modal(props) {
             ❌
           </div>
         )}
-        {props.children}
+        <div className={styles.children}>{props.children}</div>
       </div>
     </div>
   )

src/components/modal.module.css

@@ -1,4 +1,5 @@
 .modal {
+  z-index: 9999;
   position: fixed;
   top: 0;
   left: 0;
@@ -8,16 +9,19 @@
 }
 
 .modalContent {
+  display: flex;
+  align-items: stretch;
+  max-height: 80%;
+  width: 80%;
   position: fixed;
   background: var(--background-color);
-  width: 70%;
   height: auto;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  border-radius: 5px;
+  border-radius: 8px;
 
-  padding: 20px;
+  padding: 20px 30px;
   cursor: auto;
 }
 
@@ -26,8 +30,14 @@
   font-size: 18px;
   position: absolute;
 
-  position: absolute;
   top: 10px;
   right: 10px;
   display: inline;
 }
+
+.children {
+  max-height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}

src/components/newsEntry.js

@@ -6,20 +6,18 @@ import Comments from './comments.js'
 import styles from './newsEntry.module.css'
 
 export default function NewsEntry({
-  newsKey,
   newsItem,
   uid,
   onReact,
   onComment,
   onDelete,
+  onPostDelete,
 }) {
-  const { reacts, title, text, user, comments, date, adminPost } = newsItem
+  const { reacts, title, content, user, comments, date, admin } = newsItem
 
   return (
     <div>
-      <div
+      <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
-        className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
-      >
         <div className={styles.newsHeader}>
           <div
             className={styles.newsTitle}
@@ -32,8 +30,19 @@ export default function NewsEntry({
         </div>
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: text }}
+          dangerouslySetInnerHTML={{ __html: content }}
         />
+      </div>
+      <div className={'actions'}>
+        {uid === user ? (
+          <span
+            onClick={() => {
+              onPostDelete()
+            }}
+          >
+            Delete
+          </span>
+        ) : null}
         <ReactButton
           existingReacts={reacts}
           uid={uid}

src/components/newsEntry.module.css

@@ -19,7 +19,7 @@
 }
 
 .adminPost {
-  border-left: 5px solid yellow;
+  border-left: 2px solid yellow;
   border-radius: 5px;
 }
 

src/components/reactButton.js

@@ -5,9 +5,6 @@ import Tooltip from './tooltip.js'
 import styles from './reactButton.module.css'
 import reactions from '../data/reactions.json'
 
-// TODO: fixdis
-const breakEvery = 7
-
 function ExistingReacts({ existingReacts, onClick, uid }) {
   return (
     <div className={styles.reactionContainer}>
@@ -24,7 +21,8 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
               title={currReact.join(', ')}
               className={`${currReact.includes(uid) && styles.reacted}`}
               key={key}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation()
                 onClick(key, currReact.includes(uid))
               }}
             >
@@ -39,7 +37,6 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
 function RenderEmojis({ onClick }) {
   const [search, setSearch] = useState('')
 
-  let index = 0
   return (
     <>
       <input
@@ -55,10 +52,6 @@ function RenderEmojis({ onClick }) {
           return null
         }
         return (
-          <>
-            {index++ % breakEvery === 0 && (
-              <div key={`${key}_break`} className={styles.break} />
-            )}
           <div
             title={key}
             key={key}
@@ -68,7 +61,6 @@ function RenderEmojis({ onClick }) {
           >
             {reaction.emoji}
           </div>
-          </>
         )
       })}
     </>
@@ -81,9 +73,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
   return (
     <div
       className={styles.reactContainer}
-      onMouseEnter={() => {
+      onClick={() => {
         setOpened(true)
       }}
+      onMouseEnter={() => {}}
       onMouseLeave={() => {
         setOpened(false)
       }}
@@ -93,7 +86,10 @@ export default function ReactButton({ onClick, existingReacts, uid }) {
         text={() => (
           <ExistingReacts
             uid={uid}
-            onClick={onClick}
+            onClick={(key, isDelete) => {
+              onClick(key, isDelete)
+              setOpened(false)
+            }}
             existingReacts={existingReacts}
           />
         )}

src/components/reactButton.module.css

@@ -19,10 +19,11 @@
   border: 1px solid #444;
   border-radius: 6px;
   cursor: pointer;
+  user-select: none;
 }
 
 .reactionContainer > div:hover {
-  background-color: #666;
+  background-color: var(--hoover-color);
 }
 
 .break {

src/components/tooltip.module.css

@@ -4,11 +4,12 @@
 }
 
 .tooltip .tooltiptext {
-  width: 280px;
+  width: 300px;
+  max-width: 300px;
   height: 250px;
-  max-width: 280px;
   max-height: 250px;
-  background-color: #555;
+  background-color: var(--background-color);
+  border-radius: 5px;
   color: #fff;
   text-align: center;
   border-radius: 6px;

src/defaultStyles.css

@@ -1,5 +1,6 @@
 :root {
   --text-color: #9999ff;
+  --primary-color: #9999ff;
   --bright-color: #f2f2f2;
   --background-color: #222426;
   --hoover-color: #202020;
@@ -14,6 +15,23 @@ a {
   color: white;
 }
 
+textarea {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  box-sizing: border-box;
+  height: 120px;
+  width: 100%;
+  border: 1px solid #666;
+  border-radius: 3px;
+}
+
+input {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px solid #444;
+  border-radius: 3px;
+}
+
 .link {
   margin: 20px;
   font-size: 20px;
@@ -263,3 +281,21 @@ select:hover {
 .msgs > div {
   margin: 0px 5px;
 }
+
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.actions > span {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.actions > span:hover {
+  background-color: var(--hoover-color);
+}

src/pages/index.js

@@ -6,6 +6,7 @@ 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'
@@ -36,6 +37,72 @@ function fetchNews() {
   })
 }
 
+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
@@ -57,6 +124,25 @@ export default function Index({ globalData }) {
           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)
+                  })
+              }}
               onReact={({ type, path, reaction, isDelete }) => {
                 if (type === 'news') {
                   fetch(constants.apiUrl + 'infos', {
@@ -71,11 +157,12 @@ export default function Index({ globalData }) {
                       newsKey: key,
                       isDelete: isDelete,
                     }),
-                  }).then((res) => {
-                    // TODO: dont refetch news
-                    fetchNews().then((res) => {
-                      setNews(res)
                   })
+                    .then((res) => {
+                      return res.json()
+                    })
+                    .then((res) => {
+                      setNews(res.news)
                     })
                 } else if (type === 'comment') {
                   fetch(constants.apiUrl + 'comment', {
@@ -92,10 +179,12 @@ export default function Index({ globalData }) {
                       reaction: reaction,
                       isDelete: isDelete,
                     }),
-                  }).then((res) => {
-                    fetchNews().then((res) => {
-                      setNews(res)
                   })
+                    .then((res) => {
+                      return res.json()
+                    })
+                    .then((res) => {
+                      setNews(res.news)
                     })
                 }
               }}
@@ -112,13 +201,15 @@ export default function Index({ globalData }) {
                     path: path,
                     newsKey: key,
                   }),
-                }).then(() => {
-                  fetchNews().then((res) => {
-                    setNews(res)
                 })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
                   })
               }}
-              onComment={(path, text) => {
+              onComment={(path, content) => {
                 fetch(constants.apiUrl + 'comment', {
                   method: 'POST',
                   credentials: 'include',
@@ -129,13 +220,15 @@ export default function Index({ globalData }) {
                   body: JSON.stringify({
                     type: 'add',
                     path: path,
-                    text: text,
+                    content: content,
                     newsKey: key,
                   }),
-                }).then(() => {
-                  fetchNews().then((res) => {
-                    setNews(res)
                 })
+                  .then((res) => {
+                    return res.json()
+                  })
+                  .then((res) => {
+                    setNews(res.news)
                   })
               }}
               uid={userId}
@@ -149,8 +242,31 @@ export default function Index({ globalData }) {
 
       return (
         <div>
-          <div className={styles.title}>News</div>
+          <div className={styles.title}>Forum</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)
+                })
+              }
+            }}
+          />
           <hr />
           <div>{newsItems}</div>
         </div>
@@ -165,7 +281,6 @@ export default function Index({ globalData }) {
       <div>
         <div className={styles.title}>MOTD</div>
         <hr />
-        <hr />
         {motd ? (
           <div
             className={styles.motd}

src/pages/ranklist.module.css

@@ -46,7 +46,7 @@
 }
 
 .clickable:hover {
-  background-color: #666666;
+  background-color: var(--hoover-color);
 }
 
 .clickable {