From 5d170d0f22356d5b6c15844a5f2bda6c41cbac53 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Thu, 4 Jul 2019 16:03:14 +0300
Subject: [PATCH] Tasklist now works with server
---
src/components/Header.js | 4 +-
src/components/TaskList.js | 102 +++++++++++++++++++++++++------------
2 files changed, 73 insertions(+), 33 deletions(-)
diff --git a/src/components/Header.js b/src/components/Header.js
index 3cb15b0..281463a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -79,7 +79,9 @@ class Header extends React.Component {
)}
{this.state.username && <button>{this.state.username}</button>}
<button onClick={this.props.handleLayerChange}>change layer</button>
- <TaskListButton />
+ {this.state.username &&
+ <TaskListButton />
+ }
</div>
{this.state.register && (
<RegisterForm
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index 1a6e7f0..969683b 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -6,55 +6,93 @@ class TaskList extends React.Component{
constructor(props){
super(props);
this.state = {
- taskName: "",
- taskDescription: "",
- tasks: [{
- name: "asd",
- description: "qweqweqwsd a dasdsa dsada asda sdas cverfer "
- }]
+ taskNameInput: "", // >= 3
+ taskDescriptionInput: "", // no limits
+ tasks: []
}
}
+ componentDidMount(){
+ this.getTasks("178cd342-9637-4481-ab81-d89585e9e006");
+ }
+
+ getTasks(gameId){
+ let token = sessionStorage.getItem("token");
+ fetch(`${process.env.REACT_APP_URL}/task/get-tasks/${gameId}`, {
+ method: 'GET',
+ headers: {
+ Authorization: "Bearer " + token
+ }
+ })
+ .then(result => result.json())
+ .then(result => {
+ if(result.code !== undefined){
+ console.log(result);
+ }
+ else{
+ this.setState({
+ tasks: result
+ })
+ }
+ })
+ .catch(error => console.log(error));
+ }
+
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!");
+ e.preventDefault();
+ if(this.state.taskNameInput === ""){
+ return alert("Task needs a name");
}
+
+ let token = sessionStorage.getItem("token");
+ fetch(`${process.env.REACT_APP_URL}/task/new-task/${"178cd342-9637-4481-ab81-d89585e9e006"}`,{
+ method: "POST",
+ headers:{
+ Authorization: "Bearer " + token,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ taskName: this.state.taskNameInput,
+ taskDescription: this.state.taskDescriptionInput,
+ taskIsActive: true,
+ faction: "ad5195d6-820c-4a17-8549-65ac0945fd3e",
+ taskWinner: null,
+ taskGame: "178cd342-9637-4481-ab81-d89585e9e006"
+ })
+ })
+ .then(result => result.json())
+ .then(result => {
+ if(result.code){
+ console.log(result.message);
+ alert(result.message);
+ }
+ else{
+ // Success
+ alert(result.message);
+ this.getTasks("178cd342-9637-4481-ab81-d89585e9e006");
+ }
+ })
+ .catch(error => console.log(error));
}
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.unshift(
- <TaskItem key={i} text={task.name} description={task.description}/>
+ tasks.push(
+ <TaskItem key={task.taskId} text={task.taskName} description={task.taskDescription}/>
);
}
return ReactDOM.createPortal(
<div className='tasklist'>
<h1>Tasklist</h1>
- {token &&
- <div className='task-form'>
- <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>
- }
+ <form className='task-form' onSubmit={this.handleTaskCreation}>
+ <label>New task</label>
+ <input type='text' placeholder='Task name' minLength="3" value={this.state.taskNameInput} onChange={(e) => this.setState({taskNameInput: e.target.value})}></input>
+ <textarea placeholder='Task description' value={this.state.taskDescriptionInput} onChange={(e) => this.setState({taskDescriptionInput: e.target.value})}></textarea>
+ <button type="submit">Add new task</button>
+ </form>
{tasks}
</div>,
document.getElementById('tasklist')
--
GitLab