ReactLearning/ReactLearning/kanban-board/src/components/KBColumn.tsx

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;
};




let bgc = "hotpink";
class KBColumn extends React.Component<KBColumnProps> {




  
      
  getTaskRender = () =>{
  return this.props.tasks.map((task) => {
    if (task.priority === "urgent") {
      bgc = "red";
    } else if (task.priority === "important") {
      bgc = "yellow";
    } else if (task.priority === "normal") {
      bgc = "blue";
    }
    
  
    return (
      <div
        style={{
          borderColor: "#ccc",
          borderWidth: "1px",
          borderStyle: "solid",
          margin: "10px",
        }}
        className="taskWrapper"
      >
        <div
          style={{ backgroundColor: bgc, display: "inline" }}
          className="prioBlock"
          title={task.priority}
        ></div>
        <div className="taskText">
          <h3> {task.title} </h3>

          <p> {task.description} </p>
        </div>
        <div className="actionBlock">
        <FaTimes  style={{color: 'red', cursor: 'pointer'}} onClick={() => this.props.deleteTask && this.props.deleteTask(this.props.id, task.id)} />

        </div>
      </div>
    );
  });
};
  
render() {
  return (
    <div className="KBColumn" style={{ backgroundColor: this.props.color }}>
      <h3>{this.props.title} </h3>
      {this.getTaskRender()}
      <button
        onClick={() => {
          this.props.onDelete && this.props.onDelete(this.props.id);
        }}
      >
        Delete
      </button>
    </div>
  );
      }
    }

export default KBColumn;