diff --git a/ReactLearning/kanban-board/package-lock.json b/ReactLearning/kanban-board/package-lock.json index 0647d15..53aa685 100644 --- a/ReactLearning/kanban-board/package-lock.json +++ b/ReactLearning/kanban-board/package-lock.json @@ -1192,6 +1192,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz", + "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz", + "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz", + "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -6617,6 +6646,11 @@ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz", "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==" }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -12445,6 +12479,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/ReactLearning/kanban-board/package.json b/ReactLearning/kanban-board/package.json index 774defc..2a0439e 100644 --- a/ReactLearning/kanban-board/package.json +++ b/ReactLearning/kanban-board/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", @@ -10,8 +13,10 @@ "@types/node": "^12.20.10", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", + "font-awesome": "^4.7.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.2.0", "react-modal": "^3.13.1", "react-scripts": "4.0.3", "typescript": "^4.2.4", diff --git a/ReactLearning/kanban-board/src/App.css b/ReactLearning/kanban-board/src/App.css index 20cab1b..96bf240 100644 --- a/ReactLearning/kanban-board/src/App.css +++ b/ReactLearning/kanban-board/src/App.css @@ -62,6 +62,13 @@ html { flex: 5; height: 100%; } +.actionBlock{ + order: 10; + flex: 1; + display: flex; + background-color: purple; + +} .panel { display: flex; diff --git a/ReactLearning/kanban-board/src/App.tsx b/ReactLearning/kanban-board/src/App.tsx index 857f9b8..30f832d 100644 --- a/ReactLearning/kanban-board/src/App.tsx +++ b/ReactLearning/kanban-board/src/App.tsx @@ -17,6 +17,7 @@ class App extends React.Component<{}, State> { constructor(props: any) { super(props); 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 = { @@ -26,9 +27,25 @@ class App extends React.Component<{}, State> { }; } + deleteTask(cId: number, tId: number) { + /* Find Column */ + const correctColunm = this.state.columns.filter( + (column) => column.id === cId //Grabs the correct column according to the column ID + ); + + let columnsNew = this.state.columns; //Clones columns. Should be done earlier??????? + const corrIndex = columnsNew.indexOf(correctColunm[0]); //Grabs the index of the correct column. [0] is bad programming, but makes sense due to IDs being unique + + /* Find and Remove Task from Found Column */ + let alteredColumn = columnsNew[corrIndex]; //Collects a copt of the correct column. Again... unsure if timing is correct + alteredColumn.tasks = alteredColumn.tasks.filter((task) => task.id !== tId); //Filter all the tasks to allow all except from the wanted. Maybe could be more efficient + // Unsure how TS works under the hood + columnsNew[corrIndex] = alteredColumn; //Input the altered column into the cloned list of columns + this.setState({ columns: columnsNew }); //Push the cloned list with the altered column into the state + alert("Deleted Task" + tId + "from Col" + cId); // Test for column numbers and IDs + } + deleteColumn(id: number) { - - const { columns } = { ...this.state }; const filteredColumns = columns.filter((column) => column.id !== id); @@ -104,6 +121,7 @@ class App extends React.Component<{}, State> { title={column.name} key={index} onDelete={this.deleteColumn} + deleteTask={this.deleteTask} id={column.id} tasks={column.tasks} /> diff --git a/ReactLearning/kanban-board/src/components/KBColumn.tsx b/ReactLearning/kanban-board/src/components/KBColumn.tsx index e3c93ca..61efa30 100644 --- a/ReactLearning/kanban-board/src/components/KBColumn.tsx +++ b/ReactLearning/kanban-board/src/components/KBColumn.tsx @@ -1,11 +1,15 @@ import Task from "../types/Task"; import React from 'react'; +import { FaTimes } from 'react-icons/fa' + + type KBColumnProps = { color: string; title: string; tasks: Task[]; id: number; onDelete?: (id: number) => void; + deleteTask?: (cId: number, tId: number) => void; }; @@ -13,6 +17,10 @@ type KBColumnProps = { let bgc = "hotpink"; class KBColumn extends React.Component { + + + + getTaskRender = () =>{ @@ -46,6 +54,10 @@ class KBColumn extends React.Component {

{task.description}

+
+ this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} /> + +
); });