Todo final touches

src/constants.json

@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "http://localhost:8080/",
+  "apiUrl": "https://api.frylabs.net/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }

src/pages/contribute.js

@@ -1,20 +1,75 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Button from '../components/Button.js'
 import Sleep from '../components/sleep'
 import TodoTable from '../components/todoStuff/todoTable'
 
+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 (
+      <div className={styles.inputArea}>
+        <textarea
+          onChange={(event) => setNewTask(event.target.value)}
+          value={newTask || ''}
+          className={styles.feedback}
+        />
+        <button className={styles.button} onClick={submitNewTask}>
+          Küldés
+        </button>
+      </div>
+    )
+  }
+
   return (
     <div>
-      <TodoTable />
       <div className={styles.description}>
         Egy kártyára kattintva szavazhatsz. Minél több szavazat érkezik egy
-        kártyára, annál magasabb lesz a pioritása
+        kártyára, annál magasabb lesz a pioritása. Jobb alsó szám minél több,
+        annál nehezebb a feladat
       </div>
+      <TodoTable />
+      <div className={styles.description}>Itt írhatsz todo-ra ötleteket </div>
+      {renderNewTaskArea()}
       <Sleep />
       <hr />
       <div className={styles.description}>

src/pages/contribute.module.css

@@ -17,3 +17,25 @@
   font-size: 26px;
   text-align: center;
 }
+
+.feedback {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 60px;
+}
+
+.button {
+  background-color: var(--text-color);
+  border: none;
+  padding: 5px 15px;
+  margin: 5px;
+  color: white;
+  width: 200px;
+}
+
+.inputArea {
+  display: flex;
+}

src/pages/feedback.module.css

@@ -1,7 +1,7 @@
 .feedback {
   color: var(--text-color);
   background-color: var(--background-color);
-  font-size: 18px;
+  font-size: 16px;
   width: 100%;
   box-sizing: border-box;
   height: 120px;
@@ -15,13 +15,13 @@
 }
 
 .desc {
-  font-size: 18px;
+  font-size: 16px;
   color: white;
 }
 
 .textTitle {
   color: var(--text-color);
-  font-size: 26px;
+  font-size: 20px;
 }
 
 .button {