From 2e7f4e8bcaab7dfd31334fbd15d34e828f848fff Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Mon, 8 Jul 2019 13:39:49 +0300
Subject: [PATCH] Task deletion, task sorting and task winner
---
src/components/LoginForm.js | 2 +-
src/components/TaskItem.js | 37 ++++++++++++++----
src/components/TaskList.js | 66 ++++++++++++++++++++++++--------
src/components/TaskListButton.js | 2 +-
4 files changed, 80 insertions(+), 27 deletions(-)
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 7893bb8..2714949 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -56,7 +56,7 @@ export class LoginForm extends React.Component {
this.props.handleState(result);
this.handleView();
} else {
- this.handleError(result.errorResponse.message);
+ this.handleError(result.message);
}
},
// Note: it's important to handle errors here
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
index bda0442..6bb733f 100644
--- a/src/components/TaskItem.js
+++ b/src/components/TaskItem.js
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
class TaskItem extends React.Component{
constructor(props){
super(props);
this.state = {
edit: false,
- selectedFaction: "",
+ selectedFactionId: "",
factions: []
}
}
@@ -32,7 +32,7 @@ class TaskItem extends React.Component{
else{
this.setState({
factions: result.factions,
- selectedFaction: result.factions[0]
+ selectedFactionId: result.factions[0].factionId
});
}
})
@@ -41,7 +41,7 @@ class TaskItem extends React.Component{
onSaveSubmit = e => {
e.preventDefault();
- this.props.onSave(this.props.task, this.state.selectedFaction);
+ this.props.onSave(this.props.task, this.state.selectedFactionId);
this.setState({
edit: false
})
@@ -49,11 +49,27 @@ class TaskItem extends React.Component{
handleFactionChange = e => {
this.setState({
- selectedFaction: e.target.value
+ selectedFactionId: e.target.value
});
}
+ onTaskDelete = e => {
+ e.preventDefault();
+ this.props.onDelete(this.props.task.taskId);
+ this.setState({
+ edit: false
+ })
+ }
+
render(){
+ let factionlistItems = [];
+ for (let i = 0; i < this.state.factions.length; i++) {
+ const faction = this.state.factions[i];
+ factionlistItems.push(
+ <option key={faction.factionId} value={faction.factionId}>{faction.factionName}</option>
+ )
+ }
+
return(
<div className='tasklist-item'>
<div>
@@ -62,18 +78,23 @@ class TaskItem extends React.Component{
<div>
<label>{this.props.task.taskDescription}</label><br />
<label>Faction: {this.props.task.faction !== null ? this.props.task.faction.factionName : "Every faction"}</label>
+ <br></br>
+ {this.props.task.taskWinner !== null &&
+ <label>Winner: {this.props.task.taskWinner.factionName}</label>
+ }
</div>
{this.props.task.taskIsActive &&
<button onClick={this.onEditClick}>Edit</button>
}
- {this.state.edit &&
+ {this.state.edit &&
<form onSubmit={this.onSaveSubmit}>
- <select value={this.state.selectedFaction} onChange={(e) => this.setState({selectedFaction: e.target.value})}>
- {this.state.factions.map((item) => <option key={item.factionId} value={item.factionId}>{item.factionName}</option> )}
+ <select value={this.state.selectedFactionId.factionId} onChange={(e) => this.setState({selectedFaction: e.target.value})}>
+ {factionlistItems}
</select>
<button type="submit">Save</button>
</form>
}
+ <button onClick={this.onTaskDelete} style={{backgroundColor: "red"}}>Delete</button>
</div>
);
}
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index 67478eb..39fbb0a 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -11,13 +11,12 @@ class TaskList extends React.Component{
tasks: [],
factionlist: [],
selectedFactionId: "",
- gameId: "178cd342-9637-4481-ab81-d89585e9e006" // TODO: add this with props
}
}
componentDidMount(){
- this.getTasks(this.state.gameId);
- this.getFactionlist(this.state.gameId) // TODO: remove if the user is not admin?
+ this.getTasks(this.props.gameId);
+ this.getFactionlist(this.props.gameId) // TODO: remove if the user is not admin?
}
getTasks(gameId){
@@ -67,7 +66,7 @@ class TaskList extends React.Component{
}
let token = sessionStorage.getItem("token");
- fetch(`${process.env.REACT_APP_URL}/task/new-task/${this.state.gameId}`,{
+ fetch(`${process.env.REACT_APP_URL}/task/new-task/${this.props.gameId}`,{
method: "POST",
headers:{
Authorization: "Bearer " + token,
@@ -79,12 +78,12 @@ class TaskList extends React.Component{
taskIsActive: true,
faction: this.state.selectedFactionId === "" ? null : this.state.selectedFactionId,
taskWinner: null,
- taskGame: this.state.gameId
+ taskGame: this.props.gameId
})
})
.then(result => result.json())
.then(result => {
- if(result.code){
+ if(result.code !== 201){
console.log(result.message);
alert(result.message);
}
@@ -95,7 +94,7 @@ class TaskList extends React.Component{
taskDescriptionInput: "",
taskNameInput: ""
})
- this.getTasks(this.state.gameId);
+ this.getTasks(this.props.gameId);
}
})
.catch(error => console.log(error));
@@ -107,9 +106,9 @@ class TaskList extends React.Component{
});
}
- onTaskSave = (task, winnerFaction) => {
+ onTaskEditSave = (task, winnerFactionId) => {
let token = sessionStorage.getItem("token");
- fetch(`${process.env.REACT_APP_URL}/task/edit-task/${this.state.gameId}`, {
+ fetch(`${process.env.REACT_APP_URL}/task/edit-task/${this.props.gameId}`, {
method: 'POST',
headers: {
Authorization: "Bearer " + token,
@@ -117,8 +116,8 @@ class TaskList extends React.Component{
},
body:JSON.stringify({
taskId: task.taskId,
- taskWinner: winnerFaction.factionId,
- taskGame: this.state.gameId
+ taskWinner: winnerFactionId,
+ taskGame: this.props.gameId
})
})
.then(result => result.json())
@@ -128,19 +127,48 @@ class TaskList extends React.Component{
}
else{
alert(result.message);
- this.getTasks(this.state.gameId);
+ this.getTasks(this.props.gameId);
}
})
.catch(error => console.log(error));
}
+
+ onTaskDeletion = (taskId) => {
+ if(taskId === (undefined || null)){return;}
+ let token = sessionStorage.getItem("token");
+ fetch(`${process.env.REACT_APP_URL}/task/delete-task/${this.props.gameId}`, {
+ method: 'DELETE',
+ headers: {
+ Authorization: "Bearer " + token,
+ 'Content-Type':"application/json"
+ },
+ body:JSON.stringify({
+ taskId: taskId
+ })
+ })
+ .then(result => result.json())
+ .then(result => {
+ alert(result.message);
+ this.getTasks(this.props.gameId);
+ })
+ .catch(error => console.log(error));
+ }
render(){
- let tasklistItems = [];
+ let incompleteTasks = [];
+ let completedTasks = []
for (let i = 0; i < this.state.tasks.length; i++) {
const task = this.state.tasks[i];
- tasklistItems.push(
- <TaskItem key={task.taskId} task={task} gameId={this.state.gameId} onSave={this.onTaskSave}/>
- );
+ if(task.taskWinner !== null){
+ completedTasks.push(
+ <TaskItem key={task.taskId} task={task} gameId={this.props.gameId} onSave={this.onTaskEditSave} onDelete={this.onTaskDeletion}/>
+ )
+ }
+ else{
+ incompleteTasks.push(
+ <TaskItem key={task.taskId} task={task} gameId={this.props.gameId} onSave={this.onTaskEditSave} onDelete={this.onTaskDeletion}/>
+ )
+ }
}
let factionlistItems = this.state.factionlist.map(item => {
@@ -164,7 +192,11 @@ class TaskList extends React.Component{
</select>
<button id="newTaskSubmitButton" type="submit">Add new task</button>
</form>
- {tasklistItems}
+ {incompleteTasks}
+ <br></br>
+ <label>Completed tasks</label>
+ {completedTasks}
+ <br></br>
</div>,
document.getElementById('tasklist')
);
diff --git a/src/components/TaskListButton.js b/src/components/TaskListButton.js
index 5734a02..924a72e 100644
--- a/src/components/TaskListButton.js
+++ b/src/components/TaskListButton.js
@@ -37,7 +37,7 @@ class TaskListButton extends React.Component{
return(
<Fragment>
<button id="tasklistButton" onClick={this.handleClick}>Tasks ({this.state.newTasks})</button>
- {this.state.open && <TaskList />}
+ {this.state.open && <TaskList gameId="2c097e6a-591c-4a27-b7cb-38eb44e1f31c" />}
</Fragment>
);
}
--
GitLab