refactor(tasks): enhance task change tracking logic

- add setDisplayedData function to manage displayed data state
- improve grid change handling with displayedDataRef for better accuracy
- streamline data processing during task creation, update, and deletion operations
- enhance readability and maintainability with consistent formatting and comments

Author: claudfuen

apps/framework-editor/app/(pages)/tasks/TasksClientPage.tsx

@@ -2,7 +2,7 @@
 
 import PageLayout from "@/app/components/PageLayout";
 import { useRouter } from "next/navigation"; // Added for potential refresh
-import { useMemo } from "react";
+import { useMemo, useEffect } from "react";
 import { toast } from "sonner"; // Import toast for user feedback
 import {
 	relationalColumn,
@@ -126,6 +126,7 @@ export function TasksClientPage({ initialTasks }: TasksClientPageProps) {
 		isDirty,
 		changesSummaryString,
 		createdRowIds,
+		setDisplayedData,
 	} = useTaskChangeTracking(initialGridData);
 
 	// Log isDirty value on every render of TasksClientPage
@@ -161,6 +162,10 @@ export function TasksClientPage({ initialTasks }: TasksClientPageProps) {
 		});
 	}, [sortedDataWithPotentialTimestamps]);
 
+	useEffect(() => {
+		setDisplayedData(dataForDisplay);
+	}, [dataForDisplay, setDisplayedData]);
+
 	// Define columns for DataSheetGrid
 	const columns: Column<TasksPageGridData>[] = [
 		{ ...keyColumn("name", textColumn), title: "Name", minWidth: 250 },
@@ -292,10 +297,10 @@ export function TasksClientPage({ initialTasks }: TasksClientPageProps) {
 				<div className="mt-4">
 					<DataSheetGrid
 						value={dataForDisplay} // Use the fully processed data
+						rowKey="id"
 						height={600} // Adjust as needed
 						onChange={handleGridChange}
 						columns={columns}
-						rowKey="id"
 						rowClassName={getRowClassName}
 						createRow={() => ({
 							// Default structure for new rows created directly in grid