lunarised/ReactLearning
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
James McKenzie 2021-04-30 10:06:13 +12:00
parent 5a6aa7fc96
commit cfaccacf68
2 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ReactLearning/kanban-board/src/App.tsx
View File

@ -16,11 +16,7 @@ type State = {
class App extends React.Component<{}, State> {
constructor(props: any) {
super(props);
/* TODO: ARROW FUNCTIONS */
this.deleteColumn = this.deleteColumn.bind(this);
this.deleteTask = this.deleteTask.bind(this);
this.addColumn = this.addColumn.bind(this);
this.addTask = this.addTask.bind(this);
this.state = {
taskIterator: initState.taskIterator,
columnIterator: initState.columnIterator,
@ -37,7 +33,7 @@ class App extends React.Component<{}, State> {
Last Edited 2020/04/29 15:20
*/
deleteTask(columnID: number, taskID: number) {
deleteTask = (columnID: number, taskID: number) => {
// Find Column
let columnsNew = this.state.columns;
const correctColunm = columnsNew.find((column) => column.id === columnID);
@ -54,7 +50,7 @@ class App extends React.Component<{}, State> {
columnsNew[corrIndex] = alteredColumn;
this.setState({ columns: columnsNew });
alert("Deleted Task" + taskID + "from Col" + columnID);
}
};
/* Deletes a column with a specific ID
@param id: The ID of the column that is to be deleted
@ -64,13 +60,13 @@ class App extends React.Component<{}, State> {
Last Edited 2020/04/27 17:30
*/
deleteColumn(id: number) {
deleteColumn = (id: number) => {
const { columns } = { ...this.state };
const filteredColumns = columns.filter((column) => column.id !== id);
this.setState({ columns: filteredColumns });
console.log(this.state.columns);
}
};
/* Adds a column to the panel
@param columnInstance: Data massed back from the modal which contains all the information to create a column
@ -81,7 +77,7 @@ class App extends React.Component<{}, State> {
Last Edited 2020/04/28 16:00
*/
addColumn(columnInstance?: ColumnPassback) {
addColumn = (columnInstance?: ColumnPassback) => {
let columnId = this.state.columnIterator;
this.setState({ columnIterator: columnId + 1 });
if (columnInstance) {
@ -92,7 +88,7 @@ class App extends React.Component<{}, State> {
tasks: [],
});
}
}
};
/* Adds a task to a specified column
@param taskInstance: Data passed back from the modal which contains the necessary information to create the task
@ -102,7 +98,7 @@ class App extends React.Component<{}, State> {
Last Edited 2020/04/29 15:00
*/
addTask(taskInstance?: TaskPassback) {
addTask = (taskInstance?: TaskPassback) => {
if (this.state.columns.length === 0) {
alert("You might want to consider adding a column!");
return;
@ -133,7 +129,7 @@ class App extends React.Component<{}, State> {
);
}
}
}
};
render() {
return (

14
ReactLearning/kanban-board/src/components/Header.tsx
View File

@ -25,12 +25,6 @@ type State = {
class Header extends React.Component<HeaderProps, State> {
constructor(props: HeaderProps) {
super(props);
this.showTaskModal = this.showTaskModal.bind(this);
this.hideModal = this.hideModal.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSelectChange = this.handleSelectChange.bind(this);
this.showColumnModal = this.showColumnModal.bind(true);
this.hideColumnModal = this.hideColumnModal.bind(this);
this.state = {
showTask: false,
@ -67,7 +61,7 @@ class Header extends React.Component<HeaderProps, State> {
this.setState({ showColumn: false });
};
handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const target = event.target.id;
if (target === "titleInput") {
this.setState({ taskTitle: event.target.value });
@ -81,9 +75,9 @@ class Header extends React.Component<HeaderProps, State> {
if (target === "columnColor") {
this.setState({ columnColor: event.target.value });
}
}
};
handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
if (event.target.id === "prioritySelect") {
const selectedValue = event.target.value as Priority;
this.setState({ taskPrio: selectedValue });
@ -93,7 +87,7 @@ class Header extends React.Component<HeaderProps, State> {
const selectedValue = parseInt(event.target.value);
this.setState({ taskColumnNumber: selectedValue });
}
}
};
render() {
return (