New feedback page #7

src/pages/feedback.js

@@ -1,67 +1,251 @@
+import React, { useState } from 'react'
+import fetch from 'unfetch'
+
 import IrcButton from '../components/IrcButton.js'
 
-import constants from '../constants.json'
+import styles from './feedback.module.css'
+// import constants from '../constants.json'
+
+const results = {
+  success: 'SUCCESS',
+  error: 'ERROR',
+  notSent: 'NOTSENT',
+  invalid: 'INVALID'
+}
 
 export default function Feedback (props) {
-  // TODO: textarea style to css
-  // TODO: response to user that msg is sucessfully sent
-  const renderTestSender = () => {
+  const [form, setForm] = useState({})
+  const [file, setFile] = useState(undefined)
+  const [result, setResult] = useState(results.notSent)
+  const [fileResult, setFileResult] = useState(results.notSent)
+
+  const onChange = (e) => {
+    setForm({
+      ...form,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const renderTextInputArea = (params) => {
     return (
-      <div>
-      Hibát kiváltó teszt feltöltése
-        <br />
-
-        <form action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'>
-          <input type='file' name='dasfile' />
-          <input type='submit' value='Upload' />
-        </form>
-
-        <p />
-    Ha egy kérdésre mindig helytelenül talál választ a userscript (vagy egyéb hibát észlelsz), akkor
-    azon az oldalon nyomj egy ctrl-s -t. Ez lementi a weboldalt úgy ahogy van egy mappába, és egy
-    html fájlba. Ezt a kettőt ha berakod egy .zip-be, és ide feltöltöd, akkor ránézek mi lehet a
-    hiba, és kijavítom. <b> Max 10 MB!  </b> Ha több, elég a .html. Bónusz ha mellékelsz egy
-    readme-t, hogy mit csináljak.
+      <div className={styles.inputArea}>
+        <div className={styles.textTitle}>
+          {params.text}
+        </div>
+        <textarea
+          onChange={e => params.onChange(e)}
+          value={form[params.name] || ''}
+          className={styles.feedback}
+          name={params.name}
+        />
       </div>
-
     )
   }
 
-  const renderFeedback = () => {
+  const onFileChangeHandler = (e) => {
+    setFile(e.target.files[0])
+  }
+
+  const renderFileUploader = () => {
     return (
-      <div>
-        <form action={constants.apiUrl + 'postfeedback'} method='post'>
-          <div>Észrevételek: (közeledő teszt miatti kérdés-karbantartás, bug, feature vagy egyéb dolog, ami nyomja a lelked)</div>
-          <textarea
-            className='feedbackArea'
-            type='text'
-            name='message_field'
-            style={{
-              width: '100%',
-              boxSizing: 'border-box',
-              height: '400px'
-            }}
-          />
-          <div>Főoldalon kint lesz a válasz. Ha bug-ot találtál, akkor annak kijavítását nagyban
-      megkönnyíti ha azt a kérdés oldalt ahol a hibát találtad és a teszt eredmény oldalt feltöltöd
-      a lenti fájl feltöltővel! </div>
-          <button>Küldés</button>
-        </form>
+      <div className={styles.inputArea}>
+        <div className={styles.textTitle}>
+          Fájl csatolása
+        </div>
+        <input
+          className={styles.fileInput}
+          type='file'
+          name='file'
+          onChange={onFileChangeHandler}
+        />
       </div>
     )
   }
 
+  const handleSubmit = async () => {
+    if (!form.description) {
+      setResult(results.invalid)
+      return
+    }
+
+    const rawResponse = await fetch('http://localhost:8080/postfeedback', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(form)
+    })
+    rawResponse.json()
+      .then((resp) => {
+        if (resp.success) {
+          setResult(results.success)
+        } else {
+          console.log(resp)
+          setResult(results.error)
+        }
+      })
+      .catch((e) => {
+        setResult(results.error)
+        console.log(e)
+      })
+
+    if (file) {
+      const formData = new FormData() // eslint-disable-line
+      formData.append('file', file)
+
+      const rawFileResponse = await fetch('http://localhost:8080/postfeedbackfile', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json'
+        },
+        body: formData
+      })
+      rawFileResponse.json()
+        .then((resp) => {
+          if (resp.success) {
+            setFileResult(results.success)
+          } else {
+            console.log(resp)
+            setFileResult(results.error)
+          }
+        })
+        .catch((e) => {
+          setFileResult(results.error)
+          console.log('FILE', e)
+        })
+    }
+  }
+
+  const renderResult = () => {
+    if (results === result.success) {
+      return (
+        <div>
+          sucess
+        </div>
+      )
+    } else if (results === result.error) {
+      return (
+        <div>
+          error
+        </div>
+      )
+    } else if (results === result.invalid) {
+      return (
+        <div>
+          invalid
+        </div>
+      )
+    } else {
+      return null
+    }
+  }
+
+  // action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'
+  const renderForm = (props) => {
+    return (
+      <div className={styles.feedback} >
+        {props.noDesc
+          ? <div className={styles.errorMsg}>
+                Mező kitöltése kötelező!
+          </div>
+          : null}
+        {renderTextInputArea({
+          text: 'Rövid leírás',
+          name: 'description',
+          onChange: onChange
+        })}
+        {renderTextInputArea({
+          text: 'Lépések amikkel előáll a hiba',
+          name: 'steps',
+          onChange: onChange
+        })}
+        {renderTextInputArea({
+          text: 'Elvárt működés',
+          name: 'expected',
+          onChange: onChange
+        })}
+        {renderTextInputArea({
+          text: 'Ami történik helyette',
+          name: 'current',
+          onChange: onChange
+        })}
+        {renderFileUploader()}
+        <input
+          type='text'
+          id='cid'
+          name='cid'
+          value={form.cid}
+          onChange={onChange}
+          hidden
+        />
+        <button
+          className={styles.button}
+          onClick={handleSubmit}
+        >
+          Küldés
+        </button>
+        {renderResult()}
+      </div>
+    )
+  }
+
+  console.log('result', result, 'fileResult', fileResult)
+  const renderStuff = () => {
+    if (result === results.notSent && fileResult === results.notSent) {
+      console.log('both not sent')
+      return (
+        <div className={styles.textTitle}>
+          {renderForm({})}
+        </div>
+      )
+    } else if (result === results.invalid) {
+      console.log('result is invalid')
+      return (
+        <div className={styles.textTitle}>
+          {renderForm({ noDesc: true })}
+        </div>
+      )
+    } else if (result === results.success && !file) {
+      console.log('text sucess, no file')
+      return (
+        <div className={styles.textTitle}>
+          Visszajelzés elküldve c:
+        </div>
+      )
+    } else if (result === results.error && fileResult === results.success) {
+      console.log('file sucess only')
+      return (
+        <div className={styles.textTitle}>
+          Hiba küldés közben :c
+        </div>
+      )
+    } else if (result === results.success && fileResult === results.error) {
+      console.log('text sucess only')
+      return (
+        <div className={styles.textTitle}>
+          Visszajelzés elküldve, de fájlt nem sikerült elküldeni :c
+        </div>
+      )
+    } else if (result === results.success && fileResult === results.success) {
+      console.log('both sucess')
+      return (
+        <div className={styles.textTitle}>
+          Visszajelzés elküldve c:
+        </div>
+      )
+    } else {
+      console.log('else')
+    }
+  }
+
   return (
     <div>
       <IrcButton />
       <p />
       <hr />
       <p />
-      {renderFeedback()}
-      <p />
-      <hr />
-      <p />
-      {renderTestSender()}
+      {renderStuff()}
     </div>
   )
 }