Frontpage removed private feedback, added file uploader to contacts

src/components/composer.js

@@ -4,26 +4,10 @@ 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 (
     <>
@@ -44,16 +28,14 @@ export default function Composer({ onSubmit }) {
           }}
         >
           <div className={styles.container}>
-            {type !== 'private' && (
+            <input
-              <input
+              placeholder={'Téma...'}
-                placeholder={'Téma...'}
+              required
-                required
+              value={title}
-                value={title}
+              onChange={(e) => {
-                onChange={(e) => {
+                setTitle(e.target.value)
-                  setTitle(e.target.value)
+              }}
-                }}
+            />
-              />
-            )}
             <textarea
               placeholder={'Írj ide valamit...'}
               required
@@ -62,50 +44,19 @@ export default function Composer({ onSubmit }) {
                 setVal(e.target.value)
               }}
             />
-            {type === 'private' && (
-              <FileUploader
-                onChange={(e) => {
-                  setFile(e.target.files[0])
-                }}
-              />
-            )}
-            <div id="radiolabel">
-              <p>
-                <b>A poszt típusa:</b>
-              </p>
-            </div>
-            <div className={styles.typeSelector}>
-              <div title="A főoldalon mindenki láthatja, reagálhat rá és kommentelhet alá">
-                <input
-                  onChange={(e) => {
-                    setType(e.target.value)
-                  }}
-                  type="radio"
-                  name="type"
-                  value="public"
-                  defaultChecked
-                />
-                Publikus
-              </div>
-              <div title="Csak admin bácsi látja">
-                <input
-                  onChange={(e) => {
-                    setType(e.target.value)
-                  }}
-                  type="radio"
-                  name="type"
-                  value="private"
-                />
-                Privát
-              </div>
-            </div>
-            <div className={styles.tip}>
-              <b>Tipp:</b> vidd a kurzort a poszt-típusok fölé több infóért!
-            </div>
             <div className={styles.composerAction}>
               <span
                 onClick={() => {
-                  onSubmit(type, title, val, file)
+                  if (!title) {
+                    alert('Üres a tartalom!')
+                    return
+                  }
+                  if (!val) {
+                    alert('Üres a téma!')
+                    return
+                  }
+
+                  onSubmit(title, val)
                   setEditorShowing(false)
                 }}
               >

src/components/composer.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-flow: column;
   max-width: 400px;
+  width: 900px;
 }
 
 .container > input,

src/components/feedbackArea.js

@@ -3,39 +3,66 @@ import React, { useState } from 'react'
 import styles from './feedbackArea.module.css'
 import constants from '../constants.json'
 
-function submitFeedback(msg, from) {
+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>
+  )
+}
+
+function submitFeedback(from, content, file) {
   return new Promise((resolve) => {
-    fetch(constants.apiUrl + 'postfeedback', {
+    const promises = [
-      method: 'POST',
+      fetch(constants.apiUrl + 'postfeedback', {
-      credentials: 'include',
+        method: 'POST',
-      headers: {
+        credentials: 'include',
-        Accept: 'application/json',
+        headers: {
-        'Content-Type': 'application/json',
+          Accept: 'application/json',
-      },
+          'Content-Type': 'application/json',
-      body: JSON.stringify({
+        },
-        newTask: msg,
+        body: JSON.stringify({
-        from: from,
+          content: content,
+          from: from,
+        }),
+      }).then((res) => {
+        return res.json()
       }),
+    ]
+
+    if (file) {
+      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)
     })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((resp) => {
-        if (resp.success) {
-          resolve()
-        } else {
-          alert('Hiba küldés közben!')
-        }
-      })
-      .catch((err) => {
-        alert('Hiba küldés közben!')
-        console.error(err)
-      })
   })
 }
 
-export default function FeedbackArea({ from }) {
+export default function FeedbackArea({ from, allowFile }) {
   const [feedback, setFeedback] = useState('')
+  const [file, setFile] = useState()
 
   return (
     <div className={styles.inputArea}>
@@ -46,13 +73,22 @@ export default function FeedbackArea({ from }) {
           value={feedback}
           className={styles.contactFeedback}
         />
+        {allowFile && (
+          <div className={styles.fileContainer}>
+            <FileUploader
+              onChange={(e) => {
+                setFile(e.target.files[0])
+              }}
+            />
+          </div>
+        )}
       </center>
       <center>
         <div className={`${styles.send} buttonContainer`}>
           <div
             onClick={() => {
               if (feedback) {
-                submitFeedback(feedback, from).then(() => {
+                submitFeedback(from, feedback, file).then(() => {
                   alert('Üzenet elküldve!')
                   setFeedback('')
                 })

src/components/feedbackArea.module.css

@@ -18,3 +18,8 @@
 .inputArea {
   display: block;
 }
+
+.fileContainer {
+  width: 400px;
+  margin: 5px;
+}

src/pages/contact.js

@@ -47,7 +47,7 @@ export default function Contact() {
           bal alsó postaládába (📬 ikon) fog érkezni.
         </div>
       </div>
-      <FeedbackArea from={'contact'} />
+      <FeedbackArea from={'contact'} allowFile />
       <div className={styles.container}>
         {contacts ? (
           <>

src/pages/index.js

@@ -58,48 +58,6 @@ function addPost(title, content) {
   })
 }
 
-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) {
-      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)
-    })
-  })
-}
-
 function updateForumPost(forum, postKey, postData) {
   return Object.keys(forum).reduce((acc, key) => {
     const entry = forum[key]
@@ -293,30 +251,15 @@ export default function Index({ globalData }) {
           <div className={styles.title}>Fórum/Hírek</div>
           <hr />
           <Composer
-            onSubmit={(type, title, content, file) => {
+            onSubmit={(title, content) => {
-              if (!content) {
+              addPost(title, content).then((res) => {
-                alert('Üres a tartalom!')
+                const { success, newPostKey, newEntry, msg } = res
-                return
+                if (success) {
-              }
+                  setNews({ [newPostKey]: newEntry, ...news })
-              if (type === 'private') {
+                } else {
-                postFeedback(content, file).then((res) => {
+                  alert(msg)
-                  console.log(res)
-                  alert('Privát visszajelzés elküldve!')
-                })
-              } else {
-                if (!title) {
-                  alert('Üres a téma!')
-                  return
                 }
-                addPost(title, content).then((res) => {
+              })
-                  const { success, newPostKey, newEntry, msg } = res
-                  if (success) {
-                    setNews({ [newPostKey]: newEntry, ...news })
-                  } else {
-                    alert(msg)
-                  }
-                })
-              }
             }}
           />
           <div>{newsItems}</div>