Skip to content

feat(tasks): Implement local-first architecture for task modifications #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

feat(tasks): Implement local-first architecture for task modifications #168

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ee7120
This implements a "local-first" architecture for all task modifications.
ShivaGupta-14 Nov 10, 2025
c3c9b6a
Fixing a toast message.
ShivaGupta-14 Nov 10, 2025
9ca782b
refactor: Use separate UUID table for unsynced status (per feedback)
ShivaGupta-14 Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
322 changes: 261 additions & 61 deletions frontend/src/components/HomeComponents/Tasks/Tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,13 +223,13 @@ export const Tasks = (
UUID,
backendURL: url.backendURL,
});
console.log(taskwarriorTasks);

// console.log(taskwarriorTasks);
await db.transaction('rw', db.tasks, async () => {
await db.tasks.where('email').equals(user_email).delete();
const tasksToAdd = taskwarriorTasks.map((task: Task) => ({
...task,
email: user_email,
isUnsynced: false,
}));
await db.tasks.bulkPut(tasksToAdd);
const updatedTasks = await db.tasks
Expand Down Expand Up @@ -265,19 +265,33 @@ export const Tasks = (
) {
if (handleDate(newTask.due)) {
try {
await addTaskToBackend({
email,
encryptionSecret,
UUID,
description,
project,
priority,
due,
tags,
backendURL: url.backendURL,
});
const tempTask: Task = {
...newTask,
id: Math.floor(Math.random() * -1000000),
uuid: `temp-${Date.now()}`,
status: 'pending',
email: props.email,
isUnsynced: true,
entry: new Date().toISOString(),
modified: new Date().toISOString(),
urgency: 0,
start: '',
end: '',
wait: '',
depends: [],
recur: '',
rtype: '',
};

await db.tasks.add(tempTask);

const updatedTasks = await db.tasks
.where('email')
.equals(props.email)
.toArray();
setTasks(sortTasksById(updatedTasks, 'desc'));
setTempTasks(sortTasksById(updatedTasks, 'desc'));

console.log('Task added successfully!');
setNewTask({
description: '',
priority: '',
Expand All @@ -286,8 +300,31 @@ export const Tasks = (
tags: [],
});
setIsAddTaskOpen(false);
} catch (error) {
console.error('Failed to add task:', error);

try {
await addTaskToBackend({
email,
encryptionSecret,
UUID,
description,
project,
priority,
due,
tags,
backendURL: url.backendURL,
});

toast.success('Task added successfully.');
console.log('Task added successfully!');
} catch (error) {
console.error('Failed to add task. Please try again later.');
toast.error(
'Unable to sync task to server. It’s saved locally for now.'
);
}
} catch (localError) {
console.error('Failed to save task locally');
toast.error('Failed to save task locally.');
}
}
}
Expand Down Expand Up @@ -342,17 +379,44 @@ export const Tasks = (
setEditedDescription(description);
};

const handleSaveClick = (task: Task) => {
task.description = editedDescription;
handleEditTaskOnBackend(
props.email,
props.encryptionSecret,
props.UUID,
task.description,
task.tags,
task.id.toString()
);
setIsEditing(false);
// In Tasks.tsx

const handleSaveClick = async (task: Task) => {
try {
const updatedTask: Task = {
...task,
description: editedDescription,
isUnsynced: true,
modified: new Date().toISOString(),
};

await db.tasks.put(updatedTask);

const updatedTasks = await db.tasks
.where('email')
.equals(props.email)
.toArray();
setTasks(sortTasksById(updatedTasks, 'desc'));
setTempTasks(sortTasksById(updatedTasks, 'desc'));

setIsEditing(false);

try {
await handleEditTaskOnBackend(
props.email,
props.encryptionSecret,
props.UUID,
editedDescription,
task.tags || [],
task.id.toString()
);
toast.success('Description updated successfully.');
} catch (backendError) {
console.error('Backend edit-task failed.');
}
} catch (localError) {
console.error('Failed to save description locally.');
}
};

const handleCancelClick = () => {
Expand Down Expand Up @@ -419,24 +483,51 @@ export const Tasks = (
setIsEditingTags(true);
};

const handleSaveTags = (task: Task) => {
const currentTags = task.tags || []; // Default to an empty array if tags are null
const removedTags = currentTags.filter((tag) => !editedTags.includes(tag));
const updatedTags = editedTags.filter((tag) => tag.trim() !== ''); // Remove any empty tags
const tagsToRemove = removedTags.map((tag) => `-${tag}`); // Prefix `-` for removed tags
const finalTags = [...updatedTags, ...tagsToRemove]; // Combine updated and removed tags
console.log(finalTags);
// Call the backend function with updated tags
handleEditTaskOnBackend(
props.email,
props.encryptionSecret,
props.UUID,
task.description,
finalTags,
task.id.toString()
);
const handleSaveTags = async (task: Task) => {
const updatedTags = editedTags.filter((tag) => tag.trim() !== '');
const currentTags = task.tags || [];
const removedTags = currentTags.filter((tag) => !updatedTags.includes(tag));
const tagsForBackend = [
...updatedTags,
...removedTags.map((tag) => `-${tag}`),
]; // Prefix `-` for removed tags

try {
const updatedTask: Task = {
...task,
tags: updatedTags,
isUnsynced: true,
modified: new Date().toISOString(),
};

await db.tasks.put(updatedTask);
const updatedTasks = await db.tasks
.where('email')
.equals(props.email)
.toArray();
setTasks(sortTasksById(updatedTasks, 'desc'));
setTempTasks(sortTasksById(updatedTasks, 'desc'));

setIsEditingTags(false);

setIsEditingTags(false); // Exit editing mode
try {
await handleEditTaskOnBackend(
props.email,
props.encryptionSecret,
props.UUID,
task.description, // Send the original description
tagsForBackend, // Send the backend-formatted tags
task.id.toString()
);
toast.success('Tag updated successfully');
} catch (backendError) {
console.error('Backend edit-task failed.');
toast.error('Local save complete, but backend sync failed.');
}
} catch (localError) {
console.error('Failed to save tags locally');
toast.error('Failed to save locally.');
}
};

const handleCancelTags = () => {
Expand Down Expand Up @@ -782,7 +873,7 @@ export const Tasks = (
{/* Display task details */}
<TableCell className="py-2">
<span className="text-s text-foreground">
{task.id}
{task.id < 0 ? '-' : task.id}
</span>
</TableCell>
<TableCell className="flex items-center space-x-2 py-2">
Expand All @@ -805,6 +896,14 @@ export const Tasks = (
{task.project === '' ? '' : task.project}
</Badge>
)}
{task.isUnsynced && (
<Badge
variant={'destructive'}
className="animate-pulse"
>
Unsynced
</Badge>
)}
</TableCell>
<TableCell className="py-2">
<Badge
Expand Down Expand Up @@ -1055,14 +1154,63 @@ export const Tasks = (
<DialogClose asChild>
<Button
className="mr-5"
onClick={() =>
markTaskAsCompleted(
props.email,
props.encryptionSecret,
props.UUID,
task.uuid
)
}
onClick={async () => {
try {
const updatedTask: Task = {
...task,
status: 'completed',
isUnsynced: true,
modified:
new Date().toISOString(),
};

await db.tasks.put(updatedTask);

const updatedTasks =
await db.tasks
.where('email')
.equals(props.email)
.toArray();
setTasks(
sortTasksById(
updatedTasks,
'desc'
)
);
setTempTasks(
sortTasksById(
updatedTasks,
'desc'
)
);

try {
await markTaskAsCompleted(
props.email,
props.encryptionSecret,
props.UUID,
task.uuid
);
toast.success(
'Task completed successfully.'
);
} catch (backendError) {
console.error(
'Backend mark-completed failed.'
);
toast.error(
'Local update complete, but backend sync failed.'
);
}
} catch (localError) {
console.error(
'Failed to update task locally.'
);
toast.error(
'Failed to update task locally.'
);
}
}}
>
Yes
</Button>
Expand Down Expand Up @@ -1100,14 +1248,66 @@ export const Tasks = (
<DialogClose asChild>
<Button
className="mr-5"
onClick={() =>
markTaskAsDeleted(
props.email,
props.encryptionSecret,
props.UUID,
task.uuid
)
}
onClick={async () => {
try {
const updatedTask: Task = {
...task,
status: 'deleted',
isUnsynced: true,
modified:
new Date().toISOString(),
};

await db.tasks.put(updatedTask);

const updatedTasks =
await db.tasks
.where('email')
.equals(props.email)
.toArray();
setTasks(
sortTasksById(
updatedTasks,
'desc'
)
);
setTempTasks(
sortTasksById(
updatedTasks,
'desc'
)
);

try {
await markTaskAsDeleted(
props.email,
props.encryptionSecret,
props.UUID,
task.uuid
);
console.log(
'Mark deleted sent to backend.'
);
toast.success(
'Task deleted successfully.'
);
} catch (backendError) {
console.error(
'Backend mark-deleted failed.'
);
toast.error(
'Local update complete, but backend sync failed.'
);
}
} catch (localError) {
console.error(
'Failed to update task locally.'
);
toast.error(
'Failed to update task locally.'
);
}
}}
>
Yes
</Button>
Expand Down
Loading
Loading