Bigger issues with refreshing board using REFRESH_COLUMN

[tu2-atmanand]

There are the below three major issues I am facing, after I make the board Operations or when the board refreshes after detecting a file change, the changes didnt update in the board, this is basically with the REFRESH_COLUMN event :

• [x] First onc is as shown in the image, when i update the task from the Modal :

• [x] Second biggest issue is with the checkBox event. So, the following things happen when I click on the checkbox :

  • Say there are two taskItems, taskItem-1 and taskItem-2, one below the other and if I click on the checkBox of taskItem-1, then, the taskItem-1 disappers as expected, but, the below one, taskItem-2, comes in place of the taskItem-1, and whether it has a body or not, the body of the taskItem-1 gets attached to taskItem-2 (that is the content of Description and subTasks of the taskItem-2 gets completely replaced with the subTasks and description of taskItem-1, so basically here, only the TaskTitle is getting replaced).
  • Secondly, the taskItem doesnt get added up in the column where it should come afterwards. That is if say the taskItem suppose to move from Today Column to Completed column, then it doesnt get rendered under the Completed column.

• [x] Third is similar to the second one, when any tasks's due date is been changed, then only its Title gets moved to the destination column where its suppose to go, but its subTasks and Description doesnt moves along with it. Instead, these properties gets replaced to the task below the task which was moved earlier from the source column.

  • [x] The SubTask issue has been solved for this problem, only Description is givin an problem.

• [x] Fourth issue is again similar to the second one, but its for Deleting a Task, if there is a taskItem just below the taskItem we are deleting (taskItem-1) say taskItem-2, then the when we delete the taskItem-1, its gets deleted very well deleted, but again, the SubTasks and Body of the taskItem-1 gets attached to this taskItem-2, when it comes up.

  • For this as well, the issue of subTasks has been solved, only issue happens with the Description content.

[tu2-atmanand]

The possible reason, why I think this must be happening is due to the fact that, I am using MarkdownRenderer for SubTasks and Description. But still, the Show Description button should have shown, after updating/adding Description content to the task. So, something is happening.

Also, now, i have to think on using an method to refresh only a specific taskItem Card whenever it changes. Like, incase of realTime Scanning, if suppose say, i figure out how to detect only the specific part of file being modified by user, then i can find out whether the task has been changed or other part of the file is being modified. This way, In the UI side, i can assign the taskItem with an id, which will be the task.id. And i can use function like getElementById to refresh that specific task.

Other than this, for now i have to come up with a better solution, because, when task is suppose to move from one column to another, then both of this columns should be refreshed. Or in case of editing just the content of the task, then the taskItem Card HTML should be re-rendered. I will have to go through my code again to see if any such thing will be possible.

[tu2-atmanand]

• The REFRESH_BOARD command works amazing, its the best thing and the button should run it.
  • Now, I only have to focus on the REFRESH_COLUMN command, what basically it is doing, and how i can improve it.
  • Talking about the refreshing only a specific taskItem. In future, i will be at stage, where i will be scanning file, to see what is basically changing from the file, then, i will use the method, used by professionals to find the taskItem using getElementById, which will have the unique task.id and from this, i will only refresh that specific task.

[tu2-atmanand]

Solution

The second biggest issue which i was facing in this main issue when any task's due date has been updated, then the task was suppose to go along with its subTasks and Description from one column to another. But earlier, its subTasks and Description were not getting moved and also those properties of this task was getting replaced to the task which was below to the task under consideration. So, to solve this issue i came up with a best solution of assigning a unique Id which was an combination of task.id and index of the subTasks, and this has been solved the issue using the following code :

    const subtaskTextRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
    useEffect(() => {
        // Render subtasks after componentRef is initialized
        task.body.forEach((subtaskText, index) => {
            const uniqueKey = `${task.id}-${index}`;
            const element = subtaskTextRefs.current[uniqueKey];

            if (element) {
                element.innerHTML = ''; // Clear previous content

                const strippedSubtaskText = subtaskText.replace(/- \[.*?\]/, "").trim();

                MarkdownUIRenderer.renderSubtaskText(
                    app,
                    strippedSubtaskText,
                    element,
                    task.filePath,
                    componentRef.current
                );

                hookMarkdownLinkMouseEventHandlers(app, element, task.filePath, task.filePath);
            }
        });
    }, [task.body, task.filePath, app]);

    // Render sub-tasks and remaining body separately
    const renderSubTasks = () => {
        try {
            if (task.body.length > 0) {
                return (
                    <>
                        {task.body.map((line, index) => {
                            const isCompleted = line.trim().startsWith('- [x]');
                            const isSubTask = line.trim().startsWith('- [ ]') || line.trim().startsWith('- [x]');
                            const subtaskText = line.replace(/- \[.\] /, '').trim();

                            // Calculate padding based on the number of tabs
                            const numTabs = line.match(/^\t+/)?.[0].length || 0;
                            const paddingLeft = numTabs > 1 ? `${(numTabs - 1) * 15}px` : '0px';

                            // Create a unique key for this subtask based on task.id and index
                            const uniqueKey = `${task.id}-${index}`;

                            return isSubTask ? (
                                <div
                                    className="taskItemBodySubtaskItem"
                                    key={uniqueKey}
                                    style={{ paddingLeft }}
                                    id={uniqueKey} // Assign a unique ID for each subtask element
                                >
                                    <input
                                        type="checkbox"
                                        className="taskItemBodySubtaskItemCheckbox"
                                        checked={isCompleted}
                                        onChange={() => handleSubtaskCheckboxChange(index, isCompleted)}
                                    />
                                    {/* Render each subtask separately */}
                                    <div
                                        className="subtaskTextRenderer"
                                        ref={(el) => (subtaskTextRefs.current[uniqueKey] = el)} // Assign unique ref to each subtask
                                    />
                                </div>
                            ) : null;
                        })}
                    </>
                );
            } else {
                return null;
            }
        } catch (error) {
            console.log('Getting error while trying to render the SubTasks: ', error);
            return null;
        }
    };

• [x] But the issue persists with Description even though i have used the same method for description.

[tu2-atmanand]

In summary, now,

• [x] For all the four major sub-issues under this issue, the part of subTasks getting refreshed has been solved, the issue happens only with Description.
• [x] For the Second sub-issue, i think the issue can be solved, if we can able to refresh the destination column as well, Because, right now, the the title and subTasks content gets vanished from the source column (if its moving from Today Column to Completed column, when Checkbox is pressed). And suppose say, we are able to solve the description sub-issue, then only thing required to be done is, refresh the destination column, without refreshing the whole board, unlike the REFRESH_BOARD.

If we could focus on this two things, then the whole issue will be resolved.

[tu2-atmanand]

This is not related to this issue but still adding :

• [x] For RealTimeScanning, i have disabled to refresh board when the user will edit any file and will move focus from that file, so this is optimized, the board wont going to get refreshed, but after you found the optimized Working approach for REFRESH_COLUMNS, you can enable this.
• [x] But for now, the only thing which is not a optimized algorithm is, say if the user is editing a file which contains 5 tasks, and the user is also changing his focus from the edited file again and again, then the file is getting scanned again and again, but the tasks remains the same. The problem is not that, the same data is getting written inside the sessionStorage (although there are RAM spikes), but in future i might find some way to detect if the user makes any changes at a specific place in the file where the tasks has been added earlier.

[tu2-atmanand]

It was a very silly mistake of mine, because of which I has to write so many things. I knew a long back it uses to refreshes only columns and not the whole board when i use to do the checkbox operation or edit operations, etc.

MISTAKE : While making changes in the TaskItemUtils file, i removed the emmit lines which were refreshing the tasks after those json operatoins.🤣

Now, even though I have solved that problem, keep testing the board thoroughly, to find out in which case the board is not updating. Obviously the issue of Description getting appending to previous task issue is still there, but now the board has became usable, after solving this error now. I have to still keep optimizing the code now. I am not telling to write high level code this time, that is before releasing, keep the code simple only, but there may be some HTML methods only to refresh a specific taskItem kind of approaches which i can use to solve this problem, or to make the refreshing operation more optimized.

• [x] Another optimization which can be done, is when you are in realTIme Mode and after you make any changes inside the Task Board, these changes gets written to a MD file and that file is again gets scanned and the REFRESH_COLUMN again happens. So this two operations can be avoided by simply coming with better code. I think after doing this last thing, the plugin is ready for publishing.

[tu2-atmanand]

• [ ] I think if I put key to the complete TaskItem Div, then I guess nothing will going to get appended on other taskItems.