Front page forum

2025-04-01 20:23:44 +02:00 · 2021-03-05 17:07:37 +01:00 · 2021-03-05 17:07:37 +01:00 · 561aa21d93
commit 561aa21d93
parent a09e9734da
15 changed files with 484 additions and 136 deletions
--- a/src/components/comments.js
+++ b/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.actionsContainer}>
-            <div
-              className={styles.button}
+          <div className={styles.commentText}> {content}</div>
+          <div className={'actions'}>
+            <span
              onClick={() => {
                setCommenting(true)
              }}
            >
              Reply...
-            </div>
+            </span>
            {own && (
-              <div
-                className={styles.button}
+              <span
                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, index], text)
+                onComment={(path, content) => {
+                  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,44 +150,78 @@ 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 ? (
-        comments.map((comment, i) => {
-          return (
-            <Comment
-              onReact={onReact}
-              onComment={onComment}
-              onDelete={onDelete}
-              comment={comment}
-              index={i}
-              key={i}
-              uid={uid}
-            />
-          )
-        })
-      ) : (
-        <div>
-          <div>No comments yet</div>
-        </div>
-      )}
-      {addingNewComment ? (
-        <CommentInput
-          onSubmit={(e) => {
-            setAddingNewComment(false)
-            onComment([], e)
+      {commentsShowing ? (
+        <Modal
+          closeClick={() => {
+            setCommentsShowing(false)
          }}
-        />
-      ) : (
-        <span
-          onClick={() => {
-            setAddingNewComment(true)
-          }}
-          className={styles.button}
        >
-          Add new
+          {comments && comments.length > 0
+            ? comments.map((comment, i) => {
+                return (
+                  <Comment
+                    onReact={onReact}
+                    onComment={onComment}
+                    onDelete={onDelete}
+                    comment={comment}
+                    index={i}
+                    key={i}
+                    uid={uid}
+                  />
+                )
+              })
+            : null}
+          {commentCount !== 0 ? (
+            <div className={'actions'}>
+              <span
+                onClick={() => {
+                  setAddingNewComment(true)
+                }}
+              >
+                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>
  )
 }
--- a/src/components/comments.module.css
+++ b/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;
 }
--- a/src/components/composer.js
+++ b/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>
+      )}
+    </>
+  )
+}
--- a/src/components/composer.module.css
+++ b/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);
+}
--- a/src/components/dbSelector.module.css
+++ b/src/components/dbSelector.module.css
@ -15,7 +15,7 @@
 }

 .listItem:hover {
-  background-color: #666;
+  background-color: var(--hoover-color);
 }

 .text {
--- a/src/components/modal.js
+++ b/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>
  )
--- a/src/components/modal.module.css
+++ b/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;
+}
--- a/src/components/newsEntry.js
+++ b/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
-        className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
-      >
+      <div className={`${styles.newsContainer} ${admin && 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}
--- a/src/components/newsEntry.module.css
+++ b/src/components/newsEntry.module.css
@ -19,7 +19,7 @@
 }

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

--- a/src/components/reactButton.js
+++ b/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,20 +52,15 @@ function RenderEmojis({ onClick }) {
          return null
        }
        return (
-          <>
-            {index++ % breakEvery === 0 && (
-              <div key={`${key}_break`} className={styles.break} />
-            )}
-            <div
-              title={key}
-              key={key}
-              onClick={() => {
-                onClick(key)
-              }}
-            >
-              {reaction.emoji}
-            </div>
-          </>
+          <div
+            title={key}
+            key={key}
+            onClick={() => {
+              onClick(key)
+            }}
+          >
+            {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}
          />
        )}
--- a/src/components/reactButton.module.css
+++ b/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 {
--- a/src/components/tooltip.module.css
+++ b/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;