qmining-page/src/components/composer.js

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>
      )}
    </>
  )
}