Skip to content

WIP: Add more actions to categories #256

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
elie222 wants to merge 5 commits into from
Closed

WIP: Add more actions to categories #256

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
49f6ff0
Add more actions to categories
elie222 Nov 6, 2024
384bafe
Merge branch 'main' into category-actions
elie222 Nov 25, 2024
d55461f
Merge branch 'main' into category-actions
elie222 Nov 29, 2024
13415b6
Merge branch 'main' into category-actions
elie222 Dec 21, 2024
c9b8b12
Merge branch 'main' into category-actions
elie222 Dec 21, 2024
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
67 changes: 62 additions & 5 deletions apps/web/components/GroupedTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@ import {
type ColumnDef,
flexRender,
} from "@tanstack/react-table";
import { ArchiveIcon, ChevronRight, PencilIcon } from "lucide-react";
import {
ArchiveIcon,
ChevronRight,
MoreVerticalIcon,
PencilIcon,
TagIcon,
TagsIcon,
} from "lucide-react";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import type { Category } from "@prisma/client";
import { EmailCell } from "@/components/EmailCell";
Expand Down Expand Up @@ -41,6 +48,17 @@ import {
import { getGmailSearchUrl, getGmailUrl } from "@/utils/url";
import { MessageText } from "@/components/Typography";
import { CreateCategoryDialog } from "@/app/(app)/smart-categories/CreateCategoryButton";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useLabels, type UserLabel } from "@/hooks/useLabels";
import { LabelsSubMenu } from "@/components/LabelsSubMenu";

const COLUMNS = 4;

Expand Down Expand Up @@ -172,6 +190,8 @@ export function GroupedTable({
const [selectedCategoryName, setSelectedCategoryName] =
useQueryState("categoryName");

const { userLabels: labels } = useLabels();

return (
<>
<Table>
Expand Down Expand Up @@ -204,6 +224,7 @@ export function GroupedTable({
}}
onArchiveAll={onArchiveAll}
onEditCategory={onEditCategory}
labels={labels}
/>
{isCategoryExpanded && (
<SenderRows
Expand Down Expand Up @@ -316,13 +337,15 @@ function GroupRow({
category,
count,
isExpanded,
labels,
onToggle,
onArchiveAll,
onEditCategory,
}: {
category: string;
count: number;
isExpanded: boolean;
labels: UserLabel[];
onToggle: () => void;
onArchiveAll: () => void;
onEditCategory: () => void;
Expand All @@ -346,10 +369,44 @@ function GroupRow({
</div>
</TableCell>
<TableCell className="flex justify-end gap-1.5 py-1">
<Button variant="ghost" size="xs" onClick={onEditCategory}>
<PencilIcon className="size-4" />
<span className="sr-only">Edit</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="xs">
<MoreVerticalIcon className="size-4" />
<span className="sr-only">More</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={onEditCategory}>
<PencilIcon className="mr-2 size-4" />
Edit Prompt
</DropdownMenuItem>
<DropdownMenuItem>
<ArchiveIcon className="mr-2 size-4" />
Auto archive
</DropdownMenuItem>

<DropdownMenuSub>
<DropdownMenuSubTrigger>
<TagsIcon className="mr-2 size-4" />
<span>Auto archive and label</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
</DropdownMenuPortal>
</DropdownMenuSub>

<DropdownMenuSub>
<DropdownMenuSubTrigger>
<TagIcon className="mr-2 size-4" />
<span>Auto label</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
Comment on lines +372 to +409
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

⚠️ Potential issue

Based on the gathered information, I can now provide the final response:

Implementation incomplete: Missing click handlers can be implemented using existing functionality

The empty click handlers should be implemented using the existing createFilterAction function, similar to how it's used in the bulk-unsubscribe feature. Here's how to fix:

             <DropdownMenuSub>
               <DropdownMenuSubTrigger>
                 <TagsIcon className="mr-2 size-4" />
                 <span>Auto archive and label</span>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+                <LabelsSubMenu 
+                  labels={labels} 
+                  onClick={async (label) => {
+                    const res = await createFilterAction(category, label.id, true);
+                    if (isActionError(res)) {
+                      toastError({
+                        title: "Error",
+                        description: `Failed to set up auto-archive and label. ${res.error}`,
+                      });
+                    } else {
+                      toastSuccess({
+                        title: "Success",
+                        description: "Auto-archive and label rule created",
+                      });
+                    }
+                  }} 
+                />
               </DropdownMenuPortal>
             </DropdownMenuSub>

             <DropdownMenuSub>
               <DropdownMenuSubTrigger>
                 <TagIcon className="mr-2 size-4" />
                 <span>Auto label</span>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+                <LabelsSubMenu 
+                  labels={labels} 
+                  onClick={async (label) => {
+                    const res = await createFilterAction(category, label.id);
+                    if (isActionError(res)) {
+                      toastError({
+                        title: "Error",
+                        description: `Failed to set up auto-label. ${res.error}`,
+                      });
+                    } else {
+                      toastSuccess({
+                        title: "Success",
+                        description: "Auto-label rule created",
+                      });
+                    }
+                  }} 
+                />
               </DropdownMenuPortal>
             </DropdownMenuSub>

The "Auto archive" menu item should use the existing onArchiveAll handler that's already defined and used elsewhere in the component:

-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={onArchiveAll}>
               <ArchiveIcon className="mr-2 size-4" />
               Auto archive
             </DropdownMenuItem>
🔗 Analysis chain

Implementation incomplete: Missing click handlers

Several interactive elements are missing their click handlers:

  1. The "Auto archive" menu item has no onClick handler
  2. Both LabelsSubMenu components have empty onClick handlers

Consider implementing the handlers like this:

-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={onArchiveAll}>
               <ArchiveIcon className="mr-2 size-4" />
               Auto archive
             </DropdownMenuItem>

             <DropdownMenuSub>
               <DropdownMenuSubTrigger>
                 <TagsIcon className="mr-2 size-4" />
                 <span>Auto archive and label</span>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+                <LabelsSubMenu 
+                  labels={labels} 
+                  onClick={(labelId) => {
+                    // TODO: Implement archive and label logic
+                  }} 
+                />
               </DropdownMenuPortal>
             </DropdownMenuSub>

             <DropdownMenuSub>
               <DropdownMenuSubTrigger>
                 <TagIcon className="mr-2 size-4" />
                 <span>Auto label</span>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+                <LabelsSubMenu 
+                  labels={labels} 
+                  onClick={(labelId) => {
+                    // TODO: Implement label logic
+                  }} 
+                />
               </DropdownMenuPortal>
             </DropdownMenuSub>

Let's verify if there are any existing label-related actions we can reuse:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for label-related action implementations
rg -g '!*.test.*' -g '!*.spec.*' "label.*action" ./apps/web/

Length of output: 1185

Script:

#!/bin/bash
# Let's check for any existing handlers or functions related to archiving and labeling
rg -g '!*.test.*' -g '!*.spec.*' -A 5 "onArchive|handleArchive|handleLabel" ./apps/web/

# Also search for any existing implementations of LabelsSubMenu
ast-grep --pattern 'const LabelsSubMenu = $_'

Length of output: 14792

Script:

#!/bin/bash
# Let's check for the LabelsSubMenu component implementation and any label-related handlers
rg -g '!*.test.*' -g '!*.spec.*' "LabelsSubMenu" -A 10 ./apps/web/

# Also search for any label-related mutations or handlers
rg -g '!*.test.*' -g '!*.spec.*' "addLabel|applyLabel|handleLabel" ./apps/web/

Length of output: 6730

<Button variant="outline" size="xs" onClick={onArchiveAll}>
<ArchiveIcon className="mr-2 size-4" />
Archive all
Expand Down