diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js index 6bb733f052bc9cdaba7c735f8ffab1bc9d0af3d7..7b53d079ca501eef11a9a1bcc57e5f096cf10a36 100644 --- a/src/components/TaskItem.js +++ b/src/components/TaskItem.js @@ -1,16 +1,16 @@ -import React, { Fragment } from 'react'; +import React, { Fragment } from "react"; -class TaskItem extends React.Component{ - constructor(props){ +class TaskItem extends React.Component { + constructor(props) { super(props); this.state = { edit: false, selectedFactionId: "", factions: [] - } + }; } - componentDidMount(){ + componentDidMount() { this.getFactionlist(this.props.gameId); } @@ -18,25 +18,26 @@ class TaskItem extends React.Component{ this.setState({ edit: !this.state.edit }); - } + }; - getFactionlist(gameId){ + getFactionlist(gameId) { fetch(`${process.env.REACT_APP_URL}/game/${gameId}`, { - method: 'GET' + method: "GET" }) - .then(result => result.json()) - .then(result => { - if(result.code !== undefined){ - console.log(result); - } - else{ + .then(result => { + if (!result.ok) { + throw Error(result.responseText); + } else { + return result.json(); + } + }) + .then(result => { this.setState({ factions: result.factions, selectedFactionId: result.factions[0].factionId }); - } - }) - .catch(error => console.log(error)); + }) + .catch(error => console.log(error)); } onSaveSubmit = e => { @@ -44,60 +45,75 @@ class TaskItem extends React.Component{ this.props.onSave(this.props.task, this.state.selectedFactionId); this.setState({ edit: false - }) - } + }); + }; handleFactionChange = e => { this.setState({ selectedFactionId: e.target.value }); - } + }; onTaskDelete = e => { e.preventDefault(); this.props.onDelete(this.props.task.taskId); this.setState({ edit: false - }) - } + }); + }; - render(){ + 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> - ) + <option key={faction.factionId} value={faction.factionId}> + {faction.factionName} + </option> + ); } - return( - <div className='tasklist-item'> + return ( + <div className="tasklist-item"> <div> <label>{this.props.task.taskName}</label> </div> <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>{this.props.task.taskDescription}</label> + <br /> + <label> + Faction:{" "} + {this.props.task.faction !== null + ? this.props.task.faction.factionName + : "Every faction"} + </label> + <br /> + {this.props.task.taskWinner !== null && ( <label>Winner: {this.props.task.taskWinner.factionName}</label> - } + )} </div> - {this.props.task.taskIsActive && + {this.props.task.taskIsActive && ( <button onClick={this.onEditClick}>Edit</button> - } - {this.state.edit && + )} + {this.state.edit && ( <form onSubmit={this.onSaveSubmit}> - <select value={this.state.selectedFactionId.factionId} onChange={(e) => this.setState({selectedFaction: e.target.value})}> + <select + value={this.state.selectedFactionId} + onChange={e => + this.setState({ selectedFactionId: e.target.value }) + } + > {factionlistItems} </select> <button type="submit">Save</button> </form> - } - <button onClick={this.onTaskDelete} style={{backgroundColor: "red"}}>Delete</button> + )} + <button onClick={this.onTaskDelete} style={{ backgroundColor: "red" }}> + Delete + </button> </div> ); } } -export default TaskItem; \ No newline at end of file +export default TaskItem; diff --git a/src/components/TaskList.js b/src/components/TaskList.js index 39fbb0a1382148c44bef143c7cb6d3eda550fd56..fedbc03ae0dbac449f8aa4c7518dcca03597b897 100644 --- a/src/components/TaskList.js +++ b/src/components/TaskList.js @@ -1,206 +1,255 @@ -import ReactDOM from 'react-dom'; -import React from 'react'; -import TaskItem from './TaskItem'; +import ReactDOM from "react-dom"; +import React from "react"; +import TaskItem from "./TaskItem"; -class TaskList extends React.Component{ - constructor(props){ +class TaskList extends React.Component { + constructor(props) { super(props); this.state = { taskNameInput: "", // >= 3 taskDescriptionInput: "", // no limits tasks: [], factionlist: [], - selectedFactionId: "", - } + selectedFactionId: "" + }; } - componentDidMount(){ + componentDidMount() { this.getTasks(this.props.gameId); - this.getFactionlist(this.props.gameId) // TODO: remove if the user is not admin? + this.getFactionlist(this.props.gameId); // TODO: remove if the user is not admin? } - getTasks(gameId){ + getTasks(gameId) { let token = sessionStorage.getItem("token"); fetch(`${process.env.REACT_APP_URL}/task/get-tasks/${gameId}`, { - method: 'GET', + method: "GET", headers: { Authorization: "Bearer " + token } }) - .then(result => result.json()) - .then(result => { - if(result.code !== undefined){ - console.log(result); - } - else{ + .then(result => { + if (!result.ok) { + throw Error(result.responseText); + } else { + return result.json(); + } + }) + .then(result => { this.setState({ tasks: result - }) - } - }) - .catch(error => console.log(error)); + }); + }) + .catch(error => console.log(error)); } - getFactionlist(gameId){ + getFactionlist(gameId) { fetch(`${process.env.REACT_APP_URL}/game/${gameId}`, { - method: 'GET' + method: "GET" }) - .then(result => result.json()) - .then(result => { - if(result.code !== undefined){ - console.log(result); - } - else{ + .then(result => { + if (!result.ok) { + throw Error(result.responseText); + } else { + return result.json(); + } + }) + .then(result => { this.setState({ factionlist: result.factions }); - } - }) - .catch(error => console.log(error)); + }) + .catch(error => console.log(error)); } - handleTaskCreation = (e) => { + handleTaskCreation = e => { e.preventDefault(); - if(this.state.taskNameInput === ""){ + if (this.state.taskNameInput === "") { return alert("Task needs a name"); } let token = sessionStorage.getItem("token"); - fetch(`${process.env.REACT_APP_URL}/task/new-task/${this.props.gameId}`,{ + fetch(`${process.env.REACT_APP_URL}/task/new-task/${this.props.gameId}`, { method: "POST", - headers:{ + headers: { Authorization: "Bearer " + token, - 'Content-Type': 'application/json' + "Content-Type": "application/json" }, body: JSON.stringify({ taskName: this.state.taskNameInput, taskDescription: this.state.taskDescriptionInput, taskIsActive: true, - faction: this.state.selectedFactionId === "" ? null : this.state.selectedFactionId, + faction: + this.state.selectedFactionId === "" + ? null + : this.state.selectedFactionId, taskWinner: null, taskGame: this.props.gameId }) }) - .then(result => result.json()) - .then(result => { - if(result.code !== 201){ - console.log(result.message); - alert(result.message); - } - else{ - // Success + .then(result => { + if (!result.ok) { + throw Error(Response.statusText); + } else { + return result.json(); + } + }) + .then(result => { alert(result.message); this.setState({ taskDescriptionInput: "", taskNameInput: "" - }) + }); this.getTasks(this.props.gameId); - } - }) - .catch(error => console.log(error)); - } + }) + .catch(error => console.log(error)); + }; handleFactionChange = e => { this.setState({ selectedFactionId: e.target.value }); - } + }; onTaskEditSave = (task, winnerFactionId) => { let token = sessionStorage.getItem("token"); fetch(`${process.env.REACT_APP_URL}/task/edit-task/${this.props.gameId}`, { - method: 'POST', + method: "POST", headers: { Authorization: "Bearer " + token, - 'Content-Type':"application/json" + "Content-Type": "application/json" }, - body:JSON.stringify({ + body: JSON.stringify({ taskId: task.taskId, taskWinner: winnerFactionId, taskGame: this.props.gameId }) }) - .then(result => result.json()) - .then(result => { - if(result.code !== 201){ - alert(result.message); - } - else{ + .then(result => { + if (!result.ok) { + throw Error(result.responseText); + } else { + return result.json(); + } + }) + .then(result => { alert(result.message); this.getTasks(this.props.gameId); - } - }) - .catch(error => console.log(error)); - } + }) + .catch(error => console.log(error)); + }; - onTaskDeletion = (taskId) => { - if(taskId === (undefined || null)){return;} + 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 + 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 => { + if (!result.ok) { + throw Error(result.responseText); + } else { + return result.json(); + } }) - }) - .then(result => result.json()) - .then(result => { - alert(result.message); - this.getTasks(this.props.gameId); - }) - .catch(error => console.log(error)); - } - - render(){ + .then(result => { + alert(result.message); + this.getTasks(this.props.gameId); + }) + .catch(error => console.log(error)); + }; + + render() { let incompleteTasks = []; - let completedTasks = [] + let completedTasks = []; for (let i = 0; i < this.state.tasks.length; i++) { const task = this.state.tasks[i]; - if(task.taskWinner !== null){ + if (task.taskWinner !== null) { completedTasks.push( - <TaskItem key={task.taskId} task={task} gameId={this.props.gameId} onSave={this.onTaskEditSave} onDelete={this.onTaskDeletion}/> - ) - } - else{ + <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}/> - ) + <TaskItem + key={task.taskId} + task={task} + gameId={this.props.gameId} + onSave={this.onTaskEditSave} + onDelete={this.onTaskDeletion} + /> + ); } } let factionlistItems = this.state.factionlist.map(item => { - return <option key={item.factionId} value={item.factionId}>{item.factionName}</option> - }) + return ( + <option key={item.factionId} value={item.factionId}> + {item.factionName} + </option> + ); + }); // add all factions option to the faction list factionlistItems.unshift( - <option key="all" value="">Every faction</option> - ) + <option key="all" value=""> + Every faction + </option> + ); return ReactDOM.createPortal( - <div className='tasklist'> + <div className="tasklist"> <h1>Tasklist</h1> - <form className='task-form' onSubmit={this.handleTaskCreation}> + <form className="task-form" onSubmit={this.handleTaskCreation}> <label>New task</label> - <input id="taskNameInput" type='text' placeholder='Task name' minLength="3" value={this.state.taskNameInput} onChange={(e) => this.setState({taskNameInput: e.target.value})}></input> - <textarea id="taskDescriptionInput" placeholder='Task description' value={this.state.taskDescriptionInput} onChange={(e) => this.setState({taskDescriptionInput: e.target.value})}></textarea> + <input + id="taskNameInput" + type="text" + placeholder="Task name" + minLength="3" + value={this.state.taskNameInput} + onChange={e => this.setState({ taskNameInput: e.target.value })} + /> + <textarea + id="taskDescriptionInput" + placeholder="Task description" + value={this.state.taskDescriptionInput} + onChange={e => + this.setState({ taskDescriptionInput: e.target.value }) + } + /> <select id="taskFactionSelect" onChange={this.handleFactionChange}> {factionlistItems} </select> - <button id="newTaskSubmitButton" type="submit">Add new task</button> + <button id="newTaskSubmitButton" type="submit"> + Add new task + </button> </form> {incompleteTasks} - <br></br> + <br /> <label>Completed tasks</label> {completedTasks} - <br></br> + <br /> </div>, - document.getElementById('tasklist') + document.getElementById("tasklist") ); } } -export default TaskList; \ No newline at end of file +export default TaskList;