Untitled

#task details
import React, { useEffect, useState, useContext } from 'react';
import { useParams } from 'react-router-dom';
import { getData } from '../actions/CrudService';
import { Context } from '../context/ContextProvider';


function TaskDetails() {
const { taskID } = useParams();
const { dispatch } = useContext(Context);
const [taskDetails, setTaskDetails] = useState([]);
const [matchingTask, setMatchingTask] = useState([]);
const [loading, setLoading] = useState(true); // Add loading state
const crudParams = {
    "tns": "reportdbtns",
    "path": 'Pages/TaskManagement/TaskManagementDetails',
    "tableName": 'INNOVAZONE.TEMP_TASK_DETAILS'
    };

   useEffect(() => {
  const fetchData = async () => {
    try {
      // Fetch data from the API
      await getData({ params: crudParams, dispatch, data: taskDetails, setData: setTaskDetails });
      
      if (taskDetails) {
        // Find the matching task based on taskID
        const taskMatches = taskDetails.find((task) => task.TASK_ID === taskID);
        console.log(taskMatches);
        if (taskMatches) {
          // Set the task details in the state
          setMatchingTask(taskDetails);
        } else {
          console.error(`Task with ID ${taskID} not found.`);
        }
      } else {
        console.error('Data is undefined or null.');
      }
    } catch (error) {
      console.error('Error fetching task details:', error);
    } finally {
      setLoading(false);
    }
  };

  fetchData(); // Call the fetchData function
}, [taskID, dispatch]);

      return (
        <div>
          <h1>Task Details for Task ID: {taskID}</h1>
          {loading ? (
            <p>Loading task details...</p>
          ) : (
            matchingTask ? (
              <div>
                <p>Task Name: {matchingTask.SUBJECT}</p>
                <p>Assignee: {matchingTask.ASSIGNEE}</p>
                <p>ASSIGNED_BY: {matchingTask.ASSIGNED_BY}</p>
                <p>COMMENTS: {matchingTask.COMMENTS}</p>
                <p>CREATED_AT: {matchingTask.CREATED_AT}</p>
                <p>COMMENT_DATE: {matchingTask.COMMENT_DATE}</p>
              </div>
            ) : (
              <p>No task details found for ID: {taskID}</p>
            )
          )}
        </div>
      );
    }
    
    export default TaskDetails;