Task creation

src/components/TaskList.js

@@ -3,21 +3,58 @@ import React from 'react';
 import TaskItem from './TaskItem';
 
 class TaskList extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      taskName: "",
+      taskDescription: "",
+      tasks: [{
+        name: "asd",
+        description: "qweqweqwsd a dasdsa dsada asda sdas  cverfer "
+      }]
+    }
+  }
+
+  handleTaskCreation = (e) => {
+    if(this.state.taskName !== ""){
+      console.log(`"${this.state.taskName}" task created :)`);
+      this.setState((state) => {
+        var tasks = state.tasks;
+        tasks.push({name: state.taskName, description: state.taskDescription});
+        var object = {
+          taskName: "",
+          taskDescription: "",
+          tasks: tasks
+        }
+        return object;
+      });
+    }
+    else{
+      console.log("Task needs a name!");
+    }
+  }
+  
   render(){
     let token = sessionStorage.getItem('token');
 
+    let tasks = [];
+    for (let i = 0; i < this.state.tasks.length; i++) {
+      const task = this.state.tasks[i];
+      tasks.push(
+        <TaskItem key={i} text={task.name} description={task.description}/>
+      );
+    }
+
     return ReactDOM.createPortal(
       <div className='tasklist'>
         {token && 
           <div className='task-form'>
-          <input type='text' placeholder='Task name'></input>
-          <textarea placeholder='Task description'></textarea>
-          <button>Add new task</button>
+          <input type='text' placeholder='Task name' value={this.state.taskName} onChange={(e) => this.setState({taskName: e.target.value})}></input>
+          <textarea placeholder='Task description' value={this.state.taskDescription} onChange={(e) => this.setState({taskDescription: e.target.value})}></textarea>
+          <button onClick={this.handleTaskCreation}>Add new task</button>
           </div>
         }
-        <TaskItem text='asd' description='asudhaiud'/>
-        <TaskItem text='asd2' description='q7213761923769821'/>
-        <TaskItem text='asd3' description='tehtävä3'/>
+        {tasks}
       </div>,
       document.getElementById('tasklist')
     );

src/components/TaskListButton.js

@@ -2,29 +2,34 @@ import React, { Fragment } from 'react';
 import TaskList from './TaskList';
 
 class TaskListButton extends React.Component{
-    constructor(props){
-        super(props);
-        this.state = {
-            open: false
-        }
-
-        this.handleClick = this.handleClick.bind(this);
+  constructor(props){
+    super(props);
+    this.state = {
+      open: false,
+      newTasks: '0'
     }
 
-    handleClick = (e) => {
-        this.setState({
-            open: !this.state.open
-        });
-    }
+    this.handleClick = this.handleClick.bind(this);
+  }
 
-    render(){
-        return(
-            <Fragment>
-                <button onClick={this.handleClick}>Tasks</button>
-                {this.state.open && <TaskList />}
-            </Fragment>
-        );
-    }
+  handleClick = (e) => {
+    this.setState({
+      open: !this.state.open
+    },() =>{
+      if(this.state.open){
+          this.setState({newTasks: '0'})
+      }
+    });
+  }
+
+  render(){
+    return(
+      <Fragment>
+        <button onClick={this.handleClick}>Tasks({this.state.newTasks})</button>
+        {this.state.open && <TaskList />}
+      </Fragment>
+    );
+  }
 }
 
 export default TaskListButton;
\ No newline at end of file