Merged master

src/components/comments.js

@@ -0,0 +1,227 @@
+import React, { useState } from 'react'
+
+import ReactButton from './reactButton.js'
+import Modal from './modal.js'
+
+import styles from './comments.module.css'
+
+function CommentInput({ onSubmit, onCancel }) {
+  const [val, setVal] = useState('')
+  return (
+    <div className={styles.commentAreaContainer}>
+      <textarea
+        autoFocus
+        value={val}
+        onChange={(e) => {
+          setVal(e.target.value)
+        }}
+      />
+      <div className={'actions'}>
+        <span
+          onClick={() => {
+            onSubmit(val)
+          }}
+        >
+          Submit
+        </span>
+        <span
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          Cancel
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
+  const [displayed, setDisplayed] = useState(true)
+  const [commenting, setCommenting] = useState(false)
+  const { content, subComments, date, user, reacts, admin } = comment
+  const own = uid === user
+
+  const commentStyle = admin
+    ? styles.adminComment
+    : own
+    ? styles.ownComment
+    : ''
+
+  return (
+    <div className={styles.comment}>
+      <div className={`${styles.commentData} ${commentStyle}`}>
+        <div className={styles.commentHeader}>
+          <div className={styles.userContainer}>
+            <div
+              className={styles.showHide}
+              onClick={() => {
+                setDisplayed(!displayed)
+              }}
+            >
+              {displayed ? '[-]' : '[+]'}
+            </div>
+            <div>User #{user}</div>
+          </div>
+          <div>{date}</div>
+        </div>
+        <div className={`${!displayed && styles.hidden}`}>
+          <div className={styles.commentText}> {content}</div>
+          <div className={'actions'}>
+            <span
+              onClick={() => {
+                setCommenting(true)
+              }}
+            >
+              Reply...
+            </span>
+            {own && (
+              <span
+                onClick={() => {
+                  onDelete([index])
+                }}
+              >
+                Delete
+              </span>
+            )}
+            <ReactButton
+              onClick={(reaction, isDelete) => {
+                onReact([index], reaction, isDelete)
+              }}
+              uid={uid}
+              existingReacts={reacts}
+            />
+          </div>
+          {commenting && (
+            <CommentInput
+              onCancel={() => {
+                setCommenting(false)
+              }}
+              onSubmit={(e) => {
+                onComment([index], e)
+                setCommenting(false)
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <div className={`${!displayed && styles.hidden}`}>
+        {subComments &&
+          subComments.map((sc, i) => {
+            return (
+              <Comment
+                comment={sc}
+                onReact={(path, reaction, isDelete) => {
+                  onReact([...path, index], reaction, isDelete)
+                }}
+                onDelete={(path) => {
+                  onDelete([...path, index])
+                }}
+                onComment={(path, content) => {
+                  onComment([...path, index], content)
+                }}
+                index={i}
+                key={i}
+                uid={uid}
+              />
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+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,
+  onDelete,
+  onReact,
+  uid,
+}) {
+  const [addingNewComment, setAddingNewComment] = useState(false)
+  const [commentsShowing, setCommentsShowing] = useState(false)
+  const commentCount = comments ? countComments(comments) : 0
+
+  return (
+    <div>
+      {commentsShowing ? (
+        <Modal
+          closeClick={() => {
+            setCommentsShowing(false)
+          }}
+        >
+          {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>
+  )
+}

src/components/comments.module.css

@@ -0,0 +1,62 @@
+.comment {
+  margin-left: 25px;
+  padding: 8px 0px;
+}
+
+.commentData {
+  padding: 5px 2px;
+  border-left: 2px solid var(--text-color);
+  border-radius: 3px;
+}
+
+.commentData:hover {
+  background-color: var(--hoover-color);
+}
+
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+}
+
+.commentHeader > div {
+  font-weight: bold;
+  margin: 2px;
+}
+
+.userContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.userContainer > div {
+  padding: 0px 3px;
+}
+
+.commentText {
+  margin: 2px;
+  padding: 10px 5px;
+}
+
+.ownComment {
+  border-left: 2px solid green;
+}
+
+.showHide {
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.commentAreaContainer {
+  margin: 0px 8px 3px 8px;
+}
+
+.commentAreaContainer > div {
+  margin: 5px 0px;
+}
+
+.adminComment {
+  border-left: 2px solid yellow;
+}

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

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import ReactButton from './reactButton.js'
+import Comments from './comments.js'
+
+import styles from './newsEntry.module.css'
+
+export default function NewsEntry({
+  newsItem,
+  uid,
+  onReact,
+  onComment,
+  onDelete,
+  onPostDelete,
+}) {
+  const { reacts, title, content, user, comments, date, admin } = newsItem
+
+  return (
+    <div className={styles.newsRoot}>
+      <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
+        <div className={styles.newsHeader}>
+          <div
+            className={styles.newsTitle}
+            dangerouslySetInnerHTML={{ __html: title }}
+          />
+          <div className={styles.user}>
+            <div>User #{user}</div>
+            <div className={styles.newsDate}>{date}</div>
+          </div>
+        </div>
+        <div
+          className={styles.newsBody}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </div>
+      <div className={'actions'}>
+        {uid === user ? (
+          <span
+            onClick={() => {
+              onPostDelete()
+            }}
+          >
+            Delete
+          </span>
+        ) : null}
+        <ReactButton
+          existingReacts={reacts}
+          uid={uid}
+          onClick={(reaction, isDelete) => {
+            onReact({ type: 'news', reaction, isDelete })
+          }}
+        />
+      </div>
+      <Comments
+        uid={uid}
+        onReact={(path, reaction, isDelete) => {
+          onReact({ type: 'comment', path, reaction, isDelete })
+        }}
+        onComment={onComment}
+        onDelete={onDelete}
+        comments={comments}
+      />
+      <hr />
+      <hr />
+    </div>
+  )
+}

src/components/newsEntry.module.css

@@ -0,0 +1,44 @@
+.newsBody {
+  margin: 0px 5px;
+  font-size: 18px;
+  color: #fff;
+}
+
+.newsTitle {
+  font-size: 20px;
+  color: var(--text-color);
+  margin: 0px 5px;
+}
+
+.newsDate {
+  margin: 0px 5px;
+}
+
+.newsContainer {
+  margin: 5px 5px;
+}
+
+.adminPost {
+  border-left: 2px solid yellow;
+  border-radius: 5px;
+}
+
+.newsContainer img {
+  max-width: 100%;
+  min-width: 200px;
+}
+
+.newsHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+}
+
+.newsRoot {
+  background-color: #191919;
+}

src/components/reactButton.js

@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+
+import Tooltip from './tooltip.js'
+
+import styles from './reactButton.module.css'
+import reactions from '../data/reactions.json'
+
+function ExistingReacts({ existingReacts, onClick, uid }) {
+  return (
+    <div className={styles.reactionContainer}>
+      <div>React</div>
+      {existingReacts &&
+        Object.keys(existingReacts).map((key) => {
+          const currReact = existingReacts[key]
+          const react = reactions[key]
+          if (!react) {
+            return null
+          }
+          return (
+            <div
+              title={currReact.join(', ')}
+              className={`${currReact.includes(uid) && styles.reacted}`}
+              key={key}
+              onClick={(e) => {
+                e.stopPropagation()
+                onClick(key, currReact.includes(uid))
+              }}
+            >
+              {react.emoji} {currReact.length}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function RenderEmojis({ onClick }) {
+  const [search, setSearch] = useState('')
+
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Keresés..."
+        onChange={(event) => {
+          setSearch(event.target.value)
+        }}
+      />
+      {Object.keys(reactions).map((key) => {
+        const reaction = reactions[key]
+        if (!key.includes(search.toLowerCase())) {
+          return null
+        }
+        return (
+          <div
+            title={key}
+            key={key}
+            onClick={() => {
+              onClick(key)
+            }}
+          >
+            {reaction.emoji}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default function ReactButton({ onClick, existingReacts, uid }) {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <div
+      className={styles.reactContainer}
+      onClick={() => {
+        setOpened(true)
+      }}
+      onMouseEnter={() => {}}
+      onMouseLeave={() => {
+        setOpened(false)
+      }}
+    >
+      <Tooltip
+        opened={opened}
+        text={() => (
+          <ExistingReacts
+            uid={uid}
+            onClick={(key, isDelete) => {
+              onClick(key, isDelete)
+              setOpened(false)
+            }}
+            existingReacts={existingReacts}
+          />
+        )}
+      >
+        <div className={styles.reactionContainer}>
+          <RenderEmojis
+            onClick={(e) => {
+              // setOpened(false)
+              onClick(e)
+            }}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}

src/components/reactButton.module.css

@@ -0,0 +1,40 @@
+.reactionContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.reactionContainer > input {
+  width: 100%;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: none;
+  border-radius: 3px;
+  margin: 2px 5px;
+  font-size: 16px;
+}
+
+.reactionContainer > div {
+  margin: 2px 2px;
+  padding: 0px 10px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.reactionContainer > div:hover {
+  background-color: var(--hoover-color);
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.reacted {
+  color: yellow;
+}
+
+.reactContainer {
+  display: inline-block;
+}

src/components/tooltip.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './tooltip.module.css'
+
+export default function Tooltip({ children, text, opened }) {
+  return (
+    <div className={styles.tooltip}>
+      {text()}
+      {opened && <span className={styles.tooltiptext}>{children}</span>}
+    </div>
+  )
+}

src/components/tooltip.module.css

@@ -0,0 +1,28 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltiptext {
+  width: 300px;
+  max-width: 300px;
+  height: 250px;
+  max-height: 250px;
+  background-color: var(--background-color);
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 0%;
+  margin-left: -60px;
+  transition: opacity 0.3s;
+
+  overflow-y: scroll;
+}
+
+.container {
+}