Function: List Tasks by Status

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 48 of 73.

Challenge

Easy

You are provided with the following from the previous challenge:

The Task interface with id (number), title (string), and status (literal type)
Three task variables: firstTask, secondTask, and thirdTask
The getTaskInfo function
The addTask function
The changeTaskStatus function
The initialTasks, updatedTasks, testTasks, progressTasks, and completedTasks arrays

Create a function named listTasksByStatus that takes two parameters:

taskList of type Task[] (an array of Task objects)
status of type 'todo' | 'in-progress' | 'done' (the status to filter by)

The function should:

Use the array filter method to return a new array containing only tasks that match the specified status
Return the filtered array of tasks

Create a variable named mixedTasks of type Task[] containing all three original tasks: firstTask, secondTask, and thirdTask.

Use your listTasksByStatus function to create the following filtered arrays:

Filter mixedTasks for 'todo' status and store the result in todoTasks
Filter mixedTasks for 'in-progress' status and store the result in inProgressTasks
Filter mixedTasks for 'done' status and store the result in doneTasks

Print the following outputs on separate lines:

Print the length of mixedTasks
Print the length of todoTasks
Print the length of inProgressTasks
Print the length of doneTasks
Call getTaskInfo with the first task from todoTasks and print the result
Call getTaskInfo with the first task from inProgressTasks and print the result
Call getTaskInfo with the first task from doneTasks and print the result

Try it yourself

// Task interface and variables from previous challenges
interface Task {
  id: number;
  title: string;
  status: 'todo' | 'in-progress' | 'done';
}

const firstTask: Task = {
  id: 1,
  title: "Learn TypeScript interfaces",
  status: 'todo'
};

const secondTask: Task = {
  id: 2,
  title: "Build task management app",
  status: 'in-progress'
};

const thirdTask: Task = {
  id: 3,
  title: "Write unit tests",
  status: 'done'
};

function getTaskInfo(task: Task): string {
    return `Task ${task.id}: ${task.title} - ${task.status}`;
}

function addTask(taskList: Task[], title: string): Task[] {
  const newTask: Task = {
    id: taskList.length + 1,
    title: title,
    status: 'todo'
  };
  return [...taskList, newTask];
}

const initialTasks: Task[] = [firstTask, secondTask];

const updatedTasks: Task[] = addTask(initialTasks, "Review code changes");

// Create the changeTaskStatus function
function changeTaskStatus(taskList: Task[], taskId: number, newStatus: 'todo' | 'in-progress' | 'done'): Task[] {
  return taskList.map(task => 
    task.id === taskId ? { ...task, status: newStatus } : task
  );
}

// Create testTasks array
const testTasks: Task[] = [firstTask, secondTask, thirdTask];

// Use changeTaskStatus function
const progressTasks = changeTaskStatus(testTasks, 1, 'in-progress');
const completedTasks = changeTaskStatus(progressTasks, 2, 'done');

// Print the required outputs
console.log(getTaskInfo(testTasks[0]));
console.log(getTaskInfo(progressTasks[0]));
console.log(getTaskInfo(completedTasks[1]));
console.log(testTasks[0].status);
console.log(completedTasks[1].status);