import React, { useState } from 'react' import Head from 'next/head' import Sleep from '../components/sleep' import Todos from '../components/todoStuff/todos' import constants from '../constants.json' import styles from './contribute.module.css' import repos from '../data/repos.json' export default function contribute() { const [newTask, setNewTask] = useState('') const submitNewTask = async () => { if (!newTask) { return } fetch(constants.apiUrl + 'postfeedback', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ newTask: newTask, from: 'contribute', }), }) .then((resp) => { return resp.json() }) .then((resp) => { if (resp.success) { alert('Elküldve') setNewTask('') } else { alert('Hiba küldés közben') } }) .catch((err) => { alert('Hiba küldés közben') console.error(err) }) } const renderNewTaskArea = () => { return (

setNewTask(event.target.value)}
          value={newTask || ''}
          className={styles.feedback}
        />
        <button className={styles.button} onClick={submitNewTask}>
          Küldés
        </button>
      </div>
    )
  }

return (
    <div>
      <Head>
        <title>Todos - Qmining | Frylabs.net</title>
      </Head>
      <div className={'pageHeader'}>
        <h1>Teendők</h1>
      </div>
      <div className={styles.description}>
        <p>
          Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők
          listájához.
        </p>
        <p>
          Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
          segíthetsz. (lásd: lentebb)<br /> Ha egy kártyára kattintasz, a
          megjelenő abalkban láthatod annak részleteit, illetve{' '}
          <b>
            <i>szavazhatsz</i>
          </b>{' '}
          is a feladatra, annak érdekében, hogy minél hamarabb megvalósulhasson.
          Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
          prioritása. (értsd: a legtöbb szavazatot kapó kártya teendője lesz
          legelőször megvalósítva)<br /> A kurzort az oszlopcímekre mozgatva,
          további információkat olvashatsz a kategóriák tulajdonságairól.
        </p>
        {
          'Ha olyan teendőt látsz, amiben tudnál és szeretnél is segíteni, akkor írj '
        }
        <a
          href="http://qmining.frylabs.net/irc?contribute"
          target="_blank"
          rel="noreferrer"
        >
          {'IRC'}
        </a>
        -n és megbeszéljük.
      </div>
      {renderNewTaskArea()}
      <hr />
      <Todos />
      <Sleep />
      <hr />
      <div className={styles.title}>Git repos</div>
      <hr />
      <hr />
      <div className={styles.repos}>
        {Object.keys(repos.repos).map((key) => {
          let repo = repos.repos[key]
          return (
            <a key={key} href={repo.href}>
              {repo.description}
            </a>
          )
        })}
        <hr />
      </div>
      <div style={{ textAlign: 'center' }}>
        <img
          style={{ maxWidth: '100%', width: '400px' }}
          src={`${constants.siteUrl}img/bug.png`}
        />
      </div>
    </div>
  )
}