qmining-page/src/pages/feedback.js

import React, { useState } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'

import Button from '../components/Button.js'

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) {
  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 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 onFileChangeHandler = (e) => {
    setForm({
      ...form,
      file: e.target.files[0].name,
    })
    setFile(e.target.files[0])
  }

  const renderFileUploader = () => {
    return (
      <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)
    }

    const t = document.getElementById('cid').value
    let cid = ''
    let version = ''
    if (t) {
      cid = t.split('|')[0]
      version = t.split('|')[1]
    }

    const rawResponse = await fetch(constants.apiUrl + 'postfeedback', {
      method: 'POST',
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        ...form,
        cid: cid,
        version: version,
      }),
    })
    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(
        constants.apiUrl + 'postfeedbackfile',
        {
          method: 'POST',
          credentials: 'include',
          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,
        })}
        <div className={styles.desc}>
          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
          </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!
        </div>
        {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" hidden />
        {renderResult()}
      </div>
    )
  }

  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 {
      return <div className={styles.textTitle}>Bit of a fuckup here</div>
    }
  }

  return (
    <div>
      <Head>
        <title>Qmining - Feedback</title>
      </Head>
      <Button text="IRC chat" href="/irc" />
      <p />
      <hr />
      <p />
      {renderStuff()}
    </div>
  )
}