Home page and pw request page refactor

src/pages/feedback.js

@@ -10,10 +10,10 @@ const results = {
   success: 'SUCCESS',
   error: 'ERROR',
   notSent: 'NOTSENT',
-  invalid: 'INVALID'
+  invalid: 'INVALID',
 }
 
-export default function Feedback (props) {
+export default function Feedback(props) {
   const [form, setForm] = useState({})
   const [file, setFile] = useState(undefined)
   const [result, setResult] = useState(results.notSent)
@@ -22,18 +22,16 @@ export default function Feedback (props) {
   const onChange = (e) => {
     setForm({
       ...form,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     })
   }
 
   const renderTextInputArea = (params) => {
     return (
       <div className={styles.inputArea}>
-        <div className={styles.textTitle}>
-          {params.text}
-        </div>
+        <div className={styles.textTitle}>{params.text}</div>
         <textarea
-          onChange={e => params.onChange(e)}
+          onChange={(e) => params.onChange(e)}
           value={form[params.name] || ''}
           className={styles.feedback}
           name={params.name}
@@ -45,7 +43,7 @@ export default function Feedback (props) {
   const onFileChangeHandler = (e) => {
     setForm({
       ...form,
-      file: e.target.files[0].name
+      file: e.target.files[0].name,
     })
     setFile(e.target.files[0])
   }
@@ -53,13 +51,11 @@ export default function Feedback (props) {
   const renderFileUploader = () => {
     return (
       <div className={styles.inputArea}>
-        <div className={styles.textTitle}>
-          Fájl csatolása
-        </div>
+        <div className={styles.textTitle}>Fájl csatolása</div>
         <input
           className={styles.fileInput}
-          type='file'
-          name='file'
+          type="file"
+          name="file"
           onChange={onFileChangeHandler}
         />
       </div>
@@ -83,16 +79,17 @@ export default function Feedback (props) {
       method: 'POST',
       credentials: 'include',
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         ...form,
         cid: cid,
-        version: version
-      })
+        version: version,
+      }),
     })
-    rawResponse.json()
+    rawResponse
+      .json()
       .then((resp) => {
         if (resp.success) {
           setResult(results.success)
@@ -110,15 +107,19 @@ export default function Feedback (props) {
       const formData = new FormData() // eslint-disable-line
       formData.append('file', file)
 
-      const rawFileResponse = await fetch(constants.apiUrl + 'postfeedbackfile', {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Accept': 'application/json'
-        },
-        body: formData
-      })
-      rawFileResponse.json()
+      const rawFileResponse = await fetch(
+        constants.apiUrl + 'postfeedbackfile',
+        {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+          },
+          body: formData,
+        }
+      )
+      rawFileResponse
+        .json()
         .then((resp) => {
           if (resp.success) {
             setFileResult(results.success)
@@ -136,23 +137,11 @@ export default function Feedback (props) {
 
   const renderResult = () => {
     if (results === result.success) {
-      return (
-        <div>
-          sucess
-        </div>
-      )
+      return <div>sucess</div>
     } else if (results === result.error) {
-      return (
-        <div>
-          error
-        </div>
-      )
+      return <div>error</div>
     } else if (results === result.invalid) {
-      return (
-        <div>
-          invalid
-        </div>
-      )
+      return <div>invalid</div>
     } else {
       return null
     }
@@ -161,57 +150,52 @@ export default function Feedback (props) {
   // 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}
+      <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
+          onChange: onChange,
         })}
         <div className={styles.desc}>
-          Főoldalon lesz rá válasz (ha kell rá válasz)
+          Főoldalon lesz rá válasz MOTD-ben, amit csak te látsz (ha kell rá
+          válasz)
         </div>
-        <div className={styles.buttonContainer} >
-          <button
-            className={styles.button}
-            onClick={handleSubmit}
-          >
-          Küldés
+        <div className={styles.buttonContainer}>
+          <button className={styles.button} onClick={handleSubmit}>
+            Küldés
           </button>
         </div>
         <hr />
         <div className={styles.desc}>
-          Az alábbi mezők kitöltése opcionális, de hiba leírásnál nagyon sokat tud segíteni! <b>
-          Legnagyobb segítség ha azt a kérdés oldalt és a hozzátartozó eredmények oldalt ahol nem
-          helyesen működnek a dolgok Ctrl+S -el lemented, és egy zip-ben feltöltöd a .html
-          fájlt!</b> Így egyszerűen reprodukálni tudom a hibát. TY!
+          Az alábbi mezők kitöltése opcionális, de hiba leírásnál nagyon sokat
+          tud segíteni!{' '}
+          <b>
+            Legnagyobb segítség ha azt a kérdés oldalt és a hozzátartozó
+            eredmények oldalt ahol nem helyesen működnek a dolgok Ctrl+S -el
+            lemented, és egy zip-ben feltöltöd a .html fájlt!
+          </b>{' '}
+          Így egyszerűen reprodukálni tudom a hibát. TY!
         </div>
         {renderTextInputArea({
           text: 'Lépések amikkel előáll a hiba',
           name: 'steps',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderTextInputArea({
           text: 'Elvárt működés',
           name: 'expected',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderTextInputArea({
           text: 'Ami történik helyette',
           name: 'current',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderFileUploader()}
-        <input
-          type='text'
-          id='cid'
-          name='cid'
-          hidden
-        />
+        <input type="text" id="cid" name="cid" hidden />
         {renderResult()}
       </div>
     )
@@ -220,32 +204,18 @@ export default function Feedback (props) {
   const renderStuff = () => {
     if (result === results.notSent && fileResult === results.notSent) {
       console.log('both not sent')
-      return (
-        <div className={styles.textTitle}>
-          {renderForm({})}
-        </div>
-      )
+      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>
+        <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>
-      )
+      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>
-      )
+      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 (
@@ -255,23 +225,15 @@ export default function Feedback (props) {
       )
     } else if (result === results.success && fileResult === results.success) {
       console.log('both sucess')
-      return (
-        <div className={styles.textTitle}>
-          Visszajelzés elküldve c:
-        </div>
-      )
+      return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
     } else {
-      return (
-        <div className={styles.textTitle}>
-          Bit of a fuckup here
-        </div>
-      )
+      return <div className={styles.textTitle}>Bit of a fuckup here</div>
     }
   }
 
   return (
     <div>
-      <Button text='IRC chat' href='/irc' />
+      <Button text="IRC chat" href="/irc" />
       <p />
       <hr />
       <p />