Skip to content
Snippets Groups Projects
Unverified Commit 649d0d79 authored by Sean Hatfield's avatar Sean Hatfield Committed by GitHub
Browse files

[FEAT] Thread bulk edit UX improvements (#1520)


* update thread bulk edit ux to hold cmd/ctrl to appear + rename default new thread to avoid confusion

* revert new thread defualt name change

* unset undelete threads

* comment

---------

Co-authored-by: default avatartimothycarambat <rambat1010@gmail.com>
parent 6a2d7aca
No related branches found
No related tags found
Loading
...@@ -22,11 +22,17 @@ export default function ThreadContainer({ workspace }) { ...@@ -22,11 +22,17 @@ export default function ThreadContainer({ workspace }) {
fetchThreads(); fetchThreads();
}, [workspace.slug]); }, [workspace.slug]);
// Enable toggling of meta-key (ctrl on win and cmd/fn on others) // Enable toggling of bulk-deletion by holding meta-key (ctrl on win and cmd/fn on others)
useEffect(() => { useEffect(() => {
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (["Control", "Meta"].includes(event.key)) { if (["Control", "Meta"].includes(event.key)) {
setCtrlPressed((prev) => !prev); setCtrlPressed(true);
}
};
const handleKeyUp = (event) => {
if (["Control", "Meta"].includes(event.key)) {
setCtrlPressed(false);
// when toggling, unset bulk progress so // when toggling, unset bulk progress so
// previously marked threads that were never deleted // previously marked threads that were never deleted
// come back to life. // come back to life.
...@@ -37,9 +43,13 @@ export default function ThreadContainer({ workspace }) { ...@@ -37,9 +43,13 @@ export default function ThreadContainer({ workspace }) {
); );
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
return () => { return () => {
window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
}; };
}, []); }, []);
...@@ -56,7 +66,6 @@ export default function ThreadContainer({ workspace }) { ...@@ -56,7 +66,6 @@ export default function ThreadContainer({ workspace }) {
const slugs = threads.filter((t) => t.deleted === true).map((t) => t.slug); const slugs = threads.filter((t) => t.deleted === true).map((t) => t.slug);
await Workspace.threads.deleteBulk(workspace.slug, slugs); await Workspace.threads.deleteBulk(workspace.slug, slugs);
setThreads((prev) => prev.filter((t) => !t.deleted)); setThreads((prev) => prev.filter((t) => !t.deleted));
setCtrlPressed(false);
}; };
function removeThread(threadId) { function removeThread(threadId) {
...@@ -89,6 +98,7 @@ export default function ThreadContainer({ workspace }) { ...@@ -89,6 +98,7 @@ export default function ThreadContainer({ workspace }) {
) )
? threads.findIndex((thread) => thread?.slug === threadSlug) + 1 ? threads.findIndex((thread) => thread?.slug === threadSlug) + 1
: 0; : 0;
return ( return (
<div className="flex flex-col" role="list" aria-label="Threads"> <div className="flex flex-col" role="list" aria-label="Threads">
<ThreadItem <ThreadItem
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment