Untitled
unknown
plain_text
a year ago
2.3 kB
9
Indexable
#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;
Editor is loading...
Leave a Comment